add cypress-pipe, fix flaky test (#15756)

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');
     }
   }
 

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();
 

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')

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",

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"