#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>