src/features/GetFonts/ui/Filters/Filters.svelte.test.ts

@@ -0,0 +1,63 @@
+import { filterManager } from '$features/GetFonts';
+import {
+    render,
+    screen,
+} from '@testing-library/svelte';
+import Filters from './Filters.svelte';
+
+describe('Filters', () => {
+    beforeEach(() => {
+        filterManager.setGroups([]);
+    });
+
+    describe('Rendering', () => {
+        it('renders nothing when filter groups are empty', () => {
+            const { container } = render(Filters);
+            expect(container.firstElementChild).toBeNull();
+        });
+
+        it('renders a label for each filter group', () => {
+            filterManager.setGroups([
+                { id: 'cat', label: 'Category', properties: [] },
+                { id: 'prov', label: 'Provider', properties: [] },
+            ]);
+            render(Filters);
+            expect(screen.getByText('Category')).toBeInTheDocument();
+            expect(screen.getByText('Provider')).toBeInTheDocument();
+        });
+
+        it('renders filter properties within groups', () => {
+            filterManager.setGroups([
+                {
+                    id: 'cat',
+                    label: 'Category',
+                    properties: [
+                        { id: 'serif', name: 'Serif', value: 'serif', selected: false },
+                        { id: 'sans', name: 'Sans-Serif', value: 'sans-serif', selected: false },
+                    ],
+                },
+            ]);
+            render(Filters);
+            expect(screen.getByText('Serif')).toBeInTheDocument();
+            expect(screen.getByText('Sans-Serif')).toBeInTheDocument();
+        });
+
+        it('renders multiple groups with their properties', () => {
+            filterManager.setGroups([
+                {
+                    id: 'cat',
+                    label: 'Category',
+                    properties: [{ id: 'mono', name: 'Monospace', value: 'monospace', selected: false }],
+                },
+                {
+                    id: 'prov',
+                    label: 'Provider',
+                    properties: [{ id: 'google', name: 'Google', value: 'google', selected: false }],
+                },
+            ]);
+            render(Filters);
+            expect(screen.getByText('Monospace')).toBeInTheDocument();
+            expect(screen.getByText('Google')).toBeInTheDocument();
+        });
+    });
+});