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

package/test/options/buttons.js

@@ -0,0 +1,383 @@
+describe('options - buttons', 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('clearBtn', function () {
+    it('displays a button to clear the selection when true', function () {
+      const {dp, picker} = createDP(input, {clearBtn: true});
+      const [viewSwitch, clearBtn] = getParts(picker, ['.view-switch', '.clear-btn']);
+      dp.show();
+
+      expect(isVisible(clearBtn), 'to be true');
+      expect(clearBtn.textContent, 'to be', 'Clear');
+
+      // months view
+      viewSwitch.click();
+      expect(isVisible(clearBtn), 'to be true');
+
+      // years view
+      viewSwitch.click();
+      expect(isVisible(clearBtn), 'to be true');
+
+      // decades view
+      viewSwitch.click();
+      expect(isVisible(clearBtn), 'to be true');
+
+      dp.destroy();
+    });
+
+    it('can be updated with setOptions()', function () {
+      const {dp, picker} = createDP(input);
+      dp.setOptions({clearBtn: true});
+      dp.show();
+
+      const clearBtn = picker.querySelector('.clear-btn');
+      expect(isVisible(clearBtn), 'to be true');
+
+      dp.setOptions({clearBtn: false});
+      expect(isVisible(clearBtn), 'to be false');
+
+      dp.destroy();
+    });
+
+    describe('clear button', function () {
+      let dp;
+      let picker;
+      let clearBtn;
+
+      beforeEach(function () {
+        ({dp, picker} = createDP(input, {clearBtn: true}));
+        clearBtn = picker.querySelector('.clear-btn');
+        dp.show();
+      });
+
+      afterEach(function () {
+        dp.destroy();
+      });
+
+      it('clears the selection', function () {
+        dp.setDate('2/14/2020');
+        clearBtn.click();
+
+        expect(dp.dates, 'to equal', []);
+        expect(input.value, 'to be', '');
+
+        const viewSwitch = getViewSwitch(picker);
+        // months view
+        dp.setDate('2/14/2020');
+        viewSwitch.click();
+        clearBtn.click();
+        expect(dp.dates, 'to equal', []);
+
+        // years view
+        dp.setDate('2/14/2020');
+        viewSwitch.click();
+        clearBtn.click();
+        expect(dp.dates, 'to equal', []);
+
+        // decades view
+        dp.setDate('2/14/2020');
+        viewSwitch.click();
+        clearBtn.click();
+        expect(dp.dates, 'to equal', []);
+      });
+
+      it('hides the picker as well when autohide = true', function () {
+        dp.setDate('2/14/2020');
+        dp.setOptions({autohide: true});
+        clearBtn.click();
+
+        expect(isVisible(picker), 'to be false');
+      });
+    });
+  });
+
+  describe('todayBtn', function () {
+    it('displays a button to change the view date to current date when true', function () {
+      const {dp, picker} = createDP(input, {todayBtn: true});
+      const [viewSwitch, todayBtn] = getParts(picker, ['.view-switch', '.today-btn']);
+      dp.show();
+
+      expect(isVisible(todayBtn), 'to be true');
+      expect(todayBtn.textContent, 'to be', 'Today');
+
+      // months view
+      viewSwitch.click();
+      expect(isVisible(todayBtn), 'to be true');
+
+      // years view
+      viewSwitch.click();
+      expect(isVisible(todayBtn), 'to be true');
+
+      // decades view
+      viewSwitch.click();
+      expect(isVisible(todayBtn), 'to be true');
+
+      dp.destroy();
+    });
+
+    it('today will be disabled if the current date is out of the range of minDate/maxDate', function () {
+      const {dp, picker} = createDP(input, {todayBtn: true});
+      const todayBtn = picker.querySelector('.today-btn');
+      dp.show();
+
+      expect(todayBtn.disabled, 'to be false');
+
+      dp.setOptions({minDate: '2/20/2020'});
+      expect(todayBtn.disabled, 'to be true');
+
+      dp.setOptions({minDate: null, maxDate: '2/10/2020'});
+      expect(todayBtn.disabled, 'to be true');
+
+      dp.setOptions({minDate: '2/1/2020', maxDate: '2/29/2020'});
+      expect(todayBtn.disabled, 'to be false');
+
+      dp.destroy();
+    });
+
+    it('can be updated with setOptions()', function () {
+      const {dp, picker} = createDP(input);
+      dp.setOptions({todayBtn: true});
+      dp.show();
+
+      const todayBtn = picker.querySelector('.today-btn');
+      expect(isVisible(todayBtn), 'to be true');
+
+      dp.setOptions({todayBtn: false});
+      expect(isVisible(todayBtn), 'to be false');
+
+      dp.setOptions({todayBtn: 'true'});
+      expect(isVisible(todayBtn), 'to be true');
+
+      dp.destroy();
+    });
+  });
+
+  describe('todayBtnMode', function () {
+    let dp;
+    let picker;
+    let viewSwitch;
+    let todayBtn;
+    let cells;
+
+    beforeEach(function () {
+      ({dp, picker} = createDP(input, {todayBtn: true}));
+      [viewSwitch, todayBtn] = getParts(picker, ['.view-switch', '.today-btn']);
+      dp.show();
+    });
+
+    afterEach(function () {
+      dp.destroy();
+    });
+
+    it('specifies the behavior of the today buton', function () {
+      const date = dateValue(2020, 1, 11);
+
+      // defualt to 0: focus-on (change view date)
+      dp.setDate(date);
+      todayBtn.click();
+
+      cells = getCells(picker);
+      expect(cells[19].textContent, 'to be', '14');
+      expect(cells[19].classList.contains('focused'), 'to be true');
+      expect(cells[16].classList.contains('selected'), 'to be true');
+      expect(dp.dates, 'to equal', [date]);
+
+      dp.destroy();
+
+      // 1: select (change the selection)
+      ({dp, picker} = createDP(input, {todayBtn: true, todayBtnMode: 1}));
+      todayBtn = picker.querySelector('.today-btn');
+      dp.setDate(date);
+      dp.show();
+      todayBtn.click();
+
+      cells = getCells(picker);
+      expect(cells[19].textContent, 'to be', '14');
+      expect(cells[19].classList.contains('focused'), 'to be true');
+      expect(cells[19].classList.contains('selected'), 'to be true');
+      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+    });
+
+    it('can be updated with setOptions()', function () {
+      const date = dateValue(2020, 1, 11);
+
+      dp.setDate(date);
+      dp.setOptions({todayBtnMode: 1});
+      todayBtn.click();
+
+      cells = getCells(picker);
+      expect(cells[19].textContent, 'to be', '14');
+      expect(cells[19].classList.contains('focused'), 'to be true');
+      expect(cells[19].classList.contains('selected'), 'to be true');
+      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+      dp.setDate(date);
+      dp.setOptions({todayBtnMode: 0});
+      todayBtn.click();
+
+      expect(cells[19].textContent, 'to be', '14');
+      expect(cells[19].classList.contains('focused'), 'to be true');
+      expect(cells[16].classList.contains('selected'), 'to be true');
+      expect(dp.dates, 'to equal', [date]);
+    });
+
+    describe('today button', function () {
+      it('changes the view date to the current date when todayBtnMode = 0', function () {
+        dp.setDate('4/22/2020');
+        todayBtn.click();
+
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+        cells = getCells(picker);
+        expect(cells[19].textContent, 'to be', '14');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells.find(el => el.classList.contains('selected')), 'to be undefined');
+
+        expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]);
+        expect(input.value, 'to be', '04/22/2020');
+
+        dp.setDate({clear: true});
+      });
+
+      it('also changes the view to days view when todayBtnMode = 0', function () {
+        // months view
+        dp.setDate('4/22/2020');
+        viewSwitch.click();
+        todayBtn.click();
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+        // years view
+        dp.setDate({clear: true});
+        dp.setDate('4/22/2020');
+        viewSwitch.click();
+        viewSwitch.click();
+        todayBtn.click();
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+        // decades view
+        dp.setDate({clear: true});
+        dp.setDate('4/22/2020');
+        viewSwitch.click();
+        viewSwitch.click();
+        viewSwitch.click();
+        todayBtn.click();
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+        dp.setDate({clear: true});
+      });
+
+      it('changes the selection to the current date when todayBtnMode = 1', function () {
+        dp.setOptions({todayBtnMode: 1});
+        dp.setDate('4/22/2020');
+        todayBtn.click();
+
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+        cells = getCells(picker);
+        expect(cells[19].textContent, 'to be', '14');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be true');
+
+        expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+        expect(input.value, 'to be', '02/14/2020');
+        dp.setDate({clear: true});
+        dp.setDate('4/22/2020');
+        viewSwitch.click();
+        viewSwitch.click();
+        todayBtn.click();
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+        dp.setDate({clear: true});
+      });
+
+      it('also hides the picker when todayBtnMode = 1 and autohide = true', function () {
+        dp.setOptions({todayBtnMode: 1, autohide: true});
+        dp.setDate('4/22/2020');
+        todayBtn.click();
+
+        expect(isVisible(picker), 'to be false');
+
+        dp.setDate({clear: true});
+      });
+
+      it('always changes the view to current date\'s days view when todayBtnMode = 1', function () {
+        const nextBtn = picker.querySelector('.next-btn');
+        dp.setOptions({todayBtnMode: 1});
+
+        // after moving other month or view while the current date is selected already
+        // (issue #11)
+        todayBtn.click();
+        nextBtn.click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be true');
+        expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+        viewSwitch.click();
+        nextBtn.click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be true');
+        expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+        viewSwitch.click();
+        viewSwitch.click();
+        nextBtn.click();
+        nextBtn.click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be true');
+        expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+
+        // when current date is deslected by toggling in multi-date mode
+        dp.setOptions({maxNumberOfDates: 3});
+        nextBtn.click();
+        getCells(picker)[20].click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be false');
+        expect(dp.dates, 'to equal', [dateValue(2020, 2, 21)]);
+
+        nextBtn.click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('selected'), 'to be true');
+        expect(dp.dates, 'to equal', [dateValue(2020, 2, 21), dateValue(2020, 1, 14)]);
+
+        viewSwitch.click();
+        nextBtn.click();
+        todayBtn.click();
+        cells = getCells(picker);
+        expect(viewSwitch.textContent, 'to be', 'February 2020');
+        expect(cells[19].classList.contains('focused'), 'to be true');
+        expect(cells[19].classList.contains('selected'), 'to be false');
+        expect(dp.dates, 'to equal', [dateValue(2020, 2, 21)]);
+
+        dp.setDate({clear: true});
+      });
+    });
+  });
+});