File size: 3,411 Bytes
3201ca6 | 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 | import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
import { screen, render } from "@testing-library/react";
import React from "react";
// Mock modules before importing the component
vi.mock("#/hooks/use-conversation-id", () => ({
useOptionalConversationId: () => ({ conversationId: "test-conversation-id" }),
useConversationId: () => ({ conversationId: "test-conversation-id" }),
}));
vi.mock("#/context/conversation-context", () => ({
useConversation: () => ({ conversationId: "test-conversation-id" }),
ConversationProvider: ({ children }: { children: React.ReactNode }) =>
children,
}));
vi.mock("react-i18next", async () => {
const actual = await vi.importActual("react-i18next");
return {
...(actual as object),
useTranslation: () => ({
t: (key: string) => key,
i18n: {
changeLanguage: () => new Promise(() => {}),
},
}),
};
});
import { BrowserPanel } from "#/components/features/browser/browser";
import { useBrowserStore } from "#/stores/browser-store";
describe("Browser", () => {
beforeEach(() => {
useBrowserStore.getState().reset();
});
afterEach(() => {
useBrowserStore.getState().reset();
vi.clearAllMocks();
});
it("renders a message if no screenshotSrc is provided", () => {
useBrowserStore.setState({
url: "https://example.com",
screenshotSrc: "",
});
render(<BrowserPanel />);
expect(screen.getByText("BROWSER$NO_PAGE_LOADED")).toBeInTheDocument();
expect(screen.getByTestId("browser-chrome-bar")).toBeInTheDocument();
expect(screen.getByTestId("browser-chrome-url")).toHaveTextContent(
"https://example.com",
);
});
it("keeps the chrome bar height and disables open-in-new-tab when empty", () => {
useBrowserStore.setState({
url: "",
screenshotSrc: "",
});
render(<BrowserPanel />);
expect(screen.getByTestId("browser-chrome-bar")).toHaveClass("min-h-[34px]");
expect(screen.getByTestId("browser-chrome-url")).toHaveTextContent(
"BROWSER$URL_PLACEHOLDER",
);
expect(
screen.queryByRole("button", { name: "BUTTON$BACK" }),
).not.toBeInTheDocument();
expect(
screen.getByRole("button", { name: "BUTTON$OPEN_IN_NEW_TAB" }),
).toBeDisabled();
});
it("renders the url and a screenshot", () => {
useBrowserStore.setState({
url: "https://example.com",
screenshotSrc:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==",
});
render(<BrowserPanel />);
expect(screen.getByTestId("browser-chrome-url")).toHaveTextContent(
"https://example.com",
);
expect(screen.getByAltText("BROWSER$SCREENSHOT_ALT")).toBeInTheDocument();
});
it("does not clear a preloaded screenshot when the browser tab first mounts", () => {
const screenshotSrc =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==";
useBrowserStore.setState({
url: "https://example.com",
screenshotSrc,
});
render(<BrowserPanel />);
expect(useBrowserStore.getState().screenshotSrc).toBe(screenshotSrc);
expect(screen.getByAltText("BROWSER$SCREENSHOT_ALT")).toBeInTheDocument();
expect(screen.queryByText("BROWSER$NO_PAGE_LOADED")).not.toBeInTheDocument();
});
});
|