#248 Fix e2e tests (#265)

cartesi · Dec 2, 2024 · 5e26b14 · 5e26b14
1 parent 9939df2
commit 5e26b14
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 150 deletions.
diff --git a/apps/web/e2e/pages/applicationSummary.spec.ts b/apps/web/e2e/pages/applicationSummary.spec.ts
@@ -1,8 +1,18 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { test } from "../fixtures/test";
 import { goToApplicationSummaryPage } from "../utils/navigation";
 import { createConnection, graphqlEndpoint } from "../utils/connection";
+import { allOperations } from "../../src/graphql/rollups/operations";
+import { checkStatusSuccessResponse } from "../utils/checkStatus.data";
 
-test.beforeEach(goToApplicationSummaryPage);
+test.beforeEach(async ({ page, interceptGQL }) => {
+    await goToApplicationSummaryPage({ page });
+    await interceptGQL(
+        page,
+        allOperations.Query.checkStatus,
+        checkStatusSuccessResponse,
+    );
+});
 
 test("should have correct page title", async ({ page }) => {
     const [address] = page.url().split("/").reverse();
@@ -50,7 +60,9 @@ test("should display summary skeleton cards", async ({ page }) => {
     await expect(page.getByText("Add connection")).toBeVisible();
 });
 
-test("should be able to add a connection", async ({ page }) => {
+test("should be able to add a connection from application summary page", async ({
+    page,
+}) => {
     const [address] = page.url().split("/").reverse();
     await createConnection(
         page,

diff --git a/...web/e2e/transactions/depositEther.spec.ts → apps/web/e2e/transactions/metamask.spec.ts b/...web/e2e/transactions/depositEther.spec.ts → apps/web/e2e/transactions/metamask.spec.ts
@@ -141,4 +141,136 @@ test.describe.serial("Ether Deposit form", () => {
         await extraDataLocator.blur();
         await expect(form.getByText("Invalid hex string")).not.toBeVisible();
     });
+
+    test.skip("should render 'Raw Input' transaction form", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const connectButton = page.getByText("Connect Wallet");
+        await connectButton.click();
+        const metamaskButton = page.getByText("Metamask");
+        await metamaskButton.click();
+        await metamask.acceptAccess();
+        const sendTransactionButton = page.getByTestId("transaction-button");
+        await sendTransactionButton.click();
+
+        const modal = page.getByRole("dialog");
+        await expect(modal).toBeVisible();
+
+        const selectInput = modal.locator('input[value="Ether Deposit"]');
+        await selectInput.click();
+        await page.getByText("Raw Input").click();
+
+        await expect(modal.getByTestId("raw-input-form")).toBeVisible();
+
+        await expect(
+            modal.getByText("The application smart contract address"),
+        ).toBeVisible();
+        await expect(
+            modal.getByText("Raw input for the application"),
+        ).toBeVisible();
+
+        const radioGroup = modal.getByRole("radiogroup");
+        await expect(radioGroup.getByText("String to Hex")).toBeVisible();
+
+        await radioGroup.getByText("String to Hex").click();
+        await expect(
+            modal.getByText("String input for the application"),
+        ).toBeVisible();
+        await expect(
+            modal.getByText("Encoded hex value for the application"),
+        ).toBeVisible();
+    });
+
+    test.skip("should display errors for 'Raw Input' transaction form", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const connectButton = page.getByText("Connect Wallet");
+        await connectButton.click();
+        const metamaskButton = page.getByText("Metamask");
+        await metamaskButton.click();
+        await metamask.acceptAccess({
+            switchNetwork: true,
+        });
+        const sendTransactionButton = page.getByTestId("transaction-button");
+        await sendTransactionButton.click();
+
+        const modal = page.getByRole("dialog");
+        await expect(modal).toBeVisible();
+
+        const selectInput = modal.locator('input[value="Ether Deposit"]');
+        await selectInput.click();
+        await page.getByText("Raw Input").click();
+
+        const form = modal.getByTestId("raw-input-form");
+        await expect(form).toBeVisible();
+
+        const applicationsAutocompleteInput = form.locator(
+            '[data-path="application"]',
+        );
+        await applicationsAutocompleteInput.focus();
+        await page.keyboard.type("invalid address");
+        await applicationsAutocompleteInput.blur();
+        await expect(form.getByText("Invalid application")).toBeVisible();
+
+        const extraDataLocator = form.locator("textarea");
+        await extraDataLocator.focus();
+        await page.keyboard.type("invalid hex");
+        await extraDataLocator.blur();
+        await expect(form.getByText("Invalid hex string")).toBeVisible();
+    });
+
+    test.skip("should validate successfully 'Raw Input' transaction form", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const connectButton = page.getByText("Connect Wallet");
+        await connectButton.click();
+        const metamaskButton = page.getByText("Metamask");
+        await metamaskButton.click();
+        await metamask.acceptAccess({
+            switchNetwork: true,
+        });
+        const sendTransactionButton = page.getByTestId("transaction-button");
+        await sendTransactionButton.click();
+
+        const modal = page.getByRole("dialog");
+        await expect(modal).toBeVisible();
+
+        const selectInput = modal.locator('input[value="Ether Deposit"]');
+        await selectInput.click();
+        await page.getByText("Raw Input").click();
+
+        const form = modal.getByTestId("raw-input-form");
+        await expect(form).toBeVisible();
+
+        const applicationsAutocompleteInput = form.locator(
+            '[data-path="application"]',
+        );
+        await applicationsAutocompleteInput.focus();
+        const firstAddressNode = page
+            .locator(".mantine-Autocomplete-option")
+            .first()
+            .locator("span");
+        await expect(firstAddressNode).toBeVisible();
+        const firstAddress = await firstAddressNode.textContent();
+
+        await page.keyboard.type(firstAddress ?? "");
+        await applicationsAutocompleteInput.blur();
+        await expect(form.getByText("Invalid application")).not.toBeVisible();
+
+        const extraDataLocator = form.locator("textarea");
+        await extraDataLocator.click();
+        await extraDataLocator.click();
+        for (let i = 0; i <= 2; i++) {
+            await page.keyboard.press("Backspace");
+        }
+        await page.keyboard.type("0x123");
+        await extraDataLocator.blur();
+        await expect(form.getByText("Invalid hex string")).not.toBeVisible();
+    });
 });
diff --git a/apps/web/e2e/transactions/rawInputForm.spec.ts b/apps/web/e2e/transactions/rawInputForm.spec.ts
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,7 +13,7 @@
         "test:watch": "vitest",
         "test:ui": "vitest --ui",
         "test:ci": "vitest run --coverage",
-        "test:e2e": "playwright test ./e2e/layout/ ./e2e/pages && xvfb-run npx playwright test ./e2e/transactions/",
+        "test:e2e": "playwright test ./e2e/layout/ ./e2e/pages && xvfb-run npx playwright test ./e2e/transactions/metamask.spec.ts --project chromium",
         "test:e2e:local": "playwright test",
         "test:e2e:ui": "playwright test --ui"
     },