Merge pull request #8903 from opengovsg/fix/remove-chromatic-noise

fix: remove noisy chromatic diffs due to dynamic dates and form link

Author: kevin9foong

frontend/src/features/admin-form/responses/IndividualResponsePage/PrintableResponse.tsx

@@ -181,6 +181,9 @@ const PrintableResponseRows = ({
   )
 }
 
+const isTest = import.meta.env.STORYBOOK_NODE_ENV === 'test'
+const MOCK_CONSTANT_FORM_LINK = 'https://form.gov.sg/64e2f7ae841cbe0012e785e7'
+
 export const PrintableResponse = ({
   formTitle,
   formId,
@@ -210,9 +213,11 @@ export const PrintableResponse = ({
           color="white"
           textDecor="underline"
           textDecorationColor="white"
-          data-chromatic="ignore"
         >
-          {window.location.origin}/{formId}
+          {/* RATIONALE: Prevent noisy diffs from being detected during storybook snapshot comparisons due to dynamic form link. */}
+          {isTest
+            ? MOCK_CONSTANT_FORM_LINK
+            : `${window.location.origin}/${formId}`}
         </Text>
       </Box>
       <Box mx="5%" my="30px">

frontend/src/features/public-form/PublicFormProvider.tsx

@@ -106,6 +106,9 @@ interface PublicFormProviderProps {
   isPublicFormPage?: boolean
 }
 
+const DATE_TIME_FORMAT_STRING = 'do MMM yyyy, h:mm:ss a'
+const MOCK_CONSTANT_LAST_SAVED_DATETIME = '2025-11-14T12:00:00.000Z'
+
 export function useCommonFormProvider(formId: string) {
   // For mobile section sidebar
   const {
@@ -1388,6 +1391,16 @@ export const PublicFormProvider = ({
     return <NotFoundErrorPage />
   }
 
+  // RATIONALE: Prevent noisy diffs from being detected during storybook snapshot comparisons due to dynamic date time.
+  const draftLastSavedDateTime =
+    draftSubmission?.lastUpdated && isTest
+      ? MOCK_CONSTANT_LAST_SAVED_DATETIME
+      : draftSubmission?.lastUpdated
+
+  const draftLastSavedDateTimeString = draftLastSavedDateTime
+    ? format(new Date(draftLastSavedDateTime), DATE_TIME_FORMAT_STRING)
+    : undefined
+
   return (
     <PublicFormContext.Provider
       value={{
@@ -1412,12 +1425,7 @@ export const PublicFormProvider = ({
         previousAttachments,
         setPreviousSubmission,
         isSaveDraftEnabled,
-        draftLastSavedDateTimeString: draftSubmission?.lastUpdated
-          ? format(
-              new Date(draftSubmission.lastUpdated),
-              'do MMM yyyy, h:mm:ss a',
-            )
-          : undefined,
+        draftLastSavedDateTimeString,
         onSaveDraft,
         defaultFormValues,
         augmentedFormFields,