feat: mock API responses for invalid CSV files

frontend/src/components/dashboard/tests/integration/email.test.tsx

@@ -5,7 +5,7 @@ import {
   fireEvent,
   waitFor,
   DEFAULT_FROM,
-  CSV_FILENAME,
+  VALID_CSV_FILENAME,
 } from 'test-utils'
 import {
   mockApis,
@@ -119,7 +119,7 @@ test('successfully creates and sends a new email campaign', async () => {
   // Wait for CSV to be processed and ensure that message preview is shown
   expect(await screen.findByText(/message preview/i)).toBeInTheDocument()
   expect(screen.getByText(/1 recipient/i)).toBeInTheDocument()
-  expect(screen.getByText(CSV_FILENAME)).toBeInTheDocument()
+  expect(screen.getByText(VALID_CSV_FILENAME)).toBeInTheDocument()
   expect(screen.getByText(DEFAULT_FROM)).toBeInTheDocument()
   expect(screen.getByText(SUBJECT_TEXT)).toBeInTheDocument()
   expect(screen.getByText(MESSAGE_TEXT)).toBeInTheDocument()

frontend/src/components/dashboard/tests/integration/sms.test.tsx

@@ -4,7 +4,7 @@ import {
   screen,
   waitFor,
   TWILIO_CREDENTIAL,
-  CSV_FILENAME,
+  VALID_CSV_FILENAME,
 } from 'test-utils'
 import {
   mockApis,
@@ -92,7 +92,7 @@ test('successfully creates and sends a new SMS campaign', async () => {
   // Wait for CSV to be processed and ensure that message preview is shown
   expect(await screen.findByText(/message preview/i)).toBeInTheDocument()
   expect(screen.getByText(/1 recipient/i)).toBeInTheDocument()
-  expect(screen.getByText(CSV_FILENAME)).toBeInTheDocument()
+  expect(screen.getByText(VALID_CSV_FILENAME)).toBeInTheDocument()
   expect(screen.getByText(MESSAGE_TEXT)).toBeInTheDocument()
 
   // Go to the credential validation page and wait for it to load

frontend/src/components/dashboard/tests/integration/telegram.test.tsx

@@ -6,7 +6,7 @@ import {
   waitFor,
   TELEGRAM_CREDENTIAL,
   DEFAULT_FROM,
-  CSV_FILENAME,
+  VALID_CSV_FILENAME,
 } from 'test-utils'
 import {
   mockApis,
@@ -99,7 +99,7 @@ test('successfully creates and sends a new Telegram campaign', async () => {
   // Wait for CSV to be processed and ensure that message preview is shown
   expect(await screen.findByText(/message preview/i)).toBeInTheDocument()
   expect(screen.getByText(/1 recipient/i)).toBeInTheDocument()
-  expect(screen.getByText(CSV_FILENAME)).toBeInTheDocument()
+  expect(screen.getByText(VALID_CSV_FILENAME)).toBeInTheDocument()
   expect(screen.getByText(MESSAGE_TEXT)).toBeInTheDocument()
 
   // Go to the credential validation page and wait for it to load
@@ -351,7 +351,7 @@ test('successfully creates and sends a new protected email campaign', async () =
 
   // Wait for CSV to be processed and ensure that message preview is shown
   expect(await screen.findByText(DEFAULT_FROM)).toBeInTheDocument()
-  expect(screen.getByText(CSV_FILENAME)).toBeInTheDocument()
+  expect(screen.getByText(VALID_CSV_FILENAME)).toBeInTheDocument()
   expect(screen.getByText(SUBJECT_TEXT)).toBeInTheDocument()
   expect(screen.getByText(UNPROTECTED_MESSAGE_TEXT)).toBeInTheDocument()
   expect(screen.getAllByText(REPLY_TO)).toHaveLength(2)

frontend/src/components/dashboard/tests/util.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Dashboard from '../Dashboard'
-import { mockCommonApis, CSV_FILENAME, render } from 'test-utils'
+import { mockCommonApis, VALID_CSV_FILENAME, render } from 'test-utils'
 
 export const REPLY_TO = 'testEmail@open.gov.sg'
 export const MESSAGE_TEXT = 'Test message'
@@ -12,14 +12,14 @@ export const RECIPIENT_NUMBER = '89898989'
 export const PROTECTED_PASSWORD = 'test password'
 export const EMAIL_CSV_FILE = new File(
   [`recipient,password\n${RECIPIENT_EMAIL},${PROTECTED_PASSWORD}`],
-  CSV_FILENAME,
+  VALID_CSV_FILENAME,
   {
     type: 'text/csv',
   }
 )
 export const MOBILE_CSV_FILE = new File(
   [`recipient\n${RECIPIENT_NUMBER}`],
-  CSV_FILENAME,
+  VALID_CSV_FILENAME,
   {
     type: 'text/csv',
   }

frontend/src/test-utils/api/constants.ts

@@ -9,6 +9,7 @@ export const USER_EMAIL = 'testEmail@open.gov.sg'
 export const DEFAULT_FROM = 'Postman Test <donotreply@test.postman.gov.sg>'
 
 // Recipient uploads
-export const CSV_FILENAME = 'test_email_recipients.csv'
+export const VALID_CSV_FILENAME = 'test_valid_recipients.csv'
+export const INVALID_CSV_FILENAME = 'test_invalid_recipients.csv'
 export const PRESIGNED_URL =
   'https://s3.ap-southeast-1.amazonaws.com/file-test.postman.gov.sg/test_params'

frontend/src/test-utils/api/index.ts

@@ -11,9 +11,9 @@ import {
   TELEGRAM_CREDENTIAL,
   DEFAULT_FROM,
   PRESIGNED_URL,
-  CSV_FILENAME,
   INVALID_TELEGRAM_CREDENTIAL,
   INVALID_TWILIO_CREDENTIAL,
+  INVALID_CSV_FILENAME,
 } from './constants'
 import {
   TemplateClient,
@@ -538,7 +538,7 @@ function mockCampaignUploadApis(state: State) {
         })
       )
     }),
-    rest.put(PRESIGNED_URL, (_req, res, ctx) => {
+    rest.put(PRESIGNED_URL, (req, res, ctx) => {
       return res(ctx.status(200), ctx.set('ETag', 'test_etag_value'))
     }),
     rest.post(
@@ -556,15 +556,31 @@ function mockCampaignUploadApis(state: State) {
           part_count: number
           transaction_id?: string
         }
+
         if (!transactionId || !filename || !etags || !partCount) {
           return res(ctx.status(400))
         }
-        state.campaigns[campaignId - 1] = {
-          ...state.campaigns[campaignId - 1],
-          valid: true,
-          num_recipients: 1,
-          csv_filename: CSV_FILENAME,
+
+        // Use the filename to determine if the CSV file is invalid
+        // since jsdom doesn't store the file data on uploads
+        if (filename === INVALID_CSV_FILENAME) {
+          state.campaigns[campaignId - 1] = {
+            ...state.campaigns[campaignId - 1],
+            csv_error: 'Error: invalid recipient file',
+            temp_csv_filename: filename,
+          }
+        } else {
+          state.campaigns[campaignId - 1] = {
+            ...state.campaigns[campaignId - 1],
+            valid: true,
+            num_recipients: 1,
+            csv_filename: filename,
+            is_csv_processing: false,
+            temp_csv_filename: undefined,
+            csv_error: undefined,
+          }
         }
+
         return res(ctx.status(202))
       }
     ),
@@ -578,19 +594,40 @@ function mockCampaignUploadApis(state: State) {
       if (!transactionId || !filename || !etag) {
         return res(ctx.status(400))
       }
-      state.campaigns[campaignId - 1] = {
-        ...state.campaigns[campaignId - 1],
-        valid: true,
-        num_recipients: 1,
-        csv_filename: CSV_FILENAME,
+
+      // Use the filename to determine if the CSV file is invalid
+      // since jsdom doesn't store the file data on uploads
+      if (filename === INVALID_CSV_FILENAME) {
+        state.campaigns[campaignId - 1] = {
+          ...state.campaigns[campaignId - 1],
+          csv_error: 'Error: invalid recipient file',
+          temp_csv_filename: filename,
+        }
+      } else {
+        state.campaigns[campaignId - 1] = {
+          ...state.campaigns[campaignId - 1],
+          valid: true,
+          num_recipients: 1,
+          csv_filename: filename,
+          is_csv_processing: false,
+          temp_csv_filename: undefined,
+          csv_error: undefined,
+        }
       }
+
       return res(ctx.status(202))
     }),
     rest.get('/campaign/:campaignId/upload/status', (req, res, ctx) => {
       const { campaignId } = req.params
 
       const campaign = state.campaigns[campaignId - 1]
-      const { num_recipients, is_csv_processing, csv_filename } = campaign
+      const {
+        num_recipients,
+        is_csv_processing,
+        csv_filename,
+        csv_error,
+        temp_csv_filename,
+      } = campaign
 
       let preview
       if (campaign.email_templates) {
@@ -611,10 +648,12 @@ function mockCampaignUploadApis(state: State) {
       return res(
         ctx.status(200),
         ctx.json({
-          is_csv_processing,
+          csv_error,
           csv_filename,
+          is_csv_processing,
           num_recipients,
           preview,
+          temp_csv_filename,
         })
       )
     }),

frontend/src/test-utils/api/interfaces.ts

@@ -60,13 +60,19 @@ export interface Campaign {
   valid: boolean
   has_credential: boolean
 
-  csv_filename: string | null
-  is_csv_processing: boolean
-  job_queue: any[]
-  num_recipients: number | null
+  // Templates
   sms_templates?: SMSTemplate
   email_templates?: EmailTemplate
   telegram_templates?: TelegramTemplate
+
+  // Recipients
+  temp_csv_filename?: string
+  csv_error?: string
+  csv_filename: string | null
+  is_csv_processing: boolean
+  num_recipients: number | null
+
+  job_queue: any[]
 }
 
 interface ProtectedMessage {