src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts

@@ -0,0 +1,73 @@
+import {
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+} from '@testing-library/svelte';
+import { layoutManager } from '../../model';
+import LayoutSwitch from './LayoutSwitch.svelte';
+
+describe('LayoutSwitch', () => {
+    beforeEach(() => {
+        layoutManager.reset();
+    });
+
+    describe('Rendering', () => {
+        it('renders two icon buttons', () => {
+            render(LayoutSwitch);
+            expect(screen.getAllByRole('button')).toHaveLength(2);
+        });
+    });
+
+    describe('Active state', () => {
+        it('list button is active in list mode', () => {
+            render(LayoutSwitch);
+            const [listBtn] = screen.getAllByRole('button');
+            expect(listBtn).toHaveClass('text-brand');
+        });
+
+        it('grid button is not active in list mode', () => {
+            render(LayoutSwitch);
+            const [, gridBtn] = screen.getAllByRole('button');
+            expect(gridBtn).not.toHaveClass('text-brand');
+        });
+
+        it('grid button is active in grid mode', () => {
+            layoutManager.setMode('grid');
+            render(LayoutSwitch);
+            const [, gridBtn] = screen.getAllByRole('button');
+            expect(gridBtn).toHaveClass('text-brand');
+        });
+
+        it('list button is not active in grid mode', () => {
+            layoutManager.setMode('grid');
+            render(LayoutSwitch);
+            const [listBtn] = screen.getAllByRole('button');
+            expect(listBtn).not.toHaveClass('text-brand');
+        });
+    });
+
+    describe('Interaction', () => {
+        it('clicking second button switches to grid mode', async () => {
+            render(LayoutSwitch);
+            expect(layoutManager.mode).toBe('list');
+            await fireEvent.click(screen.getAllByRole('button')[1]);
+            expect(layoutManager.mode).toBe('grid');
+        });
+
+        it('clicking first button when in grid mode switches to list mode', async () => {
+            layoutManager.setMode('grid');
+            render(LayoutSwitch);
+            await fireEvent.click(screen.getAllByRole('button')[0]);
+            expect(layoutManager.mode).toBe('list');
+        });
+
+        it('active button updates reactively after toggle', async () => {
+            render(LayoutSwitch);
+            const [listBtn, gridBtn] = screen.getAllByRole('button');
+            await fireEvent.click(gridBtn);
+            await waitFor(() => expect(gridBtn).toHaveClass('text-brand'));
+            await waitFor(() => expect(listBtn).not.toHaveClass('text-brand'));
+        });
+    });
+});