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

package/test/unit/lib/date.js

@@ -0,0 +1,211 @@
+import '../_setup.js';
+import {
+  stripTime,
+  dateValue,
+  today,
+  addDays,
+  addWeeks,
+  addMonths,
+  addYears,
+  dayOfTheWeekOf,
+  getWeek,
+  startOfYearPeriod
+} from '../../../js/lib/date.js';
+
+describe('lib/date', function () {
+  describe('stripTime()', function () {
+    it('returns the time value of 00:00:00 local time of given time value or date', function () {
+      let origDate = new Date(2016, 8, 24, 13, 55, 32, 235);
+      expect(stripTime(origDate.getTime()), 'to be', new Date(2016, 8, 24).getTime());
+
+      origDate = new Date(2019, 1, 14, 20, 55);
+      expect(stripTime(origDate), 'to be', new Date(2019, 1, 14).getTime());
+    });
+  });
+
+  describe('today()', function () {
+    it('returns the time value of 00:00:00 local time of current date', function () {
+      const now = new Date();
+      const timeValue = today();
+      expect(timeValue, 'to be', now.setHours(0, 0, 0, 0));
+    });
+  });
+
+  describe('dateValue()', function () {
+    it('returns the time value of 00:00:00 local time of the date created by given Date constructor parameters', function () {
+      // from Date object
+      let origDate = new Date(2016, 8, 24, 13, 55, 32, 235);
+      let timeValue = dateValue(origDate);
+      expect(timeValue, 'to be', new Date(2016, 8, 24).getTime());
+
+      // from Date constructor args
+      timeValue = dateValue(2019, 1, 17, 9, 43, 18, 953);
+      expect(timeValue, 'to be', new Date(2019, 1, 17).getTime());
+
+      // from string
+      let origDateStr = '2020-04-20T02:27:15Z';
+      origDate = new Date(origDateStr);
+      timeValue = dateValue(origDateStr);
+      expect(timeValue, 'to be', origDate.setHours(0, 0, 0, 0));
+
+      // from time value
+      origDate = new Date(2016, 8, 24, 13, 55, 32, 235);
+      timeValue = dateValue(origDate.getTime());
+      expect(timeValue, 'to be', new Date(2016, 8, 24).getTime());
+    });
+
+    it('does not map 2-digit year to 1900\'s', function () {
+      let date = new Date(dateValue(86, 8, 24));
+      expect(date.getFullYear(), 'to be', 86);
+      expect(date.getMonth(), 'to be', 8);
+      expect(date.getDate(), 'to be', 24);
+
+      date = new Date(dateValue(19, 1, 17));
+      expect(date.getFullYear(), 'to be', 19);
+      expect(date.getMonth(), 'to be', 1);
+      expect(date.getDate(), 'to be', 17);
+    });
+  });
+
+  describe('addDays()', function () {
+    it('returns the time value of N days after a date or time value', function () {
+      let date1 = new Date(2019, 11, 31);
+      let date2 = addDays(date1, 1);
+      expect(date2, 'to be', new Date(2020, 0, 1).getTime());
+      expect(addDays(date2, 30), 'to be', new Date(2020, 0, 31).getTime());
+
+      date1 = new Date(2020, 0, 1);
+      expect(addDays(date1, -1), 'to be', new Date(2019, 11, 31).getTime());
+      expect(addDays(date1, -10), 'to be', new Date(2019, 11, 22).getTime());
+    });
+  });
+
+  describe('addWeeks()', function () {
+    it('returns the time value of N weeks after a date or time value', function () {
+      let date1 = new Date(2019, 11, 28);
+      let date2 = addWeeks(date1, 1);
+      expect(date2, 'to be', new Date(2020, 0, 4).getTime());
+      expect(addWeeks(date2, 4), 'to be', new Date(2020, 1, 1).getTime());
+
+      date1 = new Date(2020, 0, 4);
+      expect(addWeeks(date1, -1), 'to be', new Date(2019, 11, 28).getTime());
+      expect(addWeeks(date1, -8), 'to be', new Date(2019, 10, 9).getTime());
+    });
+  });
+
+  describe('addMonths()', function () {
+    it('returns the time value of N months after a date or time value', function () {
+      let date1 = new Date(2019, 11, 31);
+      let date2 = addMonths(date1, 1);
+      expect(date2, 'to be', new Date(2020, 0, 31).getTime());
+      expect(addMonths(date2, 29), 'to be', new Date(2022, 5, 30).getTime());
+
+      date1 = new Date(2020, 0, 1);
+      expect(addMonths(date1, -1), 'to be', new Date(2019, 11, 1).getTime());
+      expect(addMonths(date1, -18), 'to be', new Date(2018, 6, 1).getTime());
+    });
+
+    it('returns the end of the next/prev month if the day of the old date is not in the new month', function () {
+      let date = new Date(2019, 9, 31);
+      expect(addMonths(date, 1), 'to be', new Date(2019, 10, 30).getTime());
+      expect(addMonths(date, 18), 'to be', new Date(2021, 3, 30).getTime());
+
+      date = new Date(2019, 11, 31);
+      expect(addMonths(date, -1), 'to be', new Date(2019, 10, 30).getTime());
+      expect(addMonths(date, -30), 'to be', new Date(2017, 5, 30).getTime());
+
+      date = new Date(2019, 0, 31);
+      expect(addMonths(date, 1), 'to be', new Date(2019, 1, 28).getTime());
+      expect(addMonths(date, 13), 'to be', new Date(2020, 1, 29).getTime());
+
+      date = new Date(2020, 0, 31);
+      expect(addMonths(date, 1), 'to be', new Date(2020, 1, 29).getTime());
+      expect(addMonths(date, 13), 'to be', new Date(2021, 1, 28).getTime());
+
+      date = new Date(2019, 2, 30);
+      expect(addMonths(date, -1), 'to be', new Date(2019, 1, 28).getTime());
+      expect(addMonths(date, -37), 'to be', new Date(2016, 1, 29).getTime());
+
+      date = new Date(2020, 2, 30);
+      expect(addMonths(date, -1), 'to be', new Date(2020, 1, 29).getTime());
+      expect(addMonths(date, -37), 'to be', new Date(2017, 1, 28).getTime());
+
+      date = new Date(2020, 1, 29);
+      expect(addMonths(date, 12), 'to be', new Date(2021, 1, 28).getTime());
+      expect(addMonths(date, -24), 'to be', new Date(2018, 1, 28).getTime());
+    });
+  });
+
+  describe('addYears()', function () {
+    it('returns the time value of N years after a date or time value', function () {
+      let date1 = new Date(2019, 11, 31);
+      let date2 = addYears(date1, 1);
+      expect(date2, 'to be', new Date(2020, 11, 31).getTime());
+      expect(addYears(date2, 3), 'to be', new Date(2023, 11, 31).getTime());
+
+      date1 = new Date(2020, 0, 1);
+      expect(addYears(date1, -1), 'to be', new Date(2019, 0, 1).getTime());
+      expect(addYears(date1, -3), 'to be', new Date(2017, 0, 1).getTime());
+    });
+
+    it('returns 2/28 of the year if the old date is 2/29 and the new year is not a leap year', function () {
+      const date = new Date(2020, 1, 29);
+      expect(addYears(date, 1), 'to be', new Date(2021, 1, 28).getTime());
+      expect(addYears(date, -1), 'to be', new Date(2019, 1, 28).getTime());
+      expect(addYears(date, -4), 'to be', new Date(2016, 1, 29).getTime());
+    });
+  });
+
+  describe('dayOfTheWeekOf()', function () {
+    it('returns a date object of given day of the week of given date', function () {
+      expect(dayOfTheWeekOf(new Date(2017, 0, 1), 0), 'to be', new Date(2017, 0, 1).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 3, 5), 1), 'to be', new Date(2017, 3, 3).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 5, 8), 2), 'to be', new Date(2017, 5, 6).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 9, 31), 3), 'to be', new Date(2017, 10, 1).getTime());
+      expect(dayOfTheWeekOf(new Date(2018, 2, 10), 4), 'to be', new Date(2018, 2, 8).getTime());
+      expect(dayOfTheWeekOf(new Date(2018, 5, 19), 5), 'to be', new Date(2018, 5, 22).getTime());
+      expect(dayOfTheWeekOf(new Date(2018, 10, 20), 6), 'to be', new Date(2018, 10, 24).getTime());
+    });
+
+    it('uses sepecified start day of week if it is given', function () {
+      expect(dayOfTheWeekOf(new Date(2017, 0, 1), 0, 1), 'to be', new Date(2017, 0, 1).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 3, 5), 1, 3), 'to be', new Date(2017, 3, 10).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 5, 8), 2, 4), 'to be', new Date(2017, 5, 13).getTime());
+      expect(dayOfTheWeekOf(new Date(2017, 9, 31), 3, 6), 'to be', new Date(2017, 10, 1).getTime());
+      expect(dayOfTheWeekOf(new Date(2018, 2, 10), 4, 5), 'to be', new Date(2018, 2, 15).getTime());
+      expect(dayOfTheWeekOf(new Date(2018, 5, 19), 5, 2), 'to be', new Date(2018, 5, 22).getTime());
+    });
+  });
+
+  describe('getWeek()', function () {
+    it('returns ISO week number of given date', function () {
+      expect(getWeek(new Date(2015, 0, 1)), 'to be', 1);
+      expect(getWeek(new Date(2015, 3, 26)), 'to be', 17);
+      expect(getWeek(new Date(2015, 8, 12)), 'to be', 37);
+      expect(getWeek(new Date(2015, 10, 15)), 'to be', 46);
+      expect(getWeek(new Date(2016, 0, 1)), 'to be', 53);
+      expect(getWeek(new Date(2016, 0, 7)), 'to be', 1);
+      expect(getWeek(new Date(2016, 6, 21)), 'to be', 29);
+      expect(getWeek(new Date(2016, 8, 6)), 'to be', 36);
+      expect(getWeek(new Date(2016, 11, 1)), 'to be', 48);
+      expect(getWeek(new Date(2017, 0, 1)), 'to be', 52);
+    });
+  });
+
+  describe('startOfYearPeriod()', function () {
+    it('returns the start year of given length of period of years', function () {
+      let date = new Date(2121, 0, 1);
+      expect(startOfYearPeriod(date, 10), 'to be', 2120);
+      expect(startOfYearPeriod(date, 100), 'to be', 2100);
+      expect(startOfYearPeriod(date, 1000), 'to be', 2000);
+
+      date = new Date(1984, 0, 1);
+      expect(startOfYearPeriod(date, 10), 'to be', 1980);
+      expect(startOfYearPeriod(date, 100), 'to be', 1900);
+      expect(startOfYearPeriod(date, 1000), 'to be', 1000);
+
+      expect(startOfYearPeriod(new Date(738, 5, 30), 20), 'to be', 720);
+      expect(startOfYearPeriod(new Date(0, 5, 30).setFullYear(88), 25), 'to be', 75);
+    });
+  });
+});

package/test/unit/lib/dom.js

@@ -0,0 +1,142 @@
+import '../_setup.js';
+import {
+  parseHTML,
+  isVisible,
+  hideElement,
+  showElement,
+  emptyChildNodes,
+  replaceChildNodes,
+} from '../../../js/lib/dom.js';
+
+describe('lib/dom', function () {
+  let el;
+
+  before(function () {
+    testContainer.innerHTML = '<div class="test"></div>';
+    el = testContainer.firstChild;
+  });
+
+  after(function () {
+    testContainer.removeChild(el);
+  });
+
+  describe('parseHTML()', function () {
+    it('parses an html fragment with Range.prototype.createContextualFragment()', function () {
+      const spyFragment = sinon.spy(Range.prototype, 'createContextualFragment');
+      const html = '<div>test</div>';
+      const result = parseHTML(html);
+
+      expect(spyFragment.calledWith(html), 'to be true');
+      expect(spyFragment.returned(result), 'to be true');
+
+      spyFragment.restore();
+    });
+  });
+
+  describe('isVisible()', function () {
+    it('returns true if either offsetHeight > 0, offsetWidth > 0 or getClientRects() has an item', function () {
+      expect(isVisible(el), 'to be false');
+
+      let stub = sinon.stub(el, "offsetHeight").get(() => 10);
+      expect(isVisible(el), 'to be true');
+      stub.restore();
+
+      stub = sinon.stub(el, "offsetWidth").get(() => 10);
+      expect(isVisible(el), 'to be true');
+      stub.restore();
+
+      stub = sinon.stub(el, 'getClientRects').callsFake(() => [{x: 10}, {x: 20}]);
+      expect(isVisible(el), 'to be true');
+      stub.restore();
+    });
+  });
+
+  describe('hideElement()', function () {
+    it('sets none to style.display', function () {
+      hideElement(el);
+      expect(el.style.display, 'to be', 'none');
+      el.removeAttribute('style');
+    });
+
+    it('copies style.display to data-style-display attribute if other than none is set', function () {
+      el.style.display = 'flex';
+      hideElement(el);
+
+      expect(el.style.display, 'to be', 'none');
+      expect(el.getAttribute('data-style-display'), 'to be', 'flex');
+
+      el.removeAttribute('data-style-display');
+      el.style.display = 'none';
+      hideElement(el);
+
+      expect(el.hasAttribute('data-style-display'), 'to be false');
+
+      el.removeAttribute('style');
+    });
+  });
+
+  describe('showElement()', function () {
+    it('clears style.display if none is set', function () {
+      el.style.display = 'none';
+      showElement(el);
+      expect(el.style.display, 'to be', '');
+
+      el.style.display = 'inline';
+      showElement(el);
+      expect(el.style.display, 'to be', 'inline');
+
+      el.removeAttribute('style');
+    });
+
+    it('restores the value of data-style-display attribute to style.display if it exists', function () {
+      el.style.display = 'none';
+      el.setAttribute('data-style-display', 'flex');
+      showElement(el);
+
+      expect(el.style.display, 'to be', 'flex');
+      expect(el.hasAttribute('data-style-display'), 'to be false');
+
+      el.removeAttribute('style');
+    });
+  });
+
+  describe('emptyChildNodes()', function () {
+    it('removes all child nodes', function () {
+      el.innerHTML = '<div>test</div><!-- comment--><div></div>';
+      emptyChildNodes(el);
+
+      expect(el.innerHTML, 'to be empty');
+    });
+  });
+
+  describe('replaceChildNodes()', function () {
+    it('replace all child nodes with given nodes', function () {
+      const htmlBefore = '<div>test</div><!-- comment--><div></div>';
+      const htmlAfter = '<div id="foo">foo</div><div id="bar">bar</div>';
+
+      // with html
+      el.innerHTML = htmlBefore;
+      replaceChildNodes(el, htmlAfter);
+      expect(el.innerHTML, 'to be', htmlAfter);
+
+      // with DocumentFragment
+      const fragment = document.createRange().createContextualFragment(htmlAfter);
+      el.innerHTML = htmlBefore;
+      replaceChildNodes(el, fragment);
+      expect(el.innerHTML, 'to be', htmlAfter);
+
+      // with NodeList
+      const nodeList = el.querySelectorAll('div');
+      el.innerHTML = htmlBefore;
+      replaceChildNodes(el, nodeList);
+      expect(el.innerHTML, 'to be', htmlAfter);
+
+      // with array
+      el.innerHTML = htmlBefore;
+      replaceChildNodes(el, Array.from(nodeList));
+      expect(el.innerHTML, 'to be', htmlAfter);
+
+      el.innerHTML = '';
+    });
+  });
+});

package/test/unit/lib/event.js

@@ -0,0 +1,207 @@
+import '../_setup.js';
+
+describe('lib/evnet', function () {
+  let listenerRegistry;
+  let spyAEL;
+  let spyREL;
+  //
+  let registerListeners;
+  let unregisterListeners;
+  let findElementInEventPath;
+
+  before(function () {
+    spyAEL = sinon.spy(EventTarget.prototype, 'addEventListener');
+    spyREL = sinon.spy(EventTarget.prototype, 'removeEventListener');
+
+    const origWeakMap = global.WeakMap;
+    global.WeakMap = function (...args) {
+      return listenerRegistry = new origWeakMap(...args);
+    };
+    return import('../../../js/lib/event.js')
+      .then((module) => {
+        global.WeakMap = origWeakMap;
+
+        registerListeners = module.registerListeners;
+        unregisterListeners = module.unregisterListeners;
+        findElementInEventPath = module.findElementInEventPath;
+      });
+  });
+
+  after(function () {
+    spyAEL.restore();
+    spyREL.restore();
+  });
+
+  afterEach(function () {
+    spyAEL.resetHistory();
+    spyREL.resetHistory();
+  });
+
+  describe('registerListeners()', function () {
+    let target;
+
+    before(function () {
+      target = document.createElement('input');
+      testContainer.appendChild(target);
+    });
+
+    after(function () {
+      testContainer.removeChild(target);
+    });
+
+    it('registers event listeres with key object calling addEventListener()', function () {
+      const keyObj = {};
+      const onClick = sinon.spy();
+      const onKeydown = sinon.spy();
+      const onMounseEnter = () => {};
+      const listeners = [
+        [document, 'click', onClick],
+        [target, 'keydown', onKeydown, {capture: false}],
+        [target, 'mouseenter', onMounseEnter, true],
+      ];
+
+      registerListeners(keyObj, listeners);
+      expect(listenerRegistry.get(keyObj), 'to equal', listeners);
+      expect(spyAEL.args, 'to equal', listeners.map(listener => listener.slice(1)));
+
+      testContainer.click();
+      expect(onClick.called, 'to be true');
+      simulant.fire(target, 'keydown', {key: 'enter'});
+      expect(onKeydown.called, 'to be true');
+
+      listeners.forEach((listener) => {
+        EventTarget.prototype.removeEventListener.call(...listener);
+      });
+      listenerRegistry.delete(keyObj);
+    });
+
+    it('appends listeners if registration for key object already exists', function () {
+      const keyObj = {};
+      const onClick = () => {};
+      const onKeydown = () => {};
+      const onMounseEnter = () => {};
+      const listeners = [
+        [document, 'click', onClick],
+      ];
+      const listenersToAdd = [
+        [target, 'keydown', onKeydown, {capture: false}],
+        [target, 'mouseenter', onMounseEnter, true],
+      ];
+      listenerRegistry.set(keyObj, listeners);
+
+      registerListeners(keyObj, listenersToAdd);
+      expect(listeners.length, 'to be', 3);
+      expect(listenerRegistry.get(keyObj), 'to equal', listeners);
+      expect(spyAEL.args, 'to equal', listenersToAdd.map(listener => listener.slice(1)));
+
+      listenersToAdd.forEach((listener) => {
+        EventTarget.prototype.removeEventListener.call(...listener);
+      });
+      listenerRegistry.delete(keyObj);
+    });
+  });
+
+  describe('unregisterListeners()', function () {
+    let target;
+
+    before(function () {
+      target = document.createElement('input');
+      testContainer.appendChild(target);
+    });
+
+    after(function () {
+      testContainer.removeChild(target);
+    });
+
+    it('unregisters all event listeres for key object calling removeEventListener()', function () {
+      const keyObj = {};
+      const onClick = sinon.spy();
+      const onKeydown = sinon.spy();
+      const onMounseEnter = () => {};
+      const listeners = [
+        [document, 'click', onClick],
+        [target, 'keydown', onKeydown, {capture: false}],
+        [target, 'mouseenter', onMounseEnter, true],
+      ];
+      listeners.forEach((listener) => {
+        EventTarget.prototype.addEventListener.call(...listener);
+      });
+      listenerRegistry.set(keyObj, listeners);
+
+      unregisterListeners(keyObj);
+      expect(listenerRegistry.get(keyObj), 'to be undefined');
+      expect(spyREL.args, 'to equal', listeners.map(listener => listener.slice(1)));
+
+      testContainer.click();
+      expect(onClick.called, 'to be false');
+      simulant.fire(target, 'keydown', {key: 'enter'});
+      expect(onKeydown.called, 'to be false');
+    });
+  });
+
+  describe('findElementInEventPath()', function () {
+    let field;
+    let control;
+    let input;
+
+    before(function () {
+      input = document.createElement('input');
+      control = document.createElement('div');
+      control.className = 'control';
+      control.appendChild(input);
+      field = document.createElement('div');
+      field.className = 'field';
+      field.appendChild(control);
+      testContainer.appendChild(field);
+    });
+
+    after(function () {
+      testContainer.removeChild(field);
+    });
+
+    it('returns the first element in event\'s path that matches given selector', function () {
+      const test = (ev) => {
+        expect(findElementInEventPath(ev, '.control'), 'to be', control);
+        expect(findElementInEventPath(ev, '.field'), 'to be', field);
+        expect(findElementInEventPath(ev, 'div'), 'to be', control);
+      };
+
+      document.addEventListener('click', test);
+      simulant.fire(input, 'click');
+      document.removeEventListener('click', test);
+    });
+
+    it('returns undefined if no matched element is in event\'s path', function () {
+      const test = (ev) => {
+        expect(findElementInEventPath(ev, '.foo'), 'to be undefined',);
+      };
+
+      document.addEventListener('click', test);
+      simulant.fire(input, 'click');
+      document.removeEventListener('click', test);
+    });
+
+    it('stops searching when it reaches event\'s currentTarget', function () {
+      const test = (ev) => {
+        expect(findElementInEventPath(ev, '.control'), 'to be', control);
+        expect(findElementInEventPath(ev, '.field'), 'to be undefined',);
+      };
+
+      control.addEventListener('click', test);
+      simulant.fire(input, 'click');
+      control.removeEventListener('click', test);
+    });
+
+    it('function can be used to evaluate the condition instead of css selector', function () {
+      const test = (ev) => {
+        expect(findElementInEventPath(ev, target => [field, control].includes(target)), 'to be', control);
+        expect(findElementInEventPath(ev, target => target === field), 'to be', field);
+        expect(findElementInEventPath(ev, target => target.tagName === 'DIV'), 'to be', control);
+      };
+
+      document.addEventListener('click', test);
+      simulant.fire(input, 'click');
+      document.removeEventListener('click', test);
+    });
+  });
+});