From b33b8e476be982491172bd7831be7cb50a337c61 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Mon, 9 Mar 2026 14:57:41 +0000 Subject: [PATCH] test(site): add missing stories for AgentsPage components (#22808) --- .../AgentsPage/AgentsSkeletons.stories.tsx | 26 +++++++++ .../pages/AgentsPage/ChimeButton.stories.tsx | 24 ++++++++ .../pages/AgentsPage/DiffStats.stories.tsx | 38 ++++++++++++ .../AgentsPage/DiffStatsInline.stories.tsx | 58 +++++++++++++++++++ .../pages/AgentsPage/RightPanel.stories.tsx | 58 +++++++++++++++++++ .../AgentsPage/SectionHeader.stories.tsx | 44 ++++++++++++++ 6 files changed, 248 insertions(+) create mode 100644 site/src/pages/AgentsPage/AgentsSkeletons.stories.tsx create mode 100644 site/src/pages/AgentsPage/ChimeButton.stories.tsx create mode 100644 site/src/pages/AgentsPage/DiffStats.stories.tsx create mode 100644 site/src/pages/AgentsPage/DiffStatsInline.stories.tsx create mode 100644 site/src/pages/AgentsPage/RightPanel.stories.tsx create mode 100644 site/src/pages/AgentsPage/SectionHeader.stories.tsx diff --git a/site/src/pages/AgentsPage/AgentsSkeletons.stories.tsx b/site/src/pages/AgentsPage/AgentsSkeletons.stories.tsx new file mode 100644 index 0000000000..7326a32a3b --- /dev/null +++ b/site/src/pages/AgentsPage/AgentsSkeletons.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { AgentDetailSkeleton, AgentsPageSkeleton } from "./AgentsSkeletons"; + +const meta: Meta = { + title: "pages/AgentsPage/AgentsSkeletons", + component: AgentsPageSkeleton, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; +export default meta; +type Story = StoryObj; + +export const Page: Story = {}; + +export const Detail: Story = { + render: () => ( +
+ +
+ ), +}; diff --git a/site/src/pages/AgentsPage/ChimeButton.stories.tsx b/site/src/pages/AgentsPage/ChimeButton.stories.tsx new file mode 100644 index 0000000000..45b2d66199 --- /dev/null +++ b/site/src/pages/AgentsPage/ChimeButton.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { expect, userEvent, within } from "storybook/test"; +import { ChimeButton } from "./ChimeButton"; + +const meta: Meta = { + title: "pages/AgentsPage/ChimeButton", + component: ChimeButton, +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const ToggleState: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const button = canvas.getByRole("button"); + const initialText = button.querySelector("svg")?.classList.toString(); + await userEvent.click(button); + const updatedText = button.querySelector("svg")?.classList.toString(); + // The icon class should change after clicking. + expect(initialText).not.toBe(updatedText); + }, +}; diff --git a/site/src/pages/AgentsPage/DiffStats.stories.tsx b/site/src/pages/AgentsPage/DiffStats.stories.tsx new file mode 100644 index 0000000000..d7c69299e6 --- /dev/null +++ b/site/src/pages/AgentsPage/DiffStats.stories.tsx @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { DiffStatBadge } from "./DiffStats"; + +const badgeMeta: Meta = { + title: "pages/AgentsPage/DiffStatBadge", + component: DiffStatBadge, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + args: { + additions: 42, + deletions: 7, + }, +}; +export default badgeMeta; +type BadgeStory = StoryObj; + +export const Default: BadgeStory = {}; + +export const AdditionsOnly: BadgeStory = { + args: { additions: 10, deletions: 0 }, +}; + +export const DeletionsOnly: BadgeStory = { + args: { additions: 0, deletions: 5 }, +}; + +export const ZeroChanges: BadgeStory = { + args: { additions: 0, deletions: 0 }, +}; + +export const LargeNumbers: BadgeStory = { + args: { additions: 1234, deletions: 567 }, +}; diff --git a/site/src/pages/AgentsPage/DiffStatsInline.stories.tsx b/site/src/pages/AgentsPage/DiffStatsInline.stories.tsx new file mode 100644 index 0000000000..9e68bcc92f --- /dev/null +++ b/site/src/pages/AgentsPage/DiffStatsInline.stories.tsx @@ -0,0 +1,58 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { fn } from "storybook/test"; +import { DiffStatsInline } from "./DiffStats"; + +const meta: Meta = { + title: "pages/AgentsPage/DiffStatsInline", + component: DiffStatsInline, + args: { + status: { + chat_id: "chat-1", + changes_requested: false, + additions: 42, + deletions: 7, + changed_files: 5, + }, + onClick: fn(), + }, +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const ZeroLinesWithFiles: Story = { + args: { + status: { + chat_id: "chat-2", + changes_requested: false, + additions: 0, + deletions: 0, + changed_files: 3, + }, + }, +}; + +export const NoChanges: Story = { + args: { + status: { + chat_id: "chat-3", + changes_requested: false, + additions: 0, + deletions: 0, + changed_files: 0, + }, + }, +}; + +export const LargeNumbers: Story = { + args: { + status: { + chat_id: "chat-4", + changes_requested: false, + additions: 1234, + deletions: 567, + changed_files: 42, + }, + }, +}; diff --git a/site/src/pages/AgentsPage/RightPanel.stories.tsx b/site/src/pages/AgentsPage/RightPanel.stories.tsx new file mode 100644 index 0000000000..128503c647 --- /dev/null +++ b/site/src/pages/AgentsPage/RightPanel.stories.tsx @@ -0,0 +1,58 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { fn } from "storybook/test"; +import { RightPanel } from "./RightPanel"; + +const meta: Meta = { + title: "pages/AgentsPage/RightPanel", + component: RightPanel, + args: { + isOpen: true, + isExpanded: false, + onToggleExpanded: fn(), + onClose: fn(), + children: ( +
+ Panel content +
+ ), + }, + decorators: [ + (Story) => ( +
+
+ Main content area +
+ +
+ ), + ], +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Closed: Story = { + args: { isOpen: false }, +}; + +export const Expanded: Story = { + args: { isExpanded: true }, +}; diff --git a/site/src/pages/AgentsPage/SectionHeader.stories.tsx b/site/src/pages/AgentsPage/SectionHeader.stories.tsx new file mode 100644 index 0000000000..0f24e9c0ec --- /dev/null +++ b/site/src/pages/AgentsPage/SectionHeader.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { SectionHeader } from "./SectionHeader"; + +const meta: Meta = { + title: "pages/AgentsPage/SectionHeader", + component: SectionHeader, + args: { + label: "Agent Configuration", + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithDescription: Story = { + args: { + label: "Model Settings", + description: "Configure which AI models are available for agents.", + }, +}; + +export const WithAction: Story = { + args: { + label: "Notifications", + description: "Manage how you receive notifications.", + action: , + }, +}; + +export const LabelOnly: Story = { + args: { + label: "Advanced", + description: undefined, + action: undefined, + }, +};