mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-21 21:26:42 +02:00
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:
parent
d49a3d727d
commit
ead4e71af5
7 changed files with 219 additions and 1 deletions
47
packages/shared-ui/src/molecules/FavoriteButton.test.ts
Normal file
47
packages/shared-ui/src/molecules/FavoriteButton.test.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue