package.test.Datepicker.api-methods.js Maven / Gradle / Ivy

Go to download
describe('Datepicker - API methods', function () {
  let clock;
  let input;
  let dp;
  let picker;

  beforeEach(function () {
    clock = sinon.useFakeTimers({now: new Date(2020, 2, 14)});
    input = parseHTML('').firstChild;
    testContainer.appendChild(input);
    dp = new Datepicker(input);
    picker = document.querySelector('.datepicker');
    input.focus(); // Activate for visibility checks
  });

  afterEach(function () {
    if (input.datepicker) {
      dp.destroy();
    }
    testContainer.removeChild(input);
    clock.restore();
  });

  describe('getDate()', function () {
    it('returns a Date object of selected date', function () {
      const date = dp.getDate();
      expect(date, 'to be a date');
      expect(date.getTime(), 'to be', dateValue(2020, 3, 22));
    });

    it('returns a formatted date stirng of selected date if the format is specified', function () {
      expect(dp.getDate('yyyy-mm-dd'), 'to be', '2020-04-22');
    });

    it('returns undefined if no date is selected', function () {
      dp.destroy();
      input.value = '';
      dp = new Datepicker(input);

      expect(dp.getDate(), 'to be undefined');
      expect(dp.getDate('yyyy-mm-dd'), 'to be undefined');
    });
  });

  describe('setDate()', function () {
    it('changes the selected date to given date', function () {
      const spyChnageEvent = sinon.spy();
      input.addEventListener('change', spyChnageEvent);

      const viewSwitdh = getViewSwitch(picker);
      const date = new Date(2019, 11, 23);
      dp.setDate(date);

      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '12/23/2019');
      expect(viewSwitdh.textContent, 'to be', 'December 2019');

      let cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[22]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[22]]);
      expect(cells[22].textContent, 'to be', '23');

      dp.setDate('04/22/2020');

      expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]);
      expect(input.value, 'to be', '04/22/2020');
      expect(viewSwitdh.textContent, 'to be', 'April 2020');

      cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[24]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
      expect(cells[24].textContent, 'to be', '22');

      // change by api call should not be a trigger of change event
      // (issue #24)
      expect(spyChnageEvent.called, 'to be false');
      input.removeEventListener('change', spyChnageEvent);

      // change the view to the selected daye's days view
      // (issue #33)
      dp.picker.changeFocus(dateValue(2021, 3, 20)).changeView(2).render();
      dp.setDate('02/14/2020');

      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
      expect(input.value, 'to be', '02/14/2020');
      expect(viewSwitdh.textContent, 'to be', 'February 2020');

      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');
    });

    it('does nothing if no date or invalid date is given', function () {
      const viewSwitdh = getViewSwitch(picker);
      const origDates = [dateValue(2020, 3, 22)];

      dp.setDate();
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '04/22/2020');
      expect(viewSwitdh.textContent, 'to be', 'April 2020');

      const cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[24]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
      expect(cells[24].textContent, 'to be', '22');

      dp.setDate('');
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '04/22/2020');
    });

    it('clears the selection if no dates + clear: true option are given', function () {
      const spyChnageEvent = sinon.spy();
      input.addEventListener('change', spyChnageEvent);

      const viewSwitdh = getViewSwitch(picker);
      const today = dateUtils.today();

      dp.setDate({clear: true});
      expect(dp.dates, 'to equal', []);
      expect(input.value, 'to be', '');
      expect(viewSwitdh.textContent, 'to be', Datepicker.formatDate(today, 'MM yyyy'));

      // view date is changed to the default view date (current date)
      const cells = getCells(picker);
      const todayCell = filterCells(cells, el => el.dataset.date == today)[0];
      expect(todayCell.textContent, 'to be', Datepicker.formatDate(today, 'd'));
      expect(filterCells(cells, '.selected'), 'to equal', []);
      expect(filterCells(cells, '.focused'), 'to equal', [todayCell]);

      // change by api call should not be a trigger of change event
      // (issue #24)
      expect(spyChnageEvent.called, 'to be false');
      input.removeEventListener('change', spyChnageEvent);
    });

    it('omits updating the picker UI if render option = false', function () {
      const date = new Date(2019, 11, 23);
      dp.setDate(date, {render: false});

      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '12/23/2019');

      const cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[24]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
      expect(cells[24].textContent, 'to be', '22');
    });

    it('hides the picker if both render and autohide options are true', function () {
      let date = new Date(2019, 11, 23);
      dp.setDate(date, {render: false, autohide: true});

      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '12/23/2019');
      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
      expect(filterCells(getCells(picker), '.selected')[0].textContent, 'to be', '22');
      expect(isVisible(picker), 'to be true');

      date = new Date(2018, 6, 14);
      dp.setDate(date, {autohide: true});

      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '07/14/2018');
      expect(getViewSwitch(picker).textContent, 'to be', 'July 2018');
      expect(filterCells(getCells(picker), '.selected')[0].textContent, 'to be', '14');
      expect(isVisible(picker), 'to be false');
    });
  });

  describe('update()', function () {
    it('updates the selected date with the input element\'s value', function () {
      const viewSwitdh = getViewSwitch(picker);
      const date = new Date(2019, 11, 23);
      input.value = '12/23/2019';
      dp.update();

      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '12/23/2019');
      expect(viewSwitdh.textContent, 'to be', 'December 2019');

      let cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[22]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[22]]);
      expect(cells[22].textContent, 'to be', '23');

      // change the view to the selected daye's days view
      // (issue #33)
      dp.picker.changeFocus(dateValue(2021, 3, 20)).changeView(2).render();
      input.value = '02/14/2020';
      dp.update();

      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
      expect(input.value, 'to be', '02/14/2020');
      expect(viewSwitdh.textContent, 'to be', 'February 2020');

      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');
    });

    it('notmalizes iput text\'s format', function () {
      const date = new Date(2020, 6, 4);
      input.value = '7 4 2020';

      dp.update();
      expect(dp.dates, 'to equal', [date.getTime()]);
      expect(input.value, 'to be', '07/04/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'July 2020');
      expect(filterCells(getCells(picker), '.selected')[0].textContent, 'to be', '4');
    });
  });

  describe('refresh()', function () {
    it('refreshes the input element and picker UI to refrect the internal data', function () {
      const spyChnageEvent = sinon.spy();
      input.addEventListener('change', spyChnageEvent);

      dp.dates = [dateValue(2020, 1, 14)];
      dp.refresh();

      expect(input.value, 'to be', '02/14/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'February 2020');

      const 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');

      // change by api call should not be a trigger of change event
      // (issue #24)
      expect(spyChnageEvent.called, 'to be false');
      input.removeEventListener('change', spyChnageEvent);
    });

    it('also changes the view back to the selected date\'s days view', function () {
      dp.dates = [dateValue(2020, 1, 14)];
      dp.picker.changeFocus(dateValue(2021, 3, 20)).changeView(2).render();
      dp.refresh();

      expect(input.value, 'to be', '02/14/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'February 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');

      // go back to the current date's days view if no date is selected
      dp.dates = [];
      dp.picker.changeFocus(dateValue(2019, 10, 22)).update().changeView(1).render();
      dp.refresh();

      expect(input.value, 'to be', '');
      expect(getViewSwitch(picker).textContent, 'to be', 'March 2020');

      cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', []);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[13]]);
      expect(cells[13].textContent, 'to be', '14');

      clock.restore();
    });

    it('refresh only picker UI if target: "picker" is passed', function () {
      dp.dates = [dateValue(2020, 1, 14)];
      dp.refresh('picker');

      expect(input.value, 'to be', '04/22/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'February 2020');

      const 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');
    });

    it('refresh only input element if target: "input" is passed', function () {
      dp.dates = [dateValue(2020, 1, 14)];
      dp.refresh('input');

      expect(input.value, 'to be', '02/14/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');

      const cells = getCells(picker);
      expect(filterCells(cells, '.selected'), 'to equal', [cells[24]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
      expect(cells[24].textContent, 'to be', '22');
    });

    it('re-renders the picker regardless of its state if forceRender true is passed', function () {
      let cells = getCells(picker);
      cells[16].classList.add('foo');
      cells[12].textContent = '♥︎';
      dp.dates = [dateValue(2020, 3, 10)];
      dp.refresh('picker');

      cells = getCells(picker);
      expect(input.value, 'to be', '04/22/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]);
      expect(filterCells(cells, '.foo'), 'to equal', [cells[16]]);
      expect(cells[12].textContent, 'to be', '♥︎');

      dp.refresh('picker', true);

      cells = getCells(picker);
      expect(input.value, 'to be', '04/22/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]);
      expect(filterCells(cells, '.foo'), 'to equal', []);
      expect(cells[12].textContent, 'to be', '10');

      cells[16].classList.add('foo');
      cells[12].textContent = '♥︎';
      dp.refresh(true);

      cells = getCells(picker);
      expect(input.value, 'to be', '04/10/2020');
      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]);
      expect(filterCells(cells, '.foo'), 'to equal', []);
      expect(cells[12].textContent, 'to be', '10');
    });
  });
});