fix: setting date picker should always work (#369)

ghiscoding · Jun 29, 2024 · 8f68f66 · 8f68f66
1 parent c5d16e2
commit 8f68f66
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 9 deletions.
diff --git a/src/examples/slickgrid/Example6.tsx b/src/examples/slickgrid/Example6.tsx
@@ -177,8 +177,9 @@ class Example6 extends React.Component<Props, State> {
   }
 
   getGridOptions() {
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     return {
       enableFiltering: true,
@@ -376,8 +377,9 @@ class Example6 extends React.Component<Props, State> {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.reactGrid?.filterService.updateFilters([
@@ -398,8 +400,9 @@ class Example6 extends React.Component<Props, State> {
   }
 
   resetToOriginalPresets() {
-    const presetLowestDay = tempoFormat(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD');
+    const currentYear = new Date().getFullYear();
+    const presetLowestDay = `${currentYear}-01-01`;
+    const presetHighestDay = `${currentYear}-02-15`;
 
     this.reactGrid.filterService.updateFilters([
       // you can use OperatorType or type them as string, e.g.: operator: 'EQ'

diff --git a/test/cypress/e2e/example06.cy.ts b/test/cypress/e2e/example06.cy.ts
@@ -2,8 +2,10 @@ import { addDay, format } from '@formkit/tempo';
 
 import { removeWhitespaces } from '../plugins/utilities';
 
-const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
-const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
+const currentYear = new Date().getFullYear();
+const presetLowestDay = `${currentYear}-01-01`;
+const presetHighestDay = `${currentYear}-02-15`;
+
 function removeSpaces(textS) {
   return `${textS}`.replace(/\s+/g, '');
 }
@@ -398,6 +400,34 @@ describe('Example 6 - GraphQL Grid', () => {
       });
   });
 
+  it('should open Date picker and expect date range between 01-Jan to 15-Feb', () => {
+    cy.get('.search-filter.filter-finish.filled')
+      .click();
+
+    cy.get('.vanilla-calendar-column:nth(0) .vanilla-calendar-month')
+      .should('have.text', 'January');
+
+    cy.get('.vanilla-calendar-column:nth(1) .vanilla-calendar-month')
+      .should('have.text', 'February');
+
+    cy.get('.vanilla-calendar-year:nth(0)')
+      .should('have.text', currentYear);
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .should('have.length', 46);
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .first()
+      .should('have.text', '1');
+
+    cy.get('.vanilla-calendar:visible')
+      .find('.vanilla-calendar-day__btn_selected')
+      .last()
+      .should('have.text', '15');
+  });
+
   describe('Set Dynamic Sorting', () => {
     it('should use slower server wait delay to test loading widget', () => {
       cy.get('[data-test="server-delay"]')
@@ -448,6 +478,19 @@ describe('Example 6 - GraphQL Grid', () => {
             totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
         });
     });
+
+    it('should open Date picker and no longer expect date range selection in the picker', () => {
+      cy.get('.search-filter.filter-finish')
+        .should('not.have.class', 'filled')
+        .click();
+
+      cy.get('.vanilla-calendar-year:nth(0)')
+        .should('have.text', currentYear);
+
+      cy.get('.vanilla-calendar:visible')
+        .find('.vanilla-calendar-day__btn_selected')
+        .should('not.exist');
+    });
   });
 
   describe('Translate by Language', () => {
@@ -538,7 +581,10 @@ describe('Example 6 - GraphQL Grid', () => {
         .click({ force: true });
     });
 
-    it('should switch locale to French', () => {
+    it('should switch locale from English to French', () => {
+      cy.get('[data-test=selected-locale]')
+        .should('contain', 'en.json');
+
       cy.get('[data-test=language-button]')
         .click();