refactor(staples): remove ctx=settings — default view is settings, only ctx=onboarding differs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -45,12 +45,12 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="p-[16px_20px] md:p-[40px_56px]">
|
<div class="p-[16px_20px] md:p-[40px_56px]">
|
||||||
{#if data.ctx === 'settings'}
|
{#if !isOnboarding}
|
||||||
<a href="/settings" class="font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-text)] mb-4 inline-block">← Einstellungen</a>
|
<a href="/settings" class="font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-text)] mb-4 inline-block">← Einstellungen</a>
|
||||||
{/if}
|
{/if}
|
||||||
<h1 class="mb-[8px] font-[var(--font-display)] text-[18px] font-medium md:text-[28px] text-[var(--color-text)]">Vorräte</h1>
|
<h1 class="mb-[8px] font-[var(--font-display)] text-[18px] font-medium md:text-[28px] text-[var(--color-text)]">Vorräte</h1>
|
||||||
<StaplesManager categories={data.categories} context="settings" />
|
<StaplesManager categories={data.categories} context="settings" />
|
||||||
{#if data.ctx === 'settings'}
|
{#if !isOnboarding}
|
||||||
<p class="mt-4 font-[var(--font-sans)] text-[11px] text-[var(--color-text-muted)]">Änderungen werden automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.</p>
|
<p class="mt-4 font-[var(--font-sans)] text-[11px] text-[var(--color-text-muted)]">Änderungen werden automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -80,51 +80,31 @@ describe('staples page — settings context (no ctx)', () => {
|
|||||||
expect(screen.getByRole('heading', { name: /vorräte/i })).toBeInTheDocument();
|
expect(screen.getByRole('heading', { name: /vorräte/i })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not render back-link when ctx is null', () => {
|
it('renders back-link "← Einstellungen" when ctx is null (default settings view)', () => {
|
||||||
render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
|
render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
|
||||||
expect(screen.queryByRole('link', { name: /einstellungen/i })).not.toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('staples page — ctx=settings (D3)', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true }));
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.unstubAllGlobals();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders back-link "← Einstellungen" when ctx=settings', () => {
|
|
||||||
render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
|
|
||||||
const backLink = screen.getByRole('link', { name: /← einstellungen/i });
|
const backLink = screen.getByRole('link', { name: /← einstellungen/i });
|
||||||
expect(backLink).toBeInTheDocument();
|
expect(backLink).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('back-link points to /settings', () => {
|
it('back-link points to /settings', () => {
|
||||||
render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
|
render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
|
||||||
const backLink = screen.getByRole('link', { name: /← einstellungen/i });
|
const backLink = screen.getByRole('link', { name: /← einstellungen/i });
|
||||||
expect(backLink).toHaveAttribute('href', '/settings');
|
expect(backLink).toHaveAttribute('href', '/settings');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders hint text about autosave', () => {
|
it('renders hint text about autosave', () => {
|
||||||
render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
|
render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
|
||||||
expect(screen.getByText(/änderungen werden automatisch gespeichert/i)).toBeInTheDocument();
|
expect(screen.getByText(/änderungen werden automatisch gespeichert/i)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders hint text about next shopping list', () => {
|
it('renders hint text about next shopping list', () => {
|
||||||
render(Page, { props: { data: { categories: mockCategories, ctx: 'settings' } } });
|
render(Page, { props: { data: { categories: mockCategories, ctx: null } } });
|
||||||
expect(screen.getByText(/gilt ab der nächsten einkaufsliste/i)).toBeInTheDocument();
|
expect(screen.getByText(/gilt ab der nächsten einkaufsliste/i)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
describe('staples page — hint text absent in onboarding', () => {
|
it('does not render back-link in onboarding context', () => {
|
||||||
beforeEach(() => {
|
render(Page, { props: { data: { categories: mockCategories, ctx: 'onboarding' } } });
|
||||||
vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true }));
|
expect(screen.queryByRole('link', { name: /einstellungen/i })).not.toBeInTheDocument();
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.unstubAllGlobals();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not render hint text in onboarding context', () => {
|
it('does not render hint text in onboarding context', () => {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-[820px]">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-[820px]">
|
||||||
<!-- Card 1: Vorräte (inline, conditional content) -->
|
<!-- Card 1: Vorräte (inline, conditional content) -->
|
||||||
<a
|
<a
|
||||||
href="/household/staples?ctx=settings"
|
href="/household/staples"
|
||||||
class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
|
class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
|
||||||
>
|
>
|
||||||
<span class="font-[var(--font-sans)] text-[16px] font-medium">Vorräte</span>
|
<span class="font-[var(--font-sans)] text-[16px] font-medium">Vorräte</span>
|
||||||
|
|||||||
@@ -17,10 +17,10 @@ describe('settings page — hub', () => {
|
|||||||
expect(screen.getByRole('heading', { name: /einstellungen/i })).toBeInTheDocument();
|
expect(screen.getByRole('heading', { name: /einstellungen/i })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders Vorräte card linking to /household/staples?ctx=settings', () => {
|
it('renders Vorräte card linking to /household/staples', () => {
|
||||||
render(Page, { props: { data: makeData() } });
|
render(Page, { props: { data: makeData() } });
|
||||||
const links = screen.getAllByRole('link');
|
const links = screen.getAllByRole('link');
|
||||||
const vorrateLink = links.find((l) => l.getAttribute('href') === '/household/staples?ctx=settings');
|
const vorrateLink = links.find((l) => l.getAttribute('href') === '/household/staples');
|
||||||
expect(vorrateLink).toBeInTheDocument();
|
expect(vorrateLink).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user