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

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

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/svelte';
+import Thumb from './Thumb.svelte';
+
+describe('Thumb', () => {
+    describe('Rendering', () => {
+        it('renders a container element', () => {
+            const { container } = render(Thumb, { sliderPos: 50, isDragging: false });
+            expect(container.firstElementChild).toBeInTheDocument();
+        });
+
+        it('applies sliderPos as left CSS style', () => {
+            const { container } = render(Thumb, { sliderPos: 30, isDragging: false });
+            const el = container.firstElementChild as HTMLElement;
+            expect(el.style.left).toBe('30%');
+        });
+
+        it('renders two handle squares', () => {
+            const { container } = render(Thumb, { sliderPos: 50, isDragging: false });
+            const handles = container.querySelectorAll('.bg-brand.text-white');
+            expect(handles).toHaveLength(2);
+        });
+    });
+
+    describe('Dragging state', () => {
+        it('applies scale-110 to handles when dragging', () => {
+            const { container } = render(Thumb, { sliderPos: 50, isDragging: true });
+            const handles = container.querySelectorAll('.scale-110');
+            expect(handles.length).toBeGreaterThan(0);
+        });
+
+        it('applies scale-100 to handles when not dragging', () => {
+            const { container } = render(Thumb, { sliderPos: 50, isDragging: false });
+            const handles = container.querySelectorAll('.scale-100');
+            expect(handles.length).toBeGreaterThan(0);
+        });
+
+        it('does not apply scale-110 when not dragging', () => {
+            const { container } = render(Thumb, { sliderPos: 50, isDragging: false });
+            expect(container.querySelector('.scale-110')).toBeNull();
+        });
+    });
+});