From 51902b57ff2211e7b8c9080a8245049e413de55a Mon Sep 17 00:00:00 2001
From: Joe Gasiorek <Joseph.J.Gasiorek@omb.eop.gov>
Date: Thu, 13 Jun 2024 13:02:40 -0700
Subject: [PATCH] Connect some ledger screens

---
 app/ledger/expense/snap/page.test.tsx | 45 ++++++++++++++++++++++++
 app/ledger/expense/snap/page.tsx      | 13 ++++---
 app/ledger/income/list/page.test.tsx  | 49 +++++++++++++++++++++++++++
 app/ledger/income/list/page.tsx       | 17 +++++++---
 4 files changed, 113 insertions(+), 11 deletions(-)
 create mode 100644 app/ledger/expense/snap/page.test.tsx

diff --git a/app/ledger/expense/snap/page.test.tsx b/app/ledger/expense/snap/page.test.tsx
new file mode 100644
index 0000000..fba5a2e
--- /dev/null
+++ b/app/ledger/expense/snap/page.test.tsx
@@ -0,0 +1,45 @@
+import { afterEach, beforeEach, describe, expect, it, test } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import Page from './page'
+import { makeStore } from '@/lib/store'
+import { vi } from 'vitest'
+import { EnhancedStore } from '@reduxjs/toolkit'
+import mockRouter from 'next-router-mock'
+
+describe('SNAP Expense Screen', async () => {
+    let store: EnhancedStore
+    beforeEach(() => {
+        vi.mock('next/navigation', () => require('next-router-mock'))
+        mockRouter.push('/ledger/expense/snap')
+        store = makeStore()
+        render (<Provider store={store}><Page /></Provider>)
+    })
+    afterEach(cleanup)
+
+    it('shows header', () => {
+        expect(screen.getByTestId('expense-snap-header')).toBeDefined()
+    })
+
+    it('navigates to review screen if no is selected', async () => {
+        fireEvent.click(screen.getByTestId("no_radio"))
+        fireEvent.click(screen.getByTestId("continue-button"))
+
+        await waitFor(() => {
+            expect(mockRouter).toMatchObject({
+                asPath: "/ledger/review"
+            })
+        })
+    })
+
+    it('navigates to ledger builder if yes is selected', async () => {
+        fireEvent.click(screen.getByTestId("yes_radio"))
+        fireEvent.click(screen.getByTestId("continue-button"))
+
+        await waitFor(() => {
+            expect(mockRouter).toMatchObject({
+                asPath: "/ledger/expense"
+            })
+        })
+    })
+})
\ No newline at end of file
diff --git a/app/ledger/expense/snap/page.tsx b/app/ledger/expense/snap/page.tsx
index 1f2f115..cf19887 100644
--- a/app/ledger/expense/snap/page.tsx
+++ b/app/ledger/expense/snap/page.tsx
@@ -28,11 +28,10 @@ export default function Page() {
     const onSubmit: SubmitHandler<FormData> = (data => {
         const { snapRadio } = data
 
-        // TODO: Navigate to the approprate screen
         if (snapRadio == "yes") {
-            console.log("yes")
+            router.push("/ledger/expense")
         } else if (snapRadio == "no") {
-            console.log("no")
+            router.push("/ledger/review")
         }
     })
 
@@ -50,25 +49,25 @@ export default function Page() {
                     <Grid row gap>
                         <main className="usa-layout-docs">
                             <Form onSubmit={handleSubmit(onSubmit)}>
-                                <h3 className="margin-bottom-2" data-testid="expenses_landing_what_counts_heading">{t('expenses_snap_standard_header', {amount: MONTHLY_AMOUNT})}</h3>
+                                <h3 className="margin-bottom-2" data-testid="expense-snap-header">{t('expenses_snap_standard_header', {amount: MONTHLY_AMOUNT})}</h3>
                                 <span className="usa-hint">{t('expenses_snap_standard_subheader')}</span>
                                 <Controller
                                     name="snapRadio"
                                     control={control}
                                     render={({ field: {onChange, ...props} }) => 
-                                        <Radio id="no_radio" {...props} onChange={onChange} label={t('expenses_snap_standard_no_header', {amount: MONTHLY_AMOUNT})} labelDescription={t('expenses_snap_standard_no_subheader')} tile className="margin-top-5" value="no" />
+                                        <Radio id="no_radio" {...props} onChange={onChange} label={t('expenses_snap_standard_no_header', {amount: MONTHLY_AMOUNT})} labelDescription={t('expenses_snap_standard_no_subheader')} tile className="margin-top-5" value="no" data-testid="no_radio" />
                                     }
                                 />
                                 <Controller
                                     name="snapRadio"
                                     control={control}
                                     render={({ field: {onChange, ...props} }) => 
-                                        <Radio id="yes_radio" {...props} onChange={onChange} label={t('expenses_snap_standard_yes_header', {amount: MONTHLY_AMOUNT})} labelDescription={t('expenses_snap_standard_yes_subheader')} tile value="yes" />
+                                        <Radio id="yes_radio" {...props} onChange={onChange} label={t('expenses_snap_standard_yes_header', {amount: MONTHLY_AMOUNT})} labelDescription={t('expenses_snap_standard_yes_subheader')} tile value="yes" data-testid="yes_radio" />
                                     }
                                 />
 
                                 <p className="text-center margin-top-5">
-                                    <Button type="submit">{t('expenses_snap_standard_continue')}</Button>
+                                    <Button type="submit" data-testid="continue-button">{t('expenses_snap_standard_continue')}</Button>
                                 </p>
                             </Form>
                         </main>
diff --git a/app/ledger/income/list/page.test.tsx b/app/ledger/income/list/page.test.tsx
index 15c9826..b31d573 100644
--- a/app/ledger/income/list/page.test.tsx
+++ b/app/ledger/income/list/page.test.tsx
@@ -7,6 +7,7 @@ import { vi } from 'vitest'
 import { EnhancedStore } from '@reduxjs/toolkit'
 import mockRouter from 'next-router-mock'
 import { addIncome, IncomeItem } from '@/lib/features/ledger/income/incomeSlice'
+import { BenefitsState, setBenefits } from '@/lib/features/benefits/benefitsSlice'
 
 describe('List Income in Ledger Page', async () => {
     let store: EnhancedStore
@@ -51,4 +52,52 @@ describe('List Income in Ledger Page', async () => {
             expect(screen.getByText("$" + item.amount))
         }
     })
+
+    it('navigates to self employment expenses screen for SNAP only flow', () => {
+        const benefits: BenefitsState = {
+            snap: true,
+            medicaid: false,
+        }
+        store.dispatch(setBenefits(benefits))
+        render (<Provider store={store}><Page /></Provider>)
+        fireEvent.click(screen.getByTestId('done_button'))
+        
+        waitFor(() => {
+            expect(mockRouter).toMatchObject({
+                asPath: "/ledger/expense/snap"
+            })
+        })
+    })
+
+    it('navigates to expenses ledger landing screen for Medicaid only flow', () => {
+        const benefits: BenefitsState = {
+            snap: false,
+            medicaid: true,
+        }
+        store.dispatch(setBenefits(benefits))
+        render (<Provider store={store}><Page /></Provider>)
+        fireEvent.click(screen.getByTestId('done_button'))
+        
+        waitFor(() => {
+            expect(mockRouter).toMatchObject({
+                asPath: "/ledger/expense"
+            })
+        })
+    })
+
+    it('navigates to expenses ledger landing screen for Medicaid+SNAP flow', () => {
+        const benefits: BenefitsState = {
+            snap: false,
+            medicaid: true,
+        }
+        store.dispatch(setBenefits(benefits))
+        render (<Provider store={store}><Page /></Provider>)
+        fireEvent.click(screen.getByTestId('done_button'))
+        
+        waitFor(() => {
+            expect(mockRouter).toMatchObject({
+                asPath: "/ledger/expense"
+            })
+        })
+    })
 })
\ No newline at end of file
diff --git a/app/ledger/income/list/page.tsx b/app/ledger/income/list/page.tsx
index 7c49c23..c60d48c 100644
--- a/app/ledger/income/list/page.tsx
+++ b/app/ledger/income/list/page.tsx
@@ -9,6 +9,7 @@ import { removeIncome, IncomeItem, selectIcomeItems } from "@/lib/features/ledge
 import { useRouter } from "next/navigation"
 import { useRef } from "react"
 import Item from './item'
+import { selectBenefits } from "@/lib/features/benefits/benefitsSlice"
 
 const DAY_COUNT = 30
 
@@ -16,8 +17,7 @@ export default function Page() {
     const { t } = useTranslation('en')
     const router = useRouter()
     const items = useAppSelector(state => selectIcomeItems(state))
-    const dispatch = useAppDispatch()
-    const deleteRef = useRef<ModalRef[]>([])
+    const benefits = useAppSelector(state => selectBenefits(state))
 
     const incomeItemElements = items.map((item: IncomeItem, idx: number) => {
         return <Item key={idx} item={item} index={idx} />
@@ -27,10 +27,19 @@ export default function Page() {
         router.push("/ledger/income/add")
     }
 
+    function doneClicked() {
+        if (benefits.snap && !benefits.medicaid) {
+            // For SNAP Only Flow
+            router.push('/ledger/expense/snap')
+        } else {
+            // For Medicaid Only or SNAP+Medicaid Flows
+            router.push('/ledger/expense')
+        }
+    }
+
     function getTotal() {
         let total = items.reduce((t, item) => t + item.amount, 0)
         return (t('list_income_total', {day_count: DAY_COUNT, amount: total}))
-
     }
 
     return (
@@ -61,7 +70,7 @@ export default function Page() {
                             </CardGroup>
                             <ButtonGroup type="default">
                                 <Button type="button" onClick={addItemClicked} data-testid="add_another_button">{t('list_income_add_button')}</Button>
-                                <Button type="button" data-testid="done_button">{t('list_income_done_button')}</Button>
+                                <Button type="button" onClick={doneClicked} data-testid="done_button">{t('list_income_done_button')}</Button>
                             </ButtonGroup>
                         </main>
                     </Grid>