52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { describe, expect, test } from 'vitest';
|
|
import { render, screen } from '@testing-library/svelte';
|
|
import { createRawSnippet } from 'svelte';
|
|
import AlphabeticalGrid from './AlphabeticalGrid.svelte';
|
|
|
|
type Item = { id: string; key: string; label: string };
|
|
|
|
const items: Item[] = [
|
|
{ id: '1', key: 'A', label: 'Apple' },
|
|
{ id: '2', key: 'A', label: 'Avocado' },
|
|
{ id: '3', key: 'B', label: 'Banana' },
|
|
{ id: '4', key: 'D', label: 'Date' } // skips C — divider must jump to D directly
|
|
];
|
|
|
|
// createRawSnippet<Params> receives getters: each param is () => ParamType
|
|
const itemSnippet = createRawSnippet<[Item]>((getIt) => ({
|
|
render: () => `<span>${getIt().label}</span>`
|
|
}));
|
|
|
|
// The generic component's T parameter can't be inferred by testing-library's render,
|
|
// so we cast props to avoid a spurious unknown-assignability error.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
type AnyProps = any;
|
|
|
|
describe('AlphabeticalGrid', () => {
|
|
test('inserts a divider for each new key letter', () => {
|
|
render(AlphabeticalGrid, {
|
|
props: {
|
|
items,
|
|
getKey: (it: Item) => it.key,
|
|
item: itemSnippet
|
|
} as AnyProps
|
|
});
|
|
// Three dividers (A, B, D); C is absent because no items use C.
|
|
expect(screen.getByText('A')).toBeInTheDocument();
|
|
expect(screen.getByText('B')).toBeInTheDocument();
|
|
expect(screen.getByText('D')).toBeInTheDocument();
|
|
expect(screen.queryByText('C')).not.toBeInTheDocument();
|
|
});
|
|
|
|
test('renders items in given order', () => {
|
|
const { container } = render(AlphabeticalGrid, {
|
|
props: {
|
|
items,
|
|
getKey: (it: Item) => it.key,
|
|
item: itemSnippet
|
|
} as AnyProps
|
|
});
|
|
expect(container.textContent).toMatch(/A.*Apple.*Avocado.*B.*Banana.*D.*Date/s);
|
|
});
|
|
});
|