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

package/test/keyboard-operation/edit-mode.js

@@ -0,0 +1,458 @@
+describe('keyboard operation - edit mode', function () {
+  let input;
+
+  beforeEach(function () {
+    input = document.createElement('input');
+    testContainer.appendChild(input);
+  });
+
+  afterEach(function () {
+    testContainer.removeChild(input);
+  });
+
+  it('turns on when Datepicker.enterEditMode() is called', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+    dp.enterEditMode();
+
+    expect(dp.editMode, 'to be true');
+    expect(input.classList.contains('in-edit'), 'to be true');
+
+    dp.destroy();
+    input.classList.remove('in-edit');
+  });
+
+  it('turns on when a printable letter, backspace or delete key is pressed without ctrl/meta', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+
+    simulant.fire(input, 'keydown', {key: '1'});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'J'});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: '/'});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: ' '});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'Backspace'});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'Delete'});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    // with modifier key
+    simulant.fire(input, 'keydown', {key: '1', shiftKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: '1', altKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: '1', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    simulant.fire(input, 'keydown', {key: '1', metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    // non-pritable-letter key
+    simulant.fire(input, 'keydown', {key: 'PageDown'});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    simulant.fire(input, 'keydown', {key: 'Escape', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    dp.destroy();
+  });
+
+  it('turns on when shift + either of arrow keys is pressed without ctrl/meta', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+
+    // shift + arrow
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    // arrow + other modifire key
+    // arrow-left
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', altKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-right
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', altKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-up
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', altKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-down
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', altKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // shift + arrow with other modifier key
+    // arrow-left
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, altKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft', shiftKey: true, metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-right
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, altKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight', shiftKey: true, metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-up
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, altKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp', shiftKey: true, metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    // arrow-down
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, altKey: true});
+    expect(dp.editMode, 'to be true');
+
+    delete dp.editMode;
+    input.classList.remove('in-edit');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, ctrlKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDown', shiftKey: true, metaKey: true});
+    expect(dp.editMode, 'to be undefined');
+
+    dp.destroy();
+  });
+
+  it('turns on when input is clicked', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+
+    simulant.fire(input, 'mousedown');
+    input.click();
+    expect(dp.editMode, 'to be true');
+    expect(input.classList.contains('in-edit'), 'to be true');
+
+    dp.destroy();
+    input.classList.remove('in-edit');
+  });
+
+  it('does not turn on when the picker is hidden', function () {
+    const dp = new Datepicker(input);
+
+    dp.enterEditMode();
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    simulant.fire(input, 'keydown', {key: '1'});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'keydown', {key: 'J'});
+    expect(dp.editMode, 'to be undefined');
+
+    simulant.fire(input, 'mousedown');
+    input.click();
+    expect(dp.editMode, 'to be undefined');
+
+    dp.destroy();
+  });
+
+  it('disables the arrow-key operation of the picker', function () {
+    const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
+    const {dp, picker} = createDP(input);
+    const viewSwitch = getViewSwitch(picker);
+    input.focus();
+    dp.enterEditMode();
+
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
+    expect(viewSwitch.textContent, 'to be', 'February 2020');
+
+    let cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
+    expect(cells[19].textContent, 'to be', '14');
+
+    simulant.fire(input, 'keydown', {key: 'ArrowRight'});
+    expect(viewSwitch.textContent, 'to be', 'February 2020');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
+
+    simulant.fire(input, 'keydown', {key: 'ArrowUp'});
+    expect(viewSwitch.textContent, 'to be', 'February 2020');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
+
+    simulant.fire(input, 'keydown', {key: 'ArrowDownt'});
+    expect(viewSwitch.textContent, 'to be', 'February 2020');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[19]]);
+
+    viewSwitch.click();
+    simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
+    expect(viewSwitch.textContent, 'to be', '2020');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
+
+    viewSwitch.click();
+    simulant.fire(input, 'keydown', {key: 'ArrowRight'});
+    expect(viewSwitch.textContent, 'to be', '2020-2029');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
+
+    viewSwitch.click();
+    simulant.fire(input, 'keydown', {key: 'ArrowDown'});
+    expect(viewSwitch.textContent, 'to be', '2000-2090');
+    cells = getCells(picker);
+    expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
+
+    dp.destroy();
+    clock.restore();
+  });
+
+  it('turns off when Datepicker.exitEditMode() is called', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+    dp.enterEditMode();
+
+    dp.exitEditMode();
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    dp.destroy();
+  });
+
+  it('turns off when the picker hides', function () {
+    const {dp, picker} = createDP(input);
+    input.focus();
+    dp.enterEditMode();
+
+    dp.hide();
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    dp.destroy();
+  });
+
+  it('turns off when escape key is pressed', function () {
+    const dp = new Datepicker(input);
+    input.focus();
+    dp.enterEditMode();
+
+    simulant.fire(input, 'keydown', {key: 'Escape'});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+
+    dp.destroy();
+  });
+
+  it('leaves the edit on the input as-is by default when turning off', function () {
+    const dp = new Datepicker(input);
+    const date = dateValue(2020, 1, 14);
+    dp.setDate(date);
+    input.focus();
+    dp.enterEditMode();
+    input.value = '4/22/2020';
+
+    dp.exitEditMode();
+    expect(input.value, 'to be', '4/22/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.show();
+    dp.enterEditMode();
+    input.value = '3/8/2020';
+
+    dp.hide();
+    expect(input.value, 'to be', '3/8/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.show();
+    dp.enterEditMode();
+    input.value = '02/14/2020';
+
+    simulant.fire(input, 'keydown', {key: 'Escape'});
+    expect(input.value, 'to be', '02/14/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.destroy();
+  });
+
+  it('hides the picker when turning off by escape key press', function () {
+    const {dp, picker} = createDP(input);
+    input.focus();
+    dp.enterEditMode();
+
+    simulant.fire(input, 'keydown', {key: 'Escape'});
+    expect(isVisible(picker), 'to be false');
+
+    dp.show();
+    dp.enterEditMode();
+
+    dp.exitEditMode();
+    expect(isVisible(picker), 'to be true');
+
+    dp.destroy();
+  });
+
+  it('updates the selection with the input when turning off by exitEditMode() call with update: true option', function () {
+    const dp = new Datepicker(input);
+    const date = dateValue(2020, 3, 22);
+    dp.setDate('02/14/2020');
+    input.focus();
+    dp.enterEditMode();
+    input.value = '4/22/2020';
+
+    dp.exitEditMode({update: true});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+    expect(input.value, 'to be', '04/22/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.destroy();
+  });
+
+  it('updates the selection with the input when turning off by enter key press', function () {
+    const dp = new Datepicker(input);
+    const date = dateValue(2020, 3, 22);
+    dp.setDate('02/14/2020');
+    input.focus();
+    dp.enterEditMode();
+    input.value = '4/22/2020';
+
+    simulant.fire(input, 'keydown', {key: 'Enter'});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+    expect(input.value, 'to be', '04/22/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.destroy();
+  });
+
+  it('updates the selection with the input when turning off being induced by unfocusing input element', function () {
+    const outsider = document.createElement('p');
+    testContainer.appendChild(outsider);
+
+    const dp = new Datepicker(input);
+    const date = dateValue(2020, 3, 22);
+    // by tab key-press
+    dp.setDate('02/14/2020');
+    input.focus();
+    dp.enterEditMode();
+    input.value = '4/22/2020';
+
+    simulant.fire(input, 'keydown', {key: 'Tab'});
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+    expect(input.value, 'to be', '04/22/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    //by clicking outside
+    dp.setDate('02/14/2020');
+    dp.show();
+    dp.enterEditMode();
+    input.value = '4/22/2020';
+
+    simulant.fire(outsider, 'mousedown');
+    expect(dp.editMode, 'to be undefined');
+    expect(input.classList.contains('in-edit'), 'to be false');
+    expect(input.value, 'to be', '04/22/2020');
+    expect(dp.dates, 'to equal', [date]);
+
+    dp.destroy();
+    testContainer.removeChild(outsider);
+  });
+});

package/test/keyboard-operation/keyboard-operation.js

@@ -0,0 +1,146 @@
+describe('keyboard operation', function () {
+  let input;
+
+  beforeEach(function () {
+    input = document.createElement('input');
+    testContainer.appendChild(input);
+  });
+
+  afterEach(function () {
+    testContainer.removeChild(input);
+  });
+
+  describe('tab', function () {
+    it('hides the picker', function () {
+      const {dp, picker} = createDP(input);
+      input.focus();
+
+      simulant.fire(input, 'keydown', {key: 'Tab'});
+      expect(isVisible(picker), 'to be false');
+
+      dp.destroy();
+    });
+
+    it('updates the selected date with the input\'s value', function () {
+      const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
+
+      const dp = new Datepicker(input);
+      // when picker is shown
+      input.focus();
+      input.value = 'foo';
+
+      simulant.fire(input, 'keydown', {key: 'Tab'});
+      expect(input.value, 'to be', '02/14/2020');
+      expect(dp.getDate().getTime(), 'to be', dateValue(2020, 1, 14));
+
+      // when picker is hidden
+      input.focus();
+      input.value = '04/22/2020';
+
+      simulant.fire(input, 'keydown', {key: 'Tab'});
+      expect(input.value, 'to be', '04/22/2020');
+      expect(dp.getDate().getTime(), 'to be', dateValue(2020, 3, 22));
+
+      input.focus();
+      input.value = '';
+
+      simulant.fire(input, 'keydown', {key: 'Tab'});
+      expect(input.value, 'to be', '');
+      expect(dp.getDate(), 'to be undefined');
+
+      dp.destroy();
+      clock.restore();
+    });
+  });
+
+  describe('escape', function () {
+    it('shows or hides the picker', function () {
+      const {dp, picker} = createDP(input);
+
+      simulant.fire(input, 'keydown', {key: 'Escape'});
+      expect(isVisible(picker), 'to be true');
+
+      simulant.fire(input, 'keydown', {key: 'Escape'});
+      expect(isVisible(picker), 'to be false');
+
+      dp.destroy();
+    });
+  });
+
+  describe('enter', function () {
+    it('sets the view date to the selection if the current view is days', function () {
+      const clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
+      const {dp, picker} = createDP(input);
+      input.focus();
+
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(dp.dates, 'to equal', [dateValue(2020, 1, 14)]);
+      expect(input.value, 'to be', '02/14/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');
+
+      dp.destroy();
+      clock.reset();
+    });
+
+    it('changes the view to the next minor one if the current view is not days', function () {
+      const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
+      const {dp, picker} = createDP(input);
+      const viewSwitch = getViewSwitch(picker);
+      input.focus();
+      viewSwitch.click();
+      viewSwitch.click();
+      viewSwitch.click();
+
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(viewSwitch.textContent, 'to be', '2020-2029');
+
+      let cells = getCells(picker);
+      expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
+      expect(cells[1].textContent, 'to be', '2020');
+
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(viewSwitch.textContent, 'to be', '2020');
+
+      cells = getCells(picker);
+      expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
+
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(viewSwitch.textContent, 'to be', 'April 2020');
+
+      cells = getCells(picker);
+      expect(filterCells(cells, '.focused'), 'to equal', [cells[24]]);
+      expect(cells[24].textContent, 'to be', '22');
+
+      // does nothig if the view has reached to the min view
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(viewSwitch.textContent, 'to be', 'April 2020');
+
+      dp.destroy();
+      clock.reset();
+    });
+
+    it('updates the selection with the input text if the picker is hidden', function () {
+      const {dp, picker} = createDP(input);
+      const viewSwitch = getViewSwitch(picker);
+
+      input.value = '7/4/2020';
+      simulant.fire(input, 'keydown', {key: 'Enter'});
+      expect(dp.dates, 'to equal', [dateValue(2020, 6, 4)]);
+      expect(input.value, 'to be', '07/04/2020');
+
+      dp.show();
+      expect(viewSwitch.textContent, 'to be', 'July 2020');
+
+      let cells = getCells(picker);
+      expect(filterCells(cells, '.selected'), 'to equal', [cells[6]]);
+      expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
+      expect(cells[6].textContent, 'to be', '4');
+
+      dp.destroy();
+    });
+  });
+});