test(e2e): add tests for the progress reset flow (#54614)

cypress/e2e/default/settings/settings.ts

@@ -1,14 +0,0 @@
-describe('Settings', () => {
-  before(() => {
-    cy.login();
-  });
-  it('should be possible to reset your progress', () => {
-    cy.visit('/settings');
-    cy.contains('Reset all of my progress').click();
-    cy.contains('Reset everything. I want to start from the beginning').click();
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/');
-    });
-    cy.contains('Your progress has been reset');
-  });
-});

e2e/progress-reset-modal.spec.ts

@@ -0,0 +1,122 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { test, expect } from '@playwright/test';
+
+const execP = promisify(exec);
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/settings');
+});
+
+test.afterEach(async () => {
+  await execP('node ./tools/scripts/seed/seed-demo-user certified-user');
+});
+
+test.describe('Progress reset modal', () => {
+  test('should display the content properly', async ({ page }) => {
+    await page
+      .getByRole('button', { name: 'Reset all of my progress' })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: 'Reset My Progress' })
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        'This will permanently delete and reset all of the following:'
+      )
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        'Your progress through each step/challenge (all completed challenges will be lost)'
+      )
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        'Any saved code, including partially completed challenges, and certification project code'
+      )
+    ).toBeVisible();
+
+    await expect(
+      page.getByText('All completed and claimed certifications')
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        'You will effectively be set back to the very first day you signed up.'
+      )
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        "We won't be able to recover any of it for you later, even if you change your mind."
+      )
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: "Nevermind, I don't want to delete all of my progress"
+      })
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Reset everything. I want to start from the beginning'
+      })
+    ).toBeVisible();
+  });
+
+  test('should close the dialog if the user clicks the cancel button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: 'Reset all of my progress' })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: 'Reset My Progress' })
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: "Nevermind, I don't want to delete all of my progress"
+      })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: 'Reset My Progress' })
+    ).toBeHidden();
+  });
+
+  test('should reset the progress if the user clicks the reset button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: 'Reset all of my progress' })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: 'Reset My Progress' })
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Reset everything. I want to start from the beginning'
+      })
+      .click();
+
+    await page.waitForURL('/');
+    await expect(page.getByText('Your progress has been reset')).toBeVisible();
+
+    // Go to /settings and confirm that all certifications are reset
+    await page.goto('/settings');
+    await expect(
+      page.getByRole('link', { name: 'Show Certification' })
+    ).toBeHidden();
+  });
+});

e2e/settings.spec.ts

@@ -418,51 +418,21 @@ test.describe('Settings', () => {
     }
   });
 
-  test('Should validate Danger Section Settings', async ({ page }) => {
+  test('Should display the Danger section properly', async ({ page }) => {
+    await expect(page.getByText('Danger Zone')).toBeVisible();
     await expect(
-      page.getByText(translations.settings.danger.heading, {
-        exact: true
-      })
+      page.getByText(
+        'Please be careful. Changes in this section are permanent.'
+      )
     ).toBeVisible();
-    await expect(
-      page.getByText(translations.settings.danger['be-careful'], {
-        exact: true
-      })
-    ).toBeVisible();
-    await page
-      .getByRole('button', {
-        name: translations.settings.danger.reset,
-        exact: true
-      })
-      .click();
-    await page
-      .getByRole('button', {
-        name: translations.settings.danger['nevermind-2'],
-        exact: true
-      })
-      .click();
     await expect(
       page.getByRole('button', {
-        name: translations.settings.danger['reset-confirm'],
-        exact: true
+        name: 'Reset all of my progress'
       })
     ).toBeVisible();
-    await page
-      .getByRole('button', {
-        name: translations.settings.danger.delete,
-        exact: true
-      })
-      .click();
-    await page
-      .getByRole('button', {
-        name: translations.settings.danger.nevermind,
-        exact: true
-      })
-      .click();
     await expect(
       page.getByRole('button', {
-        name: translations.settings.danger.certain,
-        exact: true
+        name: 'Delete my account'
       })
     ).toBeVisible();
   });