diff --git a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.stories.tsx b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.stories.tsx index 729a774379..e03f4601cf 100644 --- a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.stories.tsx +++ b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.stories.tsx @@ -602,42 +602,110 @@ const todayTimestamp = timestampAtLocalNoon(0); const yesterdayTimestamp = timestampAtLocalNoon(-1); const thisWeekTimestamp = timestampAtLocalNoon(-3); -export const SectionHeadersCollapseAndFilter: Story = { +const sectionHeaderChats = [ + buildChat({ + id: "pinned-section-one", + title: "Pinned section one", + pin_order: 1, + updated_at: todayTimestamp, + }), + buildChat({ + id: "pinned-section-two", + title: "Pinned section two", + pin_order: 2, + updated_at: todayTimestamp, + }), + buildChat({ + id: "today-section-one", + title: "Today section one", + updated_at: todayTimestamp, + }), + buildChat({ + id: "today-section-two", + title: "Today section two", + updated_at: todayTimestamp, + }), + buildChat({ + id: "yesterday-section-one", + title: "Yesterday section one", + updated_at: yesterdayTimestamp, + }), + buildChat({ + id: "week-section-one", + title: "This week section one", + updated_at: thisWeekTimestamp, + }), +]; + +export const SectionHeadersCollapse: Story = { args: { - chats: [ - buildChat({ - id: "pinned-section-one", - title: "Pinned section one", - pin_order: 1, - updated_at: todayTimestamp, - }), - buildChat({ - id: "pinned-section-two", - title: "Pinned section two", - pin_order: 2, - updated_at: todayTimestamp, - }), - buildChat({ - id: "today-section-one", - title: "Today section one", - updated_at: todayTimestamp, - }), - buildChat({ - id: "today-section-two", - title: "Today section two", - updated_at: todayTimestamp, - }), - buildChat({ - id: "yesterday-section-one", - title: "Yesterday section one", - updated_at: yesterdayTimestamp, - }), - buildChat({ - id: "week-section-one", - title: "This week section one", - updated_at: thisWeekTimestamp, - }), - ], + chats: sectionHeaderChats, + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { path: "/agents" }, + routing: agentsRouting, + }), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect(canvas.getByText("Pinned (2)")).toBeInTheDocument(); + await expect(canvas.getByText("Today (2)")).toBeInTheDocument(); + await expect(canvas.getByText("Yesterday (1)")).toBeInTheDocument(); + await expect(canvas.getByText("This Week (1)")).toBeInTheDocument(); + + const pinnedToggle = canvas.getByRole("button", { + name: "Collapse Pinned section", + }); + await userEvent.click(pinnedToggle); + await waitFor(() => { + expect( + canvas.getByRole("button", { name: "Expand Pinned section" }), + ).toHaveAttribute("aria-expanded", "false"); + expect(canvas.queryByText("Pinned section one")).not.toBeInTheDocument(); + expect(canvas.queryByText("Pinned section two")).not.toBeInTheDocument(); + }); + expect(canvas.getByText("Today section one")).toBeInTheDocument(); + + await userEvent.click( + canvas.getByRole("button", { name: "Expand Pinned section" }), + ); + await waitFor(() => { + expect( + canvas.getByRole("button", { name: "Collapse Pinned section" }), + ).toHaveAttribute("aria-expanded", "true"); + expect(canvas.getByText("Pinned section one")).toBeInTheDocument(); + expect(canvas.getByText("Pinned section two")).toBeInTheDocument(); + }); + + const todayToggle = canvas.getByRole("button", { + name: "Collapse Today section", + }); + await userEvent.click(todayToggle); + await waitFor(() => { + expect( + canvas.getByRole("button", { name: "Expand Today section" }), + ).toHaveAttribute("aria-expanded", "false"); + expect(canvas.queryByText("Today section one")).not.toBeInTheDocument(); + expect(canvas.queryByText("Today section two")).not.toBeInTheDocument(); + }); + expect(canvas.getByText("Yesterday section one")).toBeInTheDocument(); + + await userEvent.click(canvas.getByTestId("agents-section-toggle-Today")); + await waitFor(() => { + expect( + canvas.getByRole("button", { name: "Collapse Today section" }), + ).toHaveAttribute("aria-expanded", "true"); + expect(canvas.getByText("Today section one")).toBeInTheDocument(); + expect(canvas.getByText("Today section two")).toBeInTheDocument(); + }); + }, +}; + +export const SidebarFilterMenu: Story = { + args: { + chats: sectionHeaderChats, }, parameters: { reactRouter: reactRouterParameters({ @@ -649,55 +717,18 @@ export const SectionHeadersCollapseAndFilter: Story = { const canvas = within(canvasElement); const body = within(document.body); - await expect(canvas.getByText("Pinned (2)")).toBeInTheDocument(); - await expect(canvas.getByText("Today (2)")).toBeInTheDocument(); - await expect(canvas.getByText("Yesterday (1)")).toBeInTheDocument(); - await expect(canvas.getByText("This Week (1)")).toBeInTheDocument(); - - const pinnedToggle = canvas.getByRole("button", { - name: "Collapse Pinned section", - }); - await userEvent.click(pinnedToggle); - await expect(pinnedToggle).toHaveAttribute("aria-expanded", "false"); - expect(canvas.queryByText("Pinned section one")).not.toBeInTheDocument(); - expect(canvas.queryByText("Pinned section two")).not.toBeInTheDocument(); - expect(canvas.getByText("Today section one")).toBeInTheDocument(); - - await userEvent.click( - canvas.getByRole("button", { name: "Expand Pinned section" }), - ); - await expect( - canvas.getByRole("button", { name: "Collapse Pinned section" }), - ).toHaveAttribute("aria-expanded", "true"); - expect(canvas.getByText("Pinned section one")).toBeInTheDocument(); - expect(canvas.getByText("Pinned section two")).toBeInTheDocument(); - - const todayToggle = canvas.getByRole("button", { - name: "Collapse Today section", - }); - await userEvent.click(todayToggle); - await expect(todayToggle).toHaveAttribute("aria-expanded", "false"); - expect(canvas.queryByText("Today section one")).not.toBeInTheDocument(); - expect(canvas.queryByText("Today section two")).not.toBeInTheDocument(); - expect(canvas.getByText("Yesterday section one")).toBeInTheDocument(); - - await userEvent.click(canvas.getByTestId("agents-section-toggle-Today")); - await expect( - canvas.getByRole("button", { name: "Collapse Today section" }), - ).toHaveAttribute("aria-expanded", "true"); - expect(canvas.getByText("Today section one")).toBeInTheDocument(); - expect(canvas.getByText("Today section two")).toBeInTheDocument(); - await userEvent.click( canvas.getByRole("button", { name: "Filter agents" }), ); await expect( await body.findByRole("menuitem", { name: /Archived/i }), ).toBeInTheDocument(); - await expect( - canvas.getByTestId("agents-section-toggle-Pinned"), - ).toHaveAttribute("aria-expanded", "true"); await userEvent.keyboard("{Escape}"); + await waitFor(() => { + expect( + body.queryByRole("menuitem", { name: /Archived/i }), + ).not.toBeInTheDocument(); + }); }, };