@ohos-ports/flowbite-datepicker 2.0.0-beta.0

package/test/DateRangePicker/options.js

@@ -0,0 +1,308 @@
+describe('DateRangePicker - options', 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);
+  });
+
+  describe('allowOneSidedRange', function () {
+    it('disables the requirement for both sides of range to be set/unset', function () {
+      let {drp, picker0, picker1} = createDRP(elem, {allowOneSidedRange: true});
+      let cells0 = getCells(picker0);
+      let cells1 = getCells(picker1);
+
+      drp.datepickers[0].show();
+      cells0[16].click();
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), undefined]);
+      expect(drp.getDates(), 'to equal', [new Date(drp.dates[0]), undefined]);
+      expect(input0.value, 'to be', '02/11/2020');
+      expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]);
+      expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]);
+      expect(filterCells(cells0, '.range-end'), 'to equal', []);
+      expect(filterCells(cells0, '.range'), 'to equal', []);
+      expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]);
+
+      expect(input1.value, 'to be', '');
+      expect(filterCells(cells1, '.selected'), 'to equal', []);
+      expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[16]]);
+      expect(filterCells(cells1, '.range-end'), 'to equal', []);
+      expect(filterCells(cells1, '.range'), 'to equal', []);
+      expect(filterCells(cells1, '.focused'), 'to equal', [cells1[19]]);
+
+      drp.datepickers[1].show();
+      cells1[25].click();
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 1, 20)]);
+      expect(drp.getDates(), 'to equal', drp.dates.map(date => new Date(date)));
+      expect(input0.value, 'to be', '02/11/2020');
+      expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]);
+      expect(filterCells(cells0, '.range-start'), 'to equal', [cells0[16]]);
+      expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[25]]);
+      expect(filterCells(cells0, '.range'), 'to equal', cells0.slice(17, 25));
+      expect(filterCells(cells0, '.focused'), 'to equal', [cells0[16]]);
+
+      expect(input1.value, 'to be', '02/20/2020');
+      expect(filterCells(cells1, '.selected'), 'to equal', [cells1[25]]);
+      expect(filterCells(cells1, '.range-start'), 'to equal', [cells1[16]]);
+      expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[25]]);
+      expect(filterCells(cells1, '.range'), 'to equal', cells1.slice(17, 25));
+      expect(filterCells(cells1, '.focused'), 'to equal', [cells1[25]]);
+
+      simulant.fire(input0, 'keydown', {key: 'Escape'});
+      input0.value = '';
+      simulant.fire(input0, 'keydown', {key: 'Enter'});
+
+      expect(drp.dates, 'to equal', [undefined, dateValue(2020, 1, 20)]);
+      expect(drp.getDates(), 'to equal', [undefined, new Date(drp.dates[1])]);
+      expect(input0.value, 'to be', '');
+      expect(filterCells(cells0, '.selected'), 'to equal', []);
+      expect(filterCells(cells0, '.range-start'), 'to equal', []);
+      expect(filterCells(cells0, '.range-end'), 'to equal', [cells0[25]]);
+      expect(filterCells(cells0, '.range'), 'to equal', []);
+      expect(filterCells(cells0, '.focused'), 'to equal', [cells0[19]]);
+
+      expect(input1.value, 'to be', '02/20/2020');
+      expect(filterCells(cells1, '.selected'), 'to equal', [cells1[25]]);
+      expect(filterCells(cells1, '.range-start'), 'to equal', []);
+      expect(filterCells(cells1, '.range-end'), 'to equal', [cells1[25]]);
+      expect(filterCells(cells1, '.range'), 'to equal', []);
+      expect(filterCells(cells1, '.focused'), 'to equal', [cells1[25]]);
+
+      drp.destroy();
+      input0.value = '';
+      input1.value = '';
+
+      // by setDates()
+      ({drp, picker0, picker1} = createDRP(elem, {allowOneSidedRange: true}));
+      cells0 = getCells(picker0);
+      cells1 = getCells(picker1);
+
+      drp.setDates('02/11/2020');
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), undefined]);
+      expect(input0.value, 'to be', '02/11/2020');
+      expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]);
+      expect(input1.value, 'to be', '');
+      expect(filterCells(cells1, '.selected'), 'to equal', []);
+
+      drp.setDates(undefined, '02/20/2020');
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), dateValue(2020, 1, 20)]);
+      expect(input0.value, 'to be', '02/11/2020');
+      expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]);
+      expect(input1.value, 'to be', '02/20/2020');
+      expect(filterCells(cells1, '.selected'), 'to equal', [cells1[25]]);
+
+      drp.setDates({clear: true});
+
+      expect(drp.dates, 'to equal', [undefined, dateValue(2020, 1, 20)]);
+      expect(input0.value, 'to be', '');
+      expect(filterCells(cells0, '.selected'), 'to equal', []);
+      expect(input1.value, 'to be', '02/20/2020');
+      expect(filterCells(cells1, '.selected'), 'to equal', [cells1[25]]);
+
+      drp.setDates('02/11/2020', {clear: true});
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), undefined]);
+      expect(input0.value, 'to be', '02/11/2020');
+      expect(filterCells(cells0, '.selected'), 'to equal', [cells0[16]]);
+      expect(input1.value, 'to be', '');
+      expect(filterCells(cells1, '.selected'), 'to equal', []);
+
+      drp.setDates({clear: true}, '02/20/2020');
+
+      expect(drp.dates, 'to equal', [undefined, dateValue(2020, 1, 20)]);
+      expect(input0.value, 'to be', '');
+      expect(filterCells(cells0, '.selected'), 'to equal', []);
+      expect(input1.value, 'to be', '02/20/2020');
+      expect(filterCells(cells1, '.selected'), 'to equal', [cells1[25]]);
+
+      drp.setDates(undefined, {clear: true});
+
+      expect(drp.dates, 'to equal', [undefined, undefined]);
+      expect(input0.value, 'to be', '');
+      expect(filterCells(cells0, '.selected'), 'to equal', []);
+      expect(input1.value, 'to be', '');
+      expect(filterCells(cells1, '.selected'), 'to equal', []);
+
+      drp.destroy();
+    });
+
+    it('can be updated with setOptions()', function () {
+      const drp = new DateRangePicker(elem);
+      drp.setOptions({allowOneSidedRange: true});
+
+      input0.value = '02/11/2020';
+      simulant.fire(input0, 'keydown', {key: 'Enter'});
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 11), undefined]);
+
+      drp.setDates({clear: true}, '02/11/2020');
+      expect(drp.dates, 'to equal', [undefined, dateValue(2020, 1, 11)]);
+
+      drp.setOptions({allowOneSidedRange: false});
+
+      input1.value = '02/20/2020';
+      simulant.fire(input1, 'keydown', {key: 'Enter'});
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 20), dateValue(2020, 1, 20)]);
+
+      drp.setDates({clear: true});
+      expect(drp.dates, 'to equal', [undefined, undefined]);
+
+      drp.destroy();
+    });
+  });
+
+  describe('pickLevel', function () {
+    it('changes the span of range selection to 1st of a month → last day of a month when 1', function () {
+      input0.value = '2/14/2020';
+      input1.value = '2/14/2020';
+
+      const {drp, picker0, picker1} = createDRP(elem, {pickLevel: 1});
+      const viewSwitch0 = picker0.querySelector('.view-switch');
+      const viewSwitch1 = picker1.querySelector('.view-switch');
+      let cells0 = getCells(picker0);
+      let cells1 = getCells(picker1);
+
+      input0.focus();
+      expect(drp.dates, 'to equal', [dateValue(2020, 1, 1), dateValue(2020, 1, 29)]);
+      expect(input0.value, 'to be', '02/01/2020');
+      expect(viewSwitch0.textContent, 'to be', '2020');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range'), 'to equal', []);
+      expect(getCellIndices(cells0, '.focused'), 'to equal', [1]);
+
+      input1.focus();
+      expect(input1.value, 'to be', '02/29/2020');
+      expect(viewSwitch1.textContent, 'to be', '2020');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range'), 'to equal', []);
+      expect(getCellIndices(cells1, '.focused'), 'to equal', [1]);
+
+      // mouse operation
+      cells0[0].click();
+      cells1[6].click();
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 0, 1), dateValue(2020, 6, 31)]);
+      expect(input0.value, 'to be', '01/01/2020');
+      expect(viewSwitch0.textContent, 'to be', '2020');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [0]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [0]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', [6]);
+
+      input1.focus();
+      expect(input1.value, 'to be', '07/31/2020');
+      expect(viewSwitch1.textContent, 'to be', '2020');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [6]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', [0]);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [6]);
+
+      // api call
+      drp.setDates('2/14/2021', '3/14/2020');
+
+      expect(drp.dates, 'to equal', [dateValue(2020, 2, 1), dateValue(2021, 1, 28)]);
+      expect(input0.value, 'to be', '03/01/2020');
+      expect(viewSwitch0.textContent, 'to be', '2020');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [2]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [2]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', []);
+
+      input1.focus();
+      expect(input1.value, 'to be', '02/28/2021');
+      expect(viewSwitch1.textContent, 'to be', '2021');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', []);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [1]);
+
+      drp.destroy();
+    });
+
+    it('changes the span of range selection to Jan 1st of a month → Dec 31st of a month when 2', function () {
+      input0.value = '2/14/2020';
+      input1.value = '2/14/2020';
+
+      const {drp, picker0, picker1} = createDRP(elem, {pickLevel: 2});
+      const viewSwitch0 = picker0.querySelector('.view-switch');
+      const viewSwitch1 = picker1.querySelector('.view-switch');
+      let cells0 = getCells(picker0);
+      let cells1 = getCells(picker1);
+
+      input0.focus();
+      expect(drp.dates, 'to equal', [dateValue(2020, 0, 1), dateValue(2020, 11, 31)]);
+      expect(input0.value, 'to be', '01/01/2020');
+      expect(viewSwitch0.textContent, 'to be', '2020-2029');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', [1]);
+      expect(getCellIndices(cells0, '.range'), 'to equal', []);
+      expect(getCellIndices(cells0, '.focused'), 'to equal', [1]);
+
+      input1.focus();
+      expect(input1.value, 'to be', '12/31/2020');
+      expect(viewSwitch1.textContent, 'to be', '2020-2029');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [1]);
+      expect(getCellIndices(cells1, '.range'), 'to equal', []);
+      expect(getCellIndices(cells1, '.focused'), 'to equal', [1]);
+
+      // mouse operation
+      cells0[0].click();
+      cells1[3].click();
+
+      expect(drp.dates, 'to equal', [dateValue(2019, 0, 1), dateValue(2022, 11, 31)]);
+      expect(input0.value, 'to be', '01/01/2019');
+      expect(viewSwitch0.textContent, 'to be', '2010-2019');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [10]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [10]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', []);
+
+      input1.focus();
+      expect(input1.value, 'to be', '12/31/2022');
+      expect(viewSwitch1.textContent, 'to be', '2020-2029');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [3]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', [0]);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [3]);
+
+      // api call
+      drp.setDates('2/14/2025', '3/14/2021');
+
+      expect(drp.dates, 'to equal', [dateValue(2021, 0, 1), dateValue(2025, 11, 31)]);
+      expect(input0.value, 'to be', '01/01/2021');
+      expect(viewSwitch0.textContent, 'to be', '2020-2029');
+      expect(getCellIndices(cells0, '.selected'), 'to equal', [2]);
+      expect(getCellIndices(cells0, '.range-start'), 'to equal', [2]);
+      expect(getCellIndices(cells0, '.range-end'), 'to equal', [6]);
+
+      input1.focus();
+      expect(input1.value, 'to be', '12/31/2025');
+      expect(viewSwitch1.textContent, 'to be', '2020-2029');
+      expect(getCellIndices(cells1, '.selected'), 'to equal', [6]);
+      expect(getCellIndices(cells1, '.range-start'), 'to equal', [2]);
+      expect(getCellIndices(cells1, '.range-end'), 'to equal', [6]);
+
+      drp.destroy();
+    });
+  });
+});

package/test/Datepicker/Datepicker-object.js

@@ -0,0 +1,236 @@
+describe('Datepicker', function () {
+  let input;
+
+  before(function () {
+    input = document.createElement('input');
+    testContainer.appendChild(input);
+  });
+
+  after(function () {
+    testContainer.removeChild(input);
+  });
+
+  it('input element\'s value is used for the initial date', function () {
+    input.value = '04/22/2020';
+
+    const dp = new Datepicker(input);
+    expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]);
+
+    dp.destroy();
+    input.value = '';
+  });
+
+  it('the picker is hidden at start', function () {
+    const dp = new Datepicker(input);
+    expect(isVisible(document.querySelector('.datepicker')), 'to be false');
+    expect(dp.active, 'to be false');
+    dp.destroy();
+  });
+
+  it('the picker becomes visible when the input element get focused', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+
+    expect(isVisible(document.querySelector('.datepicker')), 'to be true');
+    expect(dp.active, 'to be true');
+    dp.destroy();
+  });
+
+  describe('hide()', function () {
+    it('makes the picker invisible', function () {
+      const dp = new Datepicker(input);
+      input.focus();
+      dp.hide();
+
+      expect(isVisible(document.querySelector('.datepicker')), 'to be false');
+      expect(dp.active, 'to be false');
+
+      dp.destroy();
+    });
+  });
+
+  describe('show()', function () {
+    it('makes the picker visible', function () {
+      const dp = new Datepicker(input);
+      dp.show();
+
+      expect(isVisible(document.querySelector('.datepicker')), 'to be true');
+      expect(dp.active, 'to be true');
+
+      dp.destroy();
+    });
+
+    it('moves the focus onto the input field', function () {
+      // related to issue #52
+      const dp = new Datepicker(input);
+      const spyShow = sinon.spy(dp, 'show');
+      input.blur();
+      dp.show();
+
+      expect(document.activeElement, 'to be', input);
+      // the focus listener's calling show() is prevented
+      expect(spyShow.calledOnce, 'to be true');
+
+      spyShow.restore();
+      dp.destroy();
+    });
+
+    it('adds or removes dir attribute to/from the picker if picker\'s text direction != input\'s', function (done) {
+      testContainer.dir = 'rtl';
+
+      const {dp, picker} = createDP(input);
+      dp.show();
+      expect(picker.dir, 'to be', 'rtl');
+
+      dp.hide();
+      testContainer.removeAttribute('dir');
+
+      dp.show();
+      expect(picker.hasAttribute('dir'), 'to be false');
+
+      dp.hide();
+
+      const htmlElem = document.querySelector('html');
+      htmlElem.dir = 'rtl';
+      input.style.direction = 'ltr';
+
+      dp.show();
+      expect(picker.dir, 'to be', 'ltr');
+
+      dp.hide();
+      input.removeAttribute('style');
+
+      dp.show();
+      expect(picker.hasAttribute('dir'), 'to be false');
+
+      dp.destroy();
+      htmlElem.removeAttribute('dir');
+      htmlElem.style.direction = 'ltr';
+
+      const checkDirChange = () => {
+        if (window.getComputedStyle(htmlElem).direction === 'ltr') {
+          htmlElem.removeAttribute('style');
+          done();
+        } else {
+          setTimeout(checkDirChange, 10);
+        }
+      };
+      checkDirChange();
+    });
+  });
+
+  describe('picker', function () {
+    it('displays current month with current date as focued date if no initial date is provided', function () {
+      let clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
+
+      const {dp, picker} = createDP(input);
+      const days = Array.from(picker.querySelector('.datepicker-grid').children);
+      dp.show();
+
+      expect(getViewSwitch(picker).textContent, 'to be', 'February 2020');
+
+      expect(days, 'to have length', 42);
+      expect(filterCells(days, '.datepicker-cell'), 'to have length', 42);
+      expect(days[0].textContent, 'to be', '26');
+      expect(days[0].classList.contains('prev'), 'to be true');
+      expect(days[0].classList.contains('next'), 'to be false');
+      expect(days[5].textContent, 'to be', '31');
+      expect(days[5].classList.contains('prev'), 'to be true');
+      expect(days[5].classList.contains('next'), 'to be false');
+      expect(days[6].textContent, 'to be', '1');
+      expect(days[6].classList.contains('prev'), 'to be false');
+      expect(days[6].classList.contains('next'), 'to be false');
+      expect(days[34].textContent, 'to be', '29');
+      expect(days[34].classList.contains('prev'), 'to be false');
+      expect(days[34].classList.contains('next'), 'to be false');
+      expect(days[35].textContent, 'to be', '1');
+      expect(days[35].classList.contains('prev'), 'to be false');
+      expect(days[35].classList.contains('next'), 'to be true');
+      expect(days[41].textContent, 'to be', '7');
+      expect(days[41].classList.contains('prev'), 'to be false');
+      expect(days[41].classList.contains('next'), 'to be true');
+
+      expect(filterCells(days, '.focused'), 'to equal', [days[19]]);
+      expect(filterCells(days, '.selected'), 'to be empty');
+      expect(days[19].textContent, 'to be', '14');
+
+      dp.destroy();
+      clock.restore();
+    });
+
+    it('displays iniial date\'s month with the date as selected and focued date', function () {
+      input.value = '04/22/2020';
+
+      const {dp, picker} = createDP(input);
+      const days = Array.from(picker.querySelector('.datepicker-grid').children);
+      dp.show();
+
+      expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
+
+      expect(days, 'to have length', 42);
+      expect(filterCells(days, '.datepicker-cell'), 'to have length', 42);
+      expect(days[0].textContent, 'to be', '29');
+      expect(days[0].classList.contains('prev'), 'to be true');
+      expect(days[0].classList.contains('next'), 'to be false');
+      expect(days[2].textContent, 'to be', '31');
+      expect(days[2].classList.contains('prev'), 'to be true');
+      expect(days[2].classList.contains('next'), 'to be false');
+      expect(days[3].textContent, 'to be', '1');
+      expect(days[3].classList.contains('prev'), 'to be false');
+      expect(days[3].classList.contains('next'), 'to be false');
+      expect(days[32].textContent, 'to be', '30');
+      expect(days[32].classList.contains('prev'), 'to be false');
+      expect(days[32].classList.contains('next'), 'to be false');
+      expect(days[33].textContent, 'to be', '1');
+      expect(days[33].classList.contains('prev'), 'to be false');
+      expect(days[33].classList.contains('next'), 'to be true');
+      expect(days[41].textContent, 'to be', '9');
+      expect(days[41].classList.contains('prev'), 'to be false');
+      expect(days[41].classList.contains('next'), 'to be true');
+
+      expect(filterCells(days, '.focused'), 'to equal', [days[24]]);
+      expect(filterCells(days, '.selected'), 'to equal', [days[24]]);
+      expect(days[24].textContent, 'to be', '22');
+
+      dp.destroy();
+      input.value = '';
+    });
+
+    it('displays day names of week by default', function () {
+      const {dp, picker} = createDP(input);
+      const daysOfWeek = picker.querySelector('.days-of-week');
+      const days = Array.from(daysOfWeek.children).map(el => el.textContent);
+
+      expect(days, 'to equal', ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
+
+      dp.destroy();
+    });
+
+    it('does not display calendar weeks by default', function () {
+      const {dp, picker} = createDP(input);
+
+      expect(picker.querySelectorAll('.calendar-weeks').length, 'to be', 0);
+
+      dp.destroy();
+    });
+
+    it('uses "button" for the main class of button element', function () {
+      const {dp, picker} = createDP(input);
+      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();
+    });
+  });
+});