fix: storybook test

apps/registry/package.json

@@ -21,7 +21,7 @@
 		"@types/node": "^22.10.2",
 		"shadcn": "2.4.0",
 		"tsx": "4.19.2",
-		"vitest": "^2.1.9",
+		"vitest": "3.1.1",
 		"http-server": "14.1.1",
 		"@fleek-platform/cli": "^3.8.2"
 	},

apps/registry/src/parser.ts

@@ -183,6 +183,12 @@ export const parseItem = async (
 	for (const node of sourceFile.getImportDeclarations()) {
 		const currentImport = node.getModuleSpecifier().getLiteralValue();
 
+		const isTypeOnly = node.isTypeOnly();
+
+		if (isTypeOnly) {
+			continue;
+		}
+
 		const {
 			packageName,
 			registryPath,

apps/storybook/package.json

@@ -11,7 +11,7 @@
 		"build": "storybook build",
 		"preview": "vite preview",
 		"test": "vitest",
-		"test:storybook-runner": "test-storybook",
+		"test:storybook-runner": "test-storybook --testTimeout=60000",
 		"config:setup": "node --experimental-json-modules ./src/scripts/setup.mjs",
 		"deploy:fleek": "fleek --debug sites deploy"
 	},
@@ -70,7 +70,7 @@
 		"@ucanto/interface": "^10.0.1",
 		"@ucanto/transport": "^9.1.1",
 		"@wagmi/connectors": "^5.7.12",
-		"@wagmi/core": "^2.16.7",
+		"@wagmi/core": "^2.13.8",
 		"@web3-storage/w3up-client": "^16.5.1",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
@@ -129,7 +129,7 @@
 		"typescript-eslint": "^8.0.1",
 		"vite": "^5.4.1",
 		"vite-plugin-node-polyfills": "^0.22.0",
-		"vitest": "^2.1.9",
-		"wagmi": "^2.14.16"
+		"vitest": "3.1.1",
+		"wagmi": "^2.12.16"
 	}
 }

apps/storybook/src/stories/account/Balance.stories.tsx

@@ -3,9 +3,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { BY_USER } from "@geist/domain/user.fixture";
 import { Balance } from "@geist/ui-react/components/account/balance";
 import { BY_CHAIN_ID, Token } from "@geist/ui-react/lib/token/config";
+import { expect } from "@storybook/test";
 import type { Address } from "viem";
 import { base, mainnet, optimism } from "viem/chains";
 import { withWagmiProvider } from "../decorators/wagmi";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Account/Balance",
@@ -21,17 +23,33 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+async function testBalanceDisplay(
+	canvasElement: HTMLElement,
+	tokenRegex: RegExp,
+) {
+	const { canvas } = await setupCanvas(canvasElement, 4000);
+
+	const balanceText = await canvas.findByText(tokenRegex);
+	expect(balanceText).toBeInTheDocument();
+}
+
 export const MainnetETH: Story = {
 	args: {
 		address: BY_USER.vitalik.address as Address,
 	},
+	play: async ({ canvasElement }) => {
+		await testBalanceDisplay(canvasElement, /ETH/);
+	},
 };
 
 export const BaseETH: Story = {
 	args: {
 		address: BY_USER.vitalik.address as Address,
 		chainId: base.id,
 	},
+	play: async ({ canvasElement }) => {
+		await testBalanceDisplay(canvasElement, /ETH/);
+	},
 };
 
 export const MainnetUSDC: Story = {
@@ -40,6 +58,9 @@ export const MainnetUSDC: Story = {
 		tokenAddress: BY_CHAIN_ID[mainnet.id][Token.USDC] as Address,
 		chainId: mainnet.id,
 	},
+	play: async ({ canvasElement }) => {
+		await testBalanceDisplay(canvasElement, /USDC/);
+	},
 };
 
 export const OptimismUSDC: Story = {
@@ -48,4 +69,7 @@ export const OptimismUSDC: Story = {
 		tokenAddress: BY_CHAIN_ID[optimism.id][Token.USDC] as Address,
 		chainId: optimism.id,
 	},
+	play: async ({ canvasElement }) => {
+		await testBalanceDisplay(canvasElement, /USDC/);
+	},
 };

apps/storybook/src/stories/attestations/UploadAttestation.stories.tsx

@@ -1,8 +1,8 @@
 import { UploadAttestation } from "@geist/ui-react/components/attestations/upload-attestation";
 import { getShortAddress } from "@geist/ui-react/lib/utils/address";
 import type { Meta, StoryObj } from "@storybook/react";
-import { injected } from "@wagmi/connectors";
 import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { injected } from "wagmi/connectors";
 import { Button } from "#components/ui/button";
 import { withToaster } from "../decorators/toaster";
 import { withWagmiProvider } from "../decorators/wagmi";

apps/storybook/src/stories/codec/CodecForm.stories.tsx

@@ -1,5 +1,7 @@
 import { CodecForm } from "@geist/ui-react/components/codec/CodecForm";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+import { setupCanvas } from "../utils/test-utils";
 
 import { map } from "nanostores";
 
@@ -17,13 +19,35 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+async function testCodecForm(canvasElement: any, expectedTexts: string[]) {
+	const { canvas } = await setupCanvas(canvasElement, 0);
+	const input = await canvas.getByRole("textbox");
+	await expect(input).toBeVisible();
+	await userEvent.type(input, "123abc");
+	await new Promise((resolve) => setTimeout(resolve, 1000));
+	await expect(canvas.getByText('{"message":"123abc"}')).toBeVisible();
+	await expect(canvas.getByText("codec: cid")).toBeVisible();
+	expectedTexts.forEach(async (text) => {
+		await expect(canvas.getByText(text)).toBeVisible();
+	});
+}
+
 export const Multibase64: Story = {
 	args: {
 		$codec: map({
 			input: "",
 			codec: "multibase64",
 		}),
 	},
+	play: async ({ canvasElement }) => {
+		await testCodecForm(canvasElement, [
+			"bagaaieramt5v6v252z63hzr2l7f37gwznp7s5ialbtvasyfno4iz3sbjkstq",
+			"codec: multibase64",
+			"mAYAEEiBk+19XXdZ9s+Y6X8u/mtlr/y6gCwzqCWCtdxGdyClUpw",
+			"codec: base64",
+			"AYAEEiCcptlVPp19Q9ncKA2+CSUrhHCKGAlJrVnYuV0NVfUE4w==",
+		]);
+	},
 };
 
 export const Multibase16: Story = {
@@ -33,6 +57,15 @@ export const Multibase16: Story = {
 			codec: "multibase16",
 		}),
 	},
+	play: async ({ canvasElement }) => {
+		await testCodecForm(canvasElement, [
+			"bagaaieramt5v6v252z63hzr2l7f37gwznp7s5ialbtvasyfno4iz3sbjkstq",
+			"codec: multibase16",
+			"f018004122064fb5f575dd67db3e63a5fcbbf9ad96bff2ea00b0cea0960ad77119dc82954a7",
+			"codec: base16",
+			"01800412209CA6D9553E9D7D43D9DC280DBE09252B84708A180949AD59D8B95D0D55F504E3",
+		]);
+	},
 };
 
 // TODO CID

apps/storybook/src/stories/decorators/wagmi.tsx

@@ -2,10 +2,11 @@ import { BY_USER, getRandomAccount } from "@geist/domain/user.fixture";
 import { WAGMI_CONFIG_PARAMS } from "@geist/ui-react/lib/utils/wagmi-config";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { mock } from "@wagmi/connectors";
+import type { MockParameters } from "@wagmi/connectors";
+
 import type { Hex } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 import {
-	type Config,
 	type CreateConfigParameters,
 	WagmiProvider,
 	createConfig,
@@ -26,10 +27,9 @@ const createMockConfig = (
 			...(wagmiConfigParams.connectors || []),
 			mock({
 				accounts: [account?.address],
-				features: {
-					defaultConnected: true,
-				},
-			}),
+				features: {},
+				defaultConnected: true,
+			} as MockParameters),
 		],
 	});
 	return {

apps/storybook/src/stories/identity/AddressBadge.stories.tsx

@@ -1,7 +1,9 @@
 import { faker } from "@faker-js/faker";
 import { AddressBadge } from "@geist/ui-react/components/identity/address-badge";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
 import type { Hex } from "viem";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Identity/AddressBadge",
@@ -19,11 +21,31 @@ export const Short: Story = {
 	args: {
 		address: faker.finance.ethereumAddress() as Hex,
 	},
+	play: async ({ canvasElement }) => {
+		const { canvas } = await setupCanvas(canvasElement);
+
+		const addressBadge = await canvas.findByText(
+			/^0x[a-fA-F0-9]{4}\.\.\.[a-fA-F0-9]{4}$/,
+		);
+		expect(addressBadge).toBeInTheDocument();
+
+		const tooltipTrigger = await canvas.findByTestId("tooltip-trigger");
+		expect(tooltipTrigger).toBeInTheDocument();
+	},
 };
 
 export const Full: Story = {
 	args: {
 		address: faker.finance.ethereumAddress() as Hex,
 		isFull: true,
 	},
+	play: async ({ canvasElement }) => {
+		const { canvas } = await setupCanvas(canvasElement);
+
+		const addressBadge = await canvas.findByText(/^0x[a-fA-F0-9]{40}$/);
+		expect(addressBadge).toBeInTheDocument();
+
+		const tooltipTrigger = await canvas.findByTestId("tooltip-trigger");
+		expect(tooltipTrigger).toBeInTheDocument();
+	},
 };

apps/storybook/src/stories/identity/Avatar.stories.tsx

@@ -1,10 +1,9 @@
 import { BY_USER } from "@geist/domain/user.fixture";
 import { Avatar } from "@geist/ui-react/components/identity/avatar";
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-	withQueryClientProvider,
-	withWagmiProvider,
-} from "../decorators/wagmi";
+import { expect } from "@storybook/test";
+import { withQueryClientProvider } from "../decorators/wagmi";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Identity/Avatar/Avatar",
@@ -15,16 +14,29 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const testAvatarRendering = async (canvasElement: HTMLElement) => {
+	const { canvas } = await setupCanvas(canvasElement, 6000);
+
+	const avatar = await canvas.findByRole("img");
+	expect(avatar).toBeInTheDocument();
+};
+
 export const Ens: Story = {
 	args: {
 		addressOrEns: BY_USER.vitalik.ens,
 	},
 	decorators: [withQueryClientProvider()],
+	play: async ({ canvasElement }) => {
+		await testAvatarRendering(canvasElement);
+	},
 };
 
 export const Address: Story = {
 	args: {
 		addressOrEns: BY_USER.vitalik.address,
 	},
 	decorators: [withQueryClientProvider()],
+	play: async ({ canvasElement }) => {
+		await testAvatarRendering(canvasElement);
+	},
 };

apps/storybook/src/stories/identity/AvatarWagmi.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { BY_USER } from "@geist/domain/user.fixture";
 import { AvatarWagmi } from "@geist/ui-react/components/identity/avatar-wagmi";
+import { expect, within } from "@storybook/test";
 import { withWagmiProvider } from "../decorators/wagmi";
 
 const meta = {
@@ -13,9 +14,22 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const testAvatarRendering = async (canvasElement: HTMLElement) => {
+	const canvas = within(canvasElement);
+
+	await new Promise((resolve) => setTimeout(resolve, 4000));
+
+	// Check if the avatar is displayed correctly
+	const avatar = await canvas.findByRole("img");
+	expect(avatar).toBeInTheDocument();
+};
+
 export const EnsWagmi: Story = {
 	args: {
 		ens: BY_USER.vitalik.ens,
 	},
 	decorators: [withWagmiProvider()],
+	play: async ({ canvasElement }) => {
+		await testAvatarRendering(canvasElement);
+	},
 };

apps/storybook/src/stories/identity/Name.stories.tsx

@@ -1,7 +1,9 @@
 import { BY_USER } from "@geist/domain/user.fixture";
 import { Name } from "@geist/ui-react/components/identity/name";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
 import { withQueryClientProvider } from "../decorators/wagmi";
+import { setupCanvas } from "../utils/test-utils";
 
 const meta = {
 	title: "Identity/Name/Name",
@@ -15,9 +17,20 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Helper function to test that the name is displayed correctly
+const testNameRendering = async (canvasElement: HTMLElement) => {
+	const { canvas } = await setupCanvas(canvasElement);
+
+	const name = await canvas.findByTestId("name");
+	expect(name).toBeInTheDocument();
+};
+
 export const Short: Story = {
 	args: {
 		addressOrEns: BY_USER.vitalik.address,
 	},
 	decorators: [withQueryClientProvider()],
+	play: async ({ canvasElement }) => {
+		await testNameRendering(canvasElement);
+	},
 };

apps/storybook/src/stories/identity/NameWagmi.stories.tsx

@@ -13,11 +13,24 @@ const meta = {
 } satisfies Meta<typeof NameWagmi>;
 
 export default meta;
+import { expect } from "@storybook/test";
+import { setupCanvas } from "../utils/test-utils";
+
 type Story = StoryObj<typeof meta>;
 
+const testNameRendering = async (canvasElement: HTMLElement) => {
+	const { canvas } = await setupCanvas(canvasElement);
+
+	const name = await canvas.findByTestId("name");
+	expect(name).toBeInTheDocument();
+};
+
 export const Short: Story = {
 	args: {
 		addressOrEns: BY_USER.vitalik.address,
 	},
 	decorators: [withWagmiProvider()],
+	play: async ({ canvasElement }) => {
+		await testNameRendering(canvasElement);
+	},
 };