2b8032524d
- BackButton gains showLabel prop: showLabel=false renders icon-only with aria-label, no mr-2 on svg (was causing 0px button width in topbar) - DocumentTopBar: BackButton restored to h-11 w-11 circular touch target with showLabel=false matching the original 44×44px <a> it replaced - Topbar row gets pr-4 (16px right padding per spec); action buttons div no longer needs its own pr-3 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
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('applies mb-4 by default', async () => {
|
|
render(BackButton);
|
|
const btn = document.querySelector('button');
|
|
expect(btn?.className).toContain('mb-4');
|
|
});
|
|
|
|
it('applies custom class prop instead of default', async () => {
|
|
render(BackButton, { props: { class: 'mr-3 md:hidden' } });
|
|
const btn = document.querySelector('button');
|
|
expect(btn?.className).toContain('mr-3');
|
|
expect(btn?.className).not.toContain('mb-4');
|
|
});
|
|
|
|
it('hides label text and sets aria-label when showLabel is false', async () => {
|
|
render(BackButton, { props: { showLabel: false } });
|
|
const btn = document.querySelector('button');
|
|
expect(btn?.textContent?.trim()).toBe('');
|
|
expect(btn?.getAttribute('aria-label')).toMatch(/zurück/i);
|
|
});
|
|
});
|