Feat: Add test framework to web app

apps/web/package.json

@@ -8,7 +8,10 @@
         "codegen": "dotenv -e .env -c -- graphql-codegen",
         "dev": "next dev",
         "start": "next start",
-        "lint": "next lint"
+        "lint": "next lint",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:ci": "vitest run --coverage"
     },
     "dependencies": {
         "@cartesi/rollups-explorer-ui": "*",
@@ -48,19 +51,25 @@
         "@graphql-codegen/typescript-urql": "^4",
         "@graphql-typed-document-node/core": "^3",
         "@sunodo/wagmi-plugin-hardhat-deploy": "^0.2",
+        "@testing-library/jest-dom": "^6.1.3",
+        "@testing-library/react": "^14.0.0",
         "@types/node": "^20",
         "@types/ramda": "^0.29.3",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@vitejs/plugin-react": "^4.1.0",
+        "@vitest/coverage-v8": "0.34.2",
         "@wagmi/cli": "^1",
         "dotenv-cli": "7.3.0",
         "eslint": "^8",
         "eslint-config-cartesi": "*",
+        "jsdom": "22.1.0",
         "npm-run-all": "^4",
         "postcss": "^8",
         "postcss-preset-mantine": "^1.6",
         "postcss-simple-vars": "^7",
         "ts-node": "^10",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "0.34.2"
     }
 }

apps/web/test/components/address.test.tsx

@@ -0,0 +1,53 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { describe, it } from "vitest";
+import Address from "../../src/components/address";
+import withMantineTheme from "../utils/WithMantineTheme";
+
+const AddressE = withMantineTheme(Address);
+const portalAddr = "0x9C21AEb2093C32DDbC53eEF24B873BDCd1aDa1DB";
+const unknowAddr = "0x775c80fd1DE1b466d7eB611b45067c4394247274";
+
+describe("Address Component", () => {
+    afterEach(() => cleanup());
+
+    it("should display the name when address is from ERC20Portal", () => {
+        render(<AddressE value={portalAddr} />);
+
+        expect(screen.getByText("ERC20Portal")).toBeInTheDocument();
+    });
+
+    it("should display the full address when is not known address", () => {
+        render(<AddressE value={unknowAddr} />);
+
+        expect(screen.getByText(unknowAddr)).toBeInTheDocument();
+    });
+
+    it("should display a shorten version of the address for not known address", () => {
+        render(<AddressE value={unknowAddr} shorten />);
+
+        expect(screen.getByText("0x775c80...247274")).toBeInTheDocument();
+    });
+
+    it("should display jazzicon when enabled", () => {
+        const { container } = render(<AddressE value={portalAddr} icon />);
+
+        const jazzEls = container.querySelectorAll(".paper");
+        expect(jazzEls.length).toEqual(1);
+        expect(jazzEls[0].querySelector("svg")).toBeInTheDocument();
+    });
+
+    it("should wrap the address text with a link to the correct place", () => {
+        const { container } = render(
+            <AddressE
+                value={portalAddr}
+                href={`https://etherscan.io/address/${portalAddr}`}
+            />,
+        );
+
+        expect(screen.getByRole("link")).toBeInTheDocument();
+        expect(screen.getByRole("link")).toHaveProperty(
+            "href",
+            `https://etherscan.io/address/${portalAddr}`,
+        );
+    });
+});

apps/web/test/utils/WithMantineTheme.tsx

@@ -0,0 +1,19 @@
+import { MantineProvider, createTheme } from "@mantine/core";
+import { FC } from "react";
+
+const theme = createTheme({
+    fontFamily: "Open Sans, sans-serif",
+    primaryColor: "cyan",
+});
+
+export const withMantineTheme = <T,>(Component: FC<T>): FC<T> => {
+    const NewComp: FC<T> = (props: T) => (
+        <MantineProvider theme={theme}>{Component(props)}</MantineProvider>
+    );
+
+    NewComp.displayName = Component.displayName;
+
+    return NewComp;
+};
+
+export default withMantineTheme;

apps/web/tsconfig.json

@@ -1,14 +1,16 @@
 {
     "extends": "@cartesi/tsconfig/nextjs.json",
     "compilerOptions": {
-        "plugins": [{ "name": "next" }]
+        "plugins": [{ "name": "next" }],
+        "types": ["vitest/globals"]
     },
     "include": [
         "next-env.d.ts",
         "**/*.ts",
         "**/*.tsx",
         ".next/types/**/*.ts",
-        "postcss.config.js"
+        "postcss.config.js",
+        "./vitest-setup.ts"
     ],
     "exclude": ["node_modules"]
 }

apps/web/vitest-setup.ts

@@ -0,0 +1,29 @@
+import { Globals } from "@react-spring/web";
+import "@testing-library/jest-dom/vitest";
+import { beforeAll, vi } from "vitest";
+
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+}));
+
+beforeAll(() => {
+    Globals.assign({
+        skipAnimation: true,
+    });
+});

apps/web/vitest.config.mts

@@ -0,0 +1,11 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        globals: true,
+        environment: "jsdom",
+        setupFiles: "vitest-setup.ts",
+    },
+});

package.json

@@ -13,8 +13,8 @@
         "clean": "turbo run clean && rm -rf node_modules",
         "format:check": "prettier \"**/*.{ts,tsx}\" --check",
         "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-        "test" : "turbo run test",
-        "test:ci" : "turbo run test:ci",
+        "test": "turbo run test",
+        "test:ci": "turbo run test:ci",
         "changeset": "changeset",
         "version-packages": "changeset version",
         "release": "turbo run build && changeset publish"

packages/rollups-wagmi/package.json

@@ -2,8 +2,9 @@
     "name": "@cartesi/rollups-wagmi",
     "version": "0.0.0",
     "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
+    "type": "module",
     "sideEffects": false,
     "license": "Apache-2.0",
     "files": [
@@ -13,7 +14,7 @@
         "build": "tsup",
         "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
         "codegen": "wagmi generate",
-        "dev": "tsup --watch"        
+        "dev": "tsup --watch"
     },
     "dependencies": {
         "wagmi": "^1"

packages/ui/src/InputDetails/InputDetailsContext.tsx

@@ -63,6 +63,7 @@ const InputDetailsContext = createContext<ContextProps>({
 
 const getOnlySupportedContent = (dict: OptionalContents) => {
     const supportedTypes = map(prop("type"), SUPPORTED_TABS);
+    //@ts-ignore
     return pick(supportedTypes, dict);
 };
 
@@ -88,10 +89,12 @@ const useSelector: UseSelector = (predicate) => {
     return [result];
 };
 
-const availableContentAsSet = pipe(
+type AvailableContentAsSet = (value: State) => Set<SupportedContent>;
+
+const availableContentAsSet: AvailableContentAsSet = pipe(
     prop("availableContent"),
     keys,
-    memoizeWith(join("/"), (keys) => new Set(keys)),
+    memoizeWith(join("/"), (keys) => new Set(keys as SupportedContent[])),
 );
 
 export const useDefinedContentSet = () => {