Certification Signature - read-only date input (#4196)

For the signature date fields, I made them read-only and supplied a [select a date] placeholder. This will prompt the auditor/auditee to use the datepicker component instead of attempting to type in a date and risk invalid input. I also updated the Cypress full-submission test where the value is normally typed in for the input. Now, Cypress will select the calendar element and select today's date.
GSA-TTS · Aug 19, 2024 · e327e34 · e327e34
1 parent 16ce264
commit e327e34
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/backend/audit/templates/audit/auditee-certification-step-2.html b/backend/audit/templates/audit/auditee-certification-step-2.html
@@ -30,7 +30,9 @@ <h3>Agree and sign to auditee statement</h3>
                                       aria-describedby="auditee_certification_date_signed-hint"
                                       aria-required="true"
                                       required
-                                      data-validate-not-null="" />
+                                      data-validate-not-null=""
+                                      placeholder="[select a date]"
+                                      readonly />
                            </div>
                 </fieldset>
                 <button class="usa-button margin-bottom-8 margin-top-4" id="continue">Agree to auditee certification</button>

diff --git a/backend/audit/templates/audit/auditor-certification-step-2.html b/backend/audit/templates/audit/auditor-certification-step-2.html
@@ -30,7 +30,9 @@ <h3>Agree and sign to auditor statement</h3>
                                aria-describedby="auditor_certification_date_signed-hint"
                                aria-required="true"
                                required
-                               data-validate-not-null="" />
+                               data-validate-not-null=""
+                               placeholder="[select a date]"
+                               readonly/>
                     </div>
                 </fieldset>
                 <button class="usa-button margin-top-4" id="continue">Agree to auditor certification</button>

diff --git a/backend/cypress/support/auditee-certification.js b/backend/cypress/support/auditee-certification.js
@@ -13,6 +13,7 @@ export function testAuditeeCertification() {
   // 2. Sign and date, submit and go back to checklist
   cy.get('#auditee_name').type('John Doe');
   cy.get('#auditee_title').type('Auditee');
-  cy.get('#auditee_certification_date_signed').type("01/01/2022");
+  cy.get('.usa-date-picker__button').click();
+  cy.get('.usa-date-picker__calendar__date--today').click();
   cy.get('.usa-button').contains('Agree to auditee certification').click();
 };
diff --git a/backend/cypress/support/auditor-certification.js b/backend/cypress/support/auditor-certification.js
@@ -11,6 +11,7 @@ export function testAuditorCertification() {
   // 2. Sign and date, submit and go back to checklist
   cy.get('#auditor_name').type('Jane Doe');
 	cy.get('#auditor_title').type('Auditor');
-  cy.get('#auditor_certification_date_signed').type("01/01/2022");
+  cy.get('.usa-date-picker__button').click();
+  cy.get('.usa-date-picker__calendar__date--today').click();
   cy.get('.usa-button').contains('Agree to auditor certification').click();
 };