sopify-test-modul-fo/View/vanillajs-datepicker/test/DateRangePicker/DateRangePicker.js

describe('DateRangePicker', function () {
  let clock;
  let elem;
  let input0;
  let input1;

  before(function () {
    clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
  });

  after(function () {
    clock.restore();
  });

  beforeEach(function () {
    elem = domUtils.parseHTML('<div><input><input></div>').firstChild;
    [input0, input1] = elem.children;
    testContainer.appendChild(elem);
  });

  afterEach(function () {
    testContainer.removeChild(elem);
  });

  it('input elements\' values are used for the initial dates', function () {
    input0.value = '04/20/2020';
    input1.value = '04/22/2020';

    const drp = new DateRangePicker(elem);
    expect(drp.dates, 'to equal', [dateValue(2020, 3, 20), dateValue(2020, 3, 22)]);

    drp.destroy();
    input0.value = '';
    input1.value = '';
  });

  it('the pickers are hidden at start', function () {
    const {drp, picker0, picker1} = createDRP(elem);

    expect(isVisible(picker0), 'to be false');
    expect(isVisible(picker1), 'to be false');

    drp.destroy();
  });

  it('the pickers becomes visible when the input element get focus and invisivle when losing focus', function () {
    const {drp, picker0, picker1} = createDRP(elem);

    input0.focus();
    expect(isVisible(picker0), 'to be true');

    simulant.fire(input0, 'keydown', {key: 'Tab'});
    expect(isVisible(picker0), 'to be false');

    input1.focus();
    expect(isVisible(picker1), 'to be true');

    simulant.fire(input1, 'keydown', {key: 'Tab'});
    expect(isVisible(picker1), 'to be false');

    drp.destroy();
  });

  it('indicates the range with hilighting the start/end in the pickers', function () {
    input0.value = '04/20/2020';
    input1.value = '04/22/2020';

    const partsClasses = ['.view-switch', '.prev-btn', '.next-btn'];
    let {drp, picker0, picker1} = createDRP(elem);
    let [viewSwitch0, prevBtn0, nextBtn0] = getParts(picker0, partsClasses);
    let [viewSwitch1, prevBtn1, nextBtn1] = getParts(picker1, partsClasses);
    input0.focus();

    let cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', 'April 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [22]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [22]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [24]);
    expect(getCellIndices(cells, '.range'), 'to equal', [23]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [22]);

    input1.focus();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', 'April 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [24]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [22]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [24]);
    expect(getCellIndices(cells, '.range'), 'to equal', [23]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [24]);

    drp.destroy();

    // range over months (days → months views)
    input0.value = '02/26/2020';
    input1.value = '04/12/2020';

    ({drp, picker0, picker1} = createDRP(elem));
    ([viewSwitch0, prevBtn0, nextBtn0] = getParts(picker0, partsClasses));
    ([viewSwitch1, prevBtn1, nextBtn1] = getParts(picker1, partsClasses));

    // range-start
    input0.focus();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', 'February 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [31]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [31]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [32, 33, 34, 35, 36, 37, 38, 39, 40, 41]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [31]);

    prevBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', 'January 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [28]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', 'March 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 42);
    expect(getCellIndices(cells, '.focused'), 'to equal', [25]);

    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', 'April 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [14]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [28]);

    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range'), 'to equal', [2]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [3]);

    // range-end
    input1.focus();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', 'April 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [14]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [14]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [14]);

    nextBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', 'May 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [16]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', 'March 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 42);
    expect(getCellIndices(cells, '.focused'), 'to equal', [11]);

    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', 'February 2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [31]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [32, 33, 34, 35, 36, 37, 38, 39, 40, 41]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [17]);

    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch0.textContent, 'to be', '2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range'), 'to equal', [2]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [1]);

    drp.destroy();

    // range over years (months → years views)
    input0.value = '10/01/2020';
    input1.value = '03/31/2023';

    ({drp, picker0, picker1} = createDRP(elem));
    ([viewSwitch0, prevBtn0, nextBtn0] = getParts(picker0, partsClasses));
    ([viewSwitch1, prevBtn1, nextBtn1] = getParts(picker1, partsClasses));

    // range-start
    input0.focus();
    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    prevBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2019');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2021');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2023');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2020-2029');
    expect(getCellIndices(cells, '.selected'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [4]);
    expect(getCellIndices(cells, '.range'), 'to equal', [2, 3]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [4]);

    // range-end
    input1.focus();
    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2023');
    expect(getCellIndices(cells, '.selected'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    nextBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2024');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2022');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2020');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2020-2029');
    expect(getCellIndices(cells, '.selected'), 'to equal', [4]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [1]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [4]);
    expect(getCellIndices(cells, '.range'), 'to equal', [2, 3]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [1]);

    drp.destroy();

    // range over decades (years → decades views)
    input0.value = '01/01/2017';
    input1.value = '12/31/2041';

    ({drp, picker0, picker1} = createDRP(elem));
    ([viewSwitch0, prevBtn0, nextBtn0] = getParts(picker0, partsClasses));
    ([viewSwitch1, prevBtn1, nextBtn1] = getParts(picker1, partsClasses));

    // range-start
    input0.focus();
    viewSwitch0.click();
    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2010-2019');
    expect(getCellIndices(cells, '.selected'), 'to equal', [8]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [8]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [9, 10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [8]);

    prevBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2000-2009');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [8]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2020-2029');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [8]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2040-2049');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [8]);

    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2000-2090');
    expect(getCellIndices(cells, '.selected'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [5]);
    expect(getCellIndices(cells, '.range'), 'to equal', [3, 4]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [5]);

    // range-end
    input1.focus();
    viewSwitch1.click();
    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2040-2049');
    expect(getCellIndices(cells, '.selected'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    nextBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2050-2059');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2030-2039');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2010-2019');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [8]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [9, 10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2000-2090');
    expect(getCellIndices(cells, '.selected'), 'to equal', [5]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [2]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [5]);
    expect(getCellIndices(cells, '.range'), 'to equal', [3, 4]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [2]);

    drp.destroy();

    // range over centures (decades views)
    input0.value = '01/22/1984';
    input1.value = '12/31/2121';

    ({drp, picker0, picker1} = createDRP(elem));
    ([viewSwitch0, prevBtn0, nextBtn0] = getParts(picker0, partsClasses));
    ([viewSwitch1, prevBtn1, nextBtn1] = getParts(picker1, partsClasses));

    // range-start
    input0.focus();
    viewSwitch0.click();
    viewSwitch0.click();
    viewSwitch0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '1900-1990');
    expect(getCellIndices(cells, '.selected'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    prevBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '1800-1890');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    nextBtn0.click();
    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2000-2090');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    nextBtn0.click();
    cells = getCells(picker0);

    expect(viewSwitch0.textContent, 'to be', '2100-2190');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1, 2]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [9]);

    // range-end
    input1.focus();
    viewSwitch1.click();
    viewSwitch1.click();
    viewSwitch1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2100-2190');
    expect(getCellIndices(cells, '.selected'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', [3]);
    expect(getCellIndices(cells, '.range'), 'to equal', [0, 1, 2]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [3]);

    nextBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2200-2290');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', []);
    expect(getCellIndices(cells, '.focused'), 'to equal', [3]);

    prevBtn1.click();
    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '2000-2090');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', []);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range').length, 'to be', 12);
    expect(getCellIndices(cells, '.focused'), 'to equal', [3]);

    prevBtn1.click();
    cells = getCells(picker1);

    expect(viewSwitch1.textContent, 'to be', '1900-1990');
    expect(getCellIndices(cells, '.selected'), 'to equal', []);
    expect(getCellIndices(cells, '.range-start'), 'to equal', [9]);
    expect(getCellIndices(cells, '.range-end'), 'to equal', []);
    expect(getCellIndices(cells, '.range'), 'to equal', [10, 11]);
    expect(getCellIndices(cells, '.focused'), 'to equal', [3]);

    drp.destroy();
  });
});