@furystack/shades
Version:
Google Authentication Provider for FuryStack
96 lines • 4.21 kB
JavaScript
import { TextDecoder, TextEncoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
import { Injector } from '@furystack/inject';
import { sleepAsync } from '@furystack/utils';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { initializeShadeRoot } from '../initialize.js';
import { LocationService } from '../services/location-service.js';
import { createComponent } from '../shade-component.js';
import { RouteLink } from './route-link.js';
import { Router } from './router.js';
describe('Router', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
afterEach(() => {
document.body.innerHTML = '';
});
it('Shuld display the loader and completed state', async () => {
history.pushState(null, '', '/');
const onVisit = vi.fn();
const onLeave = vi.fn();
const onLastLeave = vi.fn();
const injector = new Injector();
const rootElement = document.getElementById('root');
const onRouteChange = vi.fn();
injector.getInstance(LocationService).onLocationPathChanged.subscribe(onRouteChange);
const route1 = {
url: '/route-a',
component: () => createComponent("div", { id: "content" }, "route-a"),
onVisit,
onLeave,
};
const route2 = {
url: '/route-b{/:id}',
component: ({ match }) => createComponent("div", { id: "content" },
"route-b",
match.params.id),
};
const route3 = {
url: '/route-c',
component: () => createComponent("div", { id: "content" }, "route-c"),
onLeave: onLastLeave,
};
const route4 = { url: '/', component: () => createComponent("div", { id: "content" }, "home") };
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent("div", null,
createComponent(RouteLink, { id: "home", href: "/" }, "home"),
createComponent(RouteLink, { id: "a", href: "/route-a" }, "a"),
createComponent(RouteLink, { id: "b", href: "/route-b" }, "b"),
createComponent(RouteLink, { id: "b-with-id", href: "/route-b/123" }, "b-with-id"),
createComponent(RouteLink, { id: "c", href: "/route-c" }, "c"),
createComponent(RouteLink, { id: "x", href: "/route-x" }, "x"),
createComponent(Router, { routes: [route1, route2, route3, route4], notFound: createComponent("div", { id: "content" }, "not found") }))),
});
const getContent = () => document.getElementById('content')?.innerHTML;
const getLocation = () => location.pathname;
const clickOn = (name) => document.getElementById(name)?.click();
await sleepAsync(100);
expect(getLocation()).toBe('/');
expect(getContent()).toBe('home');
expect(onVisit).not.toBeCalled();
clickOn('a');
await sleepAsync(100);
expect(getContent()).toBe('route-a');
expect(getLocation()).toBe('/route-a');
expect(onRouteChange).toBeCalledTimes(1);
expect(onVisit).toBeCalledTimes(1);
clickOn('a');
await sleepAsync(100);
expect(onVisit).toBeCalledTimes(1);
expect(onLeave).not.toBeCalled();
clickOn('b');
await sleepAsync(100);
expect(onLeave).toBeCalledTimes(1);
expect(getContent()).toBe('route-b');
expect(getLocation()).toBe('/route-b');
clickOn('b-with-id');
await sleepAsync(100);
expect(getContent()).toBe('route-b123');
expect(getLocation()).toBe('/route-b/123');
clickOn('c');
await sleepAsync(100);
expect(getContent()).toBe('route-c');
expect(getLocation()).toBe('/route-c');
expect(onLastLeave).not.toBeCalled();
clickOn('x');
await sleepAsync(100);
expect(getContent()).toBe('not found');
expect(getLocation()).toBe('/route-x');
expect(onLastLeave).toBeCalledTimes(1);
});
});
//# sourceMappingURL=router.spec.js.map