test(shared): test ComboControl against NumericControl mock, not the factory

This commit is contained in:
Ilia Mashkov
2026-05-31 16:50:55 +03:00
parent 8adf5cd7b3
commit 4640d6e521
3 changed files with 52 additions and 5 deletions
@@ -1,7 +1,7 @@
<script module> <script module>
import { createTypographyControl } from '$shared/lib';
import { defineMeta } from '@storybook/addon-svelte-csf'; import { defineMeta } from '@storybook/addon-svelte-csf';
import ComboControl from './ComboControl.svelte'; import ComboControl from './ComboControl.svelte';
import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
const { Story } = defineMeta({ const { Story } = defineMeta({
title: 'Shared/ComboControl', title: 'Shared/ComboControl',
@@ -23,7 +23,7 @@ const { Story } = defineMeta({
}, },
control: { control: {
control: 'object', 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"> <script lang="ts">
import type { ComponentProps } from 'svelte'; 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> </script>
<Story <Story
@@ -1,4 +1,3 @@
import { createTypographyControl } from '$shared/lib';
import { import {
fireEvent, fireEvent,
render, render,
@@ -6,9 +5,10 @@ import {
waitFor, waitFor,
} from '@testing-library/svelte'; } from '@testing-library/svelte';
import ComboControl from './ComboControl.svelte'; import ComboControl from './ComboControl.svelte';
import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
function makeControl(value: number, opts: { min?: number; max?: number; step?: number } = {}) { function makeControl(value: number, opts: { min?: number; max?: number; step?: number } = {}) {
return createTypographyControl({ return createNumericControlMock({
value, value,
min: opts.min ?? 0, min: opts.min ?? 0,
max: opts.max ?? 100, max: opts.max ?? 100,
@@ -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);
},
};
}