From 5e7cae3bd2f9fc4e9ee60e7f3131afb6f54b372a Mon Sep 17 00:00:00 2001
From: vasileios <zigras00@gmail.com>
Date: Mon, 30 Oct 2023 15:34:43 +0100
Subject: [PATCH] :green_heart: Fix tests broken by DST

The storybook interaction tests are unreliable w/r to human readable
formatting of times and localizing them appropriately. Most notably,
it's hard to mock the current date in storybook interaction tests,
and it's further complicated by chromatic running tests on machines
for which we cannot control the TZ information.

The test is moved to jest with a fixed/mocked time so that we avoid
DST issues in the future, additionally the TZ information is pinned
to Europe/Amsterdam in the test script in package.json.
---
 .../CreateAppointment.stories.js              |  7 +-
 .../appointments/fields/TimeSelect.spec.js    | 80 +++++++++++++++++++
 .../appointments/fields/TimeSelect.stories.js | 14 ----
 3 files changed, 85 insertions(+), 16 deletions(-)
 create mode 100644 src/components/appointments/fields/TimeSelect.spec.js

diff --git a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
index 9313048ba..8b056cef9 100644
--- a/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
+++ b/src/components/appointments/CreateAppointment/CreateAppointment.stories.js
@@ -158,8 +158,11 @@ export const HappyFlow = {
       });
       await timeDropdown.focus();
       await userEvent.keyboard('[ArrowDown]');
-      const timeOption = await canvas.findByText(/[0-2]{2}:00$/);
-      await userEvent.click(timeOption);
+
+      // because of the time change (winter-summer) the regex was simplified,
+      // otherwise the localized time cannot be found and selected
+      const timeOptions = await canvas.findAllByText(/[0-2][0-9]:00$/);
+      await userEvent.click(timeOptions[0]);
     });
 
     await step('Submit the location and time step', async () => {
diff --git a/src/components/appointments/fields/TimeSelect.spec.js b/src/components/appointments/fields/TimeSelect.spec.js
new file mode 100644
index 000000000..0ea109957
--- /dev/null
+++ b/src/components/appointments/fields/TimeSelect.spec.js
@@ -0,0 +1,80 @@
+import {jest} from '@jest/globals';
+import {act, render as realRender, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {Formik} from 'formik';
+import messagesEN from 'i18n/compiled/en.json';
+import {IntlProvider} from 'react-intl';
+
+import {ConfigContext} from 'Context';
+import {BASE_URL} from 'api-mocks';
+import mswServer from 'api-mocks/msw-server';
+
+import {mockAppointmentTimesGet} from '../mocks';
+import TimeSelect from './TimeSelect';
+
+const products = [{productId: 'e8e045ab', amount: 1}];
+
+const render = (comp, locationId) =>
+  realRender(
+    <ConfigContext.Provider
+      value={{
+        baseUrl: BASE_URL,
+        basePath: '',
+        baseTitle: '',
+        requiredFieldsWithAsterisk: true,
+        displayComponents: {},
+      }}
+    >
+      <IntlProvider locale="en" messages={messagesEN}>
+        <Formik
+          initialValues={{
+            location: locationId,
+            date: '2023-06-14',
+          }}
+        >
+          {comp}
+        </Formik>
+      </IntlProvider>
+    </ConfigContext.Provider>
+  );
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date('2023-06-12T14:00:00Z'));
+  // Jest 28+
+  // jest.useFakeTimers({
+  //   advanceTimers: true,
+  //   now: new Date('2023-06-12T14:00:00Z'),
+  // });
+});
+
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+describe('The appointment time select', () => {
+  it('makes sure times are localized', async () => {
+    const user = userEvent.setup({delay: null});
+    mswServer.use(mockAppointmentTimesGet);
+
+    render(<TimeSelect products={products} />, '1396f17c');
+    const timeSelect = await screen.findByLabelText('Time');
+    expect(timeSelect).toBeVisible();
+
+    // open the options dropdown
+    act(() => {
+      timeSelect.focus();
+    });
+    await user.keyboard('[ArrowDown]');
+
+    // see mocks.js for the returned times
+    await waitFor(() => {
+      expect(screen.getByText('08:00')).toBeVisible();
+    });
+    expect(screen.getByText('08:10')).toBeVisible();
+    expect(screen.getByText('10:00')).toBeVisible();
+    expect(screen.getByText('10:30')).toBeVisible();
+    expect(screen.getByText('14:30')).toBeVisible();
+  });
+});
diff --git a/src/components/appointments/fields/TimeSelect.stories.js b/src/components/appointments/fields/TimeSelect.stories.js
index 6cbf94bfb..f7783307d 100644
--- a/src/components/appointments/fields/TimeSelect.stories.js
+++ b/src/components/appointments/fields/TimeSelect.stories.js
@@ -57,18 +57,4 @@ export const LocalizedTimes = {
   parameters: {
     chromatic: {disableSnapshot: true},
   },
-  play: async ({canvasElement}) => {
-    const canvas = within(canvasElement);
-    const dropdown = canvas.getByLabelText('Tijdstip');
-    await dropdown.focus();
-    await userEvent.keyboard('[ArrowDown]');
-    await waitFor(async () => {
-      // see mocks.js for the returned times
-      await expect(canvas.getByText('08:00')).toBeVisible();
-      await expect(canvas.getByText('08:10')).toBeVisible();
-      await expect(canvas.getByText('10:00')).toBeVisible();
-      await expect(canvas.getByText('10:30')).toBeVisible();
-      await expect(canvas.getByText('14:30')).toBeVisible();
-    });
-  },
 };