import "../../index.css"; import { page } from "vite-plus/test/browser";import { describe, expect, it, vi } from "vite-plus/test";import { render } from "vitest-browser-react"; import { PreviewChromeRow } from "./PreviewChromeRow"; const defaultProps = { url: "https://example.com/", loading: false, loadProgress: 0, canGoBack: false, canGoForward: false, refreshDisabled: false, onBack: vi.fn(), onForward: vi.fn(), onRefresh: vi.fn(), onSubmit: vi.fn(),}; describe("PreviewChromeRow", () => { it("uses the shared compact surface subheader treatment", async () => { const screen = await render(<PreviewChromeRow {...defaultProps} />); const subheader = screen.container.querySelector<HTMLElement>("[data-surface-subheader]"); expect(subheader).not.toBeNull(); expect(subheader?.getBoundingClientRect().height).toBe(40); expect(window.getComputedStyle(subheader!).borderTopWidth).toBe("0px"); expect(window.getComputedStyle(subheader!).borderBottomWidth).toBe("1px"); }); it("only focuses the URL input after an explicit focus request", async () => { const previouslyFocused = document.createElement("button"); document.body.append(previouslyFocused); previouslyFocused.focus(); const screen = await render(<PreviewChromeRow {...defaultProps} focusUrlNonce={undefined} />); const input = page.getByRole("textbox").element() as HTMLInputElement; expect(document.activeElement).toBe(previouslyFocused); await screen.rerender(<PreviewChromeRow {...defaultProps} focusUrlNonce={1} />); expect(document.activeElement).toBe(input); expect(input.selectionStart).toBe(0); expect(input.selectionEnd).toBe(input.value.length); previouslyFocused.remove(); }); it("shows a friendly asset label until the URL input receives focus", async () => { const fullUrl = "http://127.0.0.1:3773/api/assets/token/report.pdf"; await render( <PreviewChromeRow {...defaultProps} url={fullUrl} displayUrl="Local environment · report.pdf" />, ); const input = page.getByRole("textbox"); await expect.element(input).toHaveValue("Local environment · report.pdf"); await input.click(); await expect.element(input).toHaveValue(fullUrl); input.element().dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })); await expect.element(input).toHaveValue("Local environment · report.pdf"); }); it("shows only the host for regular URLs until the input receives focus", async () => { const fullUrl = "https://t3.chat/chat/18378834-f776-4507-ada7-6f79"; await render(<PreviewChromeRow {...defaultProps} url={fullUrl} displayUrl="t3.chat" />); const input = page.getByRole("textbox"); await expect.element(input).toHaveValue("t3.chat"); await input.click(); await expect.element(input).toHaveValue(fullUrl); });});
import "../../index.css";
import { page } from "vite-plus/test/browser";
import { describe, expect, it, vi } from "vite-plus/test";
import { render } from "vitest-browser-react";
import { PreviewChromeRow } from "./PreviewChromeRow";
const defaultProps = {
url: "https://example.com/",
loading: false,
loadProgress: 0,
canGoBack: false,
canGoForward: false,
refreshDisabled: false,
onBack: vi.fn(),
onForward: vi.fn(),
onRefresh: vi.fn(),
onSubmit: vi.fn(),
};
describe("PreviewChromeRow", () => {
it("uses the shared compact surface subheader treatment", async () => {
const screen = await render(<PreviewChromeRow {...defaultProps} />);
const subheader = screen.container.querySelector<HTMLElement>("[data-surface-subheader]");
expect(subheader).not.toBeNull();
expect(subheader?.getBoundingClientRect().height).toBe(40);
expect(window.getComputedStyle(subheader!).borderTopWidth).toBe("0px");
expect(window.getComputedStyle(subheader!).borderBottomWidth).toBe("1px");
});
it("only focuses the URL input after an explicit focus request", async () => {
const previouslyFocused = document.createElement("button");
document.body.append(previouslyFocused);
previouslyFocused.focus();
const screen = await render(<PreviewChromeRow {...defaultProps} focusUrlNonce={undefined} />);
const input = page.getByRole("textbox").element() as HTMLInputElement;
expect(document.activeElement).toBe(previouslyFocused);
await screen.rerender(<PreviewChromeRow {...defaultProps} focusUrlNonce={1} />);
expect(document.activeElement).toBe(input);
expect(input.selectionStart).toBe(0);
expect(input.selectionEnd).toBe(input.value.length);
previouslyFocused.remove();
});
it("shows a friendly asset label until the URL input receives focus", async () => {
const fullUrl = "http://127.0.0.1:3773/api/assets/token/report.pdf";
await render(
<PreviewChromeRow
{...defaultProps}
url={fullUrl}
displayUrl="Local environment · report.pdf"
/>,
);
const input = page.getByRole("textbox");
await expect.element(input).toHaveValue("Local environment · report.pdf");
await input.click();
await expect.element(input).toHaveValue(fullUrl);
input.element().dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
await expect.element(input).toHaveValue("Local environment · report.pdf");
});
it("shows only the host for regular URLs until the input receives focus", async () => {
const fullUrl = "https://t3.chat/chat/18378834-f776-4507-ada7-6f79";
await render(<PreviewChromeRow {...defaultProps} url={fullUrl} displayUrl="t3.chat" />);
const input = page.getByRole("textbox");
await expect.element(input).toHaveValue("t3.chat");
await input.click();
await expect.element(input).toHaveValue(fullUrl);
});
});