diff --git a/frontend/src/routes/(app)/settings/+page.svelte b/frontend/src/routes/(app)/settings/+page.svelte index f369397..10787d0 100644 --- a/frontend/src/routes/(app)/settings/+page.svelte +++ b/frontend/src/routes/(app)/settings/+page.svelte @@ -1 +1,70 @@ -

Einstellungen

+ + +

Einstellungen

+ +
+ + + Vorräte + + {#if data.stapleCount > 0} +

+ {data.stapleCount} +

+ {:else} +

+ Noch keine Vorräte eingerichtet +

+ {/if} + + + {#if data.stapleCount > 0} + Vorräte bearbeiten → + {:else} + Jetzt einrichten → + {/if} + + + + + + Haushalt + +

+ {data.memberCount} Mitglieder +

+ + + Mitglieder anzeigen → + + + + + +
diff --git a/frontend/src/routes/(app)/settings/page.test.ts b/frontend/src/routes/(app)/settings/page.test.ts new file mode 100644 index 0000000..c54d313 --- /dev/null +++ b/frontend/src/routes/(app)/settings/page.test.ts @@ -0,0 +1,71 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import Page from './+page.svelte'; + +function makeData(overrides: Partial<{ stapleCount: number; memberCount: number; userName: string }> = {}) { + return { + stapleCount: 14, + memberCount: 3, + userName: 'Marcel Raddatz', + ...overrides + }; +} + +describe('settings page — hub', () => { + it('renders the page heading Einstellungen', () => { + render(Page, { props: { data: makeData() } }); + expect(screen.getByRole('heading', { name: /einstellungen/i })).toBeInTheDocument(); + }); + + it('renders Vorräte card linking to /household/staples?ctx=settings', () => { + render(Page, { props: { data: makeData() } }); + const links = screen.getAllByRole('link'); + const vorrateLink = links.find((l) => l.getAttribute('href') === '/household/staples?ctx=settings'); + expect(vorrateLink).toBeInTheDocument(); + }); + + it('renders Haushalt card linking to /members', () => { + render(Page, { props: { data: makeData() } }); + const links = screen.getAllByRole('link'); + const haushaltLink = links.find((l) => l.getAttribute('href') === '/members'); + expect(haushaltLink).toBeInTheDocument(); + }); + + it('renders Profil card linking to /profile', () => { + render(Page, { props: { data: makeData() } }); + const links = screen.getAllByRole('link'); + const profilLink = links.find((l) => l.getAttribute('href') === '/profile'); + expect(profilLink).toBeInTheDocument(); + }); + + it('shows stapleCount as a number in the Vorräte card', () => { + render(Page, { props: { data: makeData({ stapleCount: 14 }) } }); + expect(screen.getByTestId('staple-count')).toHaveTextContent('14'); + }); + + it('shows memberCount in the Haushalt card', () => { + render(Page, { props: { data: makeData({ memberCount: 3 }) } }); + expect(screen.getByTestId('member-count')).toHaveTextContent('3'); + }); + + it('shows userName in the Profil card meta', () => { + render(Page, { props: { data: makeData({ userName: 'Marcel Raddatz' }) } }); + expect(screen.getByText('Marcel Raddatz')).toBeInTheDocument(); + }); + + it('shows empty state text when stapleCount is 0', () => { + render(Page, { props: { data: makeData({ stapleCount: 0 }) } }); + expect(screen.getByText(/noch keine vorräte/i)).toBeInTheDocument(); + expect(screen.queryByTestId('staple-count')).not.toBeInTheDocument(); + }); + + it('shows "Jetzt einrichten →" CTA when stapleCount is 0', () => { + render(Page, { props: { data: makeData({ stapleCount: 0 }) } }); + expect(screen.getByText('Jetzt einrichten →')).toBeInTheDocument(); + }); + + it('shows "Vorräte bearbeiten →" CTA when stapleCount > 0', () => { + render(Page, { props: { data: makeData({ stapleCount: 5 }) } }); + expect(screen.getByText('Vorräte bearbeiten →')).toBeInTheDocument(); + }); +});