From c48e31731df5bf38df4fc508ab08306813dfd82a Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@forem.com>
Date: Fri, 7 May 2021 06:33:30 -0400
Subject: [PATCH] [15 min fix] Fixed broken share button on article page.
 (#13688)

---
 .../initializers/initializeCommentDropdown.js | 19 +++++-----
 .../articleFlows/postSidebarActions.spec.js   | 35 +++++++++++++++++++
 2 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 cypress/integration/articleFlows/postSidebarActions.spec.js

diff --git a/app/assets/javascripts/initializers/initializeCommentDropdown.js b/app/assets/javascripts/initializers/initializeCommentDropdown.js
index abdd355d4..ed4018bdd 100644
--- a/app/assets/javascripts/initializers/initializeCommentDropdown.js
+++ b/app/assets/javascripts/initializers/initializeCommentDropdown.js
@@ -50,6 +50,7 @@ function initializeCommentDropdown() {
     var isCopyIconChild = copyIcon && copyIcon.contains(event.target);
     return !(
       event.target.matches('.dropdown-icon') ||
+      event.target.parentElement.classList.contains('dropdown-icon') ||
       event.target.matches('.dropbtn') ||
       event.target.matches('clipboard-copy') ||
       isCopyIconChild ||
@@ -85,7 +86,7 @@ function initializeCommentDropdown() {
     }
   }
 
-  function initializeCommentEvents(commentsContainer) {
+  function initializeDropDownClick(dropdownOrDropdownContainer) {
     return (event) => {
       const { target } = event;
       const button = (function getButton(potentialButton) {
@@ -93,7 +94,7 @@ function initializeCommentDropdown() {
           !potentialButton.classList.contains('dropbtn') ||
           !potentialButton
         ) {
-          if (potentialButton === commentsContainer) {
+          if (potentialButton === dropdownOrDropdownContainer) {
             break;
           }
 
@@ -156,14 +157,16 @@ function initializeCommentDropdown() {
   }
 
   const commentsContainer = document.getElementById('comment-trees-container');
+  const articleShowMoreButton = document.getElementById(
+    'article-show-more-button',
+  );
 
   // We only want to add an event listener for the click once
-  if (commentsContainer && !commentsContainer.dataset.initialized) {
-    commentsContainer.dataset.initialized = true;
-    commentsContainer.addEventListener(
-      'click',
-      initializeCommentEvents(commentsContainer),
-    );
+  for (const element of [commentsContainer, articleShowMoreButton]) {
+    if (element && !element.dataset.initialized) {
+      element.dataset.initialized = true;
+      element.addEventListener('click', initializeDropDownClick(element));
+    }
   }
 
   setTimeout(function addListeners() {
diff --git a/cypress/integration/articleFlows/postSidebarActions.spec.js b/cypress/integration/articleFlows/postSidebarActions.spec.js
new file mode 100644
index 000000000..4c442f84a
--- /dev/null
+++ b/cypress/integration/articleFlows/postSidebarActions.spec.js
@@ -0,0 +1,35 @@
+describe('Post sidebar actions', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/articleEditorV2User.json').as('user');
+
+    cy.get('@user').then((user) => {
+      cy.loginUser(user).then(() => {
+        cy.createArticle({
+          title: 'Test Article',
+          tags: ['beginner', 'ruby', 'go'],
+          content: `This is a test article's contents.`,
+          published: true,
+        }).then((response) => {
+          cy.visit(response.body.current_state_path);
+        });
+      });
+    });
+  });
+
+  it('should open the share menu for the post', () => {
+    cy.findByRole('button', { name: /^Toggle dropdown menu$/i }).click();
+
+    cy.findByTitle(/^Copy article link to the clipboard$/i);
+    cy.findByRole('link', { name: /^Share to Twitter$/i });
+    cy.findByRole('link', { name: /^Share to LinkedIn$/i });
+    cy.findByRole('link', { name: /^Share to Reddit$/i });
+    cy.findByRole('link', { name: /^Share to Hacker News$/i });
+    cy.findByRole('link', { name: /^Share to Facebook$/i });
+    // There is a report abuse link a the bottom of the post too
+    cy.findAllByRole('link', { name: /^Report Abuse$/i }).should(
+      'have.length',
+      2,
+    );
+  });
+});