parent
d2a0998dc8
commit
c0221e0365
@ -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…
Reference in new issue