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

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