package.test.options.options.js Maven / Gradle / Ivy

Go to download
describe('options', 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('autohide', function () {
    it('makes the picker hide automatically on selection when true', function () {
      const {dp, picker} = createDP(input, {autohide: true});
      dp.show();

      // by satDate()
      dp.setDate('2/4/2020');
      expect(isVisible(picker), 'to be false');

      dp.show();

      // by click on day cell
      getCells(picker)[25].click();
      expect(isVisible(picker), 'to be false');

      dp.show();

      // by typing enter key in edit mode
      dp.enterEditMode();
      input.value = '2/14/2020';
      simulant.fire(input, 'keydown', {key: 'Enter'});
      expect(isVisible(picker), 'to be false');

      // focus is kept on input field after auto-hidng by clicking day cell
      // (issue #21)
      const spyFocus = sinon.spy(input, 'focus');
      dp.show();

      getCells(picker)[25].click();
      expect(spyFocus.called, 'to be true');

      spyFocus.restore();

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

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({autohide: true});
      dp.show();

      dp.setDate('2/4/2020');
      expect(isVisible(picker), 'to be false');

      dp.setOptions({autohide: false});
      dp.show();

      dp.setDate('2/14/2020');
      expect(isVisible(picker), 'to be true');

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

  describe('buttonClass', function () {
    it('specifies the main class used for the button elements', function () {
      const {dp, picker} = createDP(input, {buttonClass: 'btn'});
      const [viewSwitch, prevBtn, nextBtn, todayBtn, clearBtn] = getParts(picker, [
        '.view-switch',
        '.prev-btn',
        '.next-btn',
        '.today-btn',
        '.clear-btn',
      ]);

      expect(viewSwitch.className, 'to be', 'btn view-switch');
      expect(prevBtn.className, 'to be', 'btn prev-btn');
      expect(nextBtn.className, 'to be', 'btn next-btn');
      expect(todayBtn.className, 'to be', 'btn today-btn');
      expect(clearBtn.className, 'to be', 'btn clear-btn');

      dp.destroy();
    });

    it('cannot be update with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({buttonClass: 'btn'});

      const [viewSwitch, prevBtn, nextBtn, todayBtn, clearBtn] = getParts(picker, [
        '.view-switch',
        '.prev-btn',
        '.next-btn',
        '.today-btn',
        '.clear-btn',
      ]);
      expect(viewSwitch.className, 'to be', 'button view-switch');
      expect(prevBtn.className, 'to be', 'button prev-btn');
      expect(nextBtn.className, 'to be', 'button next-btn');
      expect(todayBtn.className, 'to be', 'button today-btn');
      expect(clearBtn.className, 'to be', 'button clear-btn');

      dp.destroy();
    });
  });

  describe('calendarWeeks', function () {
    const getDisplayedWeeks = (picker) => {
      const calendarWeeks = picker.querySelector('.calendar-weeks');
      return Array.from(calendarWeeks.querySelectorAll('.week')).map(el => el.textContent);
    };

    it('enables display ISO weeks in days view when true', function () {
      const {dp, picker} = createDP(input, {calendarWeeks: true});
      const [viewSwitch, prevBtn] = getParts(picker, ['.view-switch', '.prev-btn']);
      dp.show();

      let calendarWeeks = picker.querySelector('.calendar-weeks');
      expect(isVisible(calendarWeeks), 'to be true');
      expect(getDisplayedWeeks(picker), 'to equal', ['5', '6', '7', '8', '9', '10']);

      prevBtn.click();
      expect(getDisplayedWeeks(picker), 'to equal', ['1', '2', '3', '4', '5', '6']);

      prevBtn.click();
      expect(getDisplayedWeeks(picker), 'to equal', ['48', '49', '50', '51', '52', '1']);

      prevBtn.click();
      expect(getDisplayedWeeks(picker), 'to equal', ['44', '45', '46', '47', '48', '49']);

      dp.setDate('01/01/2021');
      expect(getDisplayedWeeks(picker), 'to equal', ['53', '1', '2', '3', '4', '5']);

      prevBtn.click();
      expect(getDisplayedWeeks(picker), 'to equal', ['49', '50', '51', '52', '53', '1']);

      // months view
      viewSwitch.click();
      expect(picker.querySelector('.calendar-weeks'), 'to be null');

      // years view
      viewSwitch.click();
      expect(picker.querySelector('.calendar-weeks'), 'to be null');

      // decades view
      viewSwitch.click();
      expect(picker.querySelector('.calendar-weeks'), 'to be null');

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({calendarWeeks: true});
      dp.show();

      expect(isVisible(picker.querySelector('.calendar-weeks')), 'to be true');

      dp.setOptions({calendarWeeks: false});
      expect(picker.querySelector('.calendar-weeks'), 'to be null');

      dp.destroy();
    });
  });

  describe('container', function () {
    let foo;

    beforeEach(function () {
      foo = parseHTML('').firstChild;
      testContainer.appendChild(foo);
    });

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

    it('specifies the element to attach the picker', function () {
      const dp = new Datepicker(input, {container: '#foo'});
      expect(document.querySelector('.datepicker').parentElement, 'to be', foo);

      dp.destroy();
    });

    it('cannot be update with setOptions()', function () {
      const dp = new Datepicker(input);
      dp.setOptions({container: '#foo'});

      expect(document.querySelector('.datepicker').parentElement, 'to be', document.body);

      dp.destroy();
    });
  });

  describe('daysOfWeekHighlighted', function () {
    const highlightedCellIndices = (picker) => {
      const cells = getCells(picker);
      return filterCells(cells, '.highlighted').map(el => cells.indexOf(el));
    };
    const highlighted1stWeekIndices = picker => highlightedCellIndices(picker).filter(val => val < 7);

    it('specifies the days of week to highlight by dey numbers', function () {
      const {dp, picker} = createDP(input, {daysOfWeekHighlighted: [1, 5]});
      dp.show();

      expect(highlightedCellIndices(picker), 'to equal', [1, 5, 8, 12, 15, 19, 22, 26, 29, 33, 36, 40]);

      const viewSwitch = getViewSwitch(picker);
      // months view
      viewSwitch.click();
      expect(highlightedCellIndices(picker), 'to equal', []);

      // years view
      viewSwitch.click();
      expect(highlightedCellIndices(picker), 'to equal', []);

      // decades view
      viewSwitch.click();
      expect(highlightedCellIndices(picker), 'to equal', []);

      dp.destroy();
    });

    it('can contain values of 0 - 6 and max 6 items', function () {
      const {dp, picker} = createDP(input, {daysOfWeekHighlighted: [0, -1, 1, 2, 3, 2, 4, 5, 6, 7]});
      dp.show();

      expect(highlighted1stWeekIndices(picker), 'to equal', [0, 1, 2, 3, 4, 5]);

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({daysOfWeekHighlighted: [6, 0, 3]});
      dp.show();

      expect(highlighted1stWeekIndices(picker), 'to equal', [0, 3, 6]);

      dp.setOptions({daysOfWeekHighlighted: []});
      expect(highlightedCellIndices(picker), 'to equal', []);

      dp.destroy();
    });
  });

  describe('defaultViewDate', function () {
    it('specifies the start view date in the case no selection is made', function () {
      const date = new Date(1984, 0, 24);
      const {dp, picker} = createDP(input, {defaultViewDate: date});
      dp.show();

      expect(getViewSwitch(picker).textContent, 'to be', 'January 1984');

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

      dp.setDate('7/4/2020');
      dp.setDate({clear: true});

      expect(getViewSwitch(picker).textContent, 'to be', 'January 1984');

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

      picker.querySelector('.prev-btn').click();
      dp.hide();
      dp.show();

      expect(getViewSwitch(picker).textContent, 'to be', 'January 1984');

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

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.show();

      dp.setOptions({defaultViewDate: new Date(1984, 0, 24)});
      dp.hide();
      dp.show();

      expect(getViewSwitch(picker).textContent, 'to be', 'January 1984');

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

      dp.setOptions({defaultViewDate: new Date(2007, 5, 29)});
      dp.setDate('7/4/2020');
      dp.setDate({clear: true});

      expect(getViewSwitch(picker).textContent, 'to be', 'June 2007');

      cells = getCells(picker);
      expect(filterCells(cells, '.focused'), 'to equal', [cells[33]]);
      expect(cells[33].textContent, 'to be', '29');

      dp.destroy();
    });
  });

  describe('disableTouchKeyboard', function () {
    const ontouchstartSupported = 'ontouchstart' in document;

    before(function () {
      if (!ontouchstartSupported) {
        document.ontouchstart = null;
      }
    });

    after(function () {
      if (!ontouchstartSupported) {
        delete document.ontouchstart;
      }
    });

    it('unfocuses the input after showing the picker', function () {
      const dp = new Datepicker(input, {disableTouchKeyboard: true});
      input.focus();

      expect(document.activeElement, 'not to be', input);

      dp.destroy();
    });

    it('prevents the input from getting focus after an eleent in the picker is clicked', function () {
      const {dp, picker} = createDP(input, {disableTouchKeyboard: true});
      const [viewSwitch, prevBtn] = getParts(picker, ['.view-switch', '.prev-btn']);
      dp.show();

      prevBtn.focus();
      simulant.fire(prevBtn, 'click');
      expect(document.activeElement, 'not to be', input);

      simulant.fire(getCells(picker)[15], 'click');
      expect(document.activeElement, 'not to be', input);

      viewSwitch.focus();
      simulant.fire(viewSwitch, 'click');
      expect(document.activeElement, 'not to be', input);

      simulant.fire(getCells(picker)[6], 'click');
      expect(document.activeElement, 'not to be', input);

      dp.destroy();
    });

    it('is ignored if the browser does not support document.ontouchstart', function () {
      if (ontouchstartSupported) {
        return;
      }
      delete document.ontouchstart;

      const {dp, picker} = createDP(input, {disableTouchKeyboard: true});
      const [viewSwitch, prevBtn] = getParts(picker, ['.view-switch', '.prev-btn']);
      input.focus();

      expect(document.activeElement, 'to be', input);

      prevBtn.focus();
      simulant.fire(prevBtn, 'click');
      expect(document.activeElement, 'to be', input);

      prevBtn.focus();
      simulant.fire(getCells(picker)[15], 'click');
      expect(document.activeElement, 'to be', input);

      viewSwitch.focus();
      simulant.fire(viewSwitch, 'click');
      expect(document.activeElement, 'to be', input);

      viewSwitch.focus();
      simulant.fire(getCells(picker)[6], 'click');
      expect(document.activeElement, 'to be', input);

      dp.destroy();
      document.ontouchstart = null;
    });

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

      expect(document.activeElement, 'not to be', input);

      dp.hide();
      dp.setOptions({disableTouchKeyboard: false});
      input.focus();

      expect(document.activeElement, 'to be', input);

      dp.destroy();
    });
  });

  describe('nextArrow', function () {
    it('specifies the label of the next button in HTML (or plain text)', function () {
      const html = '';
      const {dp, picker} = createDP(input, {nextArrow: html});
      const nextBtn = picker.querySelector('.next-btn');
      dp.show();

      expect(nextBtn.innerHTML, 'to be', html);

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      const nextBtn = picker.querySelector('.next-btn');
      dp.setOptions({nextArrow: 'N'});
      dp.show();

      expect(nextBtn.textContent, 'to be', 'N');

      dp.setOptions({nextArrow: '>'});
      expect(nextBtn.textContent, 'to be', '>');

      dp.destroy();
    });
  });

  describe('prevArrow', function () {
    it('specifies the label of the next button in HTML (or plain text)', function () {
      const html = '';
      const {dp, picker} = createDP(input, {prevArrow: html});
      const prevBtn = picker.querySelector('.prev-btn');
      dp.show();

      expect(prevBtn.innerHTML, 'to be', html);

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      const prevBtn = picker.querySelector('.prev-btn');
      dp.setOptions({prevArrow: 'P'});
      dp.show();

      expect(prevBtn.textContent, 'to be', 'P');

      dp.setOptions({prevArrow: '<'});
      expect(prevBtn.textContent, 'to be', '<');

      dp.destroy();
    });
  });

  describe('showDaysOfWeek', function () {
    it('hides day names of week when false', function () {
      const {dp, picker} = createDP(input, {showDaysOfWeek: false});
      dp.show();

      expect(isVisible(picker.querySelector('.days-of-week')), 'to be false');

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({showDaysOfWeek: false});
      dp.show();

      expect(isVisible(picker.querySelector('.days-of-week')), 'to be false');

      dp.setOptions({showDaysOfWeek: true});
      expect(isVisible(picker.querySelector('.days-of-week')), 'to be true');

      dp.destroy();
    });
  });

  describe('showOnClick', function () {
    it('disables the picker to auto-open on clicking input when false', function () {
      const {dp, picker} = createDP(input, {showOnClick: false});
      input.focus();
      dp.hide();

      simulant.fire(input, 'mousedown');
      input.click();
      expect(isVisible(picker), 'to be false');

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({showOnClick: false});
      input.focus();
      dp.hide();
      simulant.fire(input, 'mousedown');
      input.click();

      expect(isVisible(picker), 'to be false');

      dp.setOptions({showOnClick: true});
      simulant.fire(input, 'mousedown');
      input.click();

      expect(isVisible(picker), 'to be true');

      dp.destroy();
    });
  });

  describe('showOnFocus', function () {
    it('disables the picker to auto-open on focus when false', function () {
      const {dp, picker} = createDP(input, {showOnFocus: false});
      input.focus();

      expect(isVisible(picker), 'to be false');

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({showOnFocus: false});
      input.focus();

      expect(isVisible(picker), 'to be false');

      input.blur();
      dp.setOptions({showOnFocus: true});
      input.focus();

      expect(isVisible(picker), 'to be true');

      dp.destroy();
    });
  });

  describe('title', function () {
    it('specifies the title of the picker and shows it when not empty', function () {
      const {dp, picker} = createDP(input, {title: 'Foo Bar'});
      const title = picker.querySelector('.datepicker-title');
      dp.show();

      expect(title.textContent, 'to be', 'Foo Bar');
      expect(isVisible(title), 'to be true');

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      const title = picker.querySelector('.datepicker-title');
      dp.setOptions({title: 'My Datepicker'});
      dp.show();

      expect(title.textContent, 'to be', 'My Datepicker');
      expect(isVisible(title), 'to be true');

      dp.setOptions({title: ''});
      expect(title.textContent, 'to be', '');
      expect(isVisible(title), 'to be false');

      dp.destroy();
    });
  });

  describe('todayHighlight', function () {
    it('highlights the current date in days view when true', function () {
      const {dp, picker} = createDP(input, {todayHighlight: true});
      const viewSwitch = getViewSwitch(picker);
      dp.show();

      let cells = getCells(picker);
      expect(filterCells(cells, '.today'), 'to equal', [cells[19]]);

      picker.querySelector('.prev-btn').click();
      expect(filterCells(getCells(picker), '.today'), 'to equal', []);

      picker.querySelector('.next-btn').click();
      viewSwitch.click();
      expect(filterCells(getCells(picker), '.today'), 'to equal', []);

      viewSwitch.click();
      expect(filterCells(getCells(picker), '.today'), 'to equal', []);

      viewSwitch.click();
      expect(filterCells(getCells(picker), '.today'), 'to equal', []);

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({todayHighlight: true});
      dp.show();

      let cells = getCells(picker);
      expect(filterCells(cells, '.today'), 'to equal', [cells[19]]);

      dp.setOptions({todayHighlight: false});

      cells = getCells(picker);
      expect(filterCells(cells, '.today'), 'to equal', []);

      dp.destroy();
    });
  });

  describe('updateOnBlur', function () {
    it('discards unparsed input on losing focus when false', function () {
      const outsider = document.createElement('p');
      testContainer.appendChild(outsider);

      const {dp, picker} = createDP(input, {updateOnBlur: false});
      input.focus();
      input.value = 'foo';

      // on tab key press
      simulant.fire(input, 'keydown', {key: 'Tab'});
      expect(input.value, 'to be', '');

      dp.setDate('04/22/2020');
      dp.show();
      dp.enterEditMode();
      input.value = 'foo';

      simulant.fire(input, 'keydown', {key: 'Tab'});
      expect(input.value, 'to be', '04/22/2020');

      // on click outside
      dp.show();
      input.value = 'foo';

      simulant.fire(picker.querySelector('.dow'), 'mousedown');
      expect(input.value, 'to be', 'foo');

      simulant.fire(input, 'mousedown');
      expect(input.value, 'to be', 'foo');

      simulant.fire(outsider, 'mousedown');
      expect(input.value, 'to be', '04/22/2020');

      dp.setDate({clear: true});
      input.value = 'foo';

      simulant.fire(outsider, 'mousedown');
      expect(input.value, 'to be', '');

      dp.destroy();
      testContainer.removeChild(outsider);
    });

    it('can be updated with setOptions()', function () {
      const dp = new Datepicker(input);
      dp.setOptions({updateOnBlur: false});
      input.focus();
      input.value = '04/22/2020';

      simulant.fire(input, 'keydown', {key: 'Tab'});
      expect(input.value, 'to be', '');

      dp.setOptions({updateOnBlur: true});
      input.focus();
      input.value = '04/22/2020';

      simulant.fire(input, 'keydown', {key: 'Tab'});
      expect(input.value, 'to be', '04/22/2020');

      dp.destroy();
    });
  });

  describe('weekStart', function () {
    const getDayNames = (picker) => {
      const daysOfWeek = picker.querySelector('.days-of-week');
      return Array.from(daysOfWeek.children).map(el => el.textContent);
    };
    const getDatesInColumn = (picker, colIndex) => {
      const cells = getCells(picker);
      return cells.reduce((dates, el, ix) => {
        if (ix % 7 === colIndex) {
          dates.push(el.textContent);
        }
        return dates;
      }, []);
    };

    it('specifies the day of week to display in the first column', function () {
      const {dp, picker} = createDP(input, {weekStart: 1});
      dp.show();

      expect(getDayNames(picker), 'to equal', ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']);
      expect(getDatesInColumn(picker, 0), 'to equal', ['27', '3', '10', '17', '24', '2']);
      expect(getDatesInColumn(picker, 6), 'to equal', ['2', '9', '16', '23', '1', '8']);

      dp.destroy();
    });

    it('can be updated with setOptions()', function () {
      const {dp, picker} = createDP(input);
      dp.setOptions({weekStart: 4});
      dp.show();

      expect(getDayNames(picker), 'to equal', ['Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We']);
      expect(getDatesInColumn(picker, 0), 'to equal', ['30', '6', '13', '20', '27', '5']);
      expect(getDatesInColumn(picker, 6), 'to equal', ['5', '12', '19', '26', '4', '11']);

      dp.setOptions({weekStart: 0});

      expect(getDayNames(picker), 'to equal', ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
      expect(getDatesInColumn(picker, 0), 'to equal', ['26', '2', '9', '16', '23', '1']);
      expect(getDatesInColumn(picker, 6), 'to equal', ['1', '8', '15', '22', '29', '7']);

      dp.destroy();
    });
  });
});