package.test.keyboard-operation.arrow-right.js Maven / Gradle / Ivy

Go to download
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();
    });
  });
});