86584a53a8
New coach card replaces the icon+sentence empty state in the Transcribe panel (edit mode). Three-step guide with 5-s SMIL drawing animation in step 1 only. Animation freezes at the final frame when prefers-reduced-motion is active. Footer links to Wikipedia Kurrent and the Richtlinien page open in new tabs with visible '(öffnet in neuem Tab)' annotations. 34 new i18n keys in de/en/es. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
3.2 KiB
TypeScript
72 lines
3.2 KiB
TypeScript
import { describe, it, expect, afterEach, vi } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte';
|
|
|
|
vi.mock('$lib/paraglide/messages.js', () => ({
|
|
m: {
|
|
transcribe_coach_title: () => 'Erste Transkription?',
|
|
transcribe_coach_preamble: () => 'Unser Kurrent-Erkenner lernt noch.',
|
|
transcribe_coach_step_1_title: () => 'Rahmen ziehen.',
|
|
transcribe_coach_step_1_body: () => 'Klicken und ziehen Sie mit der Maus einen Rahmen.',
|
|
transcribe_coach_step_2_title: () => 'Text eingeben.',
|
|
transcribe_coach_step_2_body: () => 'Geben Sie den Text ein.',
|
|
transcribe_coach_step_3_title: () => 'Speichert automatisch.',
|
|
transcribe_coach_footer_kurrent: () => 'Hilfe zu Kurrent ↗',
|
|
transcribe_coach_footer_richtlinien: () => 'Transkriptions-Richtlinien ↗',
|
|
common_opens_new_tab: () => '(öffnet in neuem Tab)'
|
|
}
|
|
}));
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
describe('TranscribeCoachEmptyState', () => {
|
|
it('renders the title and preamble', async () => {
|
|
render(TranscribeCoachEmptyState);
|
|
await expect
|
|
.element(page.getByRole('heading', { level: 2 }))
|
|
.toHaveTextContent('Erste Transkription?');
|
|
await expect.element(page.getByText('Unser Kurrent-Erkenner lernt noch.')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders three numbered steps', async () => {
|
|
render(TranscribeCoachEmptyState);
|
|
await expect.element(page.getByText('Rahmen ziehen.')).toBeInTheDocument();
|
|
await expect
|
|
.element(page.getByText('Klicken und ziehen Sie mit der Maus einen Rahmen.'))
|
|
.toBeInTheDocument();
|
|
await expect.element(page.getByText('Text eingeben.')).toBeInTheDocument();
|
|
await expect.element(page.getByText('Geben Sie den Text ein.')).toBeInTheDocument();
|
|
await expect.element(page.getByText('Speichert automatisch.')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders footer links to Wikipedia Kurrent and Richtlinien page', async () => {
|
|
render(TranscribeCoachEmptyState);
|
|
const kurrentLink = page.getByRole('link', { name: /Hilfe zu Kurrent/ });
|
|
await expect.element(kurrentLink).toBeInTheDocument();
|
|
await expect.element(kurrentLink).toHaveAttribute('target', '_blank');
|
|
await expect.element(kurrentLink).toHaveAttribute('rel', 'noopener noreferrer');
|
|
await expect.element(kurrentLink).toHaveAttribute('referrerpolicy', 'no-referrer');
|
|
|
|
const richtlinienLink = page.getByRole('link', { name: /Transkriptions-Richtlinien/ });
|
|
await expect.element(richtlinienLink).toBeInTheDocument();
|
|
await expect.element(richtlinienLink).toHaveAttribute('target', '_blank');
|
|
await expect.element(richtlinienLink).toHaveAttribute('rel', 'noopener noreferrer');
|
|
});
|
|
|
|
it('renders visible "(öffnet in neuem Tab)" annotation on each footer link', async () => {
|
|
render(TranscribeCoachEmptyState);
|
|
const annotations = page.getByText('(öffnet in neuem Tab)');
|
|
await expect.element(annotations.first()).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the drag demo animation region inside step 1', async () => {
|
|
render(TranscribeCoachEmptyState);
|
|
const demo = page.getByRole('img', { name: /Rahmen ziehen|Animation/i });
|
|
await expect.element(demo).toBeInTheDocument();
|
|
});
|
|
});
|