parent
fe61f5be9b
commit
9f60aa62a2
@ -0,0 +1,317 @@
|
||||
// @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 {
|
||||
CarouselIndicatorGroupProvider,
|
||||
CarouselIndicatorProvider,
|
||||
CarouselItemGroupProvider,
|
||||
CarouselItemProvider,
|
||||
CarouselNextTriggerProvider,
|
||||
CarouselPrevTriggerProvider,
|
||||
CarouselProvider,
|
||||
CarouselViewportProvider
|
||||
} from './carousel-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, ReturnType<typeof makeTimerHandle>>();
|
||||
const interval = vi.fn((key: string, _delay: number, task: () => void) => {
|
||||
tasks.set(key, task);
|
||||
const handle = makeTimerHandle(() => tasks.delete(key));
|
||||
handles.set(key, handle);
|
||||
return handle;
|
||||
});
|
||||
const soma = {
|
||||
dom,
|
||||
langs: {
|
||||
ts: vi.fn((key: string) => {
|
||||
if (key.includes('prev')) return 'Previous slide';
|
||||
if (key.includes('next')) return 'Next slide';
|
||||
return 'Carousel';
|
||||
})
|
||||
},
|
||||
uix: {
|
||||
timers: { interval }
|
||||
},
|
||||
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(CarouselProvider.ctx, 'set').mockImplementation((value) => value);
|
||||
|
||||
return { dom, interval, tasks, handles };
|
||||
}
|
||||
|
||||
function makeTimerHandle(onCancel: () => void) {
|
||||
return {
|
||||
cancel: vi.fn(onCancel),
|
||||
reschedule: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
function carouselOpts(root = document.createElement('section')) {
|
||||
return {
|
||||
id: state('carousel-root'),
|
||||
ref: state<HTMLElement | null>(root),
|
||||
value: state(0),
|
||||
orientation: state<'horizontal' | 'vertical'>('horizontal'),
|
||||
loop: state(false),
|
||||
dragEnabled: state(true),
|
||||
dragThreshold: state(0.25),
|
||||
autoplay: state(false),
|
||||
autoplayDelay: state(100),
|
||||
pauseOnHover: state(true),
|
||||
disabled: state(false),
|
||||
ariaLabel: state<string | undefined>(undefined),
|
||||
onValueChange: state<((value: number) => void) | undefined>(undefined)
|
||||
};
|
||||
}
|
||||
|
||||
function keyEvent(key: string) {
|
||||
return {
|
||||
key,
|
||||
preventDefault: vi.fn()
|
||||
};
|
||||
}
|
||||
|
||||
function markItems(group: HTMLElement, count: number) {
|
||||
for (let index = 0; index < count; index++) {
|
||||
const item = document.createElement('div');
|
||||
item.setAttribute('data-carousel-item', '');
|
||||
group.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
describe('CarouselProvider', () => {
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('detects slides, navigates by trigger/keyboard and honors loop/disabled guards', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('section');
|
||||
const groupEl = document.createElement('div');
|
||||
markItems(groupEl, 3);
|
||||
root.appendChild(groupEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = carouselOpts(root);
|
||||
const onValueChange = vi.fn();
|
||||
opts.onValueChange.current = onValueChange;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = CarouselProvider.create(opts);
|
||||
vi.spyOn(CarouselProvider, 'require').mockReturnValue(provider);
|
||||
provider.itemGroupRef = groupEl;
|
||||
const prev = CarouselPrevTriggerProvider.create({
|
||||
id: state('carousel-prev'),
|
||||
ref: state<HTMLButtonElement | null>(document.createElement('button')),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
const next = CarouselNextTriggerProvider.create({
|
||||
id: state('carousel-next'),
|
||||
ref: state<HTMLButtonElement | null>(document.createElement('button')),
|
||||
ariaLabel: state<string | undefined>('Forward')
|
||||
});
|
||||
return { provider, prev, next };
|
||||
});
|
||||
|
||||
expect(result.provider.slideCount).toBe(3);
|
||||
expect(result.provider.snippetProps).toMatchObject({
|
||||
index: 0,
|
||||
slideCount: 3,
|
||||
canGoPrev: false,
|
||||
canGoNext: true
|
||||
});
|
||||
expect(result.prev.isDisabled).toBe(true);
|
||||
expect(result.next.props).toMatchObject({
|
||||
type: 'button',
|
||||
'aria-label': 'Forward',
|
||||
disabled: undefined
|
||||
});
|
||||
|
||||
result.next.onclick({ currentTarget: document.createElement('button') } as never);
|
||||
expect(opts.value.current).toBe(1);
|
||||
expect(onValueChange).toHaveBeenLastCalledWith(1);
|
||||
|
||||
const end = keyEvent('End');
|
||||
result.provider.onkeydown(end as never);
|
||||
expect(end.preventDefault).toHaveBeenCalledOnce();
|
||||
expect(opts.value.current).toBe(2);
|
||||
|
||||
result.next.onclick({ currentTarget: document.createElement('button') } as never);
|
||||
expect(opts.value.current).toBe(2);
|
||||
|
||||
opts.loop.current = true;
|
||||
result.next.onclick({ currentTarget: document.createElement('button') } as never);
|
||||
expect(opts.value.current).toBe(0);
|
||||
|
||||
opts.disabled.current = true;
|
||||
const right = keyEvent('ArrowRight');
|
||||
result.provider.onkeydown(right as never);
|
||||
expect(right.preventDefault).not.toHaveBeenCalled();
|
||||
expect(opts.value.current).toBe(0);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('exposes viewport, item group, item and indicator props', () => {
|
||||
const { dom } = installSomaHarness();
|
||||
const root = document.createElement('section');
|
||||
const viewportEl = document.createElement('div');
|
||||
const groupEl = document.createElement('div');
|
||||
const itemEl = document.createElement('div');
|
||||
const indicatorGroupEl = document.createElement('div');
|
||||
const indicatorEl = document.createElement('button');
|
||||
Object.defineProperty(viewportEl, 'clientWidth', { value: 200, configurable: true });
|
||||
markItems(groupEl, 3);
|
||||
root.append(viewportEl, groupEl, itemEl, indicatorGroupEl, indicatorEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = carouselOpts(root);
|
||||
opts.value.current = 1;
|
||||
|
||||
const { result, cleanup } = withEffectRoot(() => {
|
||||
const provider = CarouselProvider.create(opts);
|
||||
vi.spyOn(CarouselProvider, 'require').mockReturnValue(provider);
|
||||
provider.viewportRef = viewportEl;
|
||||
provider.itemGroupRef = groupEl;
|
||||
const viewport = CarouselViewportProvider.create({
|
||||
id: state('carousel-viewport'),
|
||||
ref: state<HTMLElement | null>(viewportEl)
|
||||
});
|
||||
const group = CarouselItemGroupProvider.create({
|
||||
id: state('carousel-group'),
|
||||
ref: state<HTMLElement | null>(groupEl)
|
||||
});
|
||||
const item = CarouselItemProvider.create({
|
||||
id: state('carousel-item-1'),
|
||||
ref: state<HTMLElement | null>(itemEl),
|
||||
index: state(1)
|
||||
});
|
||||
const indicatorGroup = CarouselIndicatorGroupProvider.create({
|
||||
id: state('carousel-indicators'),
|
||||
ref: state<HTMLElement | null>(indicatorGroupEl)
|
||||
});
|
||||
const indicator = CarouselIndicatorProvider.create({
|
||||
id: state('carousel-indicator-2'),
|
||||
ref: state<HTMLButtonElement | null>(indicatorEl),
|
||||
index: state(2),
|
||||
ariaLabel: state<string | undefined>(undefined)
|
||||
});
|
||||
return { provider, viewport, group, item, indicatorGroup, indicator };
|
||||
});
|
||||
|
||||
expect(result.provider.props).toMatchObject({
|
||||
role: 'region',
|
||||
'aria-roledescription': 'carousel',
|
||||
'aria-label': 'Carousel',
|
||||
tabindex: 0,
|
||||
'data-orientation': 'horizontal'
|
||||
});
|
||||
expect(result.viewport.props).toMatchObject({
|
||||
id: 'carousel-viewport',
|
||||
'data-orientation': 'horizontal',
|
||||
style: { overflow: 'hidden' }
|
||||
});
|
||||
expect(result.group.props.style).toMatchObject({
|
||||
display: 'flex',
|
||||
'flex-direction': 'row',
|
||||
transform: 'translate3d(-200px, 0, 0)',
|
||||
'touch-action': 'pan-y'
|
||||
});
|
||||
expect(result.item.props).toMatchObject({
|
||||
role: 'group',
|
||||
'aria-roledescription': 'slide',
|
||||
'aria-label': 'Slide 2 of 3',
|
||||
'data-state': 'active',
|
||||
'data-index': 1
|
||||
});
|
||||
expect(result.indicatorGroup.props).toMatchObject({
|
||||
role: 'tablist',
|
||||
'aria-orientation': 'horizontal'
|
||||
});
|
||||
expect(result.indicator.props).toMatchObject({
|
||||
type: 'button',
|
||||
role: 'tab',
|
||||
'aria-selected': false,
|
||||
'aria-label': 'Go to slide 3',
|
||||
tabindex: -1,
|
||||
'data-state': 'inactive'
|
||||
});
|
||||
|
||||
result.indicator.onclick({ currentTarget: indicatorEl } as never);
|
||||
expect(opts.value.current).toBe(2);
|
||||
expect(result.indicator.props['aria-selected']).toBe(true);
|
||||
|
||||
cleanup();
|
||||
dom.dispose();
|
||||
});
|
||||
|
||||
it('runs autoplay through UIX timers and pauses visual state on hover/focus', async () => {
|
||||
const harness = installSomaHarness();
|
||||
const root = document.createElement('section');
|
||||
const groupEl = document.createElement('div');
|
||||
markItems(groupEl, 3);
|
||||
root.appendChild(groupEl);
|
||||
document.body.appendChild(root);
|
||||
const opts = carouselOpts(root);
|
||||
opts.autoplay.current = true;
|
||||
opts.autoplayDelay.current = 75;
|
||||
|
||||
const { result: provider, cleanup } = withEffectRoot(() => {
|
||||
const instance = CarouselProvider.create(opts);
|
||||
instance.itemGroupRef = groupEl;
|
||||
return instance;
|
||||
});
|
||||
|
||||
await tick();
|
||||
expect(harness.interval).toHaveBeenCalledWith(
|
||||
'soma:carousel:carousel-root:autoplay',
|
||||
75,
|
||||
expect.any(Function),
|
||||
expect.objectContaining({
|
||||
replace: true,
|
||||
meta: { component: 'carousel', action: 'autoplay' }
|
||||
})
|
||||
);
|
||||
harness.tasks.get('soma:carousel:carousel-root:autoplay')?.();
|
||||
expect(opts.value.current).toBe(1);
|
||||
|
||||
expect(provider.props['data-autoplay']).toBe('');
|
||||
provider.onpointerenter();
|
||||
expect(provider.paused).toBe(true);
|
||||
expect(provider.props['data-autoplay']).toBeUndefined();
|
||||
provider.onpointerleave();
|
||||
provider.onfocusin();
|
||||
expect(provider.paused).toBe(true);
|
||||
provider.onfocusout({ relatedTarget: null } as unknown as FocusEvent);
|
||||
expect(provider.paused).toBe(false);
|
||||
|
||||
cleanup();
|
||||
expect(harness.handles.get('soma:carousel:carousel-root:autoplay')?.cancel).toHaveBeenCalled();
|
||||
harness.dom.dispose();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue