second commit

This commit is contained in:
2024-12-27 22:31:23 +09:00
parent 2353324570
commit 10a0f110ca
8819 changed files with 1307198 additions and 28 deletions

View File

@ -0,0 +1,293 @@
describe('keyboard operation - arrow-down', function () {
const replaceInput = () => {
const newInput = document.createElement('input');
testContainer.replaceChild(newInput, input);
return newInput;
};
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
it('shows the picker if it is hidden', function () {
const {dp, picker} = createDP(input);
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(isVisible(picker), 'to be true');
dp.destroy();
});
it('moves the view date/month/year/decade to 1 step down side', function () {
const clock = sinon.useFakeTimers({now: new Date(2044, 5, 15)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', 'June 2044');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
expect(cells[24].textContent, 'to be', '22');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2044');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2040-2049');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
expect(cells[9].textContent, 'to be', '2048');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
expect(cells[9].textContent, 'to be', '2080');
dp.destroy();
clock.restore();
});
it('also changes month of the days view if the current view date >= last 7 days of month', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 1, 23)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', 'March 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
expect(cells[0].textContent, 'to be', '1');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 1, 26)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', 'March 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
expect(cells[3].textContent, 'to be', '4');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 1, 29)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', 'March 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
expect(cells[6].textContent, 'to be', '7');
dp.destroy();
clock.restore();
});
it('also changes year of the months view if the current view month is Sep/Oct/Npv/Dec', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 8, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2021');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 9, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2021');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 10, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2021');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 11, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2021');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
dp.destroy();
clock.restore();
});
it('also changes decade of the years view if the current view year is the first 4 of the decade', function () {
let clock = sinon.useFakeTimers({now: new Date(2016, 1, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2020');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2018, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
expect(cells[3].textContent, 'to be', '2022');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2019, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(cells[4].textContent, 'to be', '2023');
dp.destroy();
clock.restore();
});
it('also changes century of the decades view if the current view decade is the first 4 of the century', function () {
let clock = sinon.useFakeTimers({now: new Date(1960, 1, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2000');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(1980, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
expect(cells[3].textContent, 'to be', '2020');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(1990, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(cells[4].textContent, 'to be', '2030');
dp.destroy();
clock.restore();
});
});

View File

@ -0,0 +1,255 @@
describe('keyboard operation - arrow-left', function () {
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
it('moves the view date/month/year/decade to 1 step left side', function () {
const clock = sinon.useFakeTimers({now: new Date(2024, 5, 12)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', 'June 2024');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[16]]);
expect(cells[16].textContent, 'to be', '11');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2024');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(cells[4].textContent, 'to be', '2023');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(cells[2].textContent, 'to be', '2010');
clock.restore();
dp.destroy();
});
it('also changes month of the days view if the current view date is the 1st', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 2, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[34]]);
expect(cells[34].textContent, 'to be', '29');
dp.destroy();
clock.restore();
});
it('also changes year of the months view if the current view month is January', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 0, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2019');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[11]]);
dp.destroy();
clock.restore();
});
it('also changes decade of the years view if the current view year is the start of the decade', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2010-2019');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '2019');
dp.destroy();
clock.restore();
});
it('also changes century of the decades view if the current view decade is the start of the century', function () {
const clock = sinon.useFakeTimers({now: new Date(2000, 1, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '1900-1990');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '1990');
dp.destroy();
clock.restore();
});
it('does nothing if the view date is 0000-01-01', function () {
input.value = '01/01/0000';
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', 'January 0');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
expect(cells[6].textContent, 'to be', '1');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '0');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '0-9');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '0');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '0-90');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '0');
dp.destroy();
});
describe('with control', function () {
it('functions as the shortcut key of the prev button', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', 'March 2020');
// view date is changed to the same day of the previous month
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[21]]);
expect(cells[21].textContent, 'to be', '22');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2019');
// view date is changed to the same month of the previous year
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(filterCells(cells, '.selected'), 'to equal', []);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2009');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '2009');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '1900-1990');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '1900');
dp.destroy();
clock.reset();
});
});
describe('with meta', function () {
it('functions as a substitute for the "+ctrl" key combination', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
expect(viewSwitch.textContent, 'to be', 'March 2020');
// view date is changed to the same day of the previous month
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[21]]);
expect(cells[21].textContent, 'to be', '22');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2019');
// view date is changed to the same month of the previous year
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(filterCells(cells, '.selected'), 'to equal', []);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2009');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '2009');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
expect(viewSwitch.textContent, 'to be', '1900-1990');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '1900');
dp.destroy();
clock.restore();
});
});
});

View File

@ -0,0 +1,215 @@
describe('keyboard operation - arrow-right', function () {
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
it('moves the view date/month/year/decade to 1 step right side', function () {
const clock = sinon.useFakeTimers({now: new Date(2024, 5, 12)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', 'June 2024');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[18].textContent, 'to be', '13');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2024');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
expect(cells[6].textContent, 'to be', '2025');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(cells[4].textContent, 'to be', '2030');
dp.destroy();
clock.restore();
});
it('also changes month of the days view if the current view date is the last day', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 1, 29)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', 'March 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
expect(cells[0].textContent, 'to be', '1');
dp.destroy();
clock.restore();
});
it('also changes year of the months view if the current view month is December', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 11, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2021');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
dp.destroy();
clock.restore();
});
it('also changes decade of the years view if the current view year is the end of the decade', function () {
const clock = sinon.useFakeTimers({now: new Date(2019, 1, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2020');
dp.destroy();
clock.restore();
});
it('also changes century of the decades view if the current view decade is the end of the century', function () {
const clock = sinon.useFakeTimers({now: new Date(1990, 1, 1)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2000');
dp.destroy();
clock.restore();
});
describe('with control', function () {
it('functions as the shortcut key of the next button', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', 'May 2020');
// view date is changed to the same day of the next month
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[26]]);
expect(cells[26].textContent, 'to be', '22');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2021');
// view date is changed to the same month of the previous year
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(filterCells(cells, '.selected'), 'to equal', []);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2030-2039');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(cells[2].textContent, 'to be', '2031');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2100-2190');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(cells[4].textContent, 'to be', '2130');
dp.destroy();
clock.reset();
});
});
describe('with meta', function () {
it('functions as a substitute for the "+ctrl" key combination', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
expect(viewSwitch.textContent, 'to be', 'May 2020');
// view date is changed to the same day of the next month
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[26]]);
expect(cells[26].textContent, 'to be', '22');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2021');
// view date is changed to the same month of the previous year
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[4]]);
expect(filterCells(cells, '.selected'), 'to equal', []);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2030-2039');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(cells[2].textContent, 'to be', '2031');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2100-2190');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[2]]);
expect(cells[4].textContent, 'to be', '2130');
dp.destroy();
clock.restore();
});
});
});

View File

@ -0,0 +1,461 @@
describe('keyboard operation - arrow-up', function () {
const replaceInput = () => {
const newInput = document.createElement('input');
testContainer.replaceChild(newInput, input);
return newInput;
};
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
it('moves the view date/month/year/decade to 1 step up side', function () {
const clock = sinon.useFakeTimers({now: new Date(2044, 5, 15)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'June 2044');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '8');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2044');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2040-2049');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2040');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2000');
dp.destroy();
clock.restore();
});
it('also changes month of the days view if the current view date <= 7th', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 2, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[28]]);
expect(cells[28].textContent, 'to be', '23');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 2, 4)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[31]]);
expect(cells[31].textContent, 'to be', '26');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 2, 7)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[34]]);
expect(cells[34].textContent, 'to be', '29');
dp.destroy();
clock.restore();
});
it('also changes year of the months view if the current view month is Jan/Feb/Mar/Apr', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 0, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2019');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[8]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2019');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 2, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2019');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 3, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2019');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[11]]);
dp.destroy();
clock.restore();
});
it('also changes decade of the years view if the current view year is the first 4 of the decade', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2010-2019');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[7]]);
expect(cells[7].textContent, 'to be', '2016');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2022, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2010-2019');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
expect(cells[9].textContent, 'to be', '2018');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2023, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '2010-2019');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '2019');
dp.destroy();
clock.restore();
});
it('also changes century of the decades view if the current view decade is the first 4 of the century', function () {
let clock = sinon.useFakeTimers({now: new Date(2000, 1, 1)});
let {dp, picker} = createDP(input);
let viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '1900-1990');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[7]]);
expect(cells[7].textContent, 'to be', '1960');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '1900-1990');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
expect(cells[9].textContent, 'to be', '1980');
dp.destroy();
clock.restore();
input = replaceInput();
clock = sinon.useFakeTimers({now: new Date(2030, 1, 1)});
({dp, picker} = createDP(input));
viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '1900-1990');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
expect(cells[10].textContent, 'to be', '1990');
dp.destroy();
clock.restore();
});
it('does nothing if the current view date <= 0000-01-07 in the days view', function () {
input.value = '01/01/0000';
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'January 0');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
expect(cells[6].textContent, 'to be', '1');
dp.setDate('01/07/0000');
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'January 0');
expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]);
expect(cells[12].textContent, 'to be', '7');
dp.destroy();
});
it('does nothing if the current view month <= April 0000 in the months view', function () {
input.value = '01/01/0000';
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '0');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
dp.setDate('04/07/0000');
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '0');
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
dp.destroy();
});
it('does nothing if the current view year <= 0004 in the years view', function () {
input.value = '01/01/0000';
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '0-9');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '0');
dp.setDate('04/07/0004');
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '0-9');
expect(filterCells(cells, '.focused'), 'to equal', [cells[5]]);
expect(cells[5].textContent, 'to be', '4');
dp.destroy();
});
it('does nothing if the current view decade <= 0040 in the decades view', function () {
input.value = '01/01/0000';
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '0-90');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '0');
dp.setDate('04/07/0047');
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', '0-90');
expect(filterCells(cells, '.focused'), 'to equal', [cells[5]]);
expect(cells[5].textContent, 'to be', '40');
dp.destroy();
});
describe('with control', function () {
it('functions as the shortcut key of the view switch', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2020');
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
expect(cells[3].textContent, 'to be', '2020');
// does nothig if the view has reached to the max view
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2090');
dp.destroy();
clock.reset();
});
});
describe('with meta', function () {
it('functions as a substitute for the "+ctrl" key combination', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2020');
simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
expect(cells[3].textContent, 'to be', '2020');
// does nothig if the view has reached to the max view
simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
expect(viewSwitch.textContent, 'to be', '2000-2090');
dp.destroy();
clock.reset();
});
});
});

View File

@ -0,0 +1,458 @@
describe('keyboard operation - edit mode', function () {
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
it('turns on when Datepicker.enterEditMode() is called', function () {
const dp = new Datepicker(input);
input.focus();
dp.enterEditMode();
expect(dp.editMode, 'to be true');
expect(input.classList.contains('in-edit'), 'to be true');
dp.destroy();
input.classList.remove('in-edit');
});
it('turns on when a printable letter, backspace or delete key is pressed without ctrl/meta', function () {
const dp = new Datepicker(input);
input.focus();
simulant.fire(input, 'keydown', {key: '1'});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'J'});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: '/'});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: ' '});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'Backspace'});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'Delete'});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
// with modifier key
simulant.fire(input, 'keydown', {key: '1', shiftKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: '1', altKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: '1', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
simulant.fire(input, 'keydown', {key: '1', metaKey: true});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
// non-pritable-letter key
simulant.fire(input, 'keydown', {key: 'PageDown'});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
simulant.fire(input, 'keydown', {key: 'Escape', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
dp.destroy();
});
it('turns on when shift + either of arrow keys is pressed without ctrl/meta', function () {
const dp = new Datepicker(input);
input.focus();
// shift + arrow
simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
// arrow + other modifire key
// arrow-left
simulant.fire(input, 'keydown', {key: 'ArrowLeft', altKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-right
simulant.fire(input, 'keydown', {key: 'ArrowRight', altKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-up
simulant.fire(input, 'keydown', {key: 'ArrowUp', altKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-down
simulant.fire(input, 'keydown', {key: 'ArrowDown', altKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowDown', ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowDown', metaKey: true});
expect(dp.editMode, 'to be undefined');
// shift + arrow with other modifier key
// arrow-left
simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, altKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-right
simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, altKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-up
simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, altKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, metaKey: true});
expect(dp.editMode, 'to be undefined');
// arrow-down
simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, altKey: true});
expect(dp.editMode, 'to be true');
delete dp.editMode;
input.classList.remove('in-edit');
simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, ctrlKey: true});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, metaKey: true});
expect(dp.editMode, 'to be undefined');
dp.destroy();
});
it('turns on when input is clicked', function () {
const dp = new Datepicker(input);
input.focus();
simulant.fire(input, 'mousedown');
input.click();
expect(dp.editMode, 'to be true');
expect(input.classList.contains('in-edit'), 'to be true');
dp.destroy();
input.classList.remove('in-edit');
});
it('does not turn on when the picker is hidden', function () {
const dp = new Datepicker(input);
dp.enterEditMode();
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
simulant.fire(input, 'keydown', {key: '1'});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'keydown', {key: 'J'});
expect(dp.editMode, 'to be undefined');
simulant.fire(input, 'mousedown');
input.click();
expect(dp.editMode, 'to be undefined');
dp.destroy();
});
it('disables the arrow-key operation of the picker', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
dp.enterEditMode();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
expect(cells[19].textContent, 'to be', '14');
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
simulant.fire(input, 'keydown', {key: 'ArrowUp'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
simulant.fire(input, 'keydown', {key: 'ArrowDownt'});
expect(viewSwitch.textContent, 'to be', 'February 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
expect(viewSwitch.textContent, 'to be', '2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowRight'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'ArrowDown'});
expect(viewSwitch.textContent, 'to be', '2000-2090');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
dp.destroy();
clock.restore();
});
it('turns off when Datepicker.exitEditMode() is called', function () {
const dp = new Datepicker(input);
input.focus();
dp.enterEditMode();
dp.exitEditMode();
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
dp.destroy();
});
it('turns off when the picker hides', function () {
const {dp, picker} = createDP(input);
input.focus();
dp.enterEditMode();
dp.hide();
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
dp.destroy();
});
it('turns off when escape key is pressed', function () {
const dp = new Datepicker(input);
input.focus();
dp.enterEditMode();
simulant.fire(input, 'keydown', {key: 'Escape'});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
dp.destroy();
});
it('leaves the edit on the input as-is by default when turning off', function () {
const dp = new Datepicker(input);
const date = dateValue(2020, 1, 14);
dp.setDate(date);
input.focus();
dp.enterEditMode();
input.value = '4/22/2020';
dp.exitEditMode();
expect(input.value, 'to be', '4/22/2020');
expect(dp.dates, 'to equal', [date]);
dp.show();
dp.enterEditMode();
input.value = '3/8/2020';
dp.hide();
expect(input.value, 'to be', '3/8/2020');
expect(dp.dates, 'to equal', [date]);
dp.show();
dp.enterEditMode();
input.value = '02/14/2020';
simulant.fire(input, 'keydown', {key: 'Escape'});
expect(input.value, 'to be', '02/14/2020');
expect(dp.dates, 'to equal', [date]);
dp.destroy();
});
it('hides the picker when turning off by escape key press', function () {
const {dp, picker} = createDP(input);
input.focus();
dp.enterEditMode();
simulant.fire(input, 'keydown', {key: 'Escape'});
expect(isVisible(picker), 'to be false');
dp.show();
dp.enterEditMode();
dp.exitEditMode();
expect(isVisible(picker), 'to be true');
dp.destroy();
});
it('updates the selection with the input when turning off by exitEditMode() call with update: true option', function () {
const dp = new Datepicker(input);
const date = dateValue(2020, 3, 22);
dp.setDate('02/14/2020');
input.focus();
dp.enterEditMode();
input.value = '4/22/2020';
dp.exitEditMode({update: true});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
expect(input.value, 'to be', '04/22/2020');
expect(dp.dates, 'to equal', [date]);
dp.destroy();
});
it('updates the selection with the input when turning off by enter key press', function () {
const dp = new Datepicker(input);
const date = dateValue(2020, 3, 22);
dp.setDate('02/14/2020');
input.focus();
dp.enterEditMode();
input.value = '4/22/2020';
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
expect(input.value, 'to be', '04/22/2020');
expect(dp.dates, 'to equal', [date]);
dp.destroy();
});
it('updates the selection with the input when turning off being induced by unfocusing input element', function () {
const outsider = document.createElement('p');
testContainer.appendChild(outsider);
const dp = new Datepicker(input);
const date = dateValue(2020, 3, 22);
// by tab key-press
dp.setDate('02/14/2020');
input.focus();
dp.enterEditMode();
input.value = '4/22/2020';
simulant.fire(input, 'keydown', {key: 'Tab'});
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
expect(input.value, 'to be', '04/22/2020');
expect(dp.dates, 'to equal', [date]);
//by clicking outside
dp.setDate('02/14/2020');
dp.show();
dp.enterEditMode();
input.value = '4/22/2020';
simulant.fire(outsider, 'mousedown');
expect(dp.editMode, 'to be undefined');
expect(input.classList.contains('in-edit'), 'to be false');
expect(input.value, 'to be', '04/22/2020');
expect(dp.dates, 'to equal', [date]);
dp.destroy();
testContainer.removeChild(outsider);
});
});

View File

@ -0,0 +1,146 @@
describe('keyboard operation', function () {
let input;
beforeEach(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
afterEach(function () {
testContainer.removeChild(input);
});
describe('tab', function () {
it('hides the picker', function () {
const {dp, picker} = createDP(input);
input.focus();
simulant.fire(input, 'keydown', {key: 'Tab'});
expect(isVisible(picker), 'to be false');
dp.destroy();
});
it('updates the selected date with the input\'s value', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
const dp = new Datepicker(input);
// when picker is shown
input.focus();
input.value = 'foo';
simulant.fire(input, 'keydown', {key: 'Tab'});
expect(input.value, 'to be', '02/14/2020');
expect(dp.getDate().getTime(), 'to be', dateValue(2020, 1, 14));
// when picker is hidden
input.focus();
input.value = '04/22/2020';
simulant.fire(input, 'keydown', {key: 'Tab'});
expect(input.value, 'to be', '04/22/2020');
expect(dp.getDate().getTime(), 'to be', dateValue(2020, 3, 22));
input.focus();
input.value = '';
simulant.fire(input, 'keydown', {key: 'Tab'});
expect(input.value, 'to be', '');
expect(dp.getDate(), 'to be undefined');
dp.destroy();
clock.restore();
});
});
describe('escape', function () {
it('shows or hides the picker', function () {
const {dp, picker} = createDP(input);
simulant.fire(input, 'keydown', {key: 'Escape'});
expect(isVisible(picker), 'to be true');
simulant.fire(input, 'keydown', {key: 'Escape'});
expect(isVisible(picker), 'to be false');
dp.destroy();
});
});
describe('enter', function () {
it('sets the view date to the selection if the current view is days', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
const {dp, picker} = createDP(input);
input.focus();
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
expect(input.value, 'to be', '02/14/2020');
let cells = getCells(picker);
expect(filterCells(cells, '.selected'), 'to equal', [cells[19]]);
expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
expect(cells[19].textContent, 'to be', '14');
dp.destroy();
clock.reset();
});
it('changes the view to the next minor one if the current view is not days', function () {
const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.focus();
viewSwitch.click();
viewSwitch.click();
viewSwitch.click();
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(viewSwitch.textContent, 'to be', '2020-2029');
let cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
expect(cells[1].textContent, 'to be', '2020');
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(viewSwitch.textContent, 'to be', '2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(viewSwitch.textContent, 'to be', 'April 2020');
cells = getCells(picker);
expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
expect(cells[24].textContent, 'to be', '22');
// does nothig if the view has reached to the min view
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(viewSwitch.textContent, 'to be', 'April 2020');
dp.destroy();
clock.reset();
});
it('updates the selection with the input text if the picker is hidden', function () {
const {dp, picker} = createDP(input);
const viewSwitch = getViewSwitch(picker);
input.value = '7/4/2020';
simulant.fire(input, 'keydown', {key: 'Enter'});
expect(dp.dates, 'to equal', [dateValue(2020, 6, 4)]);
expect(input.value, 'to be', '07/04/2020');
dp.show();
expect(viewSwitch.textContent, 'to be', 'July 2020');
let cells = getCells(picker);
expect(filterCells(cells, '.selected'), 'to equal', [cells[6]]);
expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
expect(cells[6].textContent, 'to be', '4');
dp.destroy();
});
});
});