feat: Wrap Cartesi logo in a link redirecting to home page (#60)

apps/web/src/app/shell.tsx

@@ -96,24 +96,26 @@ const Shell: FC<{ children: ReactNode }> = ({ children }) => {
                         size="sm"
                     />
                     <Group justify="space-between" style={{ flex: 1 }}>
-                        <CartesiLogo height={40} />
+                        <Link href="/">
+                            <CartesiLogo height={40} />
+                        </Link>
                         <Group ml="xl" gap="md" visibleFrom="sm">
-                            <Link href="/">
-                                <Button
-                                    variant="subtle"
-                                    leftSection={<TbHome />}
-                                >
-                                    Home
-                                </Button>
-                            </Link>
-                            <Link href="/applications">
-                                <Button
-                                    variant="subtle"
-                                    leftSection={<TbApps />}
-                                >
-                                    Applications
-                                </Button>
-                            </Link>
+                            <Button
+                                component={Link}
+                                href="/"
+                                variant="subtle"
+                                leftSection={<TbHome />}
+                            >
+                                Home
+                            </Button>
+                            <Button
+                                component={Link}
+                                href="/applications"
+                                variant="subtle"
+                                leftSection={<TbApps />}
+                            >
+                                Applications
+                            </Button>
                             <Button
                                 variant="subtle"
                                 leftSection={<TbPigMoney />}

apps/web/test/app/shell.test.tsx

@@ -0,0 +1,123 @@
+import { render } from "@testing-library/react";
+import { afterAll, describe, it } from "vitest";
+import withMantineTheme from "../utils/WithMantineTheme";
+import Shell from "../../src/app/shell";
+
+const Component = withMantineTheme(Shell);
+
+vi.mock("../../src/graphql", async () => {
+    return {
+        useApplicationsQuery: () => [{ data: {}, fetching: false }],
+        useTokensQuery: () => [{ data: {}, fetching: false }],
+    };
+});
+
+vi.mock("@cartesi/rollups-wagmi", async () => {
+    return {
+        usePrepareInputBoxAddInput: () => ({
+            config: {},
+        }),
+        useInputBoxAddInput: () => ({
+            data: {},
+            wait: vi.fn(),
+        }),
+    };
+});
+
+vi.mock("viem", async () => {
+    const actual = await vi.importActual("viem");
+    return {
+        ...(actual as any),
+        getAddress: (address: string) => address,
+    };
+});
+
+vi.mock("@rainbow-me/rainbowkit", async () => {
+    return {
+        ConnectButton: () => <></>,
+    };
+});
+
+vi.mock("@cartesi/rollups-wagmi", async () => {
+    const actual = await vi.importActual("@cartesi/rollups-wagmi");
+    return {
+        ...(actual as any),
+        usePrepareErc20Approve: () => ({
+            config: {},
+        }),
+        useErc20Approve: () => ({
+            data: {},
+            wait: vi.fn(),
+        }),
+        usePrepareErc20PortalDepositErc20Tokens: () => ({
+            config: {},
+        }),
+        useErc20PortalDepositErc20Tokens: () => ({
+            data: {},
+            wait: vi.fn(),
+        }),
+        usePrepareEtherPortalDepositEther: () => ({
+            config: {},
+        }),
+        useEtherPortalDepositEther: () => ({
+            data: {},
+            wait: vi.fn(),
+        }),
+    };
+});
+
+vi.mock("wagmi", async () => {
+    return {
+        useContractReads: () => ({
+            isLoading: false,
+            isSuccess: true,
+            data: [
+                {
+                    result: undefined,
+                    error: undefined,
+                },
+                {
+                    result: undefined,
+                    error: undefined,
+                },
+                {
+                    result: undefined,
+                    error: undefined,
+                },
+                {
+                    result: undefined,
+                    error: undefined,
+                },
+            ],
+        }),
+        useAccount: () => ({
+            address: "0x8FD78976f8955D13bAA4fC99043208F4EC020D7E",
+        }),
+        usePrepareContractWrite: () => ({}),
+        useWaitForTransaction: () => ({}),
+        useContractWrite: () => ({}),
+        useNetwork: () => ({
+            chain: {
+                nativeCurrency: {
+                    decimals: 18,
+                },
+            },
+        }),
+    };
+});
+
+describe("Shell component", () => {
+    afterAll(() => {
+        vi.restoreAllMocks();
+    });
+
+    describe("Cartesi logo", () => {
+        it("should be wrapped in a anchor element with href to index route", () => {
+            const { container } = render(<Component>Children</Component>);
+            const logo = container.querySelector("svg") as SVGSVGElement;
+            const logoLink = logo.closest("a") as HTMLAnchorElement;
+
+            expect(logoLink.getAttribute("href")).toBe("/");
+        });
+    });
+});