refactor(chat): migrate overlay styles to tailwind
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { BrowserHintOverlay } from "../browser-hint-overlay";
|
||||
import { ChatHeader } from "../chat-header";
|
||||
import { ChatInsufficientCreditsBanner } from "../chat-insufficient-credits-banner";
|
||||
import { ChatInputTextField } from "../chat-input-text-field";
|
||||
@@ -8,6 +9,7 @@ import { ChatSendButton } from "../chat-send-button";
|
||||
import { ImageBubble } from "../image-bubble";
|
||||
import { MessageAvatar } from "../message-avatar";
|
||||
import { PrivateMessageCard } from "../private-message-card";
|
||||
import { PwaInstallDialog } from "../pwa-install-dialog";
|
||||
import { TextBubble } from "../text-bubble";
|
||||
|
||||
vi.mock("@/router/use-app-navigator", () => ({
|
||||
@@ -181,4 +183,42 @@ describe("chat Tailwind components", () => {
|
||||
expect(html).toContain("Message Elio");
|
||||
expect(html).toContain("Hello");
|
||||
});
|
||||
|
||||
it("renders BrowserHintOverlay visibility and expanded styles", () => {
|
||||
expect(renderToStaticMarkup(<BrowserHintOverlay />)).toBe("");
|
||||
|
||||
const html = renderToStaticMarkup(
|
||||
<BrowserHintOverlay
|
||||
forceShow
|
||||
autoCollapseDelayMs={0}
|
||||
title="Open elsewhere"
|
||||
description="Better experience"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(html).toContain('aria-expanded="true"');
|
||||
expect(html).toContain('aria-label="Open elsewhere. Better experience"');
|
||||
expect(html).toContain("grid-cols-[auto_minmax(0,1fr)]");
|
||||
expect(html).toContain("backdrop-blur-[12px]");
|
||||
expect(html).toContain("hover:opacity-[0.94]");
|
||||
expect(html).toContain("Open elsewhere");
|
||||
expect(html).toContain("Better experience");
|
||||
});
|
||||
|
||||
it("renders PwaInstallDialog with Tailwind dialog layout", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<PwaInstallDialog onClose={() => undefined} onInstall={() => undefined} />,
|
||||
);
|
||||
|
||||
expect(html).toContain('role="dialog"');
|
||||
expect(html).toContain('aria-modal="true"');
|
||||
expect(html).toContain('aria-labelledby="pwa-dialog-title"');
|
||||
expect(html).toContain("fixed inset-0");
|
||||
expect(html).toContain("max-w-[var(--pwa-install-dialog-max-width,360px)]");
|
||||
expect(html).toContain("size-[var(--icon-size-86,86px)]");
|
||||
expect(html).toContain("%2Fimages%2Ficons%2Ficon-add-to-home.png");
|
||||
expect(html).toContain("Add to Home Screen");
|
||||
expect(html).toContain("Cancel");
|
||||
expect(html).toContain("OK");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user