Skip to content

test(web): preview session sync and device tool update tests run in a real browser #21274

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 1 commit into from
Oct 18, 2026
+23 −13
Merged

test(web): preview session sync and device tool update tests run in a real browser #21274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 10 additions & 5 deletions ...onents/preview/previewSessionSync.test.ts → ...review/previewSessionSync.browser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
import * as Cause from "effect/Cause";
import { AsyncResult, Atom } from "effect/reactivity";
import { act, createElement } from "react";
import { create, type ReactTestRenderer } from "react-test-renderer";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";

// Only the transport is substituted. The hook, atom registry and preview
Expand Down Expand Up @@ -76,7 +76,8 @@ import { AppAtomRegistryProvider, appAtomRegistry } from "~/rpc/atomRegistry";
import { previewEnvironment } from "~/state/preview";
import { usePreviewSession } from "./usePreviewSession";

let renderer: ReactTestRenderer | null = null;
let root: Root | null = null;
let container: HTMLDivElement | null = null;
let sequence = 0;
let ref: ScopedThreadRef;

Expand Down Expand Up @@ -107,8 +108,10 @@ const result = (
});

async function mount() {
container = document.body.appendChild(document.createElement("div"));
root = createRoot(container);
await act(async () => {
renderer = create(createElement(AppAtomRegistryProvider, null, createElement(SessionSync)));
root!.render(createElement(AppAtomRegistryProvider, null, createElement(SessionSync)));
});
}

Expand All @@ -122,8 +125,10 @@ beforeEach(() => {
});

afterEach(async () => {
await act(async () => renderer?.unmount());
renderer = null;
await act(async () => root?.unmount());
root = null;
container?.remove();
container = null;
resetPreviewStateForTests();
vi.unstubAllGlobals();
});
Expand Down
21 changes: 13 additions & 8 deletions ...onents/settings/DeviceToolUpdate.test.tsx → ...ettings/DeviceToolUpdate.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from "@t3tools/contracts";
import * as Cause from "effect/Cause";
import { act, type ReactNode } from "react";
import { create, type ReactTestRenderer } from "react-test-renderer";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, expect, it, vi } from "vite-plus/test";

const { list } = vi.hoisted(() => ({ list: vi.fn() }));
Expand Down Expand Up @@ -86,15 +86,17 @@ const deviceState = {
revision: 1,
} satisfies DeviceServiceState;

let renderer: ReactTestRenderer | undefined;
let root: Root | undefined;
let container: HTMLDivElement | undefined;

beforeEach(() => {
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
list.mockReset();
});

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

Expand All @@ -121,8 +123,10 @@ it.each([
"reports $name as the server describes it, not as a network problem",
async ({ error, message }) => {
list.mockResolvedValue({ _tag: "Failure", cause: Cause.fail(error) });
container = document.body.appendChild(document.createElement("div"));
root = createRoot(container);
await act(() => {
renderer = create(
root!.render(
<DeviceIntegrationControls
environmentId={environmentId}
enabled
Expand All @@ -131,12 +135,13 @@ it.each([
);
});

const update = renderer!.root.find(
(node) => node.type === "button" && node.props.children === "Update to v0.12.0",
const update = [...container.querySelectorAll("button")].find(
(button) => button.textContent === "Update to v0.12.0",
);
await act(async () => update.props.onClick());
expect(update).toBeDefined();
await act(async () => update!.click());

expect(list).toHaveBeenCalledWith({ environmentId, input: { updateTool: "hub" } });
expect(renderer!.root.find((node) => node.props.role === "alert").props.children).toBe(message);
expect(container.querySelector('[role="alert"]')?.textContent).toBe(message);
},
);
Loading