💚 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.

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 () => {

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();
+  });
+});

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();
-    });
-  },
 };