Merge pull request #24 from JosephGasiorekUSDS/jgasiorek-connect-some…

…-screens

Connect some ledger screens

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"
+            })
+        })
+    })
+})

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>

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"
+            })
+        })
+    })
 })

app/ledger/income/list/page.tsx

@@ -5,18 +5,31 @@ import "@trussworks/react-uswds/lib/index.css"
 import { Header, Title, Button, ButtonGroup, Grid, GridContainer } from '@trussworks/react-uswds' 
 import { useTranslation } from '../../../i18n/client'
 import { useRouter } from "next/navigation"
+import { selectBenefits } from "@/lib/features/benefits/benefitsSlice"
+import { useAppSelector } from "@/lib/hooks"
 import IncomeList from "@/app/components/IncomeList"
 
 const DAY_COUNT = 30
 
 export default function Page() {
     const { t } = useTranslation('en')
     const router = useRouter()
+    const benefits = useAppSelector(state => selectBenefits(state))
 
     function addItemClicked() {
         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')
+        }
+    }
+
     return (
         <div>
             <Header basic={true}>
@@ -35,7 +48,7 @@ export default function Page() {
                             <IncomeList dayCount={DAY_COUNT} header={t('list_income_list_header')} />
                             <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>