wehub-resource-sync
117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
// @vitest-environment jsdom
|
|
import React from "react";
|
|
import { act } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
const cleanupCallbacks: Array<() => void> = [];
|
|
|
|
function createTestStorage(): Storage {
|
|
const entries = new Map<string, string>();
|
|
return {
|
|
get length() {
|
|
return entries.size;
|
|
},
|
|
clear: () => entries.clear(),
|
|
getItem: (key) => entries.get(key) ?? null,
|
|
key: (index) => Array.from(entries.keys())[index] ?? null,
|
|
removeItem: (key) => {
|
|
entries.delete(key);
|
|
},
|
|
setItem: (key, value) => {
|
|
entries.set(key, value);
|
|
},
|
|
};
|
|
}
|
|
|
|
function makeContainer(): HTMLElement {
|
|
const container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
cleanupCallbacks.push(() => {
|
|
container.remove();
|
|
});
|
|
return container;
|
|
}
|
|
|
|
describe("AutoRoutingBanner", () => {
|
|
beforeEach(() => {
|
|
(
|
|
globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
|
|
).IS_REACT_ACT_ENVIRONMENT = true;
|
|
vi.stubGlobal("localStorage", createTestStorage());
|
|
localStorage.clear();
|
|
});
|
|
|
|
afterEach(() => {
|
|
while (cleanupCallbacks.length > 0) {
|
|
cleanupCallbacks.pop()?.();
|
|
}
|
|
document.body.innerHTML = "";
|
|
localStorage.clear();
|
|
vi.unstubAllGlobals();
|
|
});
|
|
|
|
it("renders banner on first mount", async () => {
|
|
const { default: AutoRoutingBanner } = await import("@/shared/components/AutoRoutingBanner");
|
|
const container = makeContainer();
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(<AutoRoutingBanner />);
|
|
});
|
|
expect(container.querySelector('[role="banner"]')).toBeTruthy();
|
|
expect(container.textContent).toContain("Auto-Routing Active");
|
|
});
|
|
|
|
it("includes link to Combos page", async () => {
|
|
const { default: AutoRoutingBanner } = await import("@/shared/components/AutoRoutingBanner");
|
|
const container = makeContainer();
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(<AutoRoutingBanner />);
|
|
});
|
|
const link = container.querySelector('a[href="/dashboard/combos"]');
|
|
expect(link).toBeTruthy();
|
|
});
|
|
|
|
it("can be dismissed by clicking close button", async () => {
|
|
const { default: AutoRoutingBanner } = await import("@/shared/components/AutoRoutingBanner");
|
|
const container = makeContainer();
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(<AutoRoutingBanner />);
|
|
});
|
|
expect(container.querySelector('[role="banner"]')).toBeTruthy();
|
|
const closeButton = container.querySelector('button[aria-label="Dismiss auto-routing banner"]');
|
|
expect(closeButton).toBeTruthy();
|
|
await act(async () => {
|
|
closeButton?.click();
|
|
});
|
|
expect(container.querySelector('[role="banner"]')).toBeFalsy();
|
|
});
|
|
|
|
it("persists dismissal to localStorage", async () => {
|
|
const { default: AutoRoutingBanner } = await import("@/shared/components/AutoRoutingBanner");
|
|
const container = makeContainer();
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(<AutoRoutingBanner />);
|
|
});
|
|
const closeButton = container.querySelector('button[aria-label="Dismiss auto-routing banner"]');
|
|
await act(async () => {
|
|
closeButton?.click();
|
|
});
|
|
expect(localStorage.getItem("auto-routing-banner-dismissed")).toBe("true");
|
|
});
|
|
|
|
it("remains hidden after dismissal on remount", async () => {
|
|
localStorage.setItem("auto-routing-banner-dismissed", "true");
|
|
const { default: AutoRoutingBanner } = await import("@/shared/components/AutoRoutingBanner");
|
|
const container = makeContainer();
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(<AutoRoutingBanner />);
|
|
});
|
|
expect(container.querySelector('[role="banner"]')).toBeFalsy();
|
|
});
|
|
});
|