From 4640d6e521b0be69f29634a6e859c5e14b03d72b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 16:50:55 +0300
Subject: [PATCH] test(shared): test ComboControl against NumericControl mock,
 not the factory

---
 .../ComboControl/ComboControl.stories.svelte  |  6 +--
 .../ComboControl/ComboControl.svelte.test.ts  |  4 +-
 .../createNumericControlMock.svelte.ts        | 47 +++++++++++++++++++
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts

diff --git a/src/shared/ui/ComboControl/ComboControl.stories.svelte b/src/shared/ui/ComboControl/ComboControl.stories.svelte
index bdaf27f..09ef682 100644
--- a/src/shared/ui/ComboControl/ComboControl.stories.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.stories.svelte
@@ -1,7 +1,7 @@
 <script module>
-import { createTypographyControl } from '$shared/lib';
 import { defineMeta } from '@storybook/addon-svelte-csf';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/ComboControl',
@@ -23,7 +23,7 @@ const { Story } = defineMeta({
         },
         control: {
             control: 'object',
-            description: 'TypographyControl instance managing the value and bounds',
+            description: 'NumericControl instance managing the value and bounds',
         },
     },
 });
@@ -31,7 +31,7 @@ const { Story } = defineMeta({
 
 <script lang="ts">
 import type { ComponentProps } from 'svelte';
-const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const horizontalControl = createNumericControlMock({ min: 0, max: 100, step: 1, value: 50 });
 </script>
 
 <Story
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte.test.ts b/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
index 8eade6a..6f069ec 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
+++ b/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
@@ -1,4 +1,3 @@
-import { createTypographyControl } from '$shared/lib';
 import {
     fireEvent,
     render,
@@ -6,9 +5,10 @@ import {
     waitFor,
 } from '@testing-library/svelte';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 function makeControl(value: number, opts: { min?: number; max?: number; step?: number } = {}) {
-    return createTypographyControl({
+    return createNumericControlMock({
         value,
         min: opts.min ?? 0,
         max: opts.max ?? 100,
diff --git a/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts b/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts
new file mode 100644
index 0000000..537db69
--- /dev/null
+++ b/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts
@@ -0,0 +1,47 @@
+/**
+ * Test/story mock implementing the NumericControl contract.
+ *
+ * Lives in shared/ui because ComboControl must be testable without importing
+ * the real typography factory (which sits in a feature, above shared).
+ */
+import type { NumericControl } from '../types';
+
+/**
+ * Build a reactive NumericControl mock with clamping and stepping.
+ */
+export function createNumericControlMock(
+    init: Pick<NumericControl, 'value' | 'min' | 'max' | 'step'>,
+): NumericControl {
+    let value = $state(init.value);
+    const clamp = (v: number) => Math.min(Math.max(v, init.min), init.max);
+
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = clamp(v);
+        },
+        get min() {
+            return init.min;
+        },
+        get max() {
+            return init.max;
+        },
+        get step() {
+            return init.step;
+        },
+        get isAtMin() {
+            return value <= init.min;
+        },
+        get isAtMax() {
+            return value >= init.max;
+        },
+        increase() {
+            value = clamp(value + init.step);
+        },
+        decrease() {
+            value = clamp(value - init.step);
+        },
+    };
+}