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