fix test to always use en-US locale

microsoft · Dec 18, 2023 · d2febd1 · d2febd1
1 parent b31213c
commit d2febd1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/...ct-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.cy.tsx b/...ct-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.cy.tsx
@@ -16,7 +16,14 @@ const Default = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
   };
   return (
     <div>
-      <TimePicker freeform={freeform} startHour={10} endHour={20} increment={60} onTimeChange={onTimeChange} />
+      <TimePicker
+        freeform={freeform}
+        startHour={10}
+        endHour={20}
+        increment={60}
+        onTimeChange={onTimeChange}
+        hourCycle="h23"
+      />
       {<div id="selected-time-text">{selectedTimeText}</div>}
     </div>
   );
@@ -43,6 +50,7 @@ const Controlled = ({ freeform }: Pick<TimePickerProps, 'freeform'>) => {
         startHour={10}
         endHour={20}
         increment={60}
+        hourCycle="h23"
         selectedTime={selectedTime}
         onTimeChange={onTimeChange}
         value={value}
@@ -179,6 +187,7 @@ describe('TimePicker with custom parsing', () => {
           startHour={9}
           endHour={14}
           increment={60}
+          hourCycle="h23"
           formatDateToTimeString={formatDateToTimeString}
           parseTimeStringToDate={parseTimeStringToDate}
           onTimeChange={onTimeChange}

diff --git a/...-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.test.tsx b/...-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.test.tsx
@@ -9,6 +9,19 @@ import { TimePickerProps } from './TimePicker.types';
 const dateAnchor = new Date('November 25, 2021 01:00:00');
 
 describe('TimePicker', () => {
+  // mock locale to make sure the test generates same result as browser, and not affected by the test runner's locale
+  const originalToLocaleTimeString = Date.prototype.toLocaleTimeString;
+  beforeAll(() => {
+    // eslint-disable-next-line no-extend-native
+    Date.prototype.toLocaleTimeString = function (locales?: string | string[], options?: Intl.DateTimeFormatOptions) {
+      return originalToLocaleTimeString.call(this, locales ?? 'en-US', options);
+    };
+  });
+  afterAll(() => {
+    // eslint-disable-next-line no-extend-native
+    Date.prototype.toLocaleTimeString = originalToLocaleTimeString;
+  });
+
   isConformant({
     Component: TimePicker,
     displayName: 'TimePicker',
@@ -33,8 +46,8 @@ describe('TimePicker', () => {
     userEvent.click(input);
     const options = getAllByRole('option');
     expect(options.length).toBe(2);
-    expect(options[0].textContent).toBe('08:00');
-    expect(options[1].textContent).toBe('08:30');
+    expect(options[0].textContent).toBe('8:00 AM');
+    expect(options[1].textContent).toBe('8:30 AM');
   });
 
   it('generates the formatted option using formatDateToTimeString', () => {
@@ -63,7 +76,7 @@ describe('TimePicker', () => {
     expect(getAllByRole('option')[1].getAttribute('aria-selected')).toBe('true'); // '1:00' is selected
 
     userEvent.click(getAllByRole('option')[10]);
-    expect(getByRole('combobox').getAttribute('value')).toBe('10:00');
+    expect(getByRole('combobox').getAttribute('value')).toBe('10:00 AM');
   });
 
   it('when wrapped in Field, sets default aria-labelledby on chevron icon', () => {
@@ -134,7 +147,7 @@ describe('TimePicker', () => {
       expect(handleTimeSelect).toHaveBeenCalledTimes(1);
       expect(handleTimeSelect).toHaveBeenCalledWith(
         expect.anything(),
-        expect.objectContaining({ selectedTimeText: '11:00', errorType: undefined }),
+        expect.objectContaining({ selectedTimeText: '11:00 AM', errorType: undefined }),
       );
     });
 
@@ -153,7 +166,7 @@ describe('TimePicker', () => {
       expect(handleTimeSelect).toHaveBeenCalledTimes(1);
       expect(handleTimeSelect).toHaveBeenCalledWith(
         expect.anything(),
-        expect.objectContaining({ selectedTimeText: '10:30' }),
+        expect.objectContaining({ selectedTimeText: '10:30 AM' }),
       );
       handleTimeSelect.mockClear();
 
@@ -166,7 +179,7 @@ describe('TimePicker', () => {
       expect(handleTimeSelect).toHaveBeenCalledTimes(1);
       expect(handleTimeSelect).toHaveBeenCalledWith(
         expect.anything(),
-        expect.objectContaining({ selectedTimeText: '10:30111', errorType: 'invalid-input' }),
+        expect.objectContaining({ selectedTimeText: '10:30 AM111', errorType: 'invalid-input' }),
       );
     });
 

diff --git a/...es/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts b/...es/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts
@@ -45,7 +45,7 @@ export function keyToDate(key: string): Date | null {
  * formatDateToTimeString(date, \{ hourCycle: 'h12', showSeconds: true \}); // Returns "11:45:12 PM" in CET
  */
 export function formatDateToTimeString(date: Date, { hourCycle, showSeconds }: TimeFormatOptions = {}): string {
-  return date.toLocaleTimeString([], {
+  return date.toLocaleTimeString(undefined, {
     hour: 'numeric',
     hourCycle,
     minute: '2-digit',