test(shared): test ComboControl against NumericControl mock, not the factory
This commit is contained in:
@@ -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);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user