9d26ce6054
Second step of the Phase 5 split. The kebab dropdown — including clickOutside handling and its own mobileMenuOpen state — becomes its own component named after its visual region. The mobile snippet duplication inside DocumentTopBar is removed; the component owns its mobile-specific markup. TDD: DocumentMobileMenu.svelte.test.ts (7 tests) was red first. The component then made it green (kebab trigger, dropdown open/close on click, transcribe button gated on canWrite × isPdf × !transcribeMode, download link gated on filePath). DocumentTopBar wraps the new component in a md:hidden div so responsive behaviour is unchanged. Existing 18-test DocumentTopBar suite still passes. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import DocumentMobileMenu from './DocumentMobileMenu.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
const baseProps = {
|
|
canWrite: false,
|
|
isPdf: false,
|
|
transcribeMode: false,
|
|
filePath: null as string | null,
|
|
originalFilename: 'brief.pdf' as string | null,
|
|
fileUrl: ''
|
|
};
|
|
|
|
describe('DocumentMobileMenu', () => {
|
|
it('renders the kebab trigger button with the more-actions aria-label', async () => {
|
|
render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });
|
|
|
|
await expect.element(page.getByRole('button', { name: /weitere aktionen/i })).toBeVisible();
|
|
});
|
|
|
|
it('starts with the dropdown closed (aria-expanded=false)', async () => {
|
|
render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });
|
|
|
|
await expect
|
|
.element(page.getByRole('button', { name: /weitere aktionen/i }))
|
|
.toHaveAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
it('opens the dropdown when the trigger is clicked', async () => {
|
|
render(DocumentMobileMenu, { props: { ...baseProps, filePath: 'docs/x.pdf' } });
|
|
|
|
await page.getByRole('button', { name: /weitere aktionen/i }).click();
|
|
|
|
await expect
|
|
.element(page.getByRole('button', { name: /weitere aktionen/i }))
|
|
.toHaveAttribute('aria-expanded', 'true');
|
|
});
|
|
|
|
it('shows the transcribe action inside the open menu when canWrite, isPdf, and not in transcribe mode', async () => {
|
|
render(DocumentMobileMenu, {
|
|
props: { ...baseProps, canWrite: true, isPdf: true, filePath: 'docs/x.pdf' }
|
|
});
|
|
|
|
await page.getByRole('button', { name: /weitere aktionen/i }).click();
|
|
|
|
await expect.element(page.getByRole('button', { name: /transkribieren/i })).toBeVisible();
|
|
});
|
|
|
|
it('hides the transcribe action when already in transcribeMode', async () => {
|
|
render(DocumentMobileMenu, {
|
|
props: {
|
|
...baseProps,
|
|
canWrite: true,
|
|
isPdf: true,
|
|
transcribeMode: true,
|
|
filePath: 'docs/x.pdf'
|
|
}
|
|
});
|
|
|
|
await page.getByRole('button', { name: /weitere aktionen/i }).click();
|
|
|
|
await expect
|
|
.element(page.getByRole('button', { name: /transkribieren/i }))
|
|
.not.toBeInTheDocument();
|
|
});
|
|
|
|
it('shows the download link inside the open menu when filePath is present', async () => {
|
|
render(DocumentMobileMenu, {
|
|
props: { ...baseProps, filePath: 'docs/x.pdf', fileUrl: '/api/docs/x' }
|
|
});
|
|
|
|
await page.getByRole('button', { name: /weitere aktionen/i }).click();
|
|
|
|
await expect.element(page.getByRole('link', { name: /herunterladen/i })).toBeVisible();
|
|
});
|
|
|
|
it('omits the download link when filePath is null', async () => {
|
|
render(DocumentMobileMenu, {
|
|
props: { ...baseProps, canWrite: true, isPdf: true }
|
|
});
|
|
|
|
await page.getByRole('button', { name: /weitere aktionen/i }).click();
|
|
|
|
await expect
|
|
.element(page.getByRole('link', { name: /herunterladen/i }))
|
|
.not.toBeInTheDocument();
|
|
});
|
|
});
|