From 85bfc041a3412723d56a2c23016c2592136ad4a9 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Mon, 22 Apr 2024 12:17:13 +0800
Subject: [PATCH] test(story): add chromatic story to ensure thankyou page
 renders

---
 .../public-form/PublicFormPage.stories.tsx    | 42 +++++++++++++++++++
 .../src/mocks/msw/handlers/public-form.ts     | 18 ++++++++
 2 files changed, 60 insertions(+)

diff --git a/frontend/src/features/public-form/PublicFormPage.stories.tsx b/frontend/src/features/public-form/PublicFormPage.stories.tsx
index 296d4504ee..987a598f85 100644
--- a/frontend/src/features/public-form/PublicFormPage.stories.tsx
+++ b/frontend/src/features/public-form/PublicFormPage.stories.tsx
@@ -15,6 +15,8 @@ import { envHandlers } from '~/mocks/msw/handlers/env'
 import {
   getPublicFormErrorResponse,
   getPublicFormResponse,
+  getPublicFormSubmissionSuccessResponse,
+  getPublicFormWithoutSectionsResponse,
   postGenerateVfnOtpResponse,
   postVerifyVfnOtpResponse,
   postVfnTransactionResponse,
@@ -790,6 +792,7 @@ FormNotFoundMobile.parameters = {
 }
 
 export const WithMyInfo = Template.bind({})
+WithMyInfo.storyName = 'With MyInfo'
 WithMyInfo.parameters = {
   msw: [
     getPublicFormResponse({
@@ -821,3 +824,42 @@ WithPayment.parameters = {
     ...DEFAULT_MSW_HANDLERS,
   ],
 }
+
+export const ThankYouPage = Template.bind({})
+ThankYouPage.parameters = {
+  msw: [
+    getPublicFormWithoutSectionsResponse(),
+    getPublicFormSubmissionSuccessResponse(),
+    ...DEFAULT_MSW_HANDLERS,
+  ],
+}
+ThankYouPage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  await waitFor(async () => {
+    await expect(canvas.getByText(/yes\/no/i)).toBeInTheDocument
+  })
+  await waitFor(async () => {
+    const noQuestionChoice = canvas.getByRole('button', {
+      name: /1\. yes\/no no option, unselected/i,
+    })
+    await userEvent.click(noQuestionChoice)
+  })
+  await waitFor(
+    async () => {
+      await userEvent.click(canvas.getByRole('button', { name: /submit/i }))
+    },
+    {
+      timeout: 5000,
+    },
+  )
+  await waitFor(
+    async () => {
+      await expect(
+        canvas.getByRole('link', { name: /submit another form/i }),
+      ).toBeInTheDocument()
+    },
+    {
+      timeout: 5000,
+    },
+  )
+}
diff --git a/frontend/src/mocks/msw/handlers/public-form.ts b/frontend/src/mocks/msw/handlers/public-form.ts
index ccecba1e9f..f400a5d524 100644
--- a/frontend/src/mocks/msw/handlers/public-form.ts
+++ b/frontend/src/mocks/msw/handlers/public-form.ts
@@ -486,6 +486,24 @@ export const getPublicFormWithoutSectionsResponse = ({
   )
 }
 
+export const getPublicFormSubmissionSuccessResponse = (
+  type: 'email' | 'storage' = 'email',
+) => {
+  return rest.post(
+    `/api/v3/forms/:formId/submissions/${type}`,
+    (_req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          message: 'Form submission successful.',
+          submissionId: '6625dfd68f4364af26332097',
+          timestamp: 1713758166140,
+        }),
+      )
+    },
+  )
+}
+
 export const getPublicFormErrorResponse = ({
   delay = 0,
   status = 404,