Merge pull request #135 from nadchif/bugfix/caret-buttons

bugfix/arrow-button-clicks
nadchif · Nov 14, 2021 · a09cbab · a09cbab
2 parents fe4c1f3 + c9d9e31
commit a09cbab
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 2 deletions.
diff --git a/spec/html-duration-picker.spec.js b/spec/html-duration-picker.spec.js
@@ -30,7 +30,7 @@ describe('Duration Picker', () => {
     it('should be less than 60', () => {
       expect(Number(sectioned[1])).toBeLessThan(60);
     });
-    it('should be more than 0', () => {
+    it('should be more than -1', () => {
       expect(Number(sectioned[1])).toBeGreaterThan(-1);
     });
   });
@@ -61,6 +61,70 @@ describe('Duration Picker', () => {
     });
   });
 
+  describe('default mode arrow buttons are clicked 2x', () => {
+    let testPicker;
+    beforeEach(() => {
+      const dom = new JSDOM(`
+      <html><body><input type="text">
+        <input type="text" class="html-duration-picker other-class" />
+        </body></html>
+      `);
+      global.document = dom.window.document;
+      global.window = dom.window;
+
+      testPicker = document.querySelector('.html-duration-picker');
+      HtmlDurationPicker.init();
+    });
+    const simulateEvent = (event, node) => {
+      const evt = document.createEvent('HTMLEvents');
+      evt.initEvent(event, false, true);
+      node.dispatchEvent(evt);
+    };
+    it('should increase hh to 2', () => {
+      testPicker.focus();
+      const controls = testPicker.nextSibling;
+      // 1
+      simulateEvent('mousedown', controls.childNodes[0]);
+      simulateEvent('mouseup', controls.childNodes[0]);
+      // 2
+      simulateEvent('mousedown', controls.childNodes[0]);
+      simulateEvent('mouseup', controls.childNodes[0]);
+      expect(testPicker.value).toEqual('02:00:00');
+    });
+  });
+
+  describe('data-hide-seconds mode arrow buttons are clicked 2x', () => {
+    let testPicker;
+    beforeEach(() => {
+      const dom = new JSDOM(`
+      <html><body><input type="text">
+        <input type="text" class="html-duration-picker other-class" data-hide-seconds="true" />
+        </body></html>
+      `);
+      global.document = dom.window.document;
+      global.window = dom.window;
+
+      testPicker = document.querySelector('.html-duration-picker');
+      HtmlDurationPicker.init();
+    });
+    const simulateEvent = (event, node) => {
+      const evt = document.createEvent('HTMLEvents');
+      evt.initEvent(event, false, true);
+      node.dispatchEvent(evt);
+    };
+    it('should increase hh to 2', () => {
+      testPicker.focus();
+      const controls = testPicker.nextSibling;
+      // 1
+      simulateEvent('mousedown', controls.childNodes[0]);
+      simulateEvent('mouseup', controls.childNodes[0]);
+      // 2
+      simulateEvent('mousedown', controls.childNodes[0]);
+      simulateEvent('mouseup', controls.childNodes[0]);
+      expect(testPicker.value).toEqual('02:00');
+    });
+  });
+
   describe('with min value and duration', () => {
     let testPicker;
     beforeEach(() => {

diff --git a/src/html-duration-picker.js b/src/html-duration-picker.js
@@ -264,7 +264,7 @@ export default (function () {
    * @return {Number}
    */
   const durationToSeconds = (value) => {
-    if (!isValidDurationFormat(value)) {
+    if (!(isValidDurationFormat(value) || isValidDurationFormat(value, true))) {
       return 0;
     }
     const sectioned = value.split(':');