From c6868795cd3f3c700340c06f178afa149fb64baa Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Tue, 14 Dec 2021 15:46:00 +0000
Subject: [PATCH] add cypress-pipe, fix flaky test (#15756)

---
 .../initializeActionsPanelToggle.js           |  8 +++++---
 .../moderationFlows/adjustPostTags.spec.js    | 19 +++++++++++++++++--
 cypress/support/index.js                      |  3 +++
 package.json                                  |  1 +
 yarn.lock                                     |  5 +++++
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/javascript/actionsPanel/initializeActionsPanelToggle.js b/app/javascript/actionsPanel/initializeActionsPanelToggle.js
index de54be59a..1e2959e06 100644
--- a/app/javascript/actionsPanel/initializeActionsPanelToggle.js
+++ b/app/javascript/actionsPanel/initializeActionsPanelToggle.js
@@ -29,9 +29,11 @@ export function initializeActionsPanel(user, path) {
     const panelDocument = modContainer.contentDocument;
 
     if (panelDocument) {
-      panelDocument
-        .getElementsByClassName('close-actions-panel')[0]
-        .classList.remove('hidden');
+      const closePanel = panelDocument.getElementsByClassName(
+        'close-actions-panel',
+      )[0];
+
+      closePanel && closePanel.classList.remove('hidden');
     }
   }
 
diff --git a/cypress/integration/seededFlows/moderationFlows/adjustPostTags.spec.js b/cypress/integration/seededFlows/moderationFlows/adjustPostTags.spec.js
index 5e46f2ca7..4d9dbc039 100644
--- a/cypress/integration/seededFlows/moderationFlows/adjustPostTags.spec.js
+++ b/cypress/integration/seededFlows/moderationFlows/adjustPostTags.spec.js
@@ -100,6 +100,9 @@ describe('Adjust post tags', () => {
   });
 
   describe('from article page', () => {
+    // Helper function for pipe command
+    const click = ($el) => $el.click();
+
     beforeEach(() => {
       cy.testSetup();
       cy.fixture('users/adminUser.json').as('user');
@@ -117,7 +120,13 @@ describe('Adjust post tags', () => {
 
       cy.findByRole('button', { name: 'Moderation' }).click();
       cy.getIframeBody('#mod-container').within(() => {
-        cy.findByRole('button', { name: 'Open adjust tags section' }).click();
+        // Click listeners are attached async so we use pipe() to retry click until condition met
+        cy.findByRole('button', {
+          name: 'Open adjust tags section',
+        })
+          .pipe(click)
+          .should('have.attr', 'aria-expanded', 'true');
+
         cy.findByPlaceholderText('Add a tag').type('tag2');
         cy.findByPlaceholderText('Reason for tag adjustment').type('testing');
         cy.findByRole('button', { name: 'Submit' }).click();
@@ -136,7 +145,13 @@ describe('Adjust post tags', () => {
       cy.findByRole('button', { name: 'Moderation' }).click();
 
       cy.getIframeBody('#mod-container').within(() => {
-        cy.findByRole('button', { name: 'Open adjust tags section' }).click();
+        // Click listeners are attached async so we use pipe() to retry click until condition met
+        cy.findByRole('button', {
+          name: 'Open adjust tags section',
+        })
+          .pipe(click)
+          .should('have.attr', 'aria-expanded', 'true');
+
         cy.findByPlaceholderText('Reason for tag adjustment').type('testing');
         cy.findByRole('button', { name: '#tag1 Remove tag' }).click();
 
diff --git a/cypress/support/index.js b/cypress/support/index.js
index 069c4689c..8c3e936ac 100644
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@@ -21,5 +21,8 @@ import 'cypress-failed-log';
 // Import commands.js using ES2015 syntax:
 import './commands';
 
+// Helper for retriable actions (e.g. to account for asynchronously attached event listeners) https://github.com/NicholasBoll/cypress-pipe
+import 'cypress-pipe';
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/package.json b/package.json
index a61be630a..4bb87d721 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "cypress": "^8.7.0",
     "cypress-failed-log": "^2.9.2",
     "cypress-file-upload": "^5.0.8",
+    "cypress-pipe": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-preact": "^1.2.0",
     "eslint-config-prettier": "^8.3.0",
diff --git a/yarn.lock b/yarn.lock
index 04ca03b93..d89a5be58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6245,6 +6245,11 @@ cypress-file-upload@^5.0.8:
   resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
   integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
 
+cypress-pipe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cypress-pipe/-/cypress-pipe-2.0.0.tgz#577df7a70a8603d89a96dfe4092a605962181af8"
+  integrity sha512-KW9s+bz4tFLucH3rBGfjW+Q12n7S4QpUSSyxiGrgPOfoHlbYWzAGB3H26MO0VTojqf9NVvfd5Kt0MH5XMgbfyg==
+
 cypress@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.7.0.tgz#2ee371f383d8f233d3425b6cc26ddeec2668b6da"