From e327e34fd6ec77bd3539e11b653ea9a5bbc664a7 Mon Sep 17 00:00:00 2001
From: Bobby Novak <176936850+rnovak338@users.noreply.github.com>
Date: Mon, 19 Aug 2024 15:04:50 -0400
Subject: [PATCH] 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.
---
 .../audit/templates/audit/auditee-certification-step-2.html   | 4 +++-
 .../audit/templates/audit/auditor-certification-step-2.html   | 4 +++-
 backend/cypress/support/auditee-certification.js              | 3 ++-
 backend/cypress/support/auditor-certification.js              | 3 ++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/backend/audit/templates/audit/auditee-certification-step-2.html b/backend/audit/templates/audit/auditee-certification-step-2.html
index f462496cf2..56d326e937 100644
--- 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
index 435cd7731c..02571c7604 100644
--- 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
index 7aa7ede035..75d0938253 100644
--- 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
index 3a183343f4..e45e963d15 100644
--- 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();
 };