Add required indicator to DateTimeSelectPage heading and correspondin…

…g test (#34132)
department-of-veterans-affairs · Jan 17, 2025 · e00c7c5 · e00c7c5
1 parent 32fcd0b
commit e00c7c5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx b/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx
@@ -178,7 +178,12 @@ export default function DateTimeSelectPage() {
 
   return (
     <div>
-      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">
+        {pageTitle}
+        <span className="schemaform-required-span vaos-calendar__page_header vads-u-font-family--sans vads-u-font-weight--normal">
+          (*Required)
+        </span>
+      </h1>
       {!loadingSlots && (
         <WaitTimeAlert
           eligibleForRequests={eligibleForRequests}

diff --git a/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.unit.spec.js b/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.unit.spec.js
@@ -1000,4 +1000,31 @@ describe('VAOS Page: DateTimeSelectPage', () => {
     });
     expect(screen.history.push.called).to.be.false;
   });
+  it('should show required text next to page heading', async () => {
+    const preferredDate = moment();
+    const slot308Date = moment().add(6, 'days');
+
+    setDateTimeSelectMockFetches({
+      typeOfCareId: 'outpatientMentalHealth',
+      slotDatesByClinicId: {
+        '308': [slot308Date],
+      },
+    });
+
+    const store = createTestStore(initialState);
+
+    await setTypeOfCare(store, /mental health/i);
+    await setVAFacility(store, '983', 'outpatientMentalHealth');
+    await setClinic(store, '983_308');
+    await setPreferredDate(store, preferredDate);
+
+    const screen = renderWithStoreAndRouter(
+      <Route component={DateTimeSelectPage} />,
+      {
+        store,
+      },
+    );
+
+    expect(await screen.findByText(/Required/i)).to.exist;
+  });
 });