test: storybook interaction test

apps/storybook/src/stories/transactions/TransactionTable.stories.ts

@@ -1,6 +1,8 @@
 import { TransactionTable } from "@geist/ui-react/components/transactions/transaction-table";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "@storybook/test";
 import { withWagmiProvider } from "../decorators/wagmi";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Transactions/TransactionTable",
@@ -15,12 +17,40 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const testTransactionTable = async (canvasElement: HTMLElement) => {
+	const { canvas } = await setupCanvas(canvasElement, 7000);
+
+	const headers = canvas.getAllByRole("columnheader");
+	expect(headers).toHaveLength(7);
+	expect(headers[0]).toHaveTextContent("Txn Hash");
+	expect(headers[1]).toHaveTextContent("From");
+	expect(headers[2]).toHaveTextContent("To");
+	expect(headers[3]).toHaveTextContent("Txn Type");
+	expect(headers[4]).toHaveTextContent("Value (ETH)");
+	expect(headers[5]).toHaveTextContent("Gas Used (ETH)");
+	expect(headers[6]).toHaveTextContent("Block Number");
+
+	const rows = canvas.getAllByRole("row");
+	expect(rows.length).toBeGreaterThan(1);
+
+	const firstDataRow = rows[1];
+	const cells = within(firstDataRow).getAllByRole("cell");
+	expect(cells).toHaveLength(7);
+	expect(cells[0]).toBeInTheDocument();
+	expect(cells[1]).toBeInTheDocument();
+	expect(cells[2]).toBeInTheDocument();
+	expect(cells[3]).toBeInTheDocument();
+};
+
 export const ContractCreationAndContractCall: Story = {
 	args: {
 		type: ["contract_creation", "contract_call"],
 		chainId: 1,
 	},
 	decorators: [withWagmiProvider()],
+	play: async ({ canvasElement }) => {
+		await testTransactionTable(canvasElement);
+	},
 };
 
 export const ContractCreationAndContractCallInOPMainnet: Story = {
@@ -29,4 +59,7 @@ export const ContractCreationAndContractCallInOPMainnet: Story = {
 		chainId: 10,
 	},
 	decorators: [withWagmiProvider()],
+	play: async ({ canvasElement }) => {
+		await testTransactionTable(canvasElement);
+	},
 };

apps/storybook/src/stories/transactions/TransactionTableWithDetails.stories.ts

@@ -6,7 +6,9 @@ import {
 } from "@geist/ui-react/lib/blockscout/data.fixture";
 import { Explorer } from "@geist/ui-react/lib/explorer/url";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
 import { withWagmiProvider } from "../decorators/wagmi";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Transactions/TransactionTableWithDetails",
@@ -24,10 +26,33 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const testTable = async (canvasElement: HTMLElement) => {
+	const { canvas } = await setupCanvas(canvasElement, 3000);
+
+	const table = await canvas.findByRole("table");
+	await expect(table).toBeInTheDocument();
+
+	const headers = await canvas.findAllByRole("columnheader");
+	expect(headers.length).toBe(7);
+	expect(headers[0]).toHaveTextContent("Txn Hash");
+	expect(headers[1]).toHaveTextContent("From");
+	expect(headers[2]).toHaveTextContent("To");
+	expect(headers[3]).toHaveTextContent("Txn Type");
+	expect(headers[4]).toHaveTextContent("Value (ETH)");
+	expect(headers[5]).toHaveTextContent("Gas Used (ETH)");
+	expect(headers[6]).toHaveTextContent("Block Number");
+
+	const rows = await canvas.findAllByRole("row");
+	expect(rows.length).toBeGreaterThan(1); // Includes header row
+};
+
 export const TransactionTableSome: Story = {
 	args: {
 		transactions: TXN_LIST.map((txn) => asTransactionMeta(txn)),
 	},
+	play: async ({ canvasElement }) => {
+		await testTable(canvasElement);
+	},
 };
 
 export const TransactionTableMany: Story = {
@@ -36,6 +61,9 @@ export const TransactionTableMany: Story = {
 			asTransactionMeta(txn),
 		),
 	},
+	play: async ({ canvasElement }) => {
+		await testTable(canvasElement);
+	},
 };
 
 export const TransactionTableWithBlockscoutExplorerLink: Story = {
@@ -46,6 +74,9 @@ export const TransactionTableWithBlockscoutExplorerLink: Story = {
 		explorer: Explorer.Blockscout,
 		chainId: 1,
 	},
+	play: async ({ canvasElement }) => {
+		await testTable(canvasElement);
+	},
 };
 
 export const TransactionTableWithBlockscoutExplorerLinkInOptimism: Story = {
@@ -56,4 +87,7 @@ export const TransactionTableWithBlockscoutExplorerLinkInOptimism: Story = {
 		explorer: Explorer.Blockscout,
 		chainId: 10,
 	},
+	play: async ({ canvasElement }) => {
+		await testTable(canvasElement);
+	},
 };