parent
0dc6141849
commit
e3fd5b6a70
@ -0,0 +1,170 @@
|
|||||||
|
// @vitest-environment jsdom
|
||||||
|
|
||||||
|
import { tick } from 'svelte';
|
||||||
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import { createActiveDom } from '$adom';
|
||||||
|
import { state } from '$libs/reactive';
|
||||||
|
import type { Morfo } from '$uix/morfo';
|
||||||
|
import { Soma } from '$soma/core/soma.svelte';
|
||||||
|
import { createSomaRuntime, type SomaRuntimeSources } from '$soma/runtime.svelte';
|
||||||
|
import { FieldProvider } from '../field/field-provider.svelte';
|
||||||
|
|
||||||
|
import { ToggleProvider } from './toggle-provider.svelte';
|
||||||
|
|
||||||
|
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
|
||||||
|
let result!: T;
|
||||||
|
const cleanup = $effect.root(() => {
|
||||||
|
result = fn();
|
||||||
|
});
|
||||||
|
return { result, cleanup };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function flushRuntimeTrigger() {
|
||||||
|
await Promise.resolve();
|
||||||
|
await tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function installSomaHarness() {
|
||||||
|
const dom = createActiveDom();
|
||||||
|
const soma = {
|
||||||
|
dom,
|
||||||
|
runtime: (morfo: Morfo, sources: Omit<SomaRuntimeSources, 'dom' | 'eventEngine'>) =>
|
||||||
|
createSomaRuntime(morfo, {
|
||||||
|
dom,
|
||||||
|
translate: (key) => key,
|
||||||
|
...sources
|
||||||
|
})
|
||||||
|
} as unknown as Soma;
|
||||||
|
|
||||||
|
vi.spyOn(Soma, 'require').mockReturnValue(soma);
|
||||||
|
vi.spyOn(FieldProvider, 'get').mockReturnValue(undefined);
|
||||||
|
|
||||||
|
return { dom };
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleOpts(id = 'toggle-root') {
|
||||||
|
return {
|
||||||
|
id: state(id),
|
||||||
|
ref: state<HTMLElement | null>(document.createElement('button')),
|
||||||
|
pressed: state(false),
|
||||||
|
disabled: state(false),
|
||||||
|
readonly: state(false),
|
||||||
|
required: state(false),
|
||||||
|
invalid: state(false),
|
||||||
|
intent: state<'neutral' | 'affirm' | 'risk' | 'threat'>('neutral'),
|
||||||
|
color: state<'primary' | 'secondary'>('primary'),
|
||||||
|
name: state(''),
|
||||||
|
value: state('on'),
|
||||||
|
'aria-label': state(''),
|
||||||
|
onPressedChange: state<(pressed: boolean) => void>(() => undefined)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('ToggleProvider', () => {
|
||||||
|
afterEach(() => {
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
document.body.innerHTML = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
it('toggles pressed state through the runtime event', async () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const opts = toggleOpts();
|
||||||
|
const onPressedChange = vi.fn();
|
||||||
|
opts.onPressedChange.current = onPressedChange;
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => ToggleProvider.create(opts));
|
||||||
|
|
||||||
|
expect(provider.props).toMatchObject({
|
||||||
|
id: 'toggle-root',
|
||||||
|
'data-toggle': '',
|
||||||
|
'data-archetype': 'trigger',
|
||||||
|
disabled: undefined
|
||||||
|
});
|
||||||
|
expect(provider.snippetProps).toEqual({ pressed: false });
|
||||||
|
|
||||||
|
provider.onclick({} as never);
|
||||||
|
await flushRuntimeTrigger();
|
||||||
|
expect(opts.pressed.current).toBe(true);
|
||||||
|
expect(onPressedChange).toHaveBeenCalledWith(true);
|
||||||
|
expect(provider.snippetProps).toEqual({ pressed: true });
|
||||||
|
|
||||||
|
provider.onclick({} as never);
|
||||||
|
await flushRuntimeTrigger();
|
||||||
|
expect(opts.pressed.current).toBe(false);
|
||||||
|
expect(onPressedChange).toHaveBeenLastCalledWith(false);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('syncs morfo attrs through ActiveDom', async () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const el = document.createElement('button');
|
||||||
|
const opts = toggleOpts();
|
||||||
|
opts.ref.current = el;
|
||||||
|
opts['aria-label'].current = 'Pin';
|
||||||
|
|
||||||
|
const { cleanup } = withEffectRoot(() => ToggleProvider.create(opts));
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
expect(el.getAttribute('data-state')).toBe('off');
|
||||||
|
expect(el.getAttribute('data-color')).toBe('primary');
|
||||||
|
expect(el.getAttribute('aria-pressed')).toBe('false');
|
||||||
|
expect(el.getAttribute('aria-label')).toBe('Pin');
|
||||||
|
|
||||||
|
opts.intent.current = 'threat';
|
||||||
|
opts.pressed.current = true;
|
||||||
|
await tick();
|
||||||
|
expect(el.getAttribute('data-state')).toBe('on');
|
||||||
|
expect(el.getAttribute('data-color')).toBe('threat');
|
||||||
|
expect(el.getAttribute('aria-pressed')).toBe('true');
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('merges FieldProvider flags and registers itself as field input', async () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const field = {
|
||||||
|
inputId: state(''),
|
||||||
|
isDisabled: true,
|
||||||
|
isReadonly: false,
|
||||||
|
isRequired: true,
|
||||||
|
isInvalid: true
|
||||||
|
};
|
||||||
|
vi.spyOn(FieldProvider, 'get').mockReturnValue(field as FieldProvider);
|
||||||
|
const opts = toggleOpts('field-toggle');
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => ToggleProvider.create(opts));
|
||||||
|
|
||||||
|
expect(field.inputId.current).toBe('field-toggle');
|
||||||
|
expect(provider.isDisabled).toBe(true);
|
||||||
|
expect(provider.isRequired).toBe(true);
|
||||||
|
expect(provider.isInvalid).toBe(true);
|
||||||
|
expect(provider.props.disabled).toBe(true);
|
||||||
|
|
||||||
|
provider.onclick({} as never);
|
||||||
|
await flushRuntimeTrigger();
|
||||||
|
expect(opts.pressed.current).toBe(false);
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('blocks readonly toggles while keeping the button enabled', async () => {
|
||||||
|
const { dom } = installSomaHarness();
|
||||||
|
const opts = toggleOpts();
|
||||||
|
opts.readonly.current = true;
|
||||||
|
|
||||||
|
const { result: provider, cleanup } = withEffectRoot(() => ToggleProvider.create(opts));
|
||||||
|
|
||||||
|
provider.onclick({} as never);
|
||||||
|
await flushRuntimeTrigger();
|
||||||
|
expect(opts.pressed.current).toBe(false);
|
||||||
|
expect(provider.props.disabled).toBeUndefined();
|
||||||
|
|
||||||
|
cleanup();
|
||||||
|
dom.dispose();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in new issue