Refactor VerifyAndDismissFlashMessage within Cypress tests (#19768)

* refactor: make verifyAndDismissFlashMessage to be more general

* feat: update the shared admin utility

* refactor: manageCredits

* refactor: manageOrganizations

* refactor: manageRoles

* refactor: manageUserOptions

* feat: remove adminUtilities

* chore: update the path name

cypress/e2e/seededFlows/adminFlows/bulk_assign_role/bulkAssignRole.spec.js

@@ -1,7 +1,4 @@
-import {
-  verifyAndDismissUserUpdatedMessage,
-  verifyAndDismissDangerMessage,
-} from '../users/userAdminUtilitites';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 describe('Bulk Assign Role', () => {
   beforeEach(() => {
     cy.testSetup();
@@ -23,8 +20,9 @@ describe('Bulk Assign Role', () => {
 
     cy.findByText('Assign role').click();
 
-    verifyAndDismissUserUpdatedMessage(
+    verifyAndDismissFlashMessage(
       'Roles are being added. The task will finish shortly.',
+      'flash-success',
     );
   });
 
@@ -37,6 +35,9 @@ describe('Bulk Assign Role', () => {
 
     cy.findByText('Assign role').click();
 
-    verifyAndDismissDangerMessage('Please choose a role to add.');
+    verifyAndDismissFlashMessage(
+      'Please choose a role to add.',
+      'flash-danger',
+    );
   });
 });

cypress/e2e/seededFlows/adminFlows/organizations/manageOrganizations.spec.js

@@ -1,4 +1,4 @@
-import { verifyAndDismissFlashMessage } from '../shared/adminUtilities';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 
 function openOrganizationOptions(callback) {
   cy.findByRole('button', { name: 'Options' })
@@ -38,6 +38,7 @@ describe('Manage Organization Options', () => {
 
       verifyAndDismissFlashMessage(
         `Organization, "Awesome Org", deletion is scheduled.`,
+        'flash-settings_notice',
       );
     });
   });

cypress/e2e/seededFlows/adminFlows/shared/utilities.js

@@ -2,19 +2,20 @@
  * E2E helper function for user admin tests that validates the correct flash notice message appears
  *
  * @param {string} [message] The expected flash message text
+ * @param {string} [flashTypeId] The id of the flash message type. e.g 'flash-success', 'flash-settings_notice'
  */
-export function verifyAndDismissFlashMessage(message) {
-  cy.findByTestId('flash-settings_notice')
-    .as('notice')
+export function verifyAndDismissFlashMessage(message, flashTypeId) {
+  cy.findByTestId(flashTypeId)
+    .as('flash-message')
     .then((element) => {
       expect(element.text().trim()).equal(message);
     });
 
-  cy.get('@notice').within(() => {
+  cy.get('@flash-message').within(() => {
     cy.findByRole('button', { name: 'Dismiss message' })
       .should('have.focus')
       .click();
   });
 
-  cy.findByTestId('flash-settings_notice').should('not.exist');
+  cy.findByTestId(flashTypeId).should('not.exist');
 }

cypress/e2e/seededFlows/adminFlows/users/manageCredits.spec.js

@@ -1,4 +1,4 @@
-import { verifyAndDismissUserUpdatedMessage } from './userAdminUtilitites';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 
 // More on roles, https://admin.forem.com/docs/forem-basics/user-roles
 function openCreditsModal() {
@@ -34,7 +34,7 @@ describe('Manage User Credits', () => {
       });
 
       cy.getModal().should('not.exist');
-      verifyAndDismissUserUpdatedMessage('Credits have been added!');
+      verifyAndDismissFlashMessage('Credits have been added!', 'flash-success');
       cy.findByTestId('user-credits').should('have.text', '210');
     });
 
@@ -53,7 +53,10 @@ describe('Manage User Credits', () => {
       });
 
       cy.getModal().should('not.exist');
-      verifyAndDismissUserUpdatedMessage('Credits have been removed.');
+      verifyAndDismissFlashMessage(
+        'Credits have been removed.',
+        'flash-success',
+      );
       cy.findByTestId('user-credits').should('have.text', '89');
     });
 

cypress/e2e/seededFlows/adminFlows/users/manageOrganizations.spec.js

@@ -1,4 +1,4 @@
-import { verifyAndDismissUserUpdatedMessage } from './userAdminUtilitites';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 
 // More on roles, https://admin.forem.com/docs/forem-basics/user-roles
 function openOrgModal(ctaText = 'Add organization') {
@@ -28,8 +28,9 @@ describe('Manage User Organziations', () => {
         cy.findByRole('button', { name: 'Add organization' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully added to Bachmanity',
+        'flash-success',
       );
       cy.getModal().should('not.exist');
 
@@ -54,8 +55,9 @@ describe('Manage User Organziations', () => {
         cy.findByRole('button', { name: 'Add organization' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully added to Bachmanity',
+        'flash-success',
       );
 
       openOrgModal('Add organization').within(() => {
@@ -63,8 +65,9 @@ describe('Manage User Organziations', () => {
         cy.findByRole('button', { name: 'Add organization' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully added to Awesome Org',
+        'flash-success',
       );
       cy.getModal().should('not.exist');
 
@@ -101,8 +104,9 @@ describe('Manage User Organziations', () => {
         cy.findByRole('button', { name: 'Submit' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully updated to admin',
+        'flash-success',
       );
       cy.getModal().should('not.exist');
     });
@@ -115,8 +119,9 @@ describe('Manage User Organziations', () => {
         cy.findByRole('button', { name: 'Add organization' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully added to Bachmanity',
+        'flash-success',
       );
       cy.getModal().should('not.exist');
 
@@ -136,8 +141,9 @@ describe('Manage User Organziations', () => {
         name: 'Revoke Awesome Org organization membership',
       }).click();
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'User was successfully removed from Awesome Org',
+        'flash-success',
       );
     });
   });

cypress/e2e/seededFlows/adminFlows/users/manageRoles.spec.js

@@ -1,4 +1,4 @@
-import { verifyAndDismissUserUpdatedMessage } from './userAdminUtilitites';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 
 // More on roles, https://admin.forem.com/docs/forem-basics/user-roles
 function openRolesModal() {
@@ -42,7 +42,7 @@ describe('Manage User Roles', () => {
         });
 
         cy.getModal().should('not.exist');
-        verifyAndDismissUserUpdatedMessage();
+        verifyAndDismissFlashMessage('User has been updated', 'flash-success');
 
         cy.findByRole('button', { name: 'Remove role: Warned' }).should(
           'exist',
@@ -71,7 +71,7 @@ describe('Manage User Roles', () => {
         });
 
         cy.getModal().should('not.exist');
-        verifyAndDismissUserUpdatedMessage();
+        verifyAndDismissFlashMessage('User has been updated', 'flash-success');
 
         cy.findByRole('button', {
           name: "Suspended You can't remove this role.",
@@ -132,7 +132,7 @@ describe('Manage User Roles', () => {
         });
 
         cy.getModal().should('not.exist');
-        verifyAndDismissUserUpdatedMessage();
+        verifyAndDismissFlashMessage('User has been updated', 'flash-success');
         checkUserStatus('Warned');
 
         cy.findByRole('button', { name: 'Remove role: Warned' }).should(
@@ -150,7 +150,7 @@ describe('Manage User Roles', () => {
         });
 
         cy.getModal().should('not.exist');
-        verifyAndDismissUserUpdatedMessage();
+        verifyAndDismissFlashMessage('User has been updated', 'flash-success');
         checkUserStatus('Warned');
 
         cy.findByRole('button', { name: 'Remove role: Warned' }).should(

cypress/e2e/seededFlows/adminFlows/users/manageUserOptions.spec.js

@@ -1,4 +1,4 @@
-import { verifyAndDismissUserUpdatedMessage } from './userAdminUtilitites';
+import { verifyAndDismissFlashMessage } from '../shared/utilities';
 
 function openUserOptions(callback) {
   cy.findByRole('button', { name: 'Options' })
@@ -32,8 +32,9 @@ describe('Manage User Options', () => {
         cy.findByRole('button', { name: 'Export to Admin' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'Data exported to the admin. The job will complete momentarily.',
+        'flash-success',
       );
     });
 
@@ -46,8 +47,9 @@ describe('Manage User Options', () => {
         cy.findByRole('button', { name: 'Export to User' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'Data exported to the user. The job will complete momentarily.',
+        'flash-success',
       );
     });
 
@@ -71,8 +73,9 @@ describe('Manage User Options', () => {
         cy.findByRole('button', { name: 'Banish Trusted User 1 \\:/' }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         'This user is being banished in the background. The job will complete soon.',
+        'flash-success',
       );
     });
 
@@ -87,8 +90,9 @@ describe('Manage User Options', () => {
         }).click();
       });
 
-      verifyAndDismissUserUpdatedMessage(
+      verifyAndDismissFlashMessage(
         '@trusted_user_1 (email: trusted-user-1@forem.local, user_id: 2) has been fully deleted. If this is a GDPR delete, delete them from Mailchimp & Google Analytics and confirm on the page.',
+        'flash-success',
       );
     });
 

cypress/e2e/seededFlows/adminFlows/users/userAdminUtilitites.js

@@ -1,45 +0,0 @@
-/**
- * E2E helper function for user admin tests that validates the correct flash success message appears
- *
- * @param {string} [message="User has been updated"] The expected flash message text
- */
-export function verifyAndDismissUserUpdatedMessage(
-  message = 'User has been updated',
-) {
-  cy.findByTestId('flash-success')
-    .as('success')
-    .then((element) => {
-      expect(element.text().trim()).equal(message);
-    });
-
-  cy.get('@success').within(() => {
-    cy.findByRole('button', { name: 'Dismiss message' })
-      .should('have.focus')
-      .click();
-  });
-
-  cy.findByTestId('flash-success').should('not.exist');
-}
-
-/**
- * E2E helper function for user admin tests that validates the correct flash danger message appears
- *
- * @param {string} [message="There was some error"] The expected flash message text
- */
-export function verifyAndDismissDangerMessage(
-  message = 'There was some error',
-) {
-  cy.findByTestId('flash-danger')
-    .as('danger')
-    .then((element) => {
-      expect(element.text().trim()).equal(message);
-    });
-
-  cy.get('@danger').within(() => {
-    cy.findByRole('button', { name: 'Dismiss message' })
-      .should('have.focus')
-      .click();
-  });
-
-  cy.findByTestId('flash-danger').should('not.exist');
-}