fix(client): change claim cert link to render as a button (#55781)

client/src/components/settings/certification.tsx

@@ -1,4 +1,3 @@
-import { navigate } from 'gatsby';
 import { find } from 'lodash-es';
 import React, { MouseEvent, useState } from 'react';
 import { withTranslation } from 'react-i18next';
@@ -179,17 +178,16 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
   const certSlug = Certification.LegacyFullStack;
   const certLocation = `/certification/${username}/${certSlug}`;
 
-  const createClickHandler =
+  const handleClaim =
     (certSlug: keyof typeof certSlugTypeMap) =>
     (e: MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
-      if (isFullStackCert) {
-        return navigate(certLocation);
-      }
+
       return isHonest
         ? verifyCert(certSlug)
         : createFlashMessage(honestyInfoMessage);
     };
+
   return (
     <FullWidthRow key={certSlug}>
       <Spacer size='medium' />
@@ -219,41 +217,28 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
       </div>
 
       <div>
-        {fullStackClaimable ? (
+        {isFullStackCert ? (
           <Button
             size='small'
             variant='primary'
             block={true}
             href={certLocation}
             id={'button-' + certSlug}
-            // This floating promise is acceptable
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onClick={createClickHandler(certSlug)}
             target='_blank'
           >
-            {isFullStackCert ? (
-              <>
-                {t('buttons.show-cert')}{' '}
-                <span className='sr-only'>
-                  {t('certification.title.Legacy Full Stack')}
-                </span>
-              </>
-            ) : (
-              <>
-                {t('buttons.claim-cert')}{' '}
-                <span className='sr-only'>
-                  {t('certification.title.Legacy Full Stack')}
-                </span>
-              </>
-            )}
+            {t('buttons.show-cert')}{' '}
+            <span className='sr-only'>
+              {t('certification.title.Legacy Full Stack')}
+            </span>
           </Button>
         ) : (
           <Button
             size='small'
             variant='primary'
             block={true}
-            disabled={true}
+            disabled={!fullStackClaimable}
             id={'button-' + certSlug}
+            onClick={handleClaim(certSlug)}
           >
             {t('buttons.claim-cert')}{' '}
             <span className='sr-only'>
@@ -387,15 +372,15 @@ function CertificationSettings(props: CertificationSettingsProps) {
     const { username, isHonest, createFlashMessage, t, verifyCert } = props;
     const { certSlug } = certsToProjects[certName][0];
     const certLocation = `/certification/${username}/${certSlug}`;
-    const clickHandler = (e: MouseEvent<HTMLButtonElement>) => {
+
+    const handleClaim = (e: MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
-      if (isCert) {
-        return navigate(certLocation);
-      }
+
       return isHonest
         ? verifyCert(certSlug)
         : createFlashMessage(honestyInfoMessage);
     };
+
     return (
       <>
         {certsToProjects[certName].map(({ link, title, id }) => (
@@ -412,18 +397,17 @@ function CertificationSettings(props: CertificationSettingsProps) {
         ))}
         <tr key={`cert-${certSlug}-button`}>
           <td colSpan={2}>
-            <Button
-              block={true}
-              variant='primary'
-              href={certLocation}
-              data-playwright-test-label={`btn-for-${certSlug}`}
-              // This floating promise is acceptable
-              // eslint-disable-next-line @typescript-eslint/no-misused-promises
-              onClick={clickHandler}
-            >
-              {isCert ? t('buttons.show-cert') : t('buttons.claim-cert')}{' '}
-              <span className='sr-only'>{certName}</span>
-            </Button>
+            {isCert ? (
+              <Button block={true} variant='primary' href={certLocation}>
+                {t('buttons.show-cert')}{' '}
+                <span className='sr-only'>{certName}</span>
+              </Button>
+            ) : (
+              <Button block={true} variant='primary' onClick={handleClaim}>
+                {t('buttons.claim-cert')}{' '}
+                <span className='sr-only'>{certName}</span>
+              </Button>
+            )}
           </td>
         </tr>
       </>

e2e/academic-honesty.spec.ts

@@ -1,6 +1,7 @@
 import { execSync } from 'child_process';
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
 
 test.describe('When the user has not accepted the Academic Honesty Policy', () => {
   test.use({ storageState: 'playwright/.auth/development-user.json' });
@@ -9,6 +10,10 @@ test.describe('When the user has not accepted the Academic Honesty Policy', () =
     execSync('node ./tools/scripts/seed/seed-demo-user');
   });
 
+  test.afterAll(() => {
+    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
+  });
+
   test('they should be able to accept it', async ({ page }) => {
     await page.goto('/settings');
     await expect(
@@ -48,11 +53,13 @@ test.describe('When the user has not accepted the Academic Honesty Policy', () =
 
   test('Should show an error message', async ({ page }) => {
     await page.goto('/settings#cert-responsive-web-design');
-    await page.getByTestId('btn-for-responsive-web-design').click();
 
-    await expect(page.getByTestId('flash-message')).toContainText(
-      translations.flash['honest-first']
-    );
+    const claimCertButton = page.getByRole('button', {
+      name: 'Claim Certification Responsive Web Design'
+    });
+    await claimCertButton.click();
+
+    await alertToBeVisible(page, translations.flash['honest-first']);
 
     const agreeButton = page.getByRole('button', {
       name: translations.buttons['agree-honesty']
@@ -61,14 +68,11 @@ test.describe('When the user has not accepted the Academic Honesty Policy', () =
 
     await page.reload();
 
-    await page.getByTestId('btn-for-responsive-web-design').click();
+    await claimCertButton.click();
 
-    await expect(page.getByTestId('flash-message')).toContainText(
-      /It looks like you have not completed the necessary steps. Please complete the required projects to claim the Responsive Web Design Certification./
+    await alertToBeVisible(
+      page,
+      'It looks like you have not completed the necessary steps. Please complete the required projects to claim the Responsive Web Design Certification.'
     );
   });
-
-  test.afterAll(() => {
-    execSync('node ./tools/scripts/seed/seed-demo-user --certified-user');
-  });
 });

e2e/projects.spec.ts

@@ -215,7 +215,7 @@ test.describe('JavaScript projects can be submitted and then viewed in /settings
       .click();
 
     await page
-      .getByRole('link', {
+      .getByRole('button', {
         name: 'Claim Certification Legacy JavaScript Algorithms and Data Structures'
       })
       .click();

e2e/settings.spec.ts

@@ -368,7 +368,7 @@ test.describe('Settings - Certified User without Full Stack Certification', () =
   test('should allow claiming Full Stack cert if the user has completed all requirements', async ({
     page
   }) => {
-    const claimButton = page.getByRole('link', {
+    const claimButton = page.getByRole('button', {
       name: 'Claim Certification Legacy Full Stack'
     });
     const showButton = page.getByRole('link', {
@@ -407,10 +407,20 @@ test.describe('Settings - New User', () => {
   test('should not allow claiming Full Stack cert if the user has not completed all the required certs', async ({
     page
   }) => {
-    const claimButton = page.getByRole('button', {
+    const claimFullStackCertButton = page.getByRole('button', {
       name: 'Claim Certification Legacy Full Stack'
     });
-    await expect(claimButton).toBeVisible();
-    await expect(claimButton).toBeDisabled();
+
+    const claimRwdCertButton = page.getByRole('button', {
+      name: 'Claim Certification Responsive Web Design'
+    });
+
+    // Buttons for normal certs are enabled
+    await expect(claimRwdCertButton).toBeVisible();
+    await expect(claimRwdCertButton).toBeEnabled();
+
+    // Button for full stack cert is disabled if the user hasn't claimed the required certs
+    await expect(claimFullStackCertButton).toBeVisible();
+    await expect(claimFullStackCertButton).toBeDisabled();
   });
 });