Add collapsible provider coverage

active-uix
dev 5 months ago
parent 8c2cb82059
commit 407eb2f455

@ -93,9 +93,11 @@ Actualizacion 2026-05-15:
snapping/clamping, drag pointer confirmado y teclado de thumb.
- Cobertura nueva para Progress y Meter: `data-value/data-min/data-max`
emitidos por morfo/runtime, estados derivados e indicador sincronizado.
- Cobertura nueva para Collapsible: refs cruzadas trigger/content, eventos
`expand/collapse` y guardas disabled.
- Validado por fase:
- `npm run check` -> 0 errores, 0 warnings.
- `npm run test` -> 207 archivos, 2170 tests OK.
- `npm run test` -> 208 archivos, 2173 tests OK.
- tests focales de Select/Popover/Toast/RangeCalendar -> 11 tests OK.
- tests focales Dialog/Drawer/Popover/Select -> 10 tests OK.
- `command-provider.svelte.test.ts` -> 2 tests OK.
@ -131,6 +133,7 @@ Actualizacion 2026-05-15:
- `slider-provider.svelte.test.ts` -> 4 tests OK.
- `progress-provider.svelte.test.ts` + `meter-provider.svelte.test.ts`
-> 4 tests OK.
- `collapsible-provider.svelte.test.ts` -> 3 tests OK.
- guardia `rg "from './.*provider\\.svelte'" src/uix/soma/components -g 'exports.ts'`
-> solo queda `select/components/select-provider.svelte`, que es wrapper
publico, no runtime provider.

@ -525,6 +525,8 @@ Los tests por componente estan creciendo desde las piezas de mayor riesgo. A
- `progress/progress-provider.svelte.test.ts` y
`meter/meter-provider.svelte.test.ts` — `data-value/data-min/data-max`
emitidos por morfo/runtime, estados derivados e indicador sincronizado.
- `collapsible/collapsible-provider.svelte.test.ts` — refs cruzadas
trigger/content, eventos `expand/collapse` y guardas disabled.
Pendiente: seguir ampliando cobertura por el resto del catalogo Soma, ya por
componentes de riesgo medio y familias menos centrales. `table-core`,

@ -0,0 +1,195 @@
// @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 {
CollapsibleContentProvider,
CollapsibleProvider,
CollapsibleTriggerProvider
} from './collapsible-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(CollapsibleProvider.ctx, 'set').mockImplementation((value) => value);
return { dom };
}
function collapsibleOpts(root = document.createElement('div')) {
return {
id: state('collapsible-root'),
ref: state<HTMLElement | null>(root),
open: state(false),
disabled: state(false)
};
}
function createParts() {
const root = document.createElement('div');
const triggerEl = document.createElement('button');
const contentEl = document.createElement('div');
document.body.append(root, triggerEl, contentEl);
return { root, triggerEl, contentEl };
}
describe('CollapsibleProvider', () => {
afterEach(() => {
vi.restoreAllMocks();
document.body.innerHTML = '';
});
it('links trigger and content ids through runtime part refs', async () => {
const { dom } = installSomaHarness();
const { root, triggerEl, contentEl } = createParts();
const opts = collapsibleOpts(root);
const { result, cleanup } = withEffectRoot(() => {
const provider = CollapsibleProvider.create(opts);
vi.spyOn(CollapsibleProvider, 'require').mockReturnValue(provider);
const trigger = CollapsibleTriggerProvider.create({
id: state('collapsible-trigger'),
ref: state<HTMLElement | null>(triggerEl)
});
const content = CollapsibleContentProvider.create({
id: state('collapsible-content'),
ref: state<HTMLElement | null>(contentEl)
});
return { provider, trigger, content };
});
expect(result.provider.props).toMatchObject({
id: 'collapsible-root',
'data-collapsible': ''
});
expect(result.trigger.props).toMatchObject({
id: 'collapsible-trigger',
'data-collapsible-trigger': '',
disabled: undefined
});
expect(result.content.props).toMatchObject({
id: 'collapsible-content',
'data-collapsible-content': '',
hidden: true
});
expect(result.provider.triggerId.current).toBe('collapsible-trigger');
expect(result.provider.contentId.current).toBe('collapsible-content');
await tick();
expect(root.getAttribute('data-state')).toBe('closed');
expect(triggerEl.getAttribute('role')).toBe('button');
expect(triggerEl.getAttribute('type')).toBe('button');
expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
expect(triggerEl.getAttribute('aria-controls')).toBe('collapsible-content');
expect(contentEl.getAttribute('role')).toBe('region');
expect(contentEl.getAttribute('aria-labelledby')).toBe('collapsible-trigger');
expect(contentEl.getAttribute('data-state')).toBe('closed');
cleanup();
dom.dispose();
});
it('toggles open and closed through distinct expand/collapse events', async () => {
const { dom } = installSomaHarness();
const { root, triggerEl, contentEl } = createParts();
const opts = collapsibleOpts(root);
const { result, cleanup } = withEffectRoot(() => {
const provider = CollapsibleProvider.create(opts);
vi.spyOn(CollapsibleProvider, 'require').mockReturnValue(provider);
const trigger = CollapsibleTriggerProvider.create({
id: state('collapsible-trigger'),
ref: state<HTMLElement | null>(triggerEl)
});
const content = CollapsibleContentProvider.create({
id: state('collapsible-content'),
ref: state<HTMLElement | null>(contentEl)
});
return { provider, trigger, content };
});
result.trigger.onclick({ currentTarget: triggerEl } as never);
await flushRuntimeTrigger();
expect(opts.open.current).toBe(true);
expect(result.content.props.hidden).toBeUndefined();
expect(root.getAttribute('data-state')).toBe('open');
expect(triggerEl.getAttribute('aria-expanded')).toBe('true');
expect(contentEl.getAttribute('data-state')).toBe('open');
result.provider.toggle();
await flushRuntimeTrigger();
expect(opts.open.current).toBe(false);
expect(result.content.props.hidden).toBe(true);
expect(root.getAttribute('data-state')).toBe('closed');
expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
expect(contentEl.getAttribute('data-state')).toBe('closed');
cleanup();
dom.dispose();
});
it('blocks toggles while disabled and projects disabled attrs', async () => {
const { dom } = installSomaHarness();
const { root, triggerEl, contentEl } = createParts();
const opts = collapsibleOpts(root);
opts.disabled.current = true;
const { result, cleanup } = withEffectRoot(() => {
const provider = CollapsibleProvider.create(opts);
vi.spyOn(CollapsibleProvider, 'require').mockReturnValue(provider);
const trigger = CollapsibleTriggerProvider.create({
id: state('collapsible-trigger'),
ref: state<HTMLElement | null>(triggerEl)
});
const content = CollapsibleContentProvider.create({
id: state('collapsible-content'),
ref: state<HTMLElement | null>(contentEl)
});
return { provider, trigger, content };
});
await tick();
expect(result.trigger.props.disabled).toBe(true);
expect(root.getAttribute('data-disabled')).toBe('');
expect(triggerEl.getAttribute('data-disabled')).toBe('');
expect(contentEl.getAttribute('data-disabled')).toBe('');
result.provider.toggle();
await flushRuntimeTrigger();
expect(opts.open.current).toBe(false);
expect(result.content.props.hidden).toBe(true);
cleanup();
dom.dispose();
});
});
Loading…
Cancel
Save

Powered by TurnKey Linux.