From 5e26b14ea6a7c8dd2a69d76b9d3771ed2dca6c0f Mon Sep 17 00:00:00 2001 From: Neven Dyulgerov Date: Tue, 3 Dec 2024 00:19:27 +0200 Subject: [PATCH] #248 Fix e2e tests (#265) --- apps/web/e2e/pages/applicationSummary.spec.ts | 18 ++- ...{depositEther.spec.ts => metamask.spec.ts} | 132 ++++++++++++++++ .../web/e2e/transactions/rawInputForm.spec.ts | 146 ------------------ apps/web/package.json | 2 +- 4 files changed, 148 insertions(+), 150 deletions(-) rename apps/web/e2e/transactions/{depositEther.spec.ts => metamask.spec.ts} (52%) delete mode 100644 apps/web/e2e/transactions/rawInputForm.spec.ts diff --git a/apps/web/e2e/pages/applicationSummary.spec.ts b/apps/web/e2e/pages/applicationSummary.spec.ts index ad8476bcf..0863646f7 100644 --- 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/apps/web/e2e/transactions/depositEther.spec.ts b/apps/web/e2e/transactions/metamask.spec.ts similarity index 52% rename from apps/web/e2e/transactions/depositEther.spec.ts rename to apps/web/e2e/transactions/metamask.spec.ts index df321e5a7..783a5f841 100644 --- a/apps/web/e2e/transactions/depositEther.spec.ts +++ b/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 deleted file mode 100644 index 1b96cb284..000000000 --- a/apps/web/e2e/transactions/rawInputForm.spec.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { expect } from "@playwright/test"; -import { test } from "../fixtures/metamask"; -import * as metamask from "@synthetixio/synpress/commands/metamask"; - -test.describe.configure({ - mode: "serial", - timeout: 120000, -}); - -test.describe.serial("Raw Input deposit form", () => { - test.afterEach(async ({ context }) => { - if (context) { - await context.close(); - } - }); - - test("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("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("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/package.json b/apps/web/package.json index e4c83d4be..f2f202ede 100644 --- 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" },