@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
69 lines • 3.14 kB
JavaScript
import { createInjector } from '@furystack/inject';
import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
import { usingAsync } from '@furystack/utils';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { FilterDropdown } from './filter-dropdown.js';
describe('FilterDropdown', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
afterEach(() => {
document.body.innerHTML = '';
});
it('should render children inside panel', async () => {
const onClose = vi.fn();
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(FilterDropdown, { onClose: onClose },
createComponent("span", { className: "test-child" }, "Hello"))),
});
await flushUpdates();
const dropdown = document.querySelector('data-grid-filter-dropdown');
expect(dropdown).not.toBeNull();
const panel = dropdown?.querySelector('.filter-dropdown-panel');
expect(panel).not.toBeNull();
const child = panel?.querySelector('.test-child');
expect(child).not.toBeNull();
expect(child?.textContent).toBe('Hello');
});
});
it('should add visible class after animation frame', async () => {
const onClose = vi.fn();
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(FilterDropdown, { onClose: onClose },
createComponent("span", null, "Content"))),
});
await flushUpdates();
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
const panel = document.querySelector('.filter-dropdown-panel');
expect(panel?.classList.contains('visible')).toBe(true);
});
});
it('should stop click propagation on panel', async () => {
const onClose = vi.fn();
const outerClick = vi.fn();
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent("div", { onclick: outerClick },
createComponent(FilterDropdown, { onClose: onClose },
createComponent("span", { className: "inner" }, "Content")))),
});
await flushUpdates();
const panel = document.querySelector('.filter-dropdown-panel');
panel?.click();
await flushUpdates();
expect(outerClick).not.toHaveBeenCalled();
});
});
});
//# sourceMappingURL=filter-dropdown.spec.js.map