diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js
index 07aaa197d..8e7df798c 100644
--- a/src/components/appointments/cancel/CancelAppointment.js
+++ b/src/components/appointments/cancel/CancelAppointment.js
@@ -92,35 +92,37 @@ const CancelAppointment = () => {
)}
-
- {date} at {time}. Please fill
-out your email address for verification purposes.`}
- values={{
- date: ,
- time: ,
- b: chunks => {chunks},
- }}
- />
-
-
-
+
- }
- description={
- {date} at {time}. Please fill
+out your email address for verification purposes.`}
+ values={{
+ date: ,
+ time: ,
+ b: chunks => {chunks},
+ }}
/>
- }
- />
+
+
+
+ }
+ description={
+
+ }
+ />
+
diff --git a/src/components/appointments/cancel/CancelAppointment.stories.js b/src/components/appointments/cancel/CancelAppointment.stories.js
index cd0ae9432..f9fbfbd69 100644
--- a/src/components/appointments/cancel/CancelAppointment.stories.js
+++ b/src/components/appointments/cancel/CancelAppointment.stories.js
@@ -1,3 +1,5 @@
+import {expect} from '@storybook/jest';
+import {userEvent, within} from '@storybook/testing-library';
import {withRouter} from 'storybook-addon-react-router-v6';
import Card from 'components/Card';
@@ -64,4 +66,11 @@ export const WithBackendValidationErrors = {
handlers: [mockAppointmentCancelErrorPost],
},
},
+
+ play: async ({canvasElement}) => {
+ const canvas = within(canvasElement);
+
+ await userEvent.click(canvas.getByRole('button'));
+ expect(await canvas.findByText('Invalid e-mail for the submission.')).toBeVisible();
+ },
};
diff --git a/src/i18n-zod.stories.js b/src/i18n-zod.stories.js
index 099e3b1f7..e90bfe2c3 100644
--- a/src/i18n-zod.stories.js
+++ b/src/i18n-zod.stories.js
@@ -101,8 +101,10 @@ const AccessibleErrorsExample = ({onSubmit}) => {
validationSchema={toFormikValidationSchema(schema, {errorMap})}
>