diff --git a/frontend/src/pages/ScenarioShowPage.test.tsx b/frontend/src/pages/ScenarioShowPage.test.tsx index 2be3109..a73d6cd 100644 --- a/frontend/src/pages/ScenarioShowPage.test.tsx +++ b/frontend/src/pages/ScenarioShowPage.test.tsx @@ -99,6 +99,59 @@ describe('ScenarioShowPage', () => { expect(diningPriorityMarker).toBeInTheDocument() }) + it('shows the empty-buckets copy and renders no bucket cards when the scenario has none', async () => { + server.use( + http.get('http://localhost/api/me', () => + HttpResponse.json({ id: 'u1', email: 'a@b.com' }), + ), + http.get(`http://localhost/api/scenarios/${SCENARIO_ID}`, () => + HttpResponse.json({ + '@context': '/api/contexts/Scenario', + '@id': `/api/scenarios/${SCENARIO_ID}`, + '@type': 'Scenario', + name: 'Emergency Fund', + description: 'Rainy day savings', + buckets: [], + }), + ), + ) + + renderPage() + + expect( + await screen.findByText(/this scenario has no buckets yet/i), + ).toBeInTheDocument() + expect(screen.queryByText('Priority', { exact: false })).not.toBeInTheDocument() + }) + + it('renders the scenario name without a description paragraph when description is null', async () => { + server.use( + http.get('http://localhost/api/me', () => + HttpResponse.json({ id: 'u1', email: 'a@b.com' }), + ), + http.get(`http://localhost/api/scenarios/${SCENARIO_ID}`, () => + HttpResponse.json({ + '@context': '/api/contexts/Scenario', + '@id': `/api/scenarios/${SCENARIO_ID}`, + '@type': 'Scenario', + name: 'Vacation', + description: null, + buckets: [], + }), + ), + ) + + renderPage() + + expect(await screen.findByText('Vacation')).toBeInTheDocument() + // No description was supplied, so no description paragraph should render + // anywhere on the page — assert on the heading's sibling instead of a + // page-wide text search that could false-positive against other copy. + const heading = screen.getByRole('heading', { name: 'Vacation' }) + expect(heading.parentElement).not.toBeNull() + expect(heading.parentElement!.querySelectorAll('p')).toHaveLength(0) + }) + it('renders a distinct not-found state when the scenario 404s (e.g. not owned)', async () => { server.use( http.get('http://localhost/api/me', () => diff --git a/frontend/src/pages/ScenariosPage.test.tsx b/frontend/src/pages/ScenariosPage.test.tsx index 41318e6..bc5ab06 100644 --- a/frontend/src/pages/ScenariosPage.test.tsx +++ b/frontend/src/pages/ScenariosPage.test.tsx @@ -67,6 +67,18 @@ describe('ScenariosPage', () => { 'href', '/scenarios/22222222-2222-2222-2222-222222222222', ) + + // Emergency Fund has a description — its row renders it. Vacation's + // description is null — scope the assertion to Vacation's own row (not + // the whole page) so it can't pass by coincidentally finding Emergency + // Fund's description text elsewhere. + const emergencyFundRow = screen.getByRole('link', { + name: /emergency fund/i, + }) + expect(emergencyFundRow).toHaveTextContent('Rainy day savings') + + const vacationRow = screen.getByRole('link', { name: /vacation/i }) + expect(vacationRow.querySelectorAll('p')).toHaveLength(0) }) it('shows an empty state when the user has no scenarios', async () => {