test: - visualise error messages in Edit Task modal

Author: ilandikov

tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html

@@ -105,13 +105,13 @@
       <input
         id="scheduled"
         type="text"
-        class="tasks-modal-date-input"
+        class="tasks-modal-date-input tasks-modal-error"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="s" />
-      <div class="tasks-modal-parsed-date">
+      <code class="tasks-modal-parsed-date">
         ⏳
-        <input class="tasks-modal-date-editor-picker" type="date" id="date-editor-picker" tabindex="-1" />
-      </div>
+        <i>invalid scheduled date</i>
+      </code>
       <label for="start">
         St
         <span class="accesskey">a</span>
@@ -257,7 +257,7 @@
       </div>
     </section>
     <section class="tasks-modal-button-section">
-      <button type="submit" class="mod-cta">Apply</button>
+      <button type="submit" class="mod-cta" disabled="">Apply</button>
       <button type="button">Cancel</button>
     </section>
   </form>

tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html

@@ -61,11 +61,15 @@
         <input class="tasks-modal-date-editor-picker" type="date" id="date-editor-picker" tabindex="-1" />
       </div>
       <label for="scheduled">Scheduled</label>
-      <input id="scheduled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <div class="tasks-modal-parsed-date">
+      <input
+        id="scheduled"
+        type="text"
+        class="tasks-modal-date-input tasks-modal-error"
+        placeholder="Try 'Mon' or 'tm' then space" />
+      <code class="tasks-modal-parsed-date">
         ⏳
-        <input class="tasks-modal-date-editor-picker" type="date" id="date-editor-picker" tabindex="-1" />
-      </div>
+        <i>invalid scheduled date</i>
+      </code>
       <label for="start">Start</label>
       <input id="start" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <div class="tasks-modal-parsed-date">
@@ -159,7 +163,7 @@
       </div>
     </section>
     <section class="tasks-modal-button-section">
-      <button type="submit" class="mod-cta">Apply</button>
+      <button type="submit" class="mod-cta" disabled="">Apply</button>
       <button type="button">Cancel</button>
     </section>
   </form>

tests/ui/EditTask.test.ts

@@ -658,7 +658,9 @@ describe('Edit Modal HTML snapshot tests', () => {
     });
 
     function verifyModalHTML() {
-        const task = taskFromLine({ line: '- [ ] absolutely to do', path: '' });
+        // Populate task a valid and an invalid date. Note that the valid date value
+        // is not visible in the HTML output.
+        const task = taskFromLine({ line: '- [ ] absolutely to do 🛫 2024-01-01 ⏳ 2024-02-33', path: '' });
         const onSubmit = () => {};
         const allTasks = [task];
         const { container } = renderAndCheckModal(task, onSubmit, allTasks);