diff --git a/frontend/src/lib/components/BackButton.svelte b/frontend/src/lib/components/BackButton.svelte new file mode 100644 index 00000000..4b2edbaf --- /dev/null +++ b/frontend/src/lib/components/BackButton.svelte @@ -0,0 +1,25 @@ + + + diff --git a/frontend/src/lib/components/BackButton.svelte.spec.ts b/frontend/src/lib/components/BackButton.svelte.spec.ts new file mode 100644 index 00000000..ce714912 --- /dev/null +++ b/frontend/src/lib/components/BackButton.svelte.spec.ts @@ -0,0 +1,29 @@ +import { describe, it, expect, afterEach, vi } from 'vitest'; +import { cleanup, render } from 'vitest-browser-svelte'; +import { page } from 'vitest/browser'; +import BackButton from './BackButton.svelte'; + +afterEach(cleanup); + +describe('BackButton', () => { + it('renders a button with "Zurück" text', async () => { + render(BackButton); + await expect.element(page.getByRole('button', { name: /zurück/i })).toBeInTheDocument(); + }); + + it('calls history.back() when clicked', async () => { + const backSpy = vi.spyOn(history, 'back').mockImplementation(() => {}); + render(BackButton); + + await page.getByRole('button', { name: /zurück/i }).click(); + + expect(backSpy).toHaveBeenCalledOnce(); + backSpy.mockRestore(); + }); + + it('has min-h-[44px] for touch target compliance', async () => { + render(BackButton); + const btn = document.querySelector('button'); + expect(btn?.className).toContain('min-h-[44px]'); + }); +});