parent
8c2cb82059
commit
407eb2f455
@ -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…
Reference in new issue