786 lines
24 KiB
JavaScript
786 lines
24 KiB
JavaScript
describe('events', function () {
|
|
let clock;
|
|
let input;
|
|
let dp;
|
|
let picker;
|
|
let viewSwitch;
|
|
|
|
before(function () {
|
|
clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
|
|
input = document.createElement('input');
|
|
testContainer.appendChild(input);
|
|
({dp, picker} = createDP(input));
|
|
viewSwitch = getViewSwitch(picker);
|
|
});
|
|
|
|
after(function () {
|
|
dp.destroy();
|
|
testContainer.removeChild(input);
|
|
clock.restore();
|
|
});
|
|
|
|
describe('changeDate', function () {
|
|
it('is triggered when the selection is changed', function () {
|
|
const spyChangeDate = sinon.spy();
|
|
input.addEventListener('changeDate', spyChangeDate);
|
|
|
|
// by setDate()
|
|
dp.setDate('2/14/2020');
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by update()
|
|
input.value = '4/22/2020';
|
|
dp.update();
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by clicking on a day cell
|
|
getCells(picker)[12].click();
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by hitting enter in edit mode
|
|
dp.enterEditMode();
|
|
input.value = '2/4/2020';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by hittin enter when the picker is hidden
|
|
dp.hide();
|
|
input.value = '3/20/2020';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
input.removeEventListener('changeDate', spyChangeDate);
|
|
dp.setDate({clear: true});
|
|
});
|
|
|
|
it('is triggered when the selection is cleared', function () {
|
|
const spyChangeDate = sinon.spy();
|
|
dp.setDate('2/14/2020');
|
|
input.addEventListener('changeDate', spyChangeDate);
|
|
|
|
// by setDate()
|
|
dp.setDate({clear: true});
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
dp.setDate('2/14/2020');
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by update()
|
|
input.value = '';
|
|
dp.update();
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
dp.setDate('2/14/2020');
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by hitting enter in edit mode
|
|
dp.enterEditMode();
|
|
input.value = '';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
dp.setDate('2/14/2020');
|
|
spyChangeDate.resetHistory();
|
|
|
|
// by hittin enter when the picker is hidden
|
|
dp.hide();
|
|
input.value = '';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.calledOnce, 'to be true');
|
|
|
|
input.removeEventListener('changeDate', spyChangeDate);
|
|
});
|
|
|
|
it('is not triggered when trying to update with the current value', function () {
|
|
const spyChangeDate = sinon.spy();
|
|
dp.setDate('2/14/2020');
|
|
input.addEventListener('changeDate', spyChangeDate);
|
|
|
|
// by setDate()
|
|
dp.setDate('2/14/2020');
|
|
expect(spyChangeDate.called, 'to be false');
|
|
|
|
// by update()
|
|
dp.update();
|
|
expect(spyChangeDate.called, 'to be false');
|
|
|
|
// by clicking on a day cell
|
|
getCells(picker)[19].click();
|
|
expect(spyChangeDate.called, 'to be false');
|
|
|
|
// by hitting enter in edit mode
|
|
dp.enterEditMode();
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.called, 'to be false');
|
|
|
|
// by hittin enter when the picker is hidden
|
|
dp.hide();
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeDate.called, 'to be false');
|
|
|
|
input.removeEventListener('changeDate', spyChangeDate);
|
|
dp.setDate({clear: true});
|
|
});
|
|
});
|
|
|
|
describe('changeMonth', function () {
|
|
let spyChangeMonth;
|
|
|
|
beforeEach(function () {
|
|
dp.show();
|
|
spyChangeMonth = sinon.spy();
|
|
input.addEventListener('changeMonth', spyChangeMonth);
|
|
});
|
|
|
|
afterEach(function () {
|
|
input.removeEventListener('changeMonth', spyChangeMonth);
|
|
dp.hide();
|
|
});
|
|
|
|
it('is triggered when prevBtn or nextBtn is clicked on days view', function () {
|
|
const [prevBtn, nextBtn] = getParts(picker, ['.prev-btn', '.next-btn']);
|
|
|
|
prevBtn.click();
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
nextBtn.click();
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
|
|
spyChangeMonth.resetHistory();
|
|
|
|
// months view
|
|
viewSwitch.click();
|
|
prevBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
nextBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
// years view
|
|
viewSwitch.click();
|
|
prevBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
nextBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
// decades view
|
|
viewSwitch.click();
|
|
prevBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
nextBtn.click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
});
|
|
|
|
it('is triggered when ctrl + arrow lett/right is pressed on days view', function () {
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
|
|
spyChangeMonth.resetHistory();
|
|
|
|
// months view
|
|
viewSwitch.click();
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
// years view
|
|
viewSwitch.click();
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
// decades view
|
|
viewSwitch.click();
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
});
|
|
|
|
it('is triggered when a previous or next month\'s day is clicked', function () {
|
|
getCells(picker)[19].click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
|
|
getCells(picker)[40].click();
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
|
|
dp.setDate({clear: true});
|
|
});
|
|
|
|
it('is triggered when view date is moved to a previous or next month\'s day by arrow keys', function () {
|
|
// move to 2/1/2020
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
|
|
// go to 1/31
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
|
|
// go back to 2/1
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
|
|
spyChangeMonth.resetHistory();
|
|
|
|
// move to 2/3/2020
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
|
|
// go to 1/27
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
|
|
// go back to 2/3
|
|
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when a different month is seleced on months view', function () {
|
|
viewSwitch.click();
|
|
|
|
getCells(picker)[1].click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
viewSwitch.click();
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
});
|
|
|
|
it('is triggered when moving month by arrow keys on months view', function () {
|
|
viewSwitch.click();
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeMonth.callCount, 'to be', 1);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeMonth.callCount, 'to be', 2);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
|
|
expect(spyChangeMonth.callCount, 'to be', 3);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeMonth.callCount, 'to be', 4);
|
|
});
|
|
|
|
it('is triggered when the selection is updated to a different month by API calls', function () {
|
|
dp.setDate('2/22/2020');
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
dp.setDate('4/22/2020');
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
|
|
input.value = '3/14/2020';
|
|
dp.update();
|
|
expect(spyChangeMonth.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when the selection is cleard from a date of a different month from default view date', function () {
|
|
dp.setDate('2/22/2020');
|
|
spyChangeMonth.resetHistory();
|
|
dp.setDate({clear: true});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
dp.setDate('4/22/2020');
|
|
spyChangeMonth.resetHistory();
|
|
input.value = '';
|
|
dp.update();
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
|
|
dp.setDate('4/22/2020');
|
|
spyChangeMonth.resetHistory();
|
|
dp.enterEditMode();
|
|
input.value = '';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
});
|
|
|
|
it('is triggered before changeDate when triggered on change of the selection', function () {
|
|
const spyChangeDate = sinon.spy();
|
|
input.addEventListener('changeDate', spyChangeDate);
|
|
|
|
dp.setDate('4/22/2020');
|
|
expect(spyChangeDate.called, 'to be true');
|
|
expect(spyChangeMonth.called, 'to be true');
|
|
expect(spyChangeMonth.calledBefore(spyChangeDate), 'to be true');
|
|
|
|
input.removeEventListener('changeDate', spyChangeDate);
|
|
dp.setDate({clear: true});
|
|
});
|
|
|
|
it('is triggered when view is reset from different month from default view date on hide', function () {
|
|
picker.querySelector('.next-btn').click();
|
|
spyChangeMonth.resetHistory();
|
|
|
|
dp.hide();
|
|
expect(spyChangeMonth.calledOnce, 'to be true');
|
|
});
|
|
|
|
it('is not triggered when view date is changed to the same month of different year', function () {
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
// years view
|
|
getCells(picker)[3].click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
// months view
|
|
getCells(picker)[1].click();
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
// years view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
// months view
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeMonth.called, 'to be false');
|
|
});
|
|
});
|
|
|
|
describe('changeYear', function () {
|
|
let spyChangeYear;
|
|
|
|
beforeEach(function () {
|
|
dp.show();
|
|
spyChangeYear = sinon.spy();
|
|
input.addEventListener('changeYear', spyChangeYear);
|
|
});
|
|
|
|
afterEach(function () {
|
|
input.removeEventListener('changeYear', spyChangeYear);
|
|
dp.hide();
|
|
});
|
|
|
|
it('is triggered when prevBtn on January on days view or nextBtn on December is clicked', function () {
|
|
const [prevBtn, nextBtn] = getParts(picker, ['.prev-btn', '.next-btn']);
|
|
|
|
// move to 1/15
|
|
prevBtn.click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
prevBtn.click();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
nextBtn.click();
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when ctrl + arrow lett is pressed on January on days view or right on December', function () {
|
|
// move to 1/15
|
|
picker.querySelector('.prev-btn').click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeYear.called, 'to be false');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeYear.called, 'to be false');
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when a previous month\'s day on January or a next month\'s on December is clicked', function () {
|
|
// move to 1/15
|
|
picker.querySelector('.prev-btn').click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
getCells(picker)[19].click();
|
|
expect(spyChangeYear.called, 'to be false');
|
|
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
getCells(picker)[40].click();
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
|
|
dp.setDate({clear: true});
|
|
});
|
|
|
|
it('is triggered when prevBtn or nextBtn is clicked on months view', function () {
|
|
const [prevBtn, nextBtn] = getParts(picker, ['.prev-btn', '.next-btn']);
|
|
viewSwitch.click();
|
|
|
|
prevBtn.click();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
nextBtn.click();
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when view month is moved to a previous or next year\'s by arrow keys', function () {
|
|
viewSwitch.click();
|
|
// move to january
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
|
|
// go to last year's December
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
// go back to January
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
|
|
spyChangeYear.resetHistory();
|
|
|
|
// go to last year's September
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
// go back to January
|
|
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when a different year/decade is seleced on years/decades view', function () {
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
|
|
// decades view
|
|
getCells(picker)[0].click();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
// years view
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
// decades view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
// years view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when moving year/decade by arrow keys on years/decades view', function () {
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeYear.callCount, 'to be', 1);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeYear.callCount, 'to be', 2);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
|
|
expect(spyChangeYear.callCount, 'to be', 3);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeYear.callCount, 'to be', 4);
|
|
|
|
viewSwitch.click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
|
|
expect(spyChangeYear.callCount, 'to be', 1);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
|
|
expect(spyChangeYear.callCount, 'to be', 2);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
|
|
expect(spyChangeYear.callCount, 'to be', 3);
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeYear.callCount, 'to be', 4);
|
|
});
|
|
|
|
it('is triggered when the selection is updated to a different year by API calls', function () {
|
|
dp.setDate('2/22/2020');
|
|
expect(spyChangeYear.called, 'to be false');
|
|
|
|
dp.setDate('4/22/2022');
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
input.value = '3/14/2018';
|
|
dp.update();
|
|
expect(spyChangeYear.calledTwice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when the selection is cleard from a date of a different year from default view date', function () {
|
|
dp.setDate('2/22/2020');
|
|
spyChangeYear.resetHistory();
|
|
dp.setDate({clear: true});
|
|
expect(spyChangeYear.called, 'to be false');
|
|
|
|
dp.setDate('4/22/2022');
|
|
spyChangeYear.resetHistory();
|
|
input.value = '';
|
|
dp.update();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
|
|
dp.setDate('4/22/2022');
|
|
spyChangeYear.resetHistory();
|
|
dp.enterEditMode();
|
|
input.value = '';
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
});
|
|
|
|
it('is triggered before changeDate when triggered on change of the selection', function () {
|
|
const spyChangeDate = sinon.spy();
|
|
input.addEventListener('changeDate', spyChangeDate);
|
|
|
|
dp.setDate('4/22/2022');
|
|
expect(spyChangeDate.called, 'to be true');
|
|
expect(spyChangeYear.called, 'to be true');
|
|
expect(spyChangeYear.calledBefore(spyChangeDate), 'to be true');
|
|
|
|
input.removeEventListener('changeDate', spyChangeDate);
|
|
dp.setDate({clear: true});
|
|
});
|
|
|
|
it('is triggered when view is reset from different year from default view date on hide', function () {
|
|
picker.querySelector('.prev-btn').click();
|
|
picker.querySelector('.prev-btn').click();
|
|
spyChangeYear.resetHistory();
|
|
|
|
dp.hide();
|
|
expect(spyChangeYear.calledOnce, 'to be true');
|
|
});
|
|
});
|
|
|
|
describe('changeView', function () {
|
|
let spyChangeView;
|
|
|
|
beforeEach(function () {
|
|
dp.show();
|
|
spyChangeView = sinon.spy();
|
|
input.addEventListener('changeView', spyChangeView);
|
|
});
|
|
|
|
afterEach(function () {
|
|
input.removeEventListener('changeView', spyChangeView);
|
|
dp.hide();
|
|
});
|
|
|
|
it('is triggered when view is changed by clicking view switch', function () {
|
|
viewSwitch.click();
|
|
expect(spyChangeView.calledOnce, 'to be true');
|
|
|
|
// on months view
|
|
viewSwitch.click();
|
|
expect(spyChangeView.calledTwice, 'to be true');
|
|
|
|
// on years view
|
|
viewSwitch.click();
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
// on decades view
|
|
viewSwitch.click();
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when view is changed by pressing ctrl + arrow up', function () {
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
|
|
expect(spyChangeView.called, 'to be false');
|
|
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
|
|
expect(spyChangeView.calledOnce, 'to be true');
|
|
|
|
// on months view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
|
|
expect(spyChangeView.calledTwice, 'to be true');
|
|
|
|
// on years view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
// on decades view
|
|
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when view is changed by seleting a decade/year/month on decades/years/months view', function () {
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
spyChangeView.resetHistory();
|
|
|
|
// on decades view
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeView.calledOnce, 'to be true');
|
|
|
|
// on years view
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeView.calledTwice, 'to be true');
|
|
|
|
// on months view
|
|
getCells(picker)[2].click();
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
// on days view
|
|
getCells(picker)[12].click();
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
viewSwitch.click();
|
|
spyChangeView.resetHistory();
|
|
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeView.calledOnce, 'to be true');
|
|
|
|
// on decades view
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeView.calledTwice, 'to be true');
|
|
|
|
// on years view
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
// on months view
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
|
|
// on days view
|
|
simulant.fire(input, 'keydown', {key: 'Enter'});
|
|
expect(spyChangeView.calledThrice, 'to be true');
|
|
});
|
|
|
|
it('is triggered when view is reset on hide', function () {
|
|
viewSwitch.click();
|
|
spyChangeView.resetHistory();
|
|
|
|
dp.hide();
|
|
expect(spyChangeView.calledOnce, 'to be true');
|
|
});
|
|
});
|
|
|
|
describe('show', function () {
|
|
let spyShow;
|
|
|
|
beforeEach(function () {
|
|
dp.show();
|
|
spyShow = sinon.spy();
|
|
input.addEventListener('show', spyShow);
|
|
});
|
|
|
|
afterEach(function () {
|
|
input.removeEventListener('show', spyShow);
|
|
dp.hide();
|
|
});
|
|
|
|
it('is triggered when the picker becomes visible', function () {
|
|
// not triggered if already shown
|
|
dp.show();
|
|
expect(spyShow.called, 'to be false');
|
|
|
|
dp.hide();
|
|
// by API call
|
|
dp.show();
|
|
expect(spyShow.calledOnce, 'to be true');
|
|
|
|
dp.hide();
|
|
input.blur();
|
|
// by getting focus
|
|
input.focus();
|
|
expect(spyShow.calledTwice, 'to be true');
|
|
|
|
// by toggling visibility by Esc key
|
|
simulant.fire(input, 'keydown', {key: 'Escape'});
|
|
expect(spyShow.calledTwice, 'to be true');
|
|
simulant.fire(input, 'keydown', {key: 'Escape'});
|
|
expect(spyShow.calledThrice, 'to be true');
|
|
});
|
|
});
|
|
|
|
describe('hide', function () {
|
|
let spyHide;
|
|
|
|
beforeEach(function () {
|
|
dp.show();
|
|
spyHide = sinon.spy();
|
|
input.addEventListener('hide', spyHide);
|
|
});
|
|
|
|
afterEach(function () {
|
|
input.removeEventListener('hide', spyHide);
|
|
dp.hide();
|
|
});
|
|
|
|
it('is triggered when the picker becomes hidden', function () {
|
|
// by API call
|
|
dp.hide();
|
|
expect(spyHide.callCount, 'to be', 1);
|
|
|
|
dp.show();
|
|
// by clicking outside
|
|
simulant.fire(testContainer, 'mousedown');
|
|
expect(spyHide.callCount, 'to be', 2);
|
|
|
|
dp.show();
|
|
// by pressing tab key
|
|
simulant.fire(input, 'keydown', {key: 'Tab'});
|
|
expect(spyHide.callCount, 'to be', 3);
|
|
|
|
dp.show();
|
|
// by toggling visibility by Esc key
|
|
simulant.fire(input, 'keydown', {key: 'Escape'});
|
|
expect(spyHide.callCount, 'to be', 4);
|
|
});
|
|
});
|
|
|
|
describe('event object', function () {
|
|
const stubChangeDate = (ev) => {
|
|
eventObj = ev;
|
|
};
|
|
let eventObj;
|
|
|
|
before(function () {
|
|
input.addEventListener('changeDate', stubChangeDate);
|
|
dp.setDate('2/14/2020');
|
|
});
|
|
|
|
after(function () {
|
|
input.removeEventListener('changeDate', stubChangeDate);
|
|
});
|
|
|
|
it('is a custom event object', function () {
|
|
expect(eventObj, 'to be a', CustomEvent);
|
|
});
|
|
|
|
it('has the result of getDate() in detail.date', function () {
|
|
expect(eventObj.detail.date, 'to equal', dp.getDate());
|
|
});
|
|
|
|
it('has a date object of view date in detail.viewDate', function () {
|
|
expect(eventObj.detail.viewDate, 'to be a date');
|
|
expect(eventObj.detail.viewDate.getTime(), 'to be', dateValue(2020, 1, 14));
|
|
});
|
|
|
|
it('has view mode of current view in detail.viewId', function () {
|
|
expect(eventObj.detail.viewId, 'to be', 0);
|
|
});
|
|
|
|
it('has the Datepicker instance in detail.datepicker', function () {
|
|
expect(eventObj.detail.datepicker, 'to be', dp);
|
|
});
|
|
});
|
|
});
|