sopify-test-modul-fo/View/vanillajs-datepicker/test/options/multidate.js

describe('options - multi date', function () {
  let clock;
  let input;

  beforeEach(function () {
    clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
    input = document.createElement('input');
    testContainer.appendChild(input);
  });

  afterEach(function () {
    testContainer.removeChild(input);
    clock.restore();
  });

  describe('maxNumberOfDates', function () {
    it('specifies the muximum number of dates the datepicker accepts for the selection', function () {
      let {dp, picker} = createDP(input, {maxNumberOfDates: 2});

      dp.setDate('2/14/2020', '4/22/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14), dateValue(2020, 3, 22)]);
      expect(input.value, 'to be', '02/14/2020,04/22/2020');

      // the dates come later win
      dp.setDate('1/4/2020', '2/22/2020', '3/21/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 22), dateValue(2020, 2, 21)]);
      expect(input.value, 'to be', '02/22/2020,03/21/2020');

      // repeated dates are eliminated
      dp.setDate('4/22/2020', '7/14/2020', '5/5/2020', '7/14/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 6, 14), dateValue(2020, 4, 5)]);
      expect(input.value, 'to be', '07/14/2020,05/05/2020');

      dp.destroy();
      input.value = '';
      ({dp, picker} = createDP(input, {maxNumberOfDates: 3}));
      dp.show();

      let cells = getCells(picker);
      cells[19].click();
      cells[9].click();
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14), dateValue(2020, 1, 4)]);
      expect(input.value, 'to be', '02/14/2020,02/04/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[19], cells[9]]);
      // view date is changed co the last selected item
      expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);

      input.value = '2/3/2020,2/22/2020';
      dp.update();
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 3), dateValue(2020, 1, 22)]);
      expect(input.value, 'to be', '02/03/2020,02/22/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[8], cells[27]]);
      // view date is changed co the last item of the selection
      expect(filterCells(cells, '.focused'), 'to equal', [cells[27]]);

      dp.destroy();
      input.value = '';
      ({dp, picker} = createDP(input, {maxNumberOfDates: 3}));

      dp.setDate('2/14/2020', '4/22/2020', '3/21/2020');
      expect(dp.dates, 'to equal', [
        dateValue(2020, 1, 14),
        dateValue(2020, 3, 22),
        dateValue(2020, 2, 21),
      ]);
      expect(input.value, 'to be', '02/14/2020,04/22/2020,03/21/2020');

      dp.destroy();
      input.value = '';
      ({dp, picker} = createDP(input, {maxNumberOfDates: 3}));
      dp.show();

      getCells(picker)[1].click();
      getCells(picker)[40].click();
      cells = getCells(picker);
      cells[19].click();
      expect(dp.dates, 'to equal', [
        dateValue(2020, 0, 27),
        dateValue(2020, 1, 7),
        dateValue(2020, 1, 14),
      ]);
      expect(input.value, 'to be', '01/27/2020,02/07/2020,02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[1], cells[12], cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      input.value = '2/3/2020,2/22/2020';
      dp.update();
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 3), dateValue(2020, 1, 22)]);
      expect(input.value, 'to be', '02/03/2020,02/22/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[8], cells[27]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[27]]);

      // setting initial dates does not cuase error
      // (issue #51)
      dp.destroy();
      input.value = '02/14/2020,04/22/2020,03/21/2020';
      ({dp, picker} = createDP(input, {maxNumberOfDates: 2}));

      expect(dp.dates, 'to equal', [
        dateValue(2020, 3, 22),
        dateValue(2020, 2, 21),
      ]);
      expect(input.value, 'to be', '04/22/2020,03/21/2020');

      dp.destroy();
      input.value = '';
    });

    it('makes the picker deselect the date when a selected date is clicked if value != 1', function () {
      const {dp, picker} = createDP(input, {maxNumberOfDates: 3});
      dp.show();

      let cells = getCells(picker);
      cells[19].click();
      cells[12].click();

      cells[19].click();
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 7)]);
      expect(input.value, 'to be', '02/07/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]);

      cells[12].click();
      expect(dp.dates, 'to equal', []);
      expect(input.value, 'to be', '');
      expect(filterCells(cells, '.selected'), 'to equal', []);
      // view date is changed to the default view date
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      dp.destroy();
      input.value = '';
    });

    it('makes the picker deselect the date when a selected date is clicked if value != 1', function () {
      const {dp, picker} = createDP(input, {maxNumberOfDates: 3});
      const cells = getCells(picker);
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      dp.setDate('2/14/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 7)]);
      expect(input.value, 'to be', '02/07/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[12]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]);

      dp.setDate('2/11/2020', '2/7/2020', '2/14/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 1, 14)]);
      expect(input.value, 'to be', '02/11/2020,02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      dp.destroy();
      input.value = '';
    });

    it('setDate() replaces the selection instead of deselect/merg-ing if clear: true option is passed', function () {
      const {dp, picker} = createDP(input, {maxNumberOfDates: 3});
      const cells = getCells(picker);
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      dp.setDate('2/14/2020', {clear: true});
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
      expect(input.value, 'to be', '02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      dp.setDate('2/11/2020', '2/7/2020', '2/14/2020', {clear: true});
      expect(dp.dates, 'to equal', [
        dateValue(2020, 1, 11),
        dateValue(2020, 1, 7),
        dateValue(2020, 1, 14),
      ]);
      expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[12], cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      dp.destroy();
      input.value = '';
    });

    it('setDate() does nothing if no dates or all-invalid dates are passed', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3});
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      const origDates = [...dp.dates];
      dp.setDate([]);
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.setDate();
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.setDate([false, NaN], {clear: true});
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.setDate('', null);
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.destroy();
    });

    it('setDate() clears all selected dates if no dates + clear: true option are passed', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3});
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      dp.setDate([], {clear: true});
      expect(dp.dates, 'to equal', []);
      expect(input.value, 'to be', '');

      dp.setDate('2/14/2020', '2/7/2020');

      dp.setDate({clear: true});
      expect(dp.dates, 'to equal', []);
      expect(input.value, 'to be', '');

      dp.destroy();
    });

    it('setDate() does nothing if all-invalid dates + clear: true option are passed', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3});
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      const origDates = [...dp.dates];
      dp.setDate([false, NaN], {clear: true});
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.setDate('', null, {clear: true});
      expect(dp.dates, 'to equal', origDates);
      expect(input.value, 'to be', '02/14/2020,02/07/2020');

      dp.destroy();
    });

    it('does not apply deselecting behavior to update()', function () {
      const {dp, picker} = createDP(input, {maxNumberOfDates: 3});
      const cells = getCells(picker);
      dp.setDate('2/14/2020', '2/7/2020');
      dp.show();

      input.value = '2/14/2020';
      dp.update();
      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
      expect(input.value, 'to be', '02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      input.value = '2/11/2020,2/7/2020,2/14/2020';
      dp.update();
      expect(dp.dates, 'to equal', [
        dateValue(2020, 1, 11),
        dateValue(2020, 1, 7),
        dateValue(2020, 1, 14),
      ]);
      expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020');
      expect(filterCells(cells, '.selected'), 'to equal', [cells[16], cells[12], cells[19]]);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);

      dp.destroy();
      input.value = '';
    });

    it('makes getDate() return array of dates if value != 1', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3});

      expect(dp.getDate(), 'to equal', []);
      expect(dp.getDate('yyyy-mm-dd'), 'to equal', []);

      dp.setDate('2/11/2020', '2/7/2020', '2/14/2020');
      expect(dp.getDate(), 'to equal', [new Date(2020, 1, 11), new Date(2020, 1, 7), new Date(2020, 1, 14)]);
      expect(dp.getDate('yyyy-mm-dd'), 'to equal', ['2020-02-11', '2020-02-07', '2020-02-14']);

      dp.setDate('2/7/2020', {clear: true});
      expect(dp.getDate(), 'to equal', [new Date(2020, 1, 7)]);
      expect(dp.getDate('d M, yyyy'), 'to equal', ['7 Feb, 2020']);

      const changeDateListener = (e) => {
        evt = e;
      };
      let evt;
      input.addEventListener('changeDate', changeDateListener);

      dp.setDate('7/4/2020', '7/14/2020');
      expect(evt.detail.date, 'to equal', dp.getDate());

      input.removeEventListener('changeDate', changeDateListener);
      dp.destroy();
      input.value = '';
    });

    it('value 0 is considered unlimited', function () {
      if (window.navigator.userAgent.indexOf('Edge') > -1) {
        this.timeout(5000);
      }

      const max = new Date(2100, 0, 1).getTime();
      const generateDates = (dates, length, index = 0) => {
        const date = dateUtils.stripTime(Math.floor(Math.random() * max));
        if (dates.includes(date)) {
          return generateDates(dates, length, index);
        } else {
          dates.push(date);
          return index <= length
            ? generateDates(dates, length, index + 1)
            : dates;
        }
      };
      const dates = generateDates([], 3000);

      const dp = new Datepicker(input, {maxNumberOfDates: 0});
      dp.setDate(dates);
      expect(dp.dates, 'to equal', dates);

      dp.destroy();
      input.value = '';
    });

    it('can be updated with setOptions()', function () {
      const dp = new Datepicker(input);
      dp.setOptions({maxNumberOfDates: 3});

      dp.setDate('2/11/2020', '2/7/2020', '2/14/2020');
      expect(dp.dates, 'to equal', [
        dateValue(2020, 1, 11),
        dateValue(2020, 1, 7),
        dateValue(2020, 1, 14),
      ]);

      dp.setOptions({maxNumberOfDates: 1});
      dp.setDate('7/4/2020', '4/22/2020');
      expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]);
      expect(dp.getDate(), 'to be a date');

      dp.destroy();
      input.value = '';
    });
  });

  describe('dateDelimiter', function () {
    it('specifies the date delemiter for the input string', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3, dateDelimiter: '|'});

      dp.setDate('2/14/2020', '4/22/2020');
      expect(input.value, 'to be', '02/14/2020|04/22/2020');

      input.value = '2/11/2020|2/7/2020|2/14/2020';
      dp.update();
      expect(dp.dates, 'to equal', [
        dateValue(2020, 1, 11),
        dateValue(2020, 1, 7),
        dateValue(2020, 1, 14),
      ]);

      dp.destroy();
      input.value = '';
    });

    it('can be updated with setOptions()', function () {
      const dp = new Datepicker(input, {maxNumberOfDates: 3});
      dp.setOptions({dateDelimiter: '_'});
      dp.setDate('2/11/2020', '2/7/2020', '2/14/2020');

      dp.setOptions({dateDelimiter: ' - '});
      expect(input.value, 'to be', '02/11/2020 - 02/07/2020 - 02/14/2020');

      dp.setOptions({dateDelimiter: ','});
      expect(input.value, 'to be', '02/11/2020,02/07/2020,02/14/2020');

      dp.destroy();
      input.value = '';
    });
  });
});