Add Cypress tests for work order page navigation between days and months

cypress/e2e/02-update/workOrderWorkday.cy.js

@@ -1,15 +1,37 @@
 import { testUpdate } from '../../../test/_globals.js';
-import { login, logout } from '../../support/index.js';
+import { ajaxDelayMillis, login, logout } from '../../support/index.js';
 describe('Work Orders - Workday Report', () => {
     beforeEach(() => {
         logout();
         login(testUpdate);
     });
     afterEach(logout);
-    it('Has no detectable accessibility issues', () => {
-        cy.visit('/workOrders/workday');
-        cy.location('pathname').should('equal', '/workOrders/workday');
+    const workdayUrl = '/workOrders/workday';
+    const dateSpanSelector = '#workdayDateStringSpan';
+    it('Should page between days', () => {
+        cy.visit(workdayUrl);
+        cy.location('pathname').should('equal', workdayUrl);
         cy.injectAxe();
         cy.checkA11y();
+        // Get the initial date string
+        cy.get(dateSpanSelector).invoke('text').as('initialDateString');
+        // Verify the date changes when clicking next day
+        cy.get('@initialDateString').then((initialDateString) => {
+            // Click the next day button
+            cy.get('#button--workdayNextDay').click();
+            cy.wait(ajaxDelayMillis);
+            cy.get(dateSpanSelector)
+                .invoke('text')
+                .should('not.equal', initialDateString);
+            // Click the previous day button twice to go before the initial date
+            cy.get('#button--workdayPreviousDay').click();
+            cy.wait(ajaxDelayMillis);
+            cy.get('#button--workdayPreviousDay').click();
+            cy.wait(ajaxDelayMillis);
+            // Verify we're on a different date than the initial
+            cy.get(dateSpanSelector)
+                .invoke('text')
+                .should('not.equal', initialDateString);
+        });
     });
 });

cypress/e2e/02-update/workOrderWorkday.cy.ts

@@ -1,5 +1,5 @@
 import { testUpdate } from '../../../test/_globals.js'
-import { login, logout } from '../../support/index.js'
+import { ajaxDelayMillis, login, logout } from '../../support/index.js'
 
 describe('Work Orders - Workday Report', () => {
   beforeEach(() => {
@@ -9,11 +9,39 @@ describe('Work Orders - Workday Report', () => {
 
   afterEach(logout)
 
-  it('Has no detectable accessibility issues', () => {
-    cy.visit('/workOrders/workday')
-    cy.location('pathname').should('equal', '/workOrders/workday')
+  const workdayUrl = '/workOrders/workday'
+  const dateSpanSelector = '#workdayDateStringSpan'
+
+  it('Should page between days', () => {
+    cy.visit(workdayUrl)
+    cy.location('pathname').should('equal', workdayUrl)
 
     cy.injectAxe()
     cy.checkA11y()
+
+    // Get the initial date string
+    cy.get(dateSpanSelector).invoke('text').as('initialDateString')
+
+    // Verify the date changes when clicking next day
+    cy.get('@initialDateString').then((initialDateString) => {
+      // Click the next day button
+      cy.get('#button--workdayNextDay').click()
+      cy.wait(ajaxDelayMillis)
+
+      cy.get(dateSpanSelector)
+        .invoke('text')
+        .should('not.equal', initialDateString)
+
+      // Click the previous day button twice to go before the initial date
+      cy.get('#button--workdayPreviousDay').click()
+      cy.wait(ajaxDelayMillis)
+      cy.get('#button--workdayPreviousDay').click()
+      cy.wait(ajaxDelayMillis)
+
+      // Verify we're on a different date than the initial
+      cy.get(dateSpanSelector)
+        .invoke('text')
+        .should('not.equal', initialDateString)
+    })
   })
 })

cypress/e2e/03-readOnly/workOrderMilestoneCalendar.cy.js

@@ -6,11 +6,101 @@ describe('Work Order Milestone Calendar', () => {
         login(testView);
     });
     afterEach(logout);
+    const milestoneCalendarUrl = '/workOrders/milestoneCalendar';
+    const monthSelector = '#searchFilter--workOrderMilestoneMonth';
+    const yearSelector = '#searchFilter--workOrderMilestoneYear';
     it('Has no detectable accessibility issues', () => {
-        cy.visit('/workOrders/milestoneCalendar');
-        cy.location('pathname').should('equal', '/workOrders/milestoneCalendar');
+        cy.visit(milestoneCalendarUrl);
+        cy.location('pathname').should('equal', milestoneCalendarUrl);
         cy.wait(ajaxDelayMillis);
         cy.injectAxe();
         cy.checkA11y();
     });
+    it('Should page to next month', () => {
+        cy.visit(milestoneCalendarUrl);
+        cy.location('pathname').should('equal', milestoneCalendarUrl);
+        cy.wait(ajaxDelayMillis);
+        // Store the initial month and year
+        const state = { initialMonth: '', initialYear: '' };
+        cy.get(`${monthSelector} option:selected`)
+            .invoke('text')
+            .then((text) => {
+            state.initialMonth = text;
+        });
+        cy.get(`${yearSelector} option:selected`)
+            .invoke('text')
+            .then((text) => {
+            state.initialYear = text;
+        });
+        // Click the next month button
+        cy.get('#button--nextMonth').click();
+        cy.wait(ajaxDelayMillis);
+        // Verify the month or year has changed
+        cy.get(`${monthSelector} option:selected`)
+            .invoke('text')
+            .then((nextMonth) => {
+            cy.get(`${yearSelector} option:selected`)
+                .invoke('text')
+                // eslint-disable-next-line max-nested-callbacks
+                .should((nextYear) => {
+                const initialValue = `${state.initialMonth} ${state.initialYear}`;
+                const nextValue = `${nextMonth} ${nextYear}`;
+                expect(nextValue).to.not.equal(initialValue);
+            });
+        });
+    });
+    it('Should page to previous month', () => {
+        cy.visit(milestoneCalendarUrl);
+        cy.location('pathname').should('equal', milestoneCalendarUrl);
+        cy.wait(ajaxDelayMillis);
+        // Store the initial month and year
+        const state = { initialMonth: '', initialYear: '' };
+        cy.get(`${monthSelector} option:selected`)
+            .invoke('text')
+            .then((text) => {
+            state.initialMonth = text;
+        });
+        cy.get(`${yearSelector} option:selected`)
+            .invoke('text')
+            .then((text) => {
+            state.initialYear = text;
+        });
+        // Click the previous month button
+        cy.get('#button--previousMonth').click();
+        cy.wait(ajaxDelayMillis);
+        // Verify the month or year has changed
+        cy.get(`${monthSelector} option:selected`)
+            .invoke('text')
+            .then((previousMonth) => {
+            cy.get(`${yearSelector} option:selected`)
+                .invoke('text')
+                // eslint-disable-next-line max-nested-callbacks
+                .should((previousYear) => {
+                const initialValue = `${state.initialMonth} ${state.initialYear}`;
+                const previousValue = `${previousMonth} ${previousYear}`;
+                expect(previousValue).to.not.equal(initialValue);
+            });
+        });
+    });
+    it('Should navigate to workday view from calendar date link', () => {
+        cy.visit(milestoneCalendarUrl);
+        cy.location('pathname').should('equal', milestoneCalendarUrl);
+        cy.wait(ajaxDelayMillis);
+        // Find a calendar date link and click it
+        cy.get('#container--milestoneCalendar td[data-date-string] a')
+            .first()
+            .then(($link) => {
+            // Get the href to verify it contains the workday path
+            const href = $link.attr('href');
+            expect(href).to.include('/workOrders/workday');
+            expect(href).to.include('workdayDateString=');
+            // Extract the date string from the link's parent td element
+            const dateString = $link.closest('td').attr('data-date-string');
+            // Click the link using Cypress's click method
+            cy.wrap($link).click();
+            // Verify we navigated to the workday page
+            cy.location('pathname').should('include', '/workOrders/workday');
+            cy.location('search').should('include', `workdayDateString=${dateString}`);
+        });
+    });
 });

cypress/e2e/03-readOnly/workOrderMilestoneCalendar.cy.ts

@@ -9,11 +9,119 @@ describe('Work Order Milestone Calendar', () => {
 
   afterEach(logout)
 
+  const milestoneCalendarUrl = '/workOrders/milestoneCalendar'
+  const monthSelector = '#searchFilter--workOrderMilestoneMonth'
+  const yearSelector = '#searchFilter--workOrderMilestoneYear'
+
   it('Has no detectable accessibility issues', () => {
-    cy.visit('/workOrders/milestoneCalendar')
-    cy.location('pathname').should('equal', '/workOrders/milestoneCalendar')
+    cy.visit(milestoneCalendarUrl)
+    cy.location('pathname').should('equal', milestoneCalendarUrl)
     cy.wait(ajaxDelayMillis)
     cy.injectAxe()
     cy.checkA11y()
   })
+
+  it('Should page to next month', () => {
+    cy.visit(milestoneCalendarUrl)
+    cy.location('pathname').should('equal', milestoneCalendarUrl)
+    cy.wait(ajaxDelayMillis)
+
+    // Store the initial month and year
+    const state = { initialMonth: '', initialYear: '' }
+
+    cy.get(`${monthSelector} option:selected`)
+      .invoke('text')
+      .then((text) => {
+        state.initialMonth = text
+      })
+
+    cy.get(`${yearSelector} option:selected`)
+      .invoke('text')
+      .then((text) => {
+        state.initialYear = text
+      })
+
+    // Click the next month button
+    cy.get('#button--nextMonth').click()
+    cy.wait(ajaxDelayMillis)
+
+    // Verify the month or year has changed
+    cy.get(`${monthSelector} option:selected`)
+      .invoke('text')
+      .then((nextMonth) => {
+        cy.get(`${yearSelector} option:selected`)
+          .invoke('text')
+          // eslint-disable-next-line max-nested-callbacks
+          .should((nextYear) => {
+            const initialValue = `${state.initialMonth} ${state.initialYear}`
+            const nextValue = `${nextMonth} ${nextYear}`
+            expect(nextValue).to.not.equal(initialValue)
+          })
+      })
+  })
+
+  it('Should page to previous month', () => {
+    cy.visit(milestoneCalendarUrl)
+    cy.location('pathname').should('equal', milestoneCalendarUrl)
+    cy.wait(ajaxDelayMillis)
+
+    // Store the initial month and year
+    const state = { initialMonth: '', initialYear: '' }
+
+    cy.get(`${monthSelector} option:selected`)
+      .invoke('text')
+      .then((text) => {
+        state.initialMonth = text
+      })
+
+    cy.get(`${yearSelector} option:selected`)
+      .invoke('text')
+      .then((text) => {
+        state.initialYear = text
+      })
+
+    // Click the previous month button
+    cy.get('#button--previousMonth').click()
+    cy.wait(ajaxDelayMillis)
+
+    // Verify the month or year has changed
+    cy.get(`${monthSelector} option:selected`)
+      .invoke('text')
+      .then((previousMonth) => {
+        cy.get(`${yearSelector} option:selected`)
+          .invoke('text')
+          // eslint-disable-next-line max-nested-callbacks
+          .should((previousYear) => {
+            const initialValue = `${state.initialMonth} ${state.initialYear}`
+            const previousValue = `${previousMonth} ${previousYear}`
+            expect(previousValue).to.not.equal(initialValue)
+          })
+      })
+  })
+
+  it('Should navigate to workday view from calendar date link', () => {
+    cy.visit(milestoneCalendarUrl)
+    cy.location('pathname').should('equal', milestoneCalendarUrl)
+    cy.wait(ajaxDelayMillis)
+
+    // Find a calendar date link and click it
+    cy.get('#container--milestoneCalendar td[data-date-string] a')
+      .first()
+      .then(($link) => {
+        // Get the href to verify it contains the workday path
+        const href = $link.attr('href')
+        expect(href).to.include('/workOrders/workday')
+        expect(href).to.include('workdayDateString=')
+
+        // Extract the date string from the link's parent td element
+        const dateString = $link.closest('td').attr('data-date-string')
+
+        // Click the link using Cypress's click method
+        cy.wrap($link).click()
+
+        // Verify we navigated to the workday page
+        cy.location('pathname').should('include', '/workOrders/workday')
+        cy.location('search').should('include', `workdayDateString=${dateString}`)
+      })
+  })
 })

public/javascripts/workOrder.workday.js

@@ -172,6 +172,7 @@
           data-work-order-milestone-id="${milestone.workOrderMilestoneId}"
           type="button"
           title="Toggle Milestone Completion"
+          role="checkbox"
           aria-checked="${milestoneIsCompleted ? 'true' : 'false'}"
         >
           <span class="icon is-small">

public/javascripts/workOrder.workday.ts

@@ -299,6 +299,7 @@ declare const exports: {
           data-work-order-milestone-id="${milestone.workOrderMilestoneId}"
           type="button"
           title="Toggle Milestone Completion"
+          role="checkbox"
           aria-checked="${milestoneIsCompleted ? 'true' : 'false'}"
         >
           <span class="icon is-small">