Skip to content

Commit

Permalink
feat: add disabledDays prop to Calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
@HellWolf93
HellWolf93 committed Jul 10, 2022
1 parent 05d173e commit 502b83a
Show file tree
Hide file tree
Showing 25 changed files with 451 additions and 230 deletions.
41 changes: 41 additions & 0 deletions integration/specs/Calendar/calendar-11.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
const PageCalendar = require('../../../src/components/Calendar/pageObject');

const CALENDAR = '#calendar-11';

describe('Calendar', () => {
beforeAll(async () => {
await browser.url('/#!/Calendar/11');
});
beforeEach(async () => {
await browser.refresh();
const component = await $(CALENDAR);
await component.waitForExist();
});
it('should set range initial date and end date button elements as selected', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(2);
await calendar.clickRightMonthDay(16);
await expect(await calendar.isLeftMonthDaySelected(2)).toBe(true);
await expect(await calendar.isRightMonthDaySelected(16)).toBe(true);
});
it('should set range initial and end dates when using keyboard navigation', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthSelectYear();
await browser.keys('Escape');
await browser.keys('Tab');
await browser.keys('ArrowUp');
await browser.keys('ArrowLeft');
await browser.keys('Enter');
await browser.keys('PageDown');
await browser.keys('ArrowDown');
await browser.keys('Enter');
await expect(await calendar.isLeftMonthDaySelected(15)).toBe(true);
await expect(await calendar.isRightMonthDaySelected(22)).toBe(true);
});
it('should disable all days beyond the first disabled day when selecting range', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickRightMonthDay(14);
await expect(await calendar.isRightMonthDayEnabled(23)).toBe(false);
await expect(await calendar.isRightMonthDayEnabled(24)).toBe(false);
});
});
21 changes: 3 additions & 18 deletions integration/specs/Calendar/calendar-5.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,9 @@ describe('Calendar', () => {
const component = await $(CALENDAR);
await component.waitForExist();
});
it('should set range initial date and end date button elements as selected', async () => {
it('should disable the dates passed in `disabledDays`', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickDay(2);
await calendar.clickDay(16);
await expect(await calendar.isDaySelected(2)).toBe(true);
await expect(await calendar.isDaySelected(16)).toBe(true);
});
it('should set range initial and end dates when using keyboard navigation', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickSelectYear();
await browser.keys('Escape');
await browser.keys('Tab');
await browser.keys('ArrowLeft');
await browser.keys('Enter');
await browser.keys('ArrowDown');
await browser.keys('ArrowDown');
await browser.keys('Enter');
await expect(await calendar.isDaySelected(2)).toBe(true);
await expect(await calendar.isDaySelected(16)).toBe(true);
await expect(await calendar.isDayEnabled(20)).toBe(false);
await expect(await calendar.isDayEnabled(21)).toBe(true);
});
});
201 changes: 13 additions & 188 deletions integration/specs/Calendar/calendar-7.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,199 +11,24 @@ describe('Calendar', () => {
const component = await $(CALENDAR);
await component.waitForExist();
});
it('should change months when clicked on left and right arrows', async () => {
it('should set range initial date and end date button elements as selected', async () => {
const calendar = await PageCalendar(CALENDAR);
await expect(await calendar.getLeftSelectedMonth()).toBe('December');
await expect(await calendar.getRightSelectedMonth()).toBe('January');
await calendar.clickPrevMonthButton();
await expect(await calendar.getLeftSelectedMonth()).toBe('November');
await expect(await calendar.getRightSelectedMonth()).toBe('December');
await calendar.clickNextMonthButton();
await calendar.clickNextMonthButton();
await expect(await calendar.getLeftSelectedMonth()).toBe('January');
await expect(await calendar.getRightSelectedMonth()).toBe('February');
await calendar.clickDay(2);
await calendar.clickDay(16);
await expect(await calendar.isDaySelected(2)).toBe(true);
await expect(await calendar.isDaySelected(16)).toBe(true);
});
it('should select the right day button element', async () => {
it('should set range initial and end dates when using keyboard navigation', async () => {
const calendar = await PageCalendar(CALENDAR);
await expect(await calendar.getLeftMonthSelectedDay()).toBe('11');
await expect(await calendar.getRightMonthSelectedDay()).toBe(undefined);
await calendar.clickLeftMonthDay(5);
await expect(await calendar.getLeftMonthSelectedDay()).toBe('5');
await expect(await calendar.getRightMonthSelectedDay()).toBe(undefined);
await calendar.clickRightMonthDay(6);
await expect(await calendar.getLeftMonthSelectedDay()).toBe(undefined);
await expect(await calendar.getRightMonthSelectedDay()).toBe('6');
});
it('should focus the correct day in left month when an arrow key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
await browser.keys('ArrowUp');
await expect(await calendar.isLeftMonthDayFocused(4)).toBe(true);
await browser.keys('ArrowDown');
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
await browser.keys('ArrowLeft');
await expect(await calendar.isLeftMonthDayFocused(10)).toBe(true);
await browser.keys('ArrowRight');
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
});
it('should focus the correct day in right month when an arrow key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickRightMonthDay(11);
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
await browser.keys('ArrowUp');
await expect(await calendar.isRightMonthDayFocused(4)).toBe(true);
await browser.keys('ArrowDown');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
await browser.keys('ArrowLeft');
await expect(await calendar.isRightMonthDayFocused(10)).toBe(true);
await browser.keys('ArrowRight');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
});
it('should focus the first day of the week in left month when HOME key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await browser.keys('Home');
await expect(await calendar.isLeftMonthDayFocused(8)).toBe(true);
});
it('should focus the first day of the week in right month when HOME key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickRightMonthDay(11);
await browser.keys('Home');
await expect(await calendar.isRightMonthDayFocused(5)).toBe(true);
});
it('should focus the last day of the week in left month when END key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await browser.keys('End');
await expect(await calendar.isLeftMonthDayFocused(14)).toBe(true);
});
it('should focus the last day of the week in right month when END key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickRightMonthDay(8);
await browser.keys('End');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
});
it('should change to the previous month when is in the first day of a month and press LEFT OR UP arrow keys', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(1);
await browser.keys('ArrowLeft');
await expect(await calendar.getLeftSelectedMonth()).toBe('November');
await expect(await calendar.isLeftMonthDayFocused(30)).toBe(true);
await calendar.clickRightMonthDay(1);
await expect(await calendar.isLeftMonthDayFocused(30)).toBe(true);
});
it('should change to next month when is in the last day of a month and press RIGHT OR DOWN arrow keys', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(31);
await browser.keys('ArrowRight');
await expect(await calendar.isRightMonthDayFocused(1)).toBe(true);
await calendar.clickRightMonthDay(31);
await browser.keys('ArrowRight');
await expect(await calendar.getLeftSelectedMonth()).toBe('January');
await expect(await calendar.getRightSelectedMonth()).toBe('February');
await expect(await calendar.isRightMonthDayFocused(1)).toBe(true);
});
it('should change to the previous month when PAGEUP key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickRightMonthDay(11);
await browser.keys('PageUp');
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
await browser.keys('PageUp');
await expect(await calendar.getLeftSelectedMonth()).toBe('November');
await expect(await calendar.getRightSelectedMonth()).toBe('December');
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
});
it('should change to next month when PAGEDOWN key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await browser.keys('PageDown');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
await browser.keys('PageDown');
await expect(await calendar.getLeftSelectedMonth()).toBe('January');
await expect(await calendar.getRightSelectedMonth()).toBe('February');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
});
it('should change to the previous year when ALT + PAGEUP keys are pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await browser.keys(['Alt', 'PageUp']);
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
await expect(await calendar.getLeftSelectedMonth()).toBe('December');
await expect(await calendar.getLeftMonthSelectedYear()).toBe('2018');
await expect(await calendar.getRightSelectedMonth()).toBe('January');
await expect(await calendar.getRightMonthSelectedYear()).toBe('2019');
});
it('should select a day when press ENTER key while is focused', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(11);
await browser.keys('ArrowLeft');
await browser.keys('Enter');
await expect(await calendar.isLeftMonthDaySelected(10)).toBe(true);
await calendar.clickRightMonthDay(11);
await browser.keys('ArrowLeft');
await browser.keys('Enter');
await expect(await calendar.isRightMonthDaySelected(10)).toBe(true);
});
it('should focus the selected day when tab reach days table', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthSelectYear();
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(false);
await browser.keys('Escape');
await browser.keys('Tab');
await expect(await calendar.isLeftMonthDayFocused(11)).toBe(true);
await calendar.clickRightMonthDay(11);
await calendar.clickRightMonthSelectYear();
await expect(await calendar.isRightMonthDayFocused(11)).toBe(false);
await calendar.clickSelectYear();
await browser.keys('Escape');
await browser.keys('Tab');
await expect(await calendar.isRightMonthDayFocused(11)).toBe(true);
});
it('should change to next year when ALT + PAGEDOWN keys are pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickLeftMonthDay(10);
await browser.keys(['Alt', 'PageDown']);
await expect(await calendar.isLeftMonthDayFocused(10)).toBe(true);
await expect(await calendar.getLeftSelectedMonth()).toBe('December');
await expect(await calendar.getLeftMonthSelectedYear()).toBe('2020');
await expect(await calendar.getRightSelectedMonth()).toBe('January');
await expect(await calendar.getRightMonthSelectedYear()).toBe('2021');
});
it('should navigate on the header when using arrow keys', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickPrevMonthButton();
await expect(await calendar.isPrevMonthButtonFocused()).toBe(true);
await expect(await calendar.isLeftYearSelectFocused()).toBe(false);
await expect(await calendar.isRightYearSelectFocused()).toBe(false);
await expect(await calendar.isNextMonthButtonFocused()).toBe(false);
await browser.keys('ArrowLeft');
await expect(await calendar.isPrevMonthButtonFocused()).toBe(true);
await expect(await calendar.isLeftYearSelectFocused()).toBe(false);
await expect(await calendar.isRightYearSelectFocused()).toBe(false);
await expect(await calendar.isNextMonthButtonFocused()).toBe(false);
await browser.keys('ArrowRight');
await expect(await calendar.isPrevMonthButtonFocused()).toBe(false);
await expect(await calendar.isLeftYearSelectFocused()).toBe(true);
await expect(await calendar.isRightYearSelectFocused()).toBe(false);
await expect(await calendar.isNextMonthButtonFocused()).toBe(false);
await browser.keys('ArrowRight');
await expect(await calendar.isPrevMonthButtonFocused()).toBe(false);
await expect(await calendar.isLeftYearSelectFocused()).toBe(false);
await expect(await calendar.isRightYearSelectFocused()).toBe(true);
await expect(await calendar.isNextMonthButtonFocused()).toBe(false);
await browser.keys('ArrowRight');
await expect(await calendar.isPrevMonthButtonFocused()).toBe(false);
await expect(await calendar.isLeftYearSelectFocused()).toBe(false);
await expect(await calendar.isRightYearSelectFocused()).toBe(false);
await expect(await calendar.isNextMonthButtonFocused()).toBe(true);
});
it('should move from calendar controls to days when TAB key is pressed', async () => {
const calendar = await PageCalendar(CALENDAR);
await calendar.clickPrevMonthButton();
await expect(await calendar.isLeftMonthDayFocused(1)).toBe(false);
await browser.keys('Tab');
await expect(await calendar.isLeftMonthDayFocused(1)).toBe(true);
await browser.keys('Tab');
await expect(await calendar.isLeftMonthDayFocused(1)).toBe(false);
await browser.keys('Enter');
await browser.keys('ArrowDown');
await browser.keys('ArrowDown');
await browser.keys('Enter');
await expect(await calendar.isDaySelected(2)).toBe(true);
await expect(await calendar.isDaySelected(16)).toBe(true);
});
});

0 comments on commit 502b83a

Please sign in to comment.