diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx index 8e21c096660..6952b15dc3e 100644 --- a/client/src/client-only-routes/show-certification.tsx +++ b/client/src/client-only-routes/show-certification.tsx @@ -288,6 +288,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => { certMonth + 1 }&certUrl=${certURL}`} target='_blank' + data-playwright-test-label='linkedin-share-btn' > {t('profile.add-linkedin')} @@ -301,6 +302,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => { certURL: certURL })}`} target='_blank' + data-playwright-test-label='twitter-share-btn' > {t('profile.add-twitter')} @@ -342,15 +344,20 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {

{{ user: displayName }}

-

placeholder

-

+

+ placeholder +

+

{{ title: t(`certification.title.${certTitle}`, certTitle) }}

-

+

{{ time: certDate.toLocaleString([localeCode, 'en-US'], { year: 'numeric', diff --git a/e2e/show-certificate-else.spec.ts b/e2e/show-certificate-else.spec.ts index 03eedfdac7f..1c661bd266a 100644 --- a/e2e/show-certificate-else.spec.ts +++ b/e2e/show-certificate-else.spec.ts @@ -12,17 +12,16 @@ test.describe('Show certification else', () => { await page.close(); }); - test('while viewing someone else, should display certificate', async () => { - expect(await page.isVisible('text=successfully completed')).toBeTruthy(); - expect(await page.isVisible('text=Responsive Web Design')).toBeTruthy(); + test('while viewing someone else, should display the certificate information', async () => { + await expect(page.getByTestId('successful-completion')).toBeVisible(); + await expect(page.getByTestId('certification-title')).toBeVisible(); + await expect(page.getByTestId('issue-date')).toContainText( + 'Developer Certification on August 3, 2018' + ); }); test('while viewing someone else, should not render a LinkedIn button and Twitter button', async () => { - await expect( - page.locator('text=Add this certification to my LinkedIn profile') - ).toBeHidden(); - await expect( - page.locator('text=Share this certification on Twitter') - ).toBeHidden(); + await expect(page.getByTestId('linkedin-share-btn')).toBeHidden(); + await expect(page.getByTestId('twitter-share-btn')).toBeHidden(); }); }); diff --git a/e2e/show-certificate-own.spec.ts b/e2e/show-certificate-own.spec.ts index 322e8091e7c..7b2b87d38f3 100644 --- a/e2e/show-certificate-own.spec.ts +++ b/e2e/show-certificate-own.spec.ts @@ -14,20 +14,16 @@ test.describe('Show certification own', () => { await page.close(); }); - test('should display certificate details', async () => { - await expect(page.getByText('successfully completed')).toBeVisible(); - await expect(page.getByText('Responsive Web Design')).toBeVisible(); - await expect(page.locator('[data-cy=issue-date]')).toContainText( + test('should display the certificate details', async () => { + await expect(page.getByTestId('successful-completion')).toBeVisible(); + await expect(page.getByTestId('certification-title')).toBeVisible(); + await expect(page.getByTestId('issue-date')).toContainText( 'Developer Certification on August 3, 2018' ); }); - test('should render LinkedIn and Twitter buttons', async () => { - await expect( - page.getByText('Add this certification to my LinkedIn profile') - ).toBeVisible(); - await expect( - page.getByText('Share this certification on Twitter') - ).toBeVisible(); + test('should render and display LinkedIn and Twitter buttons', async () => { + await expect(page.getByTestId('linkedin-share-btn')).toBeVisible(); + await expect(page.getByTestId('twitter-share-btn')).toBeVisible(); }); });