chore UGN-355 - render error toast if error is thrown in async hook

JulitorK · JulitorK · commit 2f2adec605be · 2022-06-01T17:06:08.000+03:00
diff --git a/src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx b/src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx
@@ -41,6 +41,7 @@ const fields: Fields<any> = [
 
 const CONTINUE_BUTTON = "Next"
 const MUTATED_ENTRY = "mutated entry"
+const ERROR_MESSAGE = "Something happened"
 
 describe("Match Columns automatic matching", () => {
   test("AutoMatch column and click next", async () => {
@@ -622,7 +623,7 @@ describe("Match Columns general tests", () => {
       ...mockRsiValues,
       fields: mockRsiValues.fields.filter((field) => field.key === "name" || field.key === "age"),
     }
-    const { getByText } = render(
+    render(
       <ReactSpreadsheetImport
         {...mockValues}
         matchColumnsStepHook={matchColumnsStepHook}
@@ -638,10 +639,44 @@ describe("Match Columns general tests", () => {
       />,
     )
 
-    const continueButton = getByText(CONTINUE_BUTTON)
+    const continueButton = screen.getByText(CONTINUE_BUTTON)
     userEvent.click(continueButton)
 
     const mutatedEntry = await screen.findByText(MUTATED_ENTRY)
     expect(mutatedEntry).toBeInTheDocument()
   })
+
+  test("Should show error toast if error is thrown in matchColumnsStepHook", async () => {
+    const matchColumnsStepHook = jest.fn(async () => {
+      throw new Error(ERROR_MESSAGE)
+      return undefined as any
+    })
+
+    const mockValues = {
+      ...mockRsiValues,
+      fields: mockRsiValues.fields.filter((field) => field.key === "name" || field.key === "age"),
+    }
+
+    render(
+      <ReactSpreadsheetImport
+        {...mockValues}
+        matchColumnsStepHook={matchColumnsStepHook}
+        initialStepState={{
+          type: StepType.matchColumns,
+          data: [
+            ["Josh", "2"],
+            ["Charlie", "3"],
+            ["Lena", "50"],
+          ],
+          headerValues: ["name", "age"],
+        }}
+      />,
+    )
+
+    const continueButton = screen.getByText(CONTINUE_BUTTON)
+    userEvent.click(continueButton)
+
+    const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+    expect(errorToast).toBeInTheDocument()
+  })
 })
diff --git a/src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx b/src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx
@@ -11,6 +11,7 @@ import { StepType } from "../../UploadFlow"
 
 const MUTATED_HEADER = "mutated header"
 const CONTINUE_BUTTON = "Next"
+const ERROR_MESSAGE = "Something happened"
 
 test("Select header row and click next", async () => {
   const data = [
@@ -64,7 +65,7 @@ test("selectHeaderStepHook should be called after header is selected", async ()
       ],
     },
   })
-  const continueButton = await screen.findByText(CONTINUE_BUTTON, undefined, { timeout: 5000 })
+  const continueButton = await screen.findByText(CONTINUE_BUTTON, undefined, { timeout: 10000 })
   fireEvent.click(continueButton)
   await waitFor(() => {
     expect(selectHeaderStepHook).toBeCalledWith(
@@ -104,3 +105,32 @@ test("selectHeaderStepHook should be able to modify raw data", async () => {
     expect(mutatedHeader).toBeInTheDocument()
   })
 })
+
+test("Should show error toast if error is thrown in selectHeaderStepHook", async () => {
+  const selectHeaderStepHook = jest.fn(async () => {
+    throw new Error(ERROR_MESSAGE)
+    return undefined as any
+  })
+  render(
+    <ReactSpreadsheetImport
+      {...mockRsiValues}
+      selectHeaderStepHook={selectHeaderStepHook}
+      initialStepState={{
+        type: StepType.selectHeader,
+        data: [
+          ["name", "age"],
+          ["Josh", "2"],
+          ["Charlie", "3"],
+          ["Lena", "50"],
+        ],
+      }}
+    />,
+  )
+  const continueButton = screen.getByText(CONTINUE_BUTTON)
+  fireEvent.click(continueButton)
+  const errorToast = await screen.findByText(ERROR_MESSAGE)
+
+  await waitFor(() => {
+    expect(errorToast).toBeInTheDocument()
+  })
+})
diff --git a/src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx b/src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx
@@ -12,6 +12,7 @@ const SHEET_TITLE_2 = "Sheet2"
 const SELECT_HEADER_TABLE_ENTRY_1 = "Charlie"
 const SELECT_HEADER_TABLE_ENTRY_2 = "Josh"
 const SELECT_HEADER_TABLE_ENTRY_3 = "50"
+const ERROR_MESSAGE = "Something happened"
 
 test("Should render select sheet screen if multi-sheet excel file was uploaded", async () => {
   render(<ReactSpreadsheetImport {...mockRsiValues} />)
@@ -83,3 +84,35 @@ test("Select sheet and click next", async () => {
   })
   expect(onContinue.mock.calls[0][0]).toEqual(sheetNames[selectSheetIndex])
 })
+
+test("Should show error toast if error is thrown in uploadStepHook", async () => {
+  const uploadStepHook = jest.fn(async () => {
+    throw new Error(ERROR_MESSAGE)
+    return undefined as any
+  })
+  render(<ReactSpreadsheetImport {...mockRsiValues} uploadStepHook={uploadStepHook} />)
+  const uploader = screen.getByTestId("rsi-dropzone")
+  const data = readFileSync(__dirname + "/../../../../static/Workbook1.xlsx")
+  fireEvent.drop(uploader, {
+    target: {
+      files: [
+        new File([data], "testFile.xlsx", {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        }),
+      ],
+    },
+  })
+
+  const nextButton = await screen.findByRole(
+    "button",
+    {
+      name: "Next",
+    },
+    { timeout: 5000 },
+  )
+
+  userEvent.click(nextButton)
+
+  const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+  expect(errorToast).toBeInTheDocument()
+})
diff --git a/src/steps/UploadFlow.tsx b/src/steps/UploadFlow.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useCallback, useState } from "react"
 import { Progress, useToast } from "@chakra-ui/react"
 import type XLSX from "xlsx"
 import { UploadStep } from "./UploadStep/UploadStep"
@@ -49,6 +49,19 @@ export const UploadFlow = ({ nextStep }: Props) => {
   const [state, setState] = useState<StepState>(initialStepState || { type: StepType.upload })
   const { maxRecords, translations, uploadStepHook, selectHeaderStepHook, matchColumnsStepHook } = useRsi()
   const toast = useToast()
+  const errorToast = useCallback(
+    (description: string) => {
+      toast({
+        status: "error",
+        variant: "left-accent",
+        position: "bottom-left",
+        title: `${translations.alerts.toast.error}`,
+        description,
+        isClosable: true,
+      })
+    },
+    [toast, translations],
+  )
 
   switch (state.type) {
     case StepType.upload:
@@ -58,21 +71,19 @@ export const UploadFlow = ({ nextStep }: Props) => {
             const isSingleSheet = workbook.SheetNames.length === 1
             if (isSingleSheet) {
               if (maxRecords && exceedsMaxRecords(workbook.Sheets[workbook.SheetNames[0]], maxRecords)) {
-                toast({
-                  status: "error",
-                  variant: "left-accent",
-                  position: "bottom-left",
-                  title: `${translations.uploadStep.maxRecordsExceeded(maxRecords.toString())}`,
-                  isClosable: true,
-                })
+                errorToast(translations.uploadStep.maxRecordsExceeded(maxRecords.toString()))
                 return
               }
-              const mappedWorkbook = await uploadStepHook(mapWorkbook(workbook))
-              setState({
-                type: StepType.selectHeader,
-                data: mappedWorkbook,
-              })
-              nextStep()
+              try {
+                const mappedWorkbook = await uploadStepHook(mapWorkbook(workbook))
+                setState({
+                  type: StepType.selectHeader,
+                  data: mappedWorkbook,
+                })
+                nextStep()
+              } catch (e) {
+                errorToast((e as Error).message)
+              }
             } else {
               setState({ type: StepType.selectSheet, workbook })
             }
@@ -85,21 +96,19 @@ export const UploadFlow = ({ nextStep }: Props) => {
           sheetNames={state.workbook.SheetNames}
           onContinue={async (sheetName) => {
             if (maxRecords && exceedsMaxRecords(state.workbook.Sheets[sheetName], maxRecords)) {
-              toast({
-                status: "error",
-                variant: "left-accent",
-                position: "bottom-left",
-                title: `${translations.uploadStep.maxRecordsExceeded(maxRecords.toString())}`,
-                isClosable: true,
-              })
+              errorToast(translations.uploadStep.maxRecordsExceeded(maxRecords.toString()))
               return
             }
-            const mappedWorkbook = await uploadStepHook(mapWorkbook(state.workbook, sheetName))
-            setState({
-              type: StepType.selectHeader,
-              data: mappedWorkbook,
-            })
-            nextStep()
+            try {
+              const mappedWorkbook = await uploadStepHook(mapWorkbook(state.workbook, sheetName))
+              setState({
+                type: StepType.selectHeader,
+                data: mappedWorkbook,
+              })
+              nextStep()
+            } catch (e) {
+              errorToast((e as Error).message)
+            }
           }}
         />
       )
@@ -108,13 +117,17 @@ export const UploadFlow = ({ nextStep }: Props) => {
         <SelectHeaderStep
           data={state.data}
           onContinue={async (...args) => {
-            const { data, headerValues } = await selectHeaderStepHook(...args)
-            setState({
-              type: StepType.matchColumns,
-              data,
-              headerValues,
-            })
-            nextStep()
+            try {
+              const { data, headerValues } = await selectHeaderStepHook(...args)
+              setState({
+                type: StepType.matchColumns,
+                data,
+                headerValues,
+              })
+              nextStep()
+            } catch (e) {
+              errorToast((e as Error).message)
+            }
           }}
         />
       )
@@ -124,12 +137,16 @@ export const UploadFlow = ({ nextStep }: Props) => {
           data={state.data}
           headerValues={state.headerValues}
           onContinue={async (values, rawData, columns) => {
-            const data = await matchColumnsStepHook(values, rawData, columns)
-            setState({
-              type: StepType.validateData,
-              data,
-            })
-            nextStep()
+            try {
+              const data = await matchColumnsStepHook(values, rawData, columns)
+              setState({
+                type: StepType.validateData,
+                data,
+              })
+              nextStep()
+            } catch (e) {
+              errorToast((e as Error).message)
+            }
           }}
         />
       )
diff --git a/src/steps/UploadStep/tests/UploadStep.test.tsx b/src/steps/UploadStep/tests/UploadStep.test.tsx
@@ -7,6 +7,7 @@ import { Providers } from "../../../components/Providers"
 import { ModalWrapper } from "../../../components/ModalWrapper"
 
 const MUTATED_RAW_DATA = "Bye"
+const ERROR_MESSAGE = 'Something happened'
 
 test("Upload a file", async () => {
   const file = new File(["Hello, Hello, Hello, Hello"], "test.csv", { type: "text/csv" })
@@ -66,3 +67,20 @@ test("uploadStepHook should be able to mutate raw upload data", async () => {
   const el = await screen.findByText(MUTATED_RAW_DATA, undefined, { timeout: 5000 })
   expect(el).toBeInTheDocument()
 })
+
+test("Should show error toast if error is thrown in uploadStepHook", async () => {
+  const file = new File(["Hello, Hello, Hello, Hello"], "test.csv", { type: "text/csv" })
+  const uploadStepHook = jest.fn(async () => {
+    throw new Error(ERROR_MESSAGE)
+    return undefined as any
+  })
+  render(<ReactSpreadsheetImport {...mockRsiValues} uploadStepHook={uploadStepHook} />)
+
+  const uploader = screen.getByTestId("rsi-dropzone")
+  fireEvent.drop(uploader, {
+    target: { files: [file] },
+  })
+
+  const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+  expect(errorToast).toBeInTheDocument()
+})
diff --git a/src/translationsRSIProps.ts b/src/translationsRSIProps.ts
@@ -64,6 +64,9 @@ export const translations = {
       cancelButtonTitle: "Cancel",
       continueButtonTitle: "Continue",
     },
+    toast: {
+      error: "Error",
+    },
   },
 }
 

Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,9 @@ export const translations = {`
`64`	`64`	`cancelButtonTitle: "Cancel",`
`65`	`65`	`continueButtonTitle: "Continue",`
`66`	`66`	`},`
	`67`	`+ toast: {`
	`68`	`+ error: "Error",`
	`69`	`+ },`
`67`	`70`	`},`
`68`	`71`	`}`
`69`	`72`