File size: 3,960 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | // @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("./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("./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("./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("./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("./AutoRoutingBanner");
const container = makeContainer();
const root = createRoot(container);
await act(async () => {
root.render(<AutoRoutingBanner />);
});
expect(container.querySelector('[role="banner"]')).toBeFalsy();
});
});
|