STCOM-1120 Timepicker - Refactor convert 24hr function (#1991)

* refactor 24hr conversion function * remove only * lint timepicker reduxform tests * Update CHANGELOG.md * remove commented line
folio-org · Feb 21, 2023 · 3732657 · 3732657
1 parent aec0db9
commit 3732657
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,10 @@
 * Add `rootClass` and `fitContent` props to `<TextArea>`. Refs STCOM-1101.
 * Fix bug with Timepicker formatting user input too quickly/aggressively. Refs STCOM-1103.
 * Fix big with Timepicker timedropdown spinners not respecting their appropriate ranges. Refs STCOM-1104.
-
+* Fix Timepicker dropdown not spinning values when the value is empty/undefined. Refs STCOM-1118.
+* Timepicker conforms to redux-form's expected blur behavior. Refs STCOM-1119.
+* Fix `convertTo24hr` function of timepicker to fix 'invalid date' message when timedropdown is used. Refs STCOM-1120.
+
 ## [11.0.0](https://github.com/folio-org/stripes-components/tree/v11.0.0) (2023-01-30)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.3.0...v11.0.0)
 

diff --git a/lib/Timepicker/Timepicker.js b/lib/Timepicker/Timepicker.js
@@ -56,8 +56,11 @@ const defaultOutputFormatter = ({ value, formats, timezone, intl }) => { // esli
   return '';
 };
 
-const convertTo24hr = (hour, period, dayPeriods) => {
-  return period === dayPeriods[1] ? parseInt(hour, 10) + 12 : hour;
+export const convertTo24hr = (hour, period, dayPeriods) => {
+  const adjustedHour = parseInt(hour, 10);
+  if (period === dayPeriods[1] && adjustedHour !== 12) return adjustedHour + 12;
+  else if (period === dayPeriods[0] && adjustedHour === 12) return 0;
+  return adjustedHour;
 };
 
 const propTypes = {

diff --git a/lib/Timepicker/tests/Timepicker-reduxform-test.js b/lib/Timepicker/tests/Timepicker-reduxform-test.js
@@ -1,14 +1,11 @@
 import React from 'react';
 import { describe, beforeEach, it } from 'mocha';
 import sinon from 'sinon';
-import { Field } from 'redux-form';
 import {
   converge,
 } from '@folio/stripes-testing';
 
 import { mountWithContext } from '../../../tests/helpers';
-import TestForm from '../../../tests/TestForm';
-
 import Timepicker from '../Timepicker';
 
 import {

diff --git a/lib/Timepicker/tests/Timepicker-test.js b/lib/Timepicker/tests/Timepicker-test.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { describe, beforeEach, it } from 'mocha';
+import { expect } from 'chai';
 import moment from 'moment-timezone';
 import {
   runAxeTest,
   Button,
+  Select,
   including,
   converge,
   Keyboard,
@@ -12,7 +14,7 @@ import {
 import translationsDE from '../../../translations/stripes-components/de';
 
 import { mountWithContext } from '../../../tests/helpers';
-import Timepicker from '../Timepicker';
+import Timepicker, { convertTo24hr } from '../Timepicker';
 import TimepickerHarness from './TimepickerHarness';
 import {
   Timepicker as TimepickerInteractor,
@@ -292,6 +294,50 @@ describe('Timepicker', () => {
           it('should loop the value to the maximum minute value', () => timeDropdown.has({ minute: 0 }));
         });
 
+        describe('12 hour support (internal conversion) - 12:01 PM', () => {
+          beforeEach(async () => {
+            await timeDropdown.fillHour('12');
+            await timeDropdown.fillMinute('01');
+            await Select().choose('PM');
+            await timeDropdown.clickConfirm();
+          });
+
+          it('displays appropriate hour and minute values', () => timepicker.has({ value: '12:01 PM' }));
+        });
+
+        describe('12 hour support (internal conversion) - 12:01 AM', () => {
+          beforeEach(async () => {
+            await timeDropdown.fillHour('12');
+            await timeDropdown.fillMinute('01');
+            await Select().choose('AM');
+            await timeDropdown.clickConfirm();
+          });
+
+          it('displays appropriate hour and minute values', () => timepicker.has({ value: '12:01 AM' }));
+        });
+
+        describe('12 hour support (internal conversion) - 1:01 AM', () => {
+          beforeEach(async () => {
+            await timeDropdown.fillHour('1');
+            await timeDropdown.fillMinute('01');
+            await Select().choose('AM');
+            await timeDropdown.clickConfirm();
+          });
+
+          it('displays appropriate hour and minute values', () => timepicker.has({ value: '1:01 AM' }));
+        });
+
+        describe('12 hour support (internal conversion) - 11:01 PM', () => {
+          beforeEach(async () => {
+            await timeDropdown.fillHour('11');
+            await timeDropdown.fillMinute('01');
+            await Select().choose('PM');
+            await timeDropdown.clickConfirm();
+          });
+
+          it('displays appropriate hour and minute values', () => timepicker.has({ value: '11:01 PM' }));
+        });
+
         describe('spinning through the minimum hour minute values', () => {
           beforeEach(async () => {
             await timeDropdown.fillHour('1');
@@ -409,3 +455,29 @@ describe('Timepicker', () => {
     });
   });
 });
+
+describe('convert to 24h utility function', () => {
+  it('converts 12 AM to 0', () => {
+    expect(convertTo24hr('12', 'am', ['am', 'pm'])).to.equal(0);
+  });
+
+  it('leaves 1 AM as 1', () => {
+    expect(convertTo24hr('1', 'am', ['am', 'pm'])).to.equal(1);
+  });
+
+  it('converts 12 PM to 12', () => {
+    expect(convertTo24hr('12', 'pm', ['am', 'pm'])).to.equal(12);
+  });
+
+  it('converts 1 PM to 13', () => {
+    expect(convertTo24hr('1', 'pm', ['am', 'pm'])).to.equal(13);
+  });
+
+  it('converts 11 PM to 23', () => {
+    expect(convertTo24hr('11', 'pm', ['am', 'pm'])).to.equal(23);
+  });
+
+  it('leaves 11 AM as 11', () => {
+    expect(convertTo24hr('11', 'am', ['am', 'pm'])).to.equal(11);
+  });
+});