Skip to content

test(web): migrate browser tests to the disposable render helper (5/8) #22270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 2 commits into from
Oct 20, 2026
+825 −898
Merged

test(web): migrate browser tests to the disposable render helper (5/8) #22270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d7960a
test(web): migrate browser tests to the disposable render helper (5/8)
juliusmarminge Oct 20, 2026
4213cba
test(web): fix slice five review findings
juliusmarminge Oct 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 91 additions & 108 deletions apps/web/src/components/diffs/StyledDiffCodeView.browser.test.tsx
View file
Open in desktop

Large diffs are not rendered by default.

124 changes: 61 additions & 63 deletions apps/web/src/components/files/AttachmentFilePreview.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { act, render, stubGlobal, type Screen } from "../../../test/render";
import { EnvironmentId } from "@t3tools/contracts";
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
import { describe, expect, it, vi } from "vite-plus/test";

const { refresh } = vi.hoisted(() => ({ refresh: vi.fn<() => Promise<string | null>>() }));

Expand All @@ -20,101 +19,100 @@ import { AttachmentFilePreview } from "./AttachmentFilePreview";
describe("attachment HTML preview recovery", () => {
const originalUrl = "data:text/html,original";
const renewedUrl = "data:text/html,renewed";
let now = 0;
let root: Root;
let container: HTMLDivElement;

beforeEach(() => {
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
now = 0;
vi.spyOn(Date, "now").mockImplementation(() => now);
function setup() {
refresh.mockReset().mockResolvedValueOnce(originalUrl).mockResolvedValue(renewedUrl);
vi.stubGlobal(
"fetch",
vi.fn(async () => new Response("<p>Captured HTML</p>")),
);
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});

afterEach(async () => {
await act(async () => root.unmount());
container.remove();
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
}

const openRemote = () =>
act(async () =>
root.render(
<AttachmentFilePreview
name="document.html"
mimeType="text/html"
sizeBytes={100}
asset={{ environmentId: EnvironmentId.make("test-environment"), attachmentId: "html" }}
/>,
),
render(
<AttachmentFilePreview
name="document.html"
mimeType="text/html"
sizeBytes={100}
asset={{ environmentId: EnvironmentId.make("test-environment"), attachmentId: "html" }}
/>,
);

const toggleMode = async (label: string) => {
const button = container.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
const toggleMode = async (screen: Screen, label: string) => {
const button = screen.container.querySelector<HTMLButtonElement>(
`button[aria-label="${label}"]`,
);
expect(button, label).not.toBeNull();
await act(async () => button!.click());
};
const alert = () => container.querySelector('[role="alert"]');
const alert = (screen: Screen) => screen.container.querySelector('[role="alert"]');

it("keeps a renewed URL for subsequent rendered and source views", async () => {
await openRemote();
expect(container.querySelector("iframe")?.getAttribute("src")).toBe(originalUrl);
setup();
let now = 0;
using _now = vi.spyOn(Date, "now").mockImplementation(() => now);
using _fetch = stubGlobal(
"fetch",
vi.fn(async () => new Response("<p>Captured HTML</p>")),
);
await using screen = await openRemote();
expect(screen.container.querySelector("iframe")?.getAttribute("src")).toBe(originalUrl);
now = 61 * 60_000;
await toggleMode("Show HTML source");
await toggleMode(screen, "Show HTML source");
await act(async () => {
await import("./ReadOnlySourcePreview");
});
expect(fetch).toHaveBeenCalledExactlyOnceWith(renewedUrl, expect.any(Object));
await vi.waitFor(() =>
expect(container.querySelector("pre")?.textContent).toBe("<p>Captured HTML</p>"),
expect(screen.container.querySelector("pre")?.textContent).toBe("<p>Captured HTML</p>"),
);

await toggleMode("Show rendered page");
expect(container.querySelector("iframe")?.getAttribute("src")).toBe(renewedUrl);
await toggleMode("Show HTML source");
await toggleMode(screen, "Show rendered page");
expect(screen.container.querySelector("iframe")?.getAttribute("src")).toBe(renewedUrl);
await toggleMode(screen, "Show HTML source");
expect(refresh).toHaveBeenCalledTimes(2);
expect(vi.mocked(fetch).mock.calls.map(([url]) => url)).toEqual([renewedUrl, renewedUrl]);
});

it("does not fetch or mark an expired URL fresh when reauthorization is unavailable", async () => {
await openRemote();
setup();
let now = 0;
using _now = vi.spyOn(Date, "now").mockImplementation(() => now);
using _fetch = stubGlobal(
"fetch",
vi.fn(async () => new Response("<p>Captured HTML</p>")),
);
await using screen = await openRemote();
now = 61 * 60_000;
refresh.mockResolvedValue(null);
await toggleMode("Show HTML source");
await toggleMode(screen, "Show HTML source");
expect(fetch).not.toHaveBeenCalled();
expect(alert()?.textContent).toContain("Reconnect to the environment and try again.");
expect(alert(screen)?.textContent).toContain("Reconnect to the environment and try again.");

await toggleMode("Show rendered page");
await toggleMode("Show HTML source");
await toggleMode(screen, "Show rendered page");
await toggleMode(screen, "Show HTML source");
expect(refresh).toHaveBeenCalledTimes(3);
expect(fetch).not.toHaveBeenCalled();
});

it("can return to rendered HTML after local source decoding fails", async () => {
setup();
let now = 0;
using _now = vi.spyOn(Date, "now").mockImplementation(() => now);
using _fetch = stubGlobal(
"fetch",
vi.fn(async () => new Response("<p>Captured HTML</p>")),
);
const file = new Blob([new Uint8Array([0x3c, 0x70, 0x3e, 0xe9])], { type: "text/html" });
await act(async () =>
root.render(
<AttachmentFilePreview
name="document.html"
mimeType="text/html"
sizeBytes={file.size}
file={file}
/>,
),
await using screen = await render(
<AttachmentFilePreview
name="document.html"
mimeType="text/html"
sizeBytes={file.size}
file={file}
/>,
);
await toggleMode("Show HTML source");
await vi.waitFor(() => expect(alert()?.textContent).toContain("not UTF-8"));
await toggleMode(screen, "Show HTML source");
await vi.waitFor(() => expect(alert(screen)?.textContent).toContain("not UTF-8"));

await toggleMode("Show rendered page");
expect(alert()).toBeNull();
expect(container.querySelector("iframe")?.title).toBe("document.html");
await toggleMode(screen, "Show rendered page");
expect(alert(screen)).toBeNull();
expect(screen.container.querySelector("iframe")?.title).toBe("document.html");
});
});
34 changes: 11 additions & 23 deletions apps/web/src/components/files/BrowserDocumentFrame.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,27 @@
import { act } from "react";
import { createRoot } from "react-dom/client";
import { expect, it, onTestFinished, vi } from "vite-plus/test";
import { render } from "../../../test/render";
import { expect, it } from "vite-plus/test";

import { BrowserDocumentFrame } from "./BrowserDocumentFrame";

it("keeps the loaded HTML page while its signed URL renews, and reloads on a new revision", async () => {
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
const container = document.createElement("div");
document.body.append(container);
const root = createRoot(container);
onTestFinished(async () => {
await act(async () => root.unmount());
container.remove();
vi.unstubAllGlobals();
});
const render = (src: string, documentKey?: string) =>
act(async () =>
root.render(
<BrowserDocumentFrame src={src} title="Review" pdf={false} documentKey={documentKey} />,
),
);
const frameUi = (src: string, documentKey?: string) => (
<BrowserDocumentFrame src={src} title="Review" pdf={false} documentKey={documentKey} />
);

await render("about:blank#token-a", "review.html:1");
await using screen = await render(frameUi("about:blank#token-a", "review.html:1"));
const { container } = screen;
const frame = container.querySelector("iframe");
await render("about:blank#token-b", "review.html:1");
await screen.rerender(frameUi("about:blank#token-b", "review.html:1"));
expect(container.querySelector("iframe")).toBe(frame);
expect(frame?.getAttribute("src")).toBe("about:blank#token-a");

await render("about:blank#token-c", "review.html:2");
await screen.rerender(frameUi("about:blank#token-c", "review.html:2"));
expect(container.querySelector("iframe")).not.toBe(frame);
expect(container.querySelector("iframe")?.getAttribute("src")).toBe("about:blank#token-c");

await render("about:blank#first");
await screen.rerender(frameUi("about:blank#first"));
const urlDrivenFrame = container.querySelector("iframe");
await render("about:blank#second");
await screen.rerender(frameUi("about:blank#second"));
expect(container.querySelector("iframe")).not.toBe(urlDrivenFrame);
expect(container.querySelector("iframe")?.getAttribute("src")).toBe("about:blank#second");
});
Loading
Loading