Add announce provider coverage

active-uix
dev 5 months ago
parent d2a0998dc8
commit c0221e0365

@ -121,9 +121,11 @@ Actualizacion 2026-05-15:
half hover/click, clearable y teclado LTR/RTL. half hover/click, clearable y teclado LTR/RTL.
- Cobertura nueva para TagGroup: labels/root grid, roving por DOM - Cobertura nueva para TagGroup: labels/root grid, roving por DOM
renderizado, selección/removal, link y remove button. renderizado, selección/removal, link y remove button.
- Cobertura nueva para Announce: alternancia polite/assertive, timers UIX,
regiones ARIA declarativas y uso standalone.
- Validado por fase: - Validado por fase:
- `npm run check` -> 0 errores, 0 warnings. - `npm run check` -> 0 errores, 0 warnings.
- `npm run test` -> 221 archivos, 2212 tests OK. - `npm run test` -> 222 archivos, 2215 tests OK.
- tests focales de Select/Popover/Toast/RangeCalendar -> 11 tests OK. - tests focales de Select/Popover/Toast/RangeCalendar -> 11 tests OK.
- tests focales Dialog/Drawer/Popover/Select -> 10 tests OK. - tests focales Dialog/Drawer/Popover/Select -> 10 tests OK.
- `command-provider.svelte.test.ts` -> 2 tests OK. - `command-provider.svelte.test.ts` -> 2 tests OK.
@ -173,6 +175,7 @@ Actualizacion 2026-05-15:
- `pin-input-provider.svelte.test.ts` -> 3 tests OK. - `pin-input-provider.svelte.test.ts` -> 3 tests OK.
- `rating-group-provider.svelte.test.ts` -> 3 tests OK. - `rating-group-provider.svelte.test.ts` -> 3 tests OK.
- `tag-group-provider.svelte.test.ts` -> 3 tests OK. - `tag-group-provider.svelte.test.ts` -> 3 tests OK.
- `announce-provider.svelte.test.ts` -> 3 tests OK.
- guardia `rg "from './.*provider\\.svelte'" src/uix/soma/components -g 'exports.ts'` - guardia `rg "from './.*provider\\.svelte'" src/uix/soma/components -g 'exports.ts'`
-> solo queda `select/components/select-provider.svelte`, que es wrapper -> solo queda `select/components/select-provider.svelte`, que es wrapper
publico, no runtime provider. publico, no runtime provider.

@ -553,6 +553,8 @@ Los tests por componente estan creciendo desde las piezas de mayor riesgo. A
merge con Field, half hover/click, clearable y teclado LTR/RTL. merge con Field, half hover/click, clearable y teclado LTR/RTL.
- `tag-group/tag-group-provider.svelte.test.ts` — labels/root grid, roving - `tag-group/tag-group-provider.svelte.test.ts` — labels/root grid, roving
por DOM renderizado, selección/removal, link y remove button. por DOM renderizado, selección/removal, link y remove button.
- `announce/announce-provider.svelte.test.ts` — alternancia polite/assertive,
timers UIX, regiones ARIA declarativas y uso standalone.
Pendiente: seguir ampliando cobertura por el resto del catalogo Soma, ya por Pendiente: seguir ampliando cobertura por el resto del catalogo Soma, ya por
componentes de riesgo medio y familias menos centrales. `table-core`, componentes de riesgo medio y familias menos centrales. `table-core`,

@ -0,0 +1,202 @@
// @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 { AnnounceProvider, AnnounceRegionProvider } from './announce-provider.svelte';
function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
let result!: T;
const cleanup = $effect.root(() => {
result = fn();
});
return { result, cleanup };
}
function installSomaHarness() {
const dom = createActiveDom();
const tasks = new Map<string, () => void>();
const handles = new Map<
string,
{ cancel: ReturnType<typeof vi.fn>; reschedule: ReturnType<typeof vi.fn> }
>();
const schedule = vi.fn((key: string, _delay: number, task: () => void) => {
tasks.set(key, task);
const handle = {
cancel: vi.fn(() => tasks.delete(key)),
reschedule: vi.fn()
};
handles.set(key, handle);
return handle;
});
const soma = {
dom,
langs: {
ts: vi.fn(() => 'Announcements')
},
uix: {
timers: { schedule }
},
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(AnnounceProvider.ctx, 'set').mockImplementation((value) => value);
vi.spyOn(AnnounceProvider, 'get').mockReturnValue(undefined);
return { dom, schedule, tasks, handles };
}
function announceOpts(root = document.createElement('div')) {
return {
id: state('announce-root'),
ref: state<HTMLElement | null>(root),
defaultTimeout: state(1000)
};
}
describe('AnnounceProvider', () => {
afterEach(() => {
vi.restoreAllMocks();
document.body.innerHTML = '';
});
it('alternates polite/assertive regions and clears them through UIX timers', () => {
const harness = installSomaHarness();
const root = document.createElement('div');
document.body.appendChild(root);
const opts = announceOpts(root);
const { result: provider, cleanup } = withEffectRoot(() => AnnounceProvider.create(opts));
expect(provider.politeLabel).toBe('Announcements');
expect(provider.snippetProps.announce).toBe(provider.announce);
expect(provider.snippetProps.clear).toBe(provider.clear);
provider.announce('Saved');
expect(provider.politeA).toBe('Saved');
expect(provider.politeB).toBe('');
expect(harness.schedule).toHaveBeenCalledWith(
'soma:announce:announce-root:polite',
1000,
expect.any(Function),
expect.objectContaining({
replace: true,
meta: { component: 'announce', action: 'clear-polite' }
})
);
const firstPoliteHandle = harness.handles.get('soma:announce:announce-root:polite');
provider.announce('Saved');
expect(provider.politeA).toBe('');
expect(provider.politeB).toBe('Saved');
expect(firstPoliteHandle?.cancel).toHaveBeenCalledOnce();
harness.tasks.get('soma:announce:announce-root:polite')?.();
expect(provider.politeA).toBe('');
expect(provider.politeB).toBe('');
provider.announce('Error', 'assertive', 50);
expect(provider.assertiveA).toBe('Error');
expect(provider.assertiveB).toBe('');
expect(harness.schedule).toHaveBeenCalledWith(
'soma:announce:announce-root:assertive',
50,
expect.any(Function),
expect.objectContaining({
replace: true,
meta: { component: 'announce', action: 'clear-assertive' }
})
);
provider.clear();
expect(provider.assertiveA).toBe('');
expect(provider.assertiveB).toBe('');
cleanup();
harness.dom.dispose();
});
it('projects declarative live region attrs and hidden style', async () => {
const { dom } = installSomaHarness();
const root = document.createElement('div');
const regionEl = document.createElement('div');
document.body.append(root, regionEl);
const opts = announceOpts(root);
const { result, cleanup } = withEffectRoot(() => {
const provider = AnnounceProvider.create(opts);
vi.mocked(AnnounceProvider.get).mockReturnValue(provider);
const region = AnnounceRegionProvider.create({
id: state('announce-alert'),
ref: state<HTMLElement | null>(regionEl),
role: state<'alert'>('alert'),
ariaLive: state<undefined>(undefined),
ariaAtomic: state(true),
ariaRelevant: state('additions text'),
visuallyHidden: state(true)
});
return { provider, region };
});
expect(result.region.provider).toBe(result.provider);
expect(result.region.resolvedLive).toBe('assertive');
expect(result.region.props.style).toMatchObject({
position: 'absolute',
width: '1px',
overflow: 'hidden'
});
await tick();
expect(regionEl.getAttribute('role')).toBe('alert');
expect(regionEl.getAttribute('aria-live')).toBe('assertive');
expect(regionEl.getAttribute('aria-atomic')).toBe('true');
expect(regionEl.getAttribute('aria-relevant')).toBe('additions text');
expect(regionEl.getAttribute('data-role')).toBe('alert');
expect(regionEl.getAttribute('data-live')).toBe('assertive');
cleanup();
dom.dispose();
});
it('allows standalone regions without an Announce provider', async () => {
const { dom } = installSomaHarness();
const regionEl = document.createElement('div');
document.body.appendChild(regionEl);
const { result: region, cleanup } = withEffectRoot(() =>
AnnounceRegionProvider.create({
id: state('announce-status'),
ref: state<HTMLElement | null>(regionEl),
role: state<'status'>('status'),
ariaLive: state<'assertive' | undefined>('assertive'),
ariaAtomic: state(false),
ariaRelevant: state('all'),
visuallyHidden: state(false)
})
);
expect(region.provider).toBeUndefined();
expect(region.resolvedLive).toBe('assertive');
expect(region.props.style).toBeUndefined();
await tick();
expect(regionEl.getAttribute('role')).toBe('status');
expect(regionEl.getAttribute('aria-live')).toBe('assertive');
expect(regionEl.getAttribute('aria-atomic')).toBe('false');
expect(regionEl.getAttribute('aria-relevant')).toBe('all');
cleanup();
dom.dispose();
});
});
Loading…
Cancel
Save

Powered by TurnKey Linux.