@ohos-ports/flowbite-datepicker 2.0.0-beta.0

package/test/keyboard-operation/arrow-right.js

@@ -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();
+    });
+  });
+});

package/test/keyboard-operation/arrow-up.js

@@ -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();
+    });
+  });
+});