feat: test coverage of ComboControl and CheckboxFilter

src/shared/ui/ComboControl/ComboControl.stories.svelte

@@ -1,64 +1,76 @@
-<script module>
-import { defineMeta } from '@storybook/addon-svelte-csf';
+<script module lang="ts">
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+    import ComboControl from './ComboControl.svelte';
 
-const { Story } = defineMeta({
-    title: 'Shared/UI/ComboControl',
-    component: ComboControl,
-    tags: ['autodocs'],
-    argTypes: {
-        value: { control: 'number' },
-        minValue: { control: 'number' },
-        maxValue: { control: 'number' },
-        step: { control: 'number' },
-        increaseDisabled: { control: 'boolean' },
-        decreaseDisabled: { control: 'boolean' },
-        onChange: { action: 'onChange' },
-        onIncrease: { action: 'onIncrease' },
-        onDecrease: { action: 'onDecrease' },
-    },
-});
+    const { Story } = defineMeta({
+        title: 'Shared/UI/ComboControl',
+        component: ComboControl,
+        tags: ['autodocs'],
+        argTypes: {
+            controlLabel: { control: 'text' },
+            increaseLabel: { control: 'text' },
+            decreaseLabel: { control: 'text' },
+        },
+    });
 </script>
 
 <script lang="ts">
-import ComboControl from './ComboControl.svelte';
+    import WithControlDecorator from './WithControlDecorator.svelte';
 
-let integerStep = 1;
-let decimalStep = 0.05;
+    // Define initial values for each story
+    const fontSizeInitial = { value: 16, min: 8, max: 100, step: 1 };
 
-let integerValue = 16;
-let decimalValue = 1.5;
+    const letterSpacingInitial = { value: 0, min: -2, max: 4, step: 0.05 };
 
-let integerMinValue = 8;
-let decimalMinValue = 1;
+    const atMinimumInitial = { value: 10, min: 10, max: 100, step: 1 };
 
-let integerMaxValue = 100;
-let decimalMaxValue = 2;
-
-function onChange() {}
-function onIncrease() {}
-function onDecrease() {}
+    const atMaximumInitial = { value: 100, min: 10, max: 100, step: 1 };
 </script>
 
-<Story name="Integer Step">
-    <ComboControl
-        value={integerValue}
-        step={integerStep}
-        onChange={onChange}
-        onIncrease={onIncrease}
-        onDecrease={onDecrease}
-        minValue={integerMinValue}
-        maxValue={integerMaxValue}
-    />
+<Story name="Integer Step" args={{ controlLabel: 'Font size' }}>
+    <WithControlDecorator initialValues={fontSizeInitial}>
+        {#snippet children({ control })}
+            <ComboControl controlLabel={'Font size'} {control} />
+        {/snippet}
+    </WithControlDecorator>
 </Story>
 
-<Story name="Decimal Step">
-    <ComboControl
-        value={decimalValue}
-        step={decimalStep}
-        onChange={onChange}
-        onIncrease={onIncrease}
-        onDecrease={onDecrease}
-        minValue={decimalMinValue}
-        maxValue={decimalMaxValue}
-    />
+<Story name="Decimal Step" args={{ controlLabel: 'Letter spacing' }}>
+    <WithControlDecorator initialValues={letterSpacingInitial}>
+        {#snippet children({ control })}
+            <ComboControl controlLabel={'Letter spacing'} {control} />
+        {/snippet}
+    </WithControlDecorator>
+</Story>
+
+<Story
+    name="At Minimum"
+    args={{ controlLabel: 'Font size', increaseLabel: 'Increase', decreaseLabel: 'Decrease' }}
+>
+    <WithControlDecorator initialValues={atMinimumInitial}>
+        {#snippet children({ control })}
+            <ComboControl
+                controlLabel={'Font size'}
+                increaseLabel={'Increase'}
+                decreaseLabel={'Decrease'}
+                {control}
+            />
+        {/snippet}
+    </WithControlDecorator>
+</Story>
+
+<Story
+    name="At Maximum"
+    args={{ controlLabel: 'Font size', increaseLabel: 'Increase', decreaseLabel: 'Decrease' }}
+>
+    <WithControlDecorator initialValues={atMaximumInitial}>
+        {#snippet children({ control })}
+            <ComboControl
+                controlLabel={'Font size'}
+                increaseLabel={'Increase'}
+                decreaseLabel={'Decrease'}
+                {control}
+            />
+        {/snippet}
+    </WithControlDecorator>
 </Story>

src/shared/ui/ComboControl/ComboControl.svelte

@@ -36,6 +36,7 @@ const {
 }: ComboControlProps = $props();
 
 // Local state for the slider to prevent infinite loops
+// svelte-ignore state_referenced_locally - $state captures initial value, $effect syncs updates
 let sliderValue = $state(Number(control.value));
 
 // Sync sliderValue when external value changes