#168 Add e2e tests for home page (#169)

apps/web/e2e/pages/home.spec.ts

@@ -0,0 +1,85 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+});
+
+test("should display latest inputs section", async ({ page }) => {
+    // Find latest inputs section
+    const latestInputsSection = page.getByTestId("latest-inputs");
+
+    // Wait for the section to be visible
+    await expect(latestInputsSection).toBeVisible();
+
+    // Verify section title
+    await expect(latestInputsSection.getByText("Latest inputs")).toBeVisible();
+
+    // Verify that table with correct columns is visible
+    await expect(
+        latestInputsSection.getByRole("row", { name: "Address Age" }).first(),
+    ).toBeVisible();
+
+    // Find "View all inputs" link
+    const viewAllLink = latestInputsSection.getByText("View all inputs");
+    await expect(viewAllLink).toBeVisible();
+
+    // Click the link
+    await viewAllLink.click();
+
+    // Verify navigation to inputs page
+    await page.waitForURL("/inputs");
+});
+
+test("should display latest applications section", async ({ page }) => {
+    // Find latest applications section
+    const latestApplicationsSection = page.getByTestId("latest-applications");
+
+    // Wait for the section to be visible
+    await expect(latestApplicationsSection).toBeVisible();
+
+    // Verify section title
+    await expect(
+        latestApplicationsSection.getByText("Latest applications"),
+    ).toBeVisible();
+
+    // Verify that table with correct columns is visible
+    await expect(
+        latestApplicationsSection
+            .getByRole("row", { name: "Address Age" })
+            .first(),
+    ).toBeVisible();
+
+    // Find "View all applications" link
+    const viewAllLink = latestApplicationsSection.getByText(
+        "View all applications",
+    );
+    await expect(viewAllLink).toBeVisible();
+
+    // Click the link
+    await viewAllLink.click();
+
+    // Verify navigation to applications page
+    await page.waitForURL("/applications");
+});
+
+test("should display inputs summary", async ({ page }) => {
+    // Find entries summary section
+    const entriesSummarySection = page.getByTestId("entries-summary");
+
+    // Wait for the section to be visible
+    await expect(entriesSummarySection).toBeVisible();
+
+    // Verify section title
+    await expect(entriesSummarySection.getByText("Inputs")).toBeVisible();
+});
+
+test("should display applications summary", async ({ page }) => {
+    // Find entries summary section
+    const entriesSummarySection = page.getByTestId("entries-summary");
+
+    // Wait for the section to be visible
+    await expect(entriesSummarySection).toBeVisible();
+
+    // Verify section title
+    await expect(entriesSummarySection.getByText("Applications")).toBeVisible();
+});

apps/web/src/components/entriesSummary.tsx

@@ -25,6 +25,7 @@ const EntriesSummary: FC = () => {
             inputs={stats?.inputsConnection?.totalCount ?? 0}
             applications={stats?.applicationsConnection?.totalCount ?? 0}
             applicationsOwned={applicationsOwnedCount}
+            data-testid="entries-summary"
         />
     );
 };

apps/web/src/components/latestEntries.tsx

@@ -110,7 +110,11 @@ const LatestEntries: FC = () => {
 
     return (
         <Grid gutter="md">
-            <Grid.Col span={{ base: 12, md: 6 }} my="md">
+            <Grid.Col
+                span={{ base: 12, md: 6 }}
+                my="md"
+                data-testid="latest-inputs"
+            >
                 <LatestEntriesCard
                     title="Latest inputs"
                     Icon={TbInbox}
@@ -122,7 +126,11 @@ const LatestEntries: FC = () => {
                 />
             </Grid.Col>
 
-            <Grid.Col span={{ base: 12, md: 6 }} my="md">
+            <Grid.Col
+                span={{ base: 12, md: 6 }}
+                my="md"
+                data-testid="latest-applications"
+            >
                 <LatestEntriesCard
                     title="Latest applications"
                     Icon={TbApps}

packages/ui/src/Summary.tsx

@@ -1,24 +1,25 @@
 "use client";
-import { Grid } from "@mantine/core";
+import { Grid, GridProps } from "@mantine/core";
 import { FC } from "react";
 import { TbApps, TbInbox } from "react-icons/tb";
 import { useAccount } from "wagmi";
 import { SummaryCard } from "./SummaryCard";
 
-export type SummaryProps = {
+export interface SummaryProps extends GridProps {
     inputs: number;
     applications: number;
     applicationsOwned: number;
-};
+}
 
 export const Summary: FC<SummaryProps> = ({
     inputs,
     applications,
     applicationsOwned,
+    ...restProps
 }: SummaryProps) => {
     const { isConnected } = useAccount();
     return (
-        <Grid gutter="md">
+        <Grid gutter="md" {...restProps}>
             <Grid.Col span={{ base: 12, md: isConnected ? 4 : 6 }} my="md">
                 <SummaryCard title="Inputs" icon={TbInbox} value={inputs} />
             </Grid.Col>