From c2b54bacf29073502181b512ac70006dfd1b1eb7 Mon Sep 17 00:00:00 2001
From: "Ghislain B." <gbeaulac@gmail.com>
Date: Fri, 8 Nov 2024 01:02:51 -0500
Subject: [PATCH] chore: add missing Cypress tests for calendar editor minDate
 (#1734)

- we never had any tests to verify that a date editor with `minDate: 'today'` option defined should expect anything older than today to be unclickable, this PR adds such test
---
 test/cypress/e2e/example12.cy.ts |  9 +++++++++
 test/cypress/e2e/example14.cy.ts | 24 +++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts
index 3a13d61a3..ecc30ce1f 100644
--- a/test/cypress/e2e/example12.cy.ts
+++ b/test/cypress/e2e/example12.cy.ts
@@ -1,3 +1,5 @@
+import { format, addDay } from '@formkit/tempo';
+
 // eslint-disable-next-line n/file-extension-in-import
 import { changeTimezone, zeroPadding } from '../plugins/utilities';
 
@@ -154,8 +156,15 @@ describe('Example 12 - Composite Editor Modal', () => {
     }
     const currentYear = today.getFullYear();
 
+    // get yesterday/today dates
+    const yesterdayDate = format(addDay(new Date(), -1), 'YYYY-MM-DD');
+    const todayDate = format(new Date(), 'YYYY-MM-DD');
+
     // change Finish date to today's date
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty
+    // any dates lower than today should be disabled
+    cy.get(`[data-calendar-day=${yesterdayDate}]`).should('have.class', 'vanilla-calendar-day__btn_disabled');
+    cy.get(`[data-calendar-day=${todayDate}]`).should('not.have.class', 'vanilla-calendar-day__btn_disabled');
     cy.get(`.vanilla-calendar-day__btn_today:visible`).click('bottom', { force: true });
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`)
       .get('.editing-field')
diff --git a/test/cypress/e2e/example14.cy.ts b/test/cypress/e2e/example14.cy.ts
index bc391a820..36b6473c2 100644
--- a/test/cypress/e2e/example14.cy.ts
+++ b/test/cypress/e2e/example14.cy.ts
@@ -1,3 +1,5 @@
+import { format, addDay } from '@formkit/tempo';
+
 describe('Example 14 - Columns Resize by Content', () => {
   const GRID_ROW_HEIGHT = 33;
 
@@ -185,6 +187,26 @@ describe('Example 14 - Columns Resize by Content', () => {
       cy.get('.slick-cell-checkboxsel input:checked')
         .should('have.length', 0);
     });
+
+    it('should NOT be able to choose a Finish date older than today', () => {
+      // make grid editable
+      cy.get('[data-test="toggle-readonly-btn"]').click();
+
+      // 1st click on "Completed" to enable "Finish" date
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).click();
+      cy.get('.editor-completed').check();
+
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty
+
+      const yesterdayDate = format(addDay(new Date(), -1), 'YYYY-MM-DD');
+      const todayDate = format(new Date(), 'YYYY-MM-DD');
+
+      cy.get(`[data-calendar-day=${yesterdayDate}]`).should('have.class', 'vanilla-calendar-day__btn_disabled');
+      cy.get(`[data-calendar-day=${todayDate}]`).should('not.have.class', 'vanilla-calendar-day__btn_disabled');
+
+      // make grid readonly again
+      cy.get('[data-test="toggle-readonly-btn"]').click();
+    });
   });
 
   describe('Filter Predicate on "Title" column that act similarly to an SQL LIKE matcher', () => {
@@ -362,7 +384,7 @@ describe('Example 14 - Columns Resize by Content', () => {
       cy.on('window:alert', stub);
 
       cy.get('.grid14')
-        .find('.slick-header-column:nth-of-type(8).slick-header-sortable')
+        .find('.slick-header-column:nth-of-type(7).slick-header-sortable')
         .trigger('mouseover')
         .children('.slick-header-menu-button')
         .invoke('show')