diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx index 8a78e46e3f3..122186ae974 100644 --- a/client/src/components/profile/components/certifications.tsx +++ b/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}`) diff --git a/client/src/components/settings/username.tsx b/client/src/components/settings/username.tsx index 13c35557608..8f48b4e3be4 100644 --- a/client/src/components/settings/username.tsx +++ b/client/src/components/settings/username.tsx @@ -212,7 +212,6 @@ class UsernameSettings extends Component { name='username-settings' onChange={this.handleChange} value={formValue} - data-cy='username-input' id='username-settings' /> diff --git a/cypress/e2e/default/user/certifications.ts b/cypress/e2e/default/user/certifications.ts deleted file mode 100644 index 410240b2bb8..00000000000 --- a/cypress/e2e/default/user/certifications.ts +++ /dev/null @@ -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 -}); diff --git a/e2e/cert-username-case-navigation.spec.ts b/e2e/cert-username-case-navigation.spec.ts new file mode 100644 index 00000000000..2a6bdc19715 --- /dev/null +++ b/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'); + }); +});