#189 Add e2e tests for application's summary page (#217)

.github/workflows/e2e.yml

@@ -32,4 +32,4 @@ jobs:
             - name: Update check status to the outcome
               run: yarn node reportGitHubCheckStatus.mjs "End-to-end (${{ github.event.deployment_status.environment }})" ${{ github.sha }} ${{ steps.e2e.outcome }}
               env:
-                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+import { goToApplicationSummaryPage } from "../utils/navigation";
+import { createConnection, graphqlEndpoint } from "../utils/connection";
+
+test.beforeEach(goToApplicationSummaryPage);
+
+test("should have correct page title", async ({ page }) => {
+    const [address] = page.url().split("/").reverse();
+    await expect(page).toHaveTitle(`Application ${address} | CartesiScan`);
+});
+
+test("should have correct title", async ({ page }) => {
+    const title = page.getByRole("heading", { name: "Summary" });
+    await expect(title.first()).toBeVisible();
+});
+
+test("should display latest inputs table", async ({ page }) => {
+    await expect(
+        page.getByRole("row", { name: "From Method Age" }),
+    ).toBeVisible();
+    await expect(page.getByRole("row")).toHaveCount(7);
+});
+
+test("should toggle date column", async ({ page }) => {
+    const ageHeaderColumn = page.getByText("Age");
+    await ageHeaderColumn.click();
+
+    await expect(
+        page.getByRole("row", {
+            name: "From Method Timestamp (UTC)",
+        }),
+    ).toBeVisible();
+
+    const timestampHeaderColumn = page.getByText("Timestamp (UTC)");
+    await timestampHeaderColumn.click();
+
+    await expect(
+        page.getByRole("row", { name: "From Method Age" }),
+    ).toBeVisible();
+});
+
+test("should navigate to application inputs page", async ({ page }) => {
+    const [address] = page.url().split("/").reverse();
+    await page.getByText("View inputs").click();
+    await page.waitForURL(`/applications/${address}/inputs`);
+});
+
+test("should display summary skeleton cards", async ({ page }) => {
+    await expect(page.getByTestId("skeleton")).toBeVisible();
+    await expect(page.getByText("Add connection")).toBeVisible();
+});
+
+test("should be able to add a connection", async ({ page }) => {
+    const [address] = page.url().split("/").reverse();
+    await createConnection(
+        page,
+        address as `0x${string}`,
+        graphqlEndpoint,
+        false,
+    );
+    await expect(page.getByText("Notices")).toBeVisible();
+    await expect(page.getByText("Vouchers")).toBeVisible();
+    await expect(page.getByText("Reports")).toBeVisible();
+});

apps/web/e2e/utils/connection.ts

@@ -1,10 +1,13 @@
 import { expect, Page } from "@playwright/test";
 import { Address } from "viem";
 
+export const graphqlEndpoint = "https://drawingcanvas.fly.dev/graphql";
+
 export const createConnection = async (
     page: Page,
     address: Address,
-    url = "https://rollups-mocked.calls.to/graphql",
+    url = graphqlEndpoint,
+    shouldTypeAddress = true,
 ) => {
     // Find and click the button for displaying the connection modal
     const button = page.getByTestId("add-connection");
@@ -14,9 +17,11 @@ export const createConnection = async (
     await expect(page.getByText("Create App Connection")).toBeVisible();
 
     // Fill in the address
-    const addressInput = await page.getByTestId("connection-address");
-    await addressInput.focus();
-    await page.keyboard.type(address);
+    if (shouldTypeAddress) {
+        const addressInput = await page.getByTestId("connection-address");
+        await addressInput.focus();
+        await page.keyboard.type(address);
+    }
 
     // Fill in the url
     const urlInput = await page.getByTestId("connection-url");

apps/web/e2e/utils/navigation.ts

@@ -20,3 +20,24 @@ export const goToApplicationInputsPage = async ({ page }: { page: Page }) => {
     // navigate to the href
     await page.goto(href);
 };
+
+export const goToApplicationSummaryPage = async ({ page }: { page: Page }) => {
+    // Go to applications page
+    await page.goto("/applications");
+
+    // Wait for applications data to be loaded
+    await expect(page.getByTestId("applications-spinner")).not.toBeVisible();
+
+    // Get the applications' links
+    const applicationInputsLinks = page
+        .getByTestId("applications-table")
+        .getByTestId("applications-summary-link");
+
+    // Get the href attribute of the first link (this is the link to that application's inputs page)
+    const href = (await applicationInputsLinks
+        .first()
+        .getAttribute("href")) as string;
+
+    // navigate to the href
+    await page.goto(href);
+};

apps/web/src/components/applications/applicationSummary.tsx

@@ -93,6 +93,7 @@ const ApplicationSummary: FC<ApplicationSummaryProps> = ({ applicationId }) => {
                             tt="uppercase"
                             mx={6}
                             fullWidth={isSmallDevice}
+                            data-testid="add-connection"
                             onClick={() =>
                                 showConnectionModal(applicationId as Address)
                             }

reportGitHubCheckStatus.mjs

@@ -1,5 +1,5 @@
-import { createActionAuth } from '@octokit/auth-action';
-import { Octokit } from '@octokit/rest';
+import { createActionAuth } from "@octokit/auth-action";
+import { Octokit } from "@octokit/rest";
 
 async function main() {
     const [context, sha, state] = process.argv.slice(2);
@@ -10,12 +10,12 @@ async function main() {
     });
 
     await octokit.rest.repos.createCommitStatus({
-        owner: 'cartesi',
-        repo: 'rollups-explorer',
+        owner: "cartesi",
+        repo: "rollups-explorer",
         context,
         sha,
         state,
     });
 }
 
-await main();
+await main();