fix: fix flaky storybook test (#25272)

2026-09-24 15:04:27 +08:00 · 2026-05-13 16:08:18 +01:00
parent 5040ab6fca
commit 36200b625e
1 changed files with 108 additions and 77 deletions
@@ -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();
+		});
 	},
 };