feat(shared-ui,shared-stores): add FavoriteButton component and toggleField utility

FavoriteButton: reusable heart/star/pin toggle with filled/outline states,
accessible labels, configurable colors. toggleField: generic boolean field
toggle for Dexie records (isFavorite, isPinned, etc.) with timestamp.
Includes 11 tests (6 FavoriteButton + 5 toggleField).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-02 16:16:23 +02:00
parent d49a3d727d
commit ead4e71af5
7 changed files with 219 additions and 1 deletions

View file

@ -0,0 +1,47 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import FavoriteButton from './FavoriteButton.svelte';
describe('FavoriteButton', () => {
it('renders with heart icon by default', () => {
const { container } = render(FavoriteButton, {
props: { active: false, onclick: vi.fn() },
});
expect(container.querySelector('button')).toBeInTheDocument();
});
it('has correct aria-label when inactive', () => {
render(FavoriteButton, {
props: { active: false, onclick: vi.fn() },
});
expect(screen.getByRole('button', { name: 'Favorit' })).toBeInTheDocument();
});
it('has correct aria-label when active', () => {
render(FavoriteButton, {
props: { active: true, onclick: vi.fn() },
});
expect(screen.getByRole('button', { name: 'Favorit entfernen' })).toBeInTheDocument();
});
it('calls onclick when clicked', async () => {
const onclick = vi.fn();
render(FavoriteButton, { props: { active: false, onclick } });
await fireEvent.click(screen.getByRole('button'));
expect(onclick).toHaveBeenCalledOnce();
});
it('uses pin labels for pin variant', () => {
render(FavoriteButton, {
props: { active: false, onclick: vi.fn(), variant: 'pin' },
});
expect(screen.getByRole('button', { name: 'Anpinnen' })).toBeInTheDocument();
});
it('uses custom label when provided', () => {
render(FavoriteButton, {
props: { active: false, onclick: vi.fn(), label: 'Custom' },
});
expect(screen.getByRole('button', { name: 'Custom' })).toBeInTheDocument();
});
});