feat: Convert "Certifications" spec to Playwright (#54965)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/components/profile/components/certifications.tsx

@@ -51,7 +51,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
         block
         size='large'
         href={`/certification/${username}/${cert.certSlug}`}
-        data-cy='claimed-certification'
+        data-playwright-test-label='claimed-certification'
       >
         {t('buttons.view-cert-title', {
           certTitle: t(`certification.title.${cert.certSlug}`)

client/src/components/settings/username.tsx

@@ -212,7 +212,6 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
               name='username-settings'
               onChange={this.handleChange}
               value={formValue}
-              data-cy='username-input'
               id='username-settings'
             />
           </FormGroup>

cypress/e2e/default/user/certifications.ts

@@ -1,42 +0,0 @@
-describe('Public profile certifications', () => {
-  context('Signed in user viewing their own public profile', () => {
-    before(() => {
-      cy.task('seed', ['certified-user']);
-    });
-
-    beforeEach(() => {
-      cy.login('certified-user');
-    });
-
-    it('Should show claimed certifications if the username has all lowercase characters', () => {
-      cy.visit('/certifieduser', { failOnStatusCode: false });
-
-      // The following line is only required if you want to test it in development
-      //cy.contains('Preview custom 404 page').click();
-
-      cy.get('[data-cy=claimed-certification]').should('have.length', 19);
-    });
-
-    it('Should show claimed certifications if the username includes uppercase characters', () => {
-      // Modify username to include uppercase characters
-      cy.goToSettings();
-      cy.typeUsername('CertifiedUser');
-      cy.contains('Username is available');
-      cy.get('@usernameForm').contains('Save').click();
-      cy.contains('We have updated your username to CertifiedUser').should(
-        'be.visible'
-      );
-
-      cy.visit('/certifieduser', { failOnStatusCode: false });
-
-      // The following line is only required if you want to test it in development
-      //cy.contains('Preview custom 404 page').click();
-
-      cy.get('[data-cy=claimed-certification]').should('have.length', 19);
-    });
-  });
-
-  // To do: Add another context to test for cases where a logged out user views
-  // a profile where the username has all lowercase chars, and some uppercase chars
-  // when that's fixed
-});

e2e/cert-username-case-navigation.spec.ts

@@ -0,0 +1,46 @@
+import { execSync } from 'child_process';
+import { expect, test } from '@playwright/test';
+
+test.describe('Public profile certifications', () => {
+  test.use({ storageState: 'playwright/.auth/certified-user.json' });
+  test('Should show claimed certifications if the username has all lowercase characters', async ({
+    page
+  }) => {
+    await page.goto('/certifieduser');
+
+    // If you build the client locally, delete the button click below.
+    if (!process.env.CI) {
+      await page
+        .getByRole('button', { name: 'Preview custom 404 page' })
+        .click();
+    }
+
+    await expect(page.getByTestId('claimed-certification')).toHaveCount(19);
+  });
+
+  test('Should show claimed certifications if the username includes uppercase characters', async ({
+    page
+  }) => {
+    await page.goto('/settings');
+    await page.getByLabel('Username').fill('CertifiedBoozer');
+    await page.getByRole('button', { name: 'Save' }).nth(0).click();
+    await expect(page.getByTestId('flash-message')).toContainText(
+      /We have updated your username to/
+    );
+    await page.goto('/certifiedboozer');
+
+    // If you build the client locally, delete the button click below.
+    if (!process.env.CI) {
+      await page
+        .getByRole('button', { name: 'Preview custom 404 page' })
+        .click();
+    }
+
+    await page.waitForURL('/certifiedboozer');
+    await expect(page.getByTestId('claimed-certification')).toHaveCount(19);
+  });
+
+  test.afterAll(() => {
+    execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+  });
+});