2e943b7f91
Replace ↑↓ text with Long-Arrow-Up/Down-MD.svg on the document search SortDropdown and the Briefwechsel sort button. Rotate the swap button SVG 90° so arrows point left/right matching the horizontal person field layout. Refs: #179 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import { render } from 'vitest-browser-svelte';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { page } from '@vitest/browser/context';
|
|
import SortDropdown from './SortDropdown.svelte';
|
|
|
|
describe('SortDropdown', () => {
|
|
it('renders a select with all sort options', async () => {
|
|
render(SortDropdown, { sort: 'DATE', dir: 'desc' });
|
|
const select = page.getByRole('combobox');
|
|
await expect.element(select).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows the current sort value as selected', async () => {
|
|
render(SortDropdown, { sort: 'TITLE', dir: 'asc' });
|
|
const select = page.getByRole('combobox');
|
|
await expect.element(select).toHaveValue('TITLE');
|
|
});
|
|
|
|
it('renders direction toggle button', async () => {
|
|
render(SortDropdown, { sort: 'DATE', dir: 'asc' });
|
|
const btn = page.getByRole('button');
|
|
await expect.element(btn).toBeInTheDocument();
|
|
});
|
|
|
|
it('direction button shows up arrow when dir is asc', async () => {
|
|
render(SortDropdown, { sort: 'DATE', dir: 'asc' });
|
|
await expect.element(page.getByRole('button')).toBeInTheDocument();
|
|
const img = document.querySelector('button img') as HTMLImageElement;
|
|
expect(img).not.toBeNull();
|
|
expect(img.src).toContain('Long-Arrow-Up');
|
|
});
|
|
|
|
it('direction button shows down arrow when dir is desc', async () => {
|
|
render(SortDropdown, { sort: 'DATE', dir: 'desc' });
|
|
await expect.element(page.getByRole('button')).toBeInTheDocument();
|
|
const img = document.querySelector('button img') as HTMLImageElement;
|
|
expect(img).not.toBeNull();
|
|
expect(img.src).toContain('Long-Arrow-Down');
|
|
});
|
|
});
|