Trying to create unit tests for TimeSelect

src/components/appointments/fields/TimeSelect.spec.js

@@ -0,0 +1,82 @@
+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 dropdown = await screen.findByLabelText('Time');
+    expect(dropdown).toBeVisible();
+    await act(async () => {
+      // await act(async () => {
+      dropdown.focus();
+      await userEvent.keyboard('[ArrowDown]');
+    });
+
+    // });
+
+    // await waitFor(async () => {
+    //   // see mocks.js for the returned times
+    //   await expect(screen.findByText('08:00')).toBeVisible();
+    //   await expect(screen.findByText('08:10')).toBeVisible();
+    //   await expect(screen.findByText('10:00')).toBeVisible();
+    //   await expect(screen.findByText('10:30')).toBeVisible();
+    //   await expect(screen.findByText('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();
-    });
-  },
 };