@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
144 lines • 6.08 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 { SuggestInput } from './suggest-input.js';
import { SuggestManager } from './suggest-manager.js';
const createSuggestionResult = (entry) => ({
element: createComponent("div", null, entry.name),
score: entry.id,
});
describe('SuggestInput', () => {
let originalAnimate;
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
originalAnimate = Element.prototype.animate;
Element.prototype.animate = vi.fn(() => {
const mockAnimation = {
onfinish: null,
oncancel: null,
cancel: vi.fn(),
play: vi.fn(),
pause: vi.fn(),
finish: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
};
return mockAnimation;
});
});
afterEach(() => {
document.body.innerHTML = '';
Element.prototype.animate = originalAnimate;
vi.restoreAllMocks();
});
const createManager = () => {
const getEntries = vi.fn().mockResolvedValue([]);
const getSuggestionEntry = vi.fn().mockImplementation(createSuggestionResult);
return new SuggestManager(getEntries, getSuggestionEntry);
};
it('should render as custom element', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const suggestInput = document.querySelector('shades-suggest-input');
expect(suggestInput).not.toBeNull();
manager[Symbol.dispose]();
});
});
it('should render the inner input element', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const input = document.querySelector('shades-suggest-input input');
expect(input).not.toBeNull();
expect(input.placeholder).toBe('Type to search...');
expect(input.autofocus).toBe(true);
manager[Symbol.dispose]();
});
});
it('should focus input when isOpened becomes true', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const input = document.querySelector('shades-suggest-input input');
const focusSpy = vi.spyOn(input, 'focus');
manager.isOpened.setValue(true);
await flushUpdates();
expect(focusSpy).toHaveBeenCalled();
manager[Symbol.dispose]();
});
});
it('should clear input value when isOpened becomes false', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const input = document.querySelector('shades-suggest-input input');
input.value = 'test query';
manager.isOpened.setValue(true);
await flushUpdates();
manager.isOpened.setValue(false);
await flushUpdates();
expect(input.value).toBe('');
manager[Symbol.dispose]();
});
});
it('should not clear input when first mounted with isOpened false', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const input = document.querySelector('shades-suggest-input input');
input.value = 'initial value';
expect(input.value).toBe('initial value');
manager[Symbol.dispose]();
});
});
it('should have correct CSS styling applied', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const manager = createManager();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(SuggestInput, { manager: manager }),
});
await flushUpdates();
const suggestInput = document.querySelector('shades-suggest-input');
expect(suggestInput).not.toBeNull();
const input = suggestInput.querySelector('input');
expect(input).not.toBeNull();
manager[Symbol.dispose]();
});
});
});
//# sourceMappingURL=suggest-input.spec.js.map