add: story component test

.github/workflows/storybook.yml

@@ -1,4 +1,4 @@
-name: dDevKit Components
+name: dDevKit Components Storybook
 
 on:
   workflow_dispatch:
@@ -38,6 +38,15 @@ jobs:
           name: storybook-build
           path: apps/storybook/storybook-static
 
+      - name: Install Playwright
+        run: pnpm dlx playwright install --with-deps
+
+      - name: Serve Storybook and run tests
+        run: |
+          pnpm dlx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "pnpm dlx http-server apps/storybook/storybook-static --port 6006 --silent" \
+            "pnpm dlx wait-on tcp:127.0.0.1:6006 && pnpm --filter @geist/storybook test:storybook-runner"
+
       # smoke test, disabled for now
       # - name: Build gql
       #   run:  pnpm --filter graphql build:gql

apps/storybook/package.json

@@ -11,6 +11,7 @@
 		"build": "storybook build",
 		"preview": "vite preview",
 		"test": "vitest",
+		"test:storybook-runner": "test-storybook",
 		"config:setup": "node --experimental-json-modules ./src/scripts/setup.mjs",
 		"deploy:fleek": "fleek --debug sites deploy"
 	},
@@ -108,6 +109,7 @@
 		"@storybook/addon-links": "^8.3.4",
 		"@storybook/addon-onboarding": "^8.3.4",
 		"@storybook/addon-themes": "^8.3.4",
+		"@storybook/test-runner": "^0.22.0",
 		"@storybook/blocks": "^8.3.4",
 		"@storybook/react": "^8.3.4",
 		"@storybook/react-vite": "^8.3.4",

apps/storybook/src/stories/token/TokenPriceChart.stories.tsx

@@ -1,6 +1,7 @@
 import { TokenPriceChart } from "@geist/ui-react/components/token/token-price-chart";
 import { BY_CHAIN_ID, Token } from "@geist/ui-react/lib/token/config";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import { mainnet } from "viem/chains";
 import { withWagmiProvider } from "#stories/decorators/wagmi.tsx";
 
@@ -31,4 +32,26 @@ export const StETH: Story = {
 			},
 		],
 	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const chart = await canvas.findByTestId(
+			"token-price-chart-with-feed",
+			undefined,
+			{
+				timeout: 2000,
+			},
+		);
+
+		await expect(chart).toBeInTheDocument();
+		await userEvent.hover(chart);
+
+		// broken at CI, TODO
+
+		// const label = await canvas.findByText("stETH", undefined, {
+		// 	timeout: 5000,
+		// });
+
+		// await expect(label).toBeInTheDocument();
+	},
 };

apps/storybook/src/stories/transactions/TransactionCard.stories.tsx

@@ -1,13 +1,24 @@
 import { TRANSACTION } from "@geist/domain/user.fixture";
 import { TransactionCard } from "@geist/ui-react/components/transactions/transaction-card";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "@storybook/test";
 import { mainnet } from "viem/chains";
 import { withWagmiProvider } from "../decorators/wagmi";
 
 const meta = {
 	title: "Transactions/TransactionCard",
 	component: TransactionCard,
 	args: {},
+	play: async ({ canvasElement }) => {
+		console.log("canvasElement", canvasElement);
+		const canvas = within(canvasElement);
+
+		const cardTitle = await canvas.findByText("Transaction", undefined, {
+			timeout: 2000,
+		});
+
+		await expect(cardTitle).toBeInTheDocument();
+	},
 } satisfies Meta<typeof TransactionCard>;
 
 export default meta;

packages/ui-react/src/components/token/token-balance-chart.tsx

@@ -121,7 +121,7 @@ export const TokenBalanceChart = ({
 		};
 	});
 	return (
-		<div className="w-full h-full]">
+		<div className="w-full h-full">
 			<ChartContainer
 				config={chartConfig}
 				style={{ height: "600px", width: "600px" }}

packages/ui-react/src/components/token/token-price-chart-with-feed.tsx

@@ -79,7 +79,7 @@ export const TokenPriceChartWithFeed = ({
 	) satisfies ChartConfig;
 
 	return (
-		<div className="w-full h-full]">
+		<div className="w-full h-full" data-testid="token-price-chart-with-feed">
 			<ChartContainer
 				config={chartConfig}
 				style={{ height: "600px", width: "600px" }}