| import './index'; |
| import { assert } from 'chai'; |
| import { CalendarSk } from './calendar-sk'; |
| import { |
| setUpElementUnderTest, |
| eventPromise, |
| } from '../../../infra-sk/modules/test_util'; |
| |
| const container = document.createElement('div'); |
| document.body.appendChild(container); |
| |
| afterEach(() => { |
| container.innerHTML = ''; |
| }); |
| |
| describe('calendar-sk', () => { |
| const newInstance = setUpElementUnderTest<CalendarSk>('calendar-sk'); |
| let calendarSk: CalendarSk; |
| beforeEach(() => { |
| calendarSk = newInstance(); |
| calendarSk.displayDate = new Date(2020, 4, 21); |
| }); |
| |
| describe('event', () => { |
| it('fires when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(async () => { |
| const event = eventPromise<CustomEvent<Date>>('change'); |
| calendarSk |
| .querySelector<HTMLButtonElement>('button[data-date="19"]')! |
| .click(); |
| |
| const detail = (await event).detail; |
| |
| assert.equal( |
| new Date(2020, 4, 19).toDateString(), |
| detail.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 19, 'Selected date has changed.'); |
| })); |
| }); |
| describe('year', () => { |
| it('decrements when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.querySelector<HTMLButtonElement>('#previous-year')!.click(); |
| |
| const year = calendarSk.querySelector<HTMLHeadingElement>( |
| '#calendar-year', |
| )!.innerText; |
| assert.equal(year, '2019', 'Year has changed.'); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| it('increments when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.querySelector<HTMLButtonElement>('#next-year')!.click(); |
| |
| const year = calendarSk.querySelector<HTMLHeadingElement>( |
| '#calendar-year', |
| )!.innerText; |
| assert.equal(year, '2021', 'Year has changed.'); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| }); |
| describe('month', () => { |
| it('decrements when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.querySelector<HTMLButtonElement>('#previous-month')!.click(); |
| |
| const year = calendarSk.querySelector<HTMLHeadingElement>( |
| '#calendar-month', |
| )!.innerText; |
| assert.equal(year, 'April', 'Month has changed.'); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| it('increments when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.querySelector<HTMLButtonElement>('#next-month')!.click(); |
| |
| const year = calendarSk.querySelector<HTMLHeadingElement>( |
| '#calendar-month', |
| )!.innerText; |
| assert.equal(year, 'June', 'Month has changed.'); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| }); |
| describe('keyboard', () => { |
| it('moves to next day when ArrowRight is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'ArrowRight' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 4, 22).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 22, 'Selected date has changed.'); |
| })); |
| it('moves to previous day when ArrowLeft is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'ArrowLeft' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 4, 20).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 20, 'Selected date has changed.'); |
| })); |
| it('moves to previous week when ArrowUp is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'ArrowUp' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 4, 14).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 14, 'Selected date has changed.'); |
| })); |
| it('moves to next week when ArrowDown is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'ArrowDown' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 4, 28).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 28, 'Selected date has changed.'); |
| })); |
| |
| it('moves to previous month when PageUp is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'PageUp' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 3, 21).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| it('moves to next month when PageDown is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => { |
| calendarSk.keyboardHandler( |
| new KeyboardEvent('keydown', { code: 'PageDown' }), |
| ); |
| |
| assert.equal( |
| new Date(2020, 5, 21).toDateString(), |
| calendarSk.displayDate.toDateString(), |
| 'Date has changed.', |
| ); |
| assert.equal(getSelectedDate(), 21, 'Selected date has not changed.'); |
| })); |
| }); |
| |
| const getSelectedDate = () => +calendarSk.querySelector<HTMLButtonElement>( |
| '[aria-selected="true"]', |
| )!.innerText; |
| }); |