@furystack/shades
Version:
Google Authentication Provider for FuryStack
80 lines • 4 kB
JavaScript
import { Injector } from '@furystack/inject';
import { describe, expect, it, vi } from 'vitest';
import './jsx';
import { createComponent } from './shade-component.js';
import { Shade } from './shade.js';
describe('Shades Component Factory', () => {
describe('HTML Elements', () => {
it('Should create a simple component', () => {
const component = createComponent("div", null, "test");
expect(component).toBeInstanceOf(HTMLDivElement);
expect(component.innerHTML).toBe('test');
expect(component.outerHTML).toBe('<div>test</div>');
});
it('Should apply styles', () => {
const component = createComponent("div", { style: { color: 'red' } }, "a");
expect(component).toBeInstanceOf(HTMLDivElement);
expect(component.style.color).toBe('red');
});
it('Should apply data attributes', () => {
const component = createComponent("div", { "data-testid": "asd-123" }, "a");
expect(component).toBeInstanceOf(HTMLDivElement);
expect(component.getAttribute('data-testid')).toBe('asd-123');
});
it('Should create a nested component', () => {
const component = (createComponent("div", { style: { display: 'flex' } },
createComponent("h1", null, "Hi, I'm a header"),
createComponent("p", null,
"paragraph... ",
['a', 'b', 'c']),
createComponent("a", { target: "_blank", href: "https://google.com" }, "link")));
expect(component).toBeInstanceOf(HTMLDivElement);
expect(component.childElementCount).toBe(3);
expect(component.innerHTML).toBe(`<h1>Hi, I'm a header</h1><p>paragraph... abc</p><a target="_blank" href="https://google.com">link</a>`);
});
it('Should attach listeners', () => {
const onclick = vi.fn();
const component = createComponent("div", { onclick: onclick });
expect(component.onclick).toBe(onclick);
});
});
describe('Shade components', () => {
it('Should render a basic component', () => {
const Example = Shade({ shadowDomName: 'example-basic', render: () => createComponent("div", null) });
const component = (createComponent("div", null,
createComponent(Example, null)));
const shade = component.firstElementChild;
expect(shade.props).toEqual({});
expect(shade.shadeChildren).toEqual([]);
});
it('Should render a component with props', () => {
const Example = Shade({
shadowDomName: 'example-with-props',
render: ({ props }) => createComponent("div", null, props.foo),
});
const component = (createComponent("div", null,
createComponent(Example, { foo: "example", injector: new Injector() })));
const shade = component.firstElementChild;
shade.callConstructed();
expect(shade.props.foo).toEqual('example');
expect(shade.shadeChildren).toEqual([]);
expect(shade.innerHTML).toBe('<div>example</div>');
});
it('Should render a component with state', () => {
const Example = Shade({
shadowDomName: 'example-with-state',
render: ({ useState }) => {
useState('foo', 'example');
return createComponent("div", null);
},
});
const component = (createComponent("div", null,
createComponent(Example, null)));
const shade = component.firstElementChild;
shade.callConstructed();
expect(shade.resourceManager.stateObservers.get('foo')?.getValue()).toEqual('example');
expect(shade.shadeChildren).toEqual([]);
});
});
});
//# sourceMappingURL=component-factory.spec.js.map