test: fix flaky settings test (freeCodeCamp#55722)

Author: ojeytonwilliams

e2e/settings.spec.ts

@@ -52,14 +52,15 @@ test.describe('Settings - Certified User', () => {
   test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
   test.beforeEach(async ({ page }) => {
+    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
     await page.goto('/settings');
   });
 
-  test('Should have the correct page title', async ({ page }) => {
+  test('Should render correctly', async ({ page }) => {
+    // Title
     await expect(page).toHaveTitle(settingsObject.pageTitle);
-  });
 
-  test('Should display the correct header', async ({ page }) => {
+    // Header
     const header = page.getByTestId(settingsTestIds.settingsHeading);
     await expect(header).toBeVisible();
     await expect(header).toContainText(
@@ -68,9 +69,8 @@ test.describe('Settings - Certified User', () => {
         settingsObject.certifiedUsername
       )}`
     );
-  });
 
-  test('Should validate Privacy Settings', async ({ page }) => {
+    // Privacy Settings
     await expect(
       page.getByRole('heading', {
         name: translations.settings.headings.privacy
@@ -167,15 +167,13 @@ test.describe('Settings - Certified User', () => {
       name: translations.settings.headings.privacy
     });
     await expect(saveButton).toBeVisible();
-    await saveButton.press('Enter');
     await expect(page.getByText(translations.settings.data)).toBeVisible();
     const downloadButton = page.getByRole('link', {
       name: translations.buttons['download-data']
     });
     await expect(downloadButton).toBeVisible();
-  });
 
-  test('Should validate Internet Presence Settings', async ({ page }) => {
+    // Internet Presence
     await expect(
       page.getByRole('heading', {
         name: translations.settings.headings.internet
@@ -184,13 +182,13 @@ test.describe('Settings - Certified User', () => {
     await expect(
       page.getByTestId(settingsTestIds.internetPresence)
     ).toBeVisible();
-    const saveButton = page.getByRole('button', {
-      name: translations.settings.headings.internet
-    });
-    await expect(saveButton).toBeVisible();
-  });
+    await expect(
+      page.getByRole('button', {
+        name: translations.settings.headings.internet
+      })
+    ).toBeVisible();
 
-  test('Should validate Personal Information Settings', async ({ page }) => {
+    // Personal Information
     await expect(
       page.getByRole('heading', {
         name: translations.settings.headings['personal-info']
@@ -199,11 +197,11 @@ test.describe('Settings - Certified User', () => {
     await expect(
       page.getByTestId(settingsTestIds.camperIdentity)
     ).toBeVisible();
-    const saveButton = page.getByRole('button', {
+    const savePersonalInfoButton = page.getByRole('button', {
       name: translations.settings.headings['personal-info']
     });
-    await expect(saveButton).toBeVisible();
-    await expect(saveButton).toBeDisabled();
+    await expect(savePersonalInfoButton).toBeVisible();
+    await expect(savePersonalInfoButton).toBeDisabled();
     await expect(
       page.getByLabel(translations.settings.labels.name, { exact: true })
     ).toHaveValue('Full Stack User');
@@ -239,9 +237,8 @@ test.describe('Settings - Certified User', () => {
     await expect(
       page.getByText(translations.settings['scrollbar-width'])
     ).toBeVisible();
-  });
 
-  test('Should validate Certification Settings', async ({ page }) => {
+    // Certifications
     await expect(
       page.getByRole('heading', {
         name: translations.settings.headings.certs,
@@ -261,9 +258,8 @@ test.describe('Settings - Certified User', () => {
         })
       ).toBeVisible();
     }
-  });
 
-  test('Should validate Legacy Certification Settings', async ({ page }) => {
+    // Legacy Certifications
     await expect(
       page.getByRole('heading', {
         name: translations.settings.headings['legacy-certs'],
@@ -284,9 +280,8 @@ test.describe('Settings - Certified User', () => {
         })
       ).toBeVisible();
     }
-  });
 
-  test('Should display the Danger section properly', async ({ page }) => {
+    // Danger Zone
     await expect(page.getByText('Danger Zone')).toBeVisible();
     await expect(
       page.getByText(
@@ -320,6 +315,7 @@ test.describe('Settings - Certified User', () => {
     );
     const pictureInput = page.getByLabel(translations.settings.labels.picture);
     const aboutInput = page.getByLabel(translations.settings.labels.about);
+    const updatedAlert = page.getByText(translations.flash['updated-about-me']);
 
     await nameInput.fill('Quincy Larson');
     await locationInput.fill('USA');
@@ -330,9 +326,9 @@ test.describe('Settings - Certified User', () => {
 
     await expect(saveButton).not.toBeDisabled();
     await saveButton.click();
-    await expect(
-      page.getByText(translations.flash['updated-about-me'])
-    ).toBeVisible();
+    await expect(updatedAlert).toBeVisible();
+    // clear the alert to make sure it's gone before we save again.
+    await updatedAlert.getByRole('button').click();
 
     await nameInput.fill('');
     await locationInput.fill('');
@@ -341,9 +337,7 @@ test.describe('Settings - Certified User', () => {
 
     await expect(saveButton).not.toBeDisabled();
     await saveButton.click();
-    await expect(
-      page.getByText(translations.flash['updated-about-me'])
-    ).toBeVisible();
+    await expect(updatedAlert).toBeVisible();
 
     await page.reload();