@furystack/shades
Version:
Google Authentication Provider for FuryStack
76 lines • 3.71 kB
JavaScript
import { TextDecoder, TextEncoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
import { Injector } from '@furystack/inject';
import { sleepAsync } from '@furystack/utils';
import { LazyLoad } from './lazy-load.js';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { initializeShadeRoot } from '../initialize.js';
import { createComponent } from '../shade-component.js';
describe('Lazy Load', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
afterEach(() => {
document.body.innerHTML = '';
});
it('Shuld display the loader and completed state', async () => {
const injector = new Injector();
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(LazyLoad, { loader: createComponent("div", null, "Loading..."), component: async () => {
await sleepAsync(100);
return createComponent("div", null, "Loaded");
} })),
});
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>');
await sleepAsync(150);
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loaded</div></lazy-load></div>');
});
it('Shuld display the failed state with a retryer', async () => {
const injector = new Injector();
const rootElement = document.getElementById('root');
const load = vi.fn(async () => {
throw Error(':(');
});
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(LazyLoad, { loader: createComponent("div", null, "Loading..."), component: load, error: (e, retry) => (createComponent("button", { id: "retry", onclick: retry }, e.message)) })),
});
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>');
await sleepAsync(1);
expect(load).toBeCalledTimes(1);
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>');
document.getElementById('retry')?.click();
expect(load).toBeCalledTimes(2);
});
it('Shuld display the failed state with a retryer', async () => {
const injector = new Injector();
const rootElement = document.getElementById('root');
let counter = 0;
const load = vi.fn(async () => {
if (!counter) {
counter += 1;
throw Error(':(');
}
return createComponent("div", null, "success");
});
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(LazyLoad, { loader: createComponent("div", null, "Loading..."), component: load, error: (e, retry) => (createComponent("button", { id: "retry", onclick: retry }, e.message)) })),
});
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>');
await sleepAsync(1);
expect(load).toBeCalledTimes(1);
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>');
document.getElementById('retry')?.click();
expect(load).toBeCalledTimes(2);
await sleepAsync(1);
expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>success</div></lazy-load></div>');
});
});
//# sourceMappingURL=lazy-load.spec.js.map