feat: [AsPu-665] Certificate Status marked up as a heading level 2

raccoongang · Aug 21, 2024 · 58262b4 · 58262b4
1 parent 351b7c0
commit 58262b4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/course-home/progress-tab/ProgressTab.test.jsx b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -5,6 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@edx/paragon';
 import MockAdapter from 'axios-mock-adapter';
+import { within } from '@testing-library/react';
 
 import {
   fireEvent, initializeMockApp, logUnhandledRequests, render, screen, act,
@@ -1112,6 +1113,11 @@ describe('Progress Tab', () => {
           linkType: 'button',
           pageName: 'progress',
         });
+
+        const certificateStatusComponent = screen.queryByTestId('certificate-status-component');
+        expect(certificateStatusComponent).toBeInTheDocument();
+        const headerElement = within(certificateStatusComponent).getByRole('heading', { level: 2 });
+        expect(headerElement).toBeInTheDocument();
       });
 
       it('Displays nothing if audit only', async () => {
@@ -1123,6 +1129,7 @@ describe('Progress Tab', () => {
         // never actually there, when/if the text changes.
         expect(screen.queryByText('You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.')).not.toBeInTheDocument();
         expect(screen.queryByRole('link', { name: 'Upgrade now' })).not.toBeInTheDocument();
+        expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument();
       });
 
       it('sends event when visiting the progress tab even when audit user cannot upgrade (i.e. certificate component does not render)', async () => {
@@ -1140,6 +1147,7 @@ describe('Progress Tab', () => {
           grade_variant: 'not_passing',
           certificate_status_variant: 'audit_passing_missed_upgrade_deadline',
         });
+        expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument();
       });
 
       it('Does not display the certificate component if it does not match any statuses', async () => {
@@ -1163,7 +1171,7 @@ describe('Progress Tab', () => {
         });
         setMetadata({ is_enrolled: true });
         await fetchAndRender();
-
+        expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument();
         expect(sendTrackEvent).toHaveBeenCalledTimes(1);
         expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_progress.visited', {
           org_key: 'edX',

diff --git a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -236,7 +236,7 @@ const CertificateStatus = ({ intl }) => {
   return (
     <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
       <Card className="bg-light-200 raised-card">
-        <Card.Header title={header} />
+        <Card.Header title={<h2>{header}</h2>} />
         <Card.Section className="small text-gray-700">
           {body}
         </Card.Section>