test(ComparisonView): cover parts of the widget with tests

src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte.test.ts

@@ -0,0 +1,91 @@
+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'));
+        });
+    });
+});