Skip to content

Commit

Permalink
chore: add missing Cypress tests for calendar editor minDate (#1734)
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
ghiscoding authored Nov 8, 2024
1 parent b43b53b commit c2b54ba
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 1 deletion.
9 changes: 9 additions & 0 deletions test/cypress/e2e/example12.cy.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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')
Expand Down
24 changes: 23 additions & 1 deletion test/cypress/e2e/example14.cy.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { format, addDay } from '@formkit/tempo';

describe('Example 14 - Columns Resize by Content', () => {
const GRID_ROW_HEIGHT = 33;

Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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')
Expand Down

0 comments on commit c2b54ba

Please sign in to comment.