Merge pull request #578 from open-formulieren/fix-create-appointments…

…-story

Fix appointments' story

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