Increase test coverage from 94.43% to 95.5%

Author: haydenbleasel

packages/elements/__tests__/context.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   Context,
   ContextCacheUsage,
@@ -32,6 +32,17 @@ describe("Context", () => {
     );
     expect(screen.getByText("50%")).toBeInTheDocument();
   });
+
+  it("throws error when components used outside Context provider", () => {
+    // Suppress console.error for this test
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    expect(() => render(<ContextTrigger />)).toThrow(
+      "Context components must be used within Context"
+    );
+
+    spy.mockRestore();
+  });
 });
 
 describe("ContextTrigger", () => {
@@ -148,6 +159,22 @@ describe("ContextInputUsage", () => {
     expect(screen.getByText("Input")).toBeInTheDocument();
   });
 
+  it("renders input usage without modelId", () => {
+    render(
+      <Context
+        defaultOpen
+        maxTokens={100}
+        usage={{ inputTokens: 50 }}
+        usedTokens={50}
+      >
+        <ContextContent>
+          <ContextInputUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Input")).toBeInTheDocument();
+  });
+
   it("renders nothing when no input tokens", () => {
     render(
       <Context defaultOpen maxTokens={100} usedTokens={0}>
@@ -159,6 +186,17 @@ describe("ContextInputUsage", () => {
     );
     expect(screen.queryByText("Input")).not.toBeInTheDocument();
   });
+
+  it("renders custom children", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={50}>
+        <ContextContent>
+          <ContextInputUsage>Custom Input</ContextInputUsage>
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Custom Input")).toBeInTheDocument();
+  });
 });
 
 describe("ContextOutputUsage", () => {
@@ -178,6 +216,44 @@ describe("ContextOutputUsage", () => {
     );
     expect(screen.getByText("Output")).toBeInTheDocument();
   });
+
+  it("renders output usage without modelId", () => {
+    render(
+      <Context
+        defaultOpen
+        maxTokens={100}
+        usage={{ outputTokens: 25 }}
+        usedTokens={25}
+      >
+        <ContextContent>
+          <ContextOutputUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Output")).toBeInTheDocument();
+  });
+
+  it("renders nothing when no output tokens", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={0}>
+        <ContextContent>
+          <ContextOutputUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.queryByText("Output")).not.toBeInTheDocument();
+  });
+
+  it("renders custom children", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={50}>
+        <ContextContent>
+          <ContextOutputUsage>Custom Output</ContextOutputUsage>
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Custom Output")).toBeInTheDocument();
+  });
 });
 
 describe("ContextReasoningUsage", () => {
@@ -197,6 +273,44 @@ describe("ContextReasoningUsage", () => {
     );
     expect(screen.getByText("Reasoning")).toBeInTheDocument();
   });
+
+  it("renders reasoning usage without modelId", () => {
+    render(
+      <Context
+        defaultOpen
+        maxTokens={100}
+        usage={{ reasoningTokens: 10 }}
+        usedTokens={10}
+      >
+        <ContextContent>
+          <ContextReasoningUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Reasoning")).toBeInTheDocument();
+  });
+
+  it("renders nothing when no reasoning tokens", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={0}>
+        <ContextContent>
+          <ContextReasoningUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.queryByText("Reasoning")).not.toBeInTheDocument();
+  });
+
+  it("renders custom children", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={50}>
+        <ContextContent>
+          <ContextReasoningUsage>Custom Reasoning</ContextReasoningUsage>
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Custom Reasoning")).toBeInTheDocument();
+  });
 });
 
 describe("ContextCacheUsage", () => {
@@ -216,4 +330,42 @@ describe("ContextCacheUsage", () => {
     );
     expect(screen.getByText("Cache")).toBeInTheDocument();
   });
+
+  it("renders cache usage without modelId", () => {
+    render(
+      <Context
+        defaultOpen
+        maxTokens={100}
+        usage={{ cachedInputTokens: 20 }}
+        usedTokens={20}
+      >
+        <ContextContent>
+          <ContextCacheUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Cache")).toBeInTheDocument();
+  });
+
+  it("renders nothing when no cache tokens", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={0}>
+        <ContextContent>
+          <ContextCacheUsage />
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.queryByText("Cache")).not.toBeInTheDocument();
+  });
+
+  it("renders custom children", () => {
+    render(
+      <Context defaultOpen maxTokens={100} usedTokens={50}>
+        <ContextContent>
+          <ContextCacheUsage>Custom Cache</ContextCacheUsage>
+        </ContextContent>
+      </Context>
+    );
+    expect(screen.getByText("Custom Cache")).toBeInTheDocument();
+  });
 });

packages/elements/__tests__/conversation.test.tsx

@@ -1,6 +1,31 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
+
+// Mock use-stick-to-bottom with module-level state
+const mockState = { isAtBottom: true };
+const mockScrollToBottom = vi.fn();
+
+vi.mock("use-stick-to-bottom", () => {
+  const StickToBottomMock = ({ children, ...props }: any) => (
+    <div role="log" {...props}>{children}</div>
+  );
+
+  const StickToBottomContent = ({ children, ...props }: any) => (
+    <div {...props}>{children}</div>
+  );
+
+  (StickToBottomMock as any).Content = StickToBottomContent;
+
+  return {
+    StickToBottom: StickToBottomMock,
+    useStickToBottomContext: () => ({
+      isAtBottom: mockState.isAtBottom,
+      scrollToBottom: mockScrollToBottom,
+    }),
+  };
+});
+
 import {
   Conversation,
   ConversationContent,
@@ -84,40 +109,27 @@ describe("ConversationEmptyState", () => {
 });
 
 describe("ConversationScrollButton", () => {
-  it("renders button when not at bottom", async () => {
-    // Mock useStickToBottomContext to simulate not being at bottom
-    const mockScrollToBottom = vi.fn();
-
-    vi.mock("use-stick-to-bottom", () => ({
-      StickToBottom: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-      useStickToBottomContext: () => ({
-        isAtBottom: false,
-        scrollToBottom: mockScrollToBottom,
-      }),
-    }));
-
-    // Dynamically import the component after mocking
-    const { ConversationScrollButton: MockedButton } = await import("../src/conversation");
+  it("renders scroll button when not at bottom", () => {
+    mockState.isAtBottom = false;
 
     render(
       <Conversation>
         <ConversationContent>
           <div>Content</div>
         </ConversationContent>
-        <MockedButton />
+        <ConversationScrollButton />
       </Conversation>
     );
 
-    // Button should render when not at bottom
-    const button = screen.queryByRole("button");
-    if (button) {
-      expect(button).toBeInTheDocument();
-    }
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
 
-    vi.unmock("use-stick-to-bottom");
+    mockState.isAtBottom = true;
   });
 
-  it("does not render button when at bottom", () => {
+  it("does not render when at bottom", () => {
+    mockState.isAtBottom = true;
+
     render(
       <Conversation>
         <ConversationContent>
@@ -127,41 +139,46 @@ describe("ConversationScrollButton", () => {
       </Conversation>
     );
 
-    // When at bottom, button should not render
-    // The component returns `!isAtBottom && <Button>`
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
   });
 
-  it("calls scrollToBottom when clicked", async () => {
-    const user = userEvent.setup();
-    const mockScrollToBottom = vi.fn();
+  it("applies custom className when button renders", () => {
+    mockState.isAtBottom = false;
 
-    // Mock the hook to provide a scroll function
-    vi.mock("use-stick-to-bottom", () => ({
-      StickToBottom: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-      useStickToBottomContext: () => ({
-        isAtBottom: false,
-        scrollToBottom: mockScrollToBottom,
-      }),
-    }));
+    render(
+      <Conversation>
+        <ConversationContent>
+          <div>Content</div>
+        </ConversationContent>
+        <ConversationScrollButton className="custom-scroll-btn" />
+      </Conversation>
+    );
 
-    const { ConversationScrollButton: MockedButton } = await import("../src/conversation");
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("custom-scroll-btn");
+
+    mockState.isAtBottom = true;
+  });
+
+  it("calls scrollToBottom when clicked", async () => {
+    mockState.isAtBottom = false;
+    mockScrollToBottom.mockClear();
+    const user = userEvent.setup();
 
     render(
       <Conversation>
         <ConversationContent>
           <div>Content</div>
         </ConversationContent>
-        <MockedButton />
+        <ConversationScrollButton />
       </Conversation>
     );
 
-    const button = screen.queryByRole("button");
-    if (button) {
-      await user.click(button);
-      expect(mockScrollToBottom).toHaveBeenCalled();
-    }
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    expect(mockScrollToBottom).toHaveBeenCalled();
 
-    vi.unmock("use-stick-to-bottom");
+    mockState.isAtBottom = true;
   });
 });