92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
|
import {
|
||
|
|
fireEvent,
|
||
|
|
render,
|
||
|
|
screen,
|
||
|
|
waitFor,
|
||
|
|
} from '@testing-library/svelte';
|
||
|
|
import { createRawSnippet } from 'svelte';
|
||
|
|
import { comparisonStore } from '../../model';
|
||
|
|
import Sidebar from './Sidebar.svelte';
|
||
|
|
|
||
|
|
function textSnippet(text: string) {
|
||
|
|
return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
|
||
|
|
}
|
||
|
|
|
||
|
|
describe('Sidebar', () => {
|
||
|
|
afterEach(() => {
|
||
|
|
comparisonStore.side = 'A';
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Rendering', () => {
|
||
|
|
it('renders the "Configuration" title', () => {
|
||
|
|
render(Sidebar);
|
||
|
|
expect(screen.getByText('Configuration')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders Left Font and Right Font toggle buttons', () => {
|
||
|
|
render(Sidebar);
|
||
|
|
expect(screen.getByText('Left Font')).toBeInTheDocument();
|
||
|
|
expect(screen.getByText('Right Font')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders main snippet when provided', () => {
|
||
|
|
render(Sidebar, { props: { main: textSnippet('main-content') } });
|
||
|
|
expect(screen.getByText('main-content')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders controls snippet when provided', () => {
|
||
|
|
render(Sidebar, { props: { controls: textSnippet('controls-content') } });
|
||
|
|
expect(screen.getByText('controls-content')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders nothing in main area when no main snippet', () => {
|
||
|
|
const { container } = render(Sidebar);
|
||
|
|
expect(container.querySelector('[data-main]')).toBeNull();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('A/B toggle', () => {
|
||
|
|
it('Left Font button is active in side A mode', () => {
|
||
|
|
comparisonStore.side = 'A';
|
||
|
|
render(Sidebar);
|
||
|
|
const leftBtn = screen.getByText('Left Font').closest('button');
|
||
|
|
expect(leftBtn).toHaveClass('shadow-sm');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('Right Font button is not active in side A mode', () => {
|
||
|
|
comparisonStore.side = 'A';
|
||
|
|
render(Sidebar);
|
||
|
|
const rightBtn = screen.getByText('Right Font').closest('button');
|
||
|
|
expect(rightBtn).not.toHaveClass('shadow-sm');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('Right Font button is active in side B mode', () => {
|
||
|
|
comparisonStore.side = 'B';
|
||
|
|
render(Sidebar);
|
||
|
|
const rightBtn = screen.getByText('Right Font').closest('button');
|
||
|
|
expect(rightBtn).toHaveClass('shadow-sm');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('clicking Right Font switches to side B', async () => {
|
||
|
|
render(Sidebar);
|
||
|
|
expect(comparisonStore.side).toBe('A');
|
||
|
|
await fireEvent.click(screen.getByText('Right Font'));
|
||
|
|
expect(comparisonStore.side).toBe('B');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('clicking Left Font switches back to side A from B', async () => {
|
||
|
|
comparisonStore.side = 'B';
|
||
|
|
render(Sidebar);
|
||
|
|
await fireEvent.click(screen.getByText('Left Font'));
|
||
|
|
expect(comparisonStore.side).toBe('A');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('UI updates reactively after side switch', async () => {
|
||
|
|
render(Sidebar);
|
||
|
|
await fireEvent.click(screen.getByText('Right Font'));
|
||
|
|
const rightBtn = screen.getByText('Right Font').closest('button');
|
||
|
|
await waitFor(() => expect(rightBtn).toHaveClass('shadow-sm'));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|