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

package/test/Datepicker/api-methods.js

@@ -0,0 +1,328 @@
+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('<input type="text" value="04/22/2020">').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');
+    });
+  });
+});

package/test/_utils/date.js

@@ -0,0 +1,102 @@
+var dateUtils = (function (exports) {
+  'use strict';
+
+  function stripTime(timeValue) {
+    return new Date(timeValue).setHours(0, 0, 0, 0);
+  }
+
+  function today() {
+    return new Date().setHours(0, 0, 0, 0);
+  }
+
+  // Get the time value of the start of given date or year, month and day
+  function dateValue(...args) {
+    switch (args.length) {
+      case 0:
+        return today();
+      case 1:
+        return stripTime(args[0]);
+    }
+
+    // use setFullYear() to keep 2-digit year from being mapped to 1900-1999
+    const newDate = new Date(0);
+    newDate.setFullYear(...args);
+    return newDate.setHours(0, 0, 0, 0);
+  }
+
+  function addDays(date, amount) {
+    const newDate = new Date(date);
+    return newDate.setDate(newDate.getDate() + amount);
+  }
+
+  function addWeeks(date, amount) {
+    return addDays(date, amount * 7);
+  }
+
+  function addMonths(date, amount) {
+    // If the day of the date is not in the new month, the last day of the new
+    // month will be returned. e.g. Jan 31 + 1 month → Feb 28 (not Mar 03)
+    const newDate = new Date(date);
+    const monthsToSet = newDate.getMonth() + amount;
+    let expectedMonth = monthsToSet % 12;
+    if (expectedMonth < 0) {
+      expectedMonth += 12;
+    }
+
+    const time = newDate.setMonth(monthsToSet);
+    return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
+  }
+
+  function addYears(date, amount) {
+    // If the date is Feb 29 and the new year is not a leap year, Feb 28 of the
+    // new year will be returned.
+    const newDate = new Date(date);
+    const expectedMonth = newDate.getMonth();
+    const time = newDate.setFullYear(newDate.getFullYear() + amount);
+    return expectedMonth === 1 && newDate.getMonth() === 2 ? newDate.setDate(0) : time;
+  }
+
+  // Calculate the distance bettwen 2 days of the week
+  function dayDiff(day, from) {
+    return (day - from + 7) % 7;
+  }
+
+  // Get the date of the specified day of the week of given base date
+  function dayOfTheWeekOf(baseDate, dayOfWeek, weekStart = 0) {
+    const baseDay = new Date(baseDate).getDay();
+    return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
+  }
+
+  // Get the ISO week of a date
+  function getWeek(date) {
+    // start of ISO week is Monday
+    const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
+    // 1st week == the week where the 4th of January is in
+    const firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
+    return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
+  }
+
+  // Get the start year of the period of years that includes given date
+  // years: length of the year period
+  function startOfYearPeriod(date, years) {
+    /* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
+    const year = new Date(date).getFullYear();
+    return Math.floor(year / years) * years;
+  }
+
+  exports.addDays = addDays;
+  exports.addMonths = addMonths;
+  exports.addWeeks = addWeeks;
+  exports.addYears = addYears;
+  exports.dateValue = dateValue;
+  exports.dayOfTheWeekOf = dayOfTheWeekOf;
+  exports.getWeek = getWeek;
+  exports.startOfYearPeriod = startOfYearPeriod;
+  exports.stripTime = stripTime;
+  exports.today = today;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({});

package/test/_utils/dom.js

@@ -0,0 +1,70 @@
+var domUtils = (function (exports) {
+  'use strict';
+
+  const range = document.createRange();
+
+  function parseHTML(html) {
+    return range.createContextualFragment(html);
+  }
+
+  // equivalent to jQuery's :visble
+  function isVisible(el) {
+    return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+  }
+
+  function hideElement(el) {
+    if (el.style.display === 'none') {
+      return;
+    }
+    // back up the existing display setting in data-style-display
+    if (el.style.display) {
+      el.dataset.styleDisplay = el.style.display;
+    }
+    el.style.display = 'none';
+  }
+
+  function showElement(el) {
+    if (el.style.display !== 'none') {
+      return;
+    }
+    if (el.dataset.styleDisplay) {
+      // restore backed-up dispay property
+      el.style.display = el.dataset.styleDisplay;
+      delete el.dataset.styleDisplay;
+    } else {
+      el.style.display = '';
+    }
+  }
+
+  function emptyChildNodes(el) {
+    if (el.firstChild) {
+      el.removeChild(el.firstChild);
+      emptyChildNodes(el);
+    }
+  }
+
+  function replaceChildNodes(el, newChildNodes) {
+    emptyChildNodes(el);
+    if (newChildNodes instanceof DocumentFragment) {
+      el.appendChild(newChildNodes);
+    } else if (typeof newChildNodes === 'string') {
+      el.appendChild(parseHTML(newChildNodes));
+    } else if (typeof newChildNodes.forEach === 'function') {
+      newChildNodes.forEach((node) => {
+        el.appendChild(node);
+      });
+    }
+  }
+
+  exports.emptyChildNodes = emptyChildNodes;
+  exports.hideElement = hideElement;
+  exports.isVisible = isVisible;
+  exports.parseHTML = parseHTML;
+  exports.replaceChildNodes = replaceChildNodes;
+  exports.showElement = showElement;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({});