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/TimeSelect.spec.js b/src/components/appointments/TimeSelect.spec.js
new file mode 100644
index 000000000..0ea109957
--- /dev/null
+++ b/src/components/appointments/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(
+
+
+
+ {comp}
+
+
+
+ );
+
+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(, '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/TimeSelect.stories.js b/src/components/appointments/TimeSelect.stories.js
index d445a3362..a4fbecc77 100644
--- a/src/components/appointments/TimeSelect.stories.js
+++ b/src/components/appointments/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();
- });
- },
};