6A: Add/Refactor tests for mobile accessibility

tests/govtool-frontend/playwright/lib/constants/environments.ts

@@ -1,6 +1,6 @@
 const environments = {
-  frontendUrl: process.env.HOST_URL || "http://localhost:5173",
-  apiUrl: `${process.env.HOST_URL}/api` || "http://localhost:9999",
+  frontendUrl: process.env.HOST_URL || "http://localhost:8080",
+  apiUrl: `${process.env.HOST_URL}/api` || "http://localhost:8080/api",
   docsUrl: process.env.DOCS_URL || "https://docs.sanchogov.tools",
   networkId: parseInt(process.env.NETWORK_ID) || 0,
   oneTimeWalletSetup: process.env.ONE_TIME_WALLET_SETUP === "true" || false,

tests/govtool-frontend/playwright/lib/datafactory/createAuth.ts

@@ -3,7 +3,7 @@
 import { importWallet } from "@fixtures/importWallet";
 import { ShelleyWallet } from "@helpers/crypto";
 import LoginPage from "@pages/loginPage";
-import { Page, expect } from "@playwright/test";
+import { Page } from "@playwright/test";
 
 const tempDRepAuth = ".auth/tempDRepAuth.json";
 const tempUserAuth = ".auth/tempUserAuth.json";
@@ -14,7 +14,7 @@ export async function createTempDRepAuth(page: Page, wallet: ShelleyWallet) {
 
   const loginPage = new LoginPage(page);
   await loginPage.login();
-  await expect(page.getByTestId("disconnect-button")).toBeVisible();
+  await loginPage.isLoggedIn();
 
   await page.context().storageState({ path: tempDRepAuth });
   return tempDRepAuth;
@@ -28,7 +28,7 @@ export async function createTempAdaHolderAuth(
 
   const loginPage = new LoginPage(page);
   await loginPage.login();
-  await expect(page.getByTestId("disconnect-button")).toBeVisible();
+  await loginPage.isLoggedIn();
 
   await page.context().storageState({ path: tempAdaHolderAuth });
   return tempAdaHolderAuth;
@@ -37,7 +37,7 @@ export async function createTempAdaHolderAuth(
 export async function createTempUserAuth(page: Page) {
   const loginPage = new LoginPage(page);
   await loginPage.login();
-  await expect(page.getByTestId("disconnect-button")).toBeVisible();
+  await loginPage.isLoggedIn();
 
   await page.context().storageState({ path: tempUserAuth });
   return tempUserAuth;

tests/govtool-frontend/playwright/lib/helpers/mobile.ts

@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+
+export function isMobile(page: Page) {
+  const { width } = page.viewportSize();
+  if (width <= 414) return true;
+
+  return false;
+}
+
+export async function openDrawer(page: Page) {
+  await page.getByRole("img", { name: "drawer-icon" }).click(); //BUG testId
+}
+
+export async function openDrawerLoggedIn(page: Page) {
+  await page.getByTestId("open-drawer-button").click();
+}

tests/govtool-frontend/playwright/lib/pages/loginPage.ts

@@ -2,6 +2,7 @@ import {
   CIP30Instance,
   Cip95Instance,
 } from "@cardanoapi/cardano-test-wallet/types";
+import { isMobile, openDrawer, openDrawerLoggedIn } from "@helpers/mobile";
 import { Page, expect } from "@playwright/test";
 
 export default class LoginPage {
@@ -22,7 +23,14 @@ export default class LoginPage {
   async login() {
     await this.goto();
 
-    await this.connectWalletBtn.click();
+    if (isMobile(this.page)) {
+      await openDrawer(this.page);
+      await this.page
+        .getByRole("button", { name: "Connect your wallet" }) // BUG testId should be same as connect-wallet-button
+        .click();
+    } else {
+      await this.connectWalletBtn.click();
+    }
     await this.demosWalletBtn.click({ force: true });
     await this.acceptSanchoNetInfoBtn.click({ force: true });
 
@@ -53,10 +61,16 @@ export default class LoginPage {
   }
 
   async logout() {
+    if (isMobile(this.page)) {
+      await openDrawerLoggedIn(this.page);
+    }
     await this.disconnectWalletBtn.click();
   }
 
   async isLoggedIn() {
+    if (isMobile(this.page)) {
+      await openDrawerLoggedIn(this.page);
+    }
     await expect(this.disconnectWalletBtn).toBeVisible();
   }
 }

tests/govtool-frontend/playwright/playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   /*use Allure Playwright's testPlanFilter() to determine the grep parameter*/
   grep: testPlanFilter(),
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? [["line"], ["allure-playwright"]] : [["line"]],
+  reporter: process.env.CI ? [["dot"], ["allure-playwright"]] : [["dot"]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -63,56 +63,40 @@ export default defineConfig({
       dependencies: process.env.CI ? ["auth setup", "wallet bootstrap"] : [],
     },
     {
-      name: "logged in",
+      name: "loggedin (desktop)",
       use: { ...devices["Desktop Chrome"] },
       testMatch: "**/*.loggedin.spec.ts",
       dependencies: process.env.CI ? ["auth setup"] : [],
     },
+    {
+      name: "loggedin (mobile)",
+      use: { ...devices["Pixel 5"] },
+      testMatch: "**/*.loggedin.spec.ts",
+      dependencies: process.env.CI ? ["auth setup"] : [],
+    },
     {
       name: "dRep",
       use: { ...devices["Desktop Chrome"] },
       testMatch: "**/*.dRep.spec.ts",
       dependencies: process.env.CI ? ["auth setup", "dRep setup"] : [],
     },
     {
-      name: "independent",
+      name: "independent (desktop)",
       use: { ...devices["Desktop Chrome"] },
       testIgnore: [
         "**/*.tx.spec.ts",
         "**/*.loggedin.spec.ts",
         "**/*.dRep.spec.ts",
       ],
     },
-    // {
-    //   name: "cleanup adaHolder",
-    //   testMatch: "**/*.teardown.ts",
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
+    {
+      name: "independent (mobile)",
+      use: { ...devices["Pixel 5"] },
+      testIgnore: [
+        "**/*.tx.spec.ts",
+        "**/*.loggedin.spec.ts",
+        "**/*.dRep.spec.ts",
+      ],
+    },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: "cd govtool/frontend && npm run start",
-  //   // url: "http://127.0.0.1:3000",
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });

tests/govtool-frontend/playwright/tests/2-delegation/delegation.loggedin.spec.ts

@@ -10,7 +10,7 @@ test("2B. Should access delegation to dRep page @smoke @fast", async ({
 }) => {
   await page.goto("/");
 
-  await page.getByTestId("delegate-button").click(); // BUG: testId -> view-dRep-directory
+  await page.getByTestId("delegate-button").click(); // BUG incorrect test ID
   await expect(
     page.getByRole("navigation").getByText("DRep Directory")
   ).toBeVisible();

tests/govtool-frontend/playwright/tests/4-proposal-visibility/proposalVisibility.loggedin.spec.ts

@@ -1,5 +1,6 @@
 import { user01Wallet } from "@constants/staticWallets";
 import { test } from "@fixtures/walletExtension";
+import { isMobile, openDrawerLoggedIn } from "@helpers/mobile";
 import removeAllSpaces from "@helpers/removeAllSpaces";
 import GovernanceActionsPage from "@pages/governanceActionsPage";
 import { expect } from "@playwright/test";
@@ -26,6 +27,9 @@ test("4A.1: Should access Governance Actions page with connecting wallet @smoke
   page,
 }) => {
   await page.goto("/");
+  if (isMobile(page)) {
+    await openDrawerLoggedIn(page);
+  }
 
   await page.getByTestId("governance-actions-link").click();
   await expect(page.getByText(/Governance Actions/i)).toHaveCount(2);

tests/govtool-frontend/playwright/tests/6-miscellaneous/miscellaneous.spec.ts

@@ -1,3 +1,4 @@
+import { isMobile, openDrawer } from "@helpers/mobile";
 import { expect, test } from "@playwright/test";
 import environments from "lib/constants/environments";
 
@@ -7,9 +8,15 @@ test("6C. Navigation within the dApp @smoke @fast", async ({
 }) => {
   await page.goto("/");
 
+  if (isMobile(page)) {
+    await openDrawer(page);
+  }
   await page.getByTestId("governance-actions-link").click();
   await expect(page).toHaveURL(/\/governance_actions/);
 
+  if (isMobile(page)) {
+    await openDrawer(page);
+  }
   const [guidesPage] = await Promise.all([
     context.waitForEvent("page"),
     page.getByTestId("guides-link").click(),
@@ -19,13 +26,19 @@ test("6C. Navigation within the dApp @smoke @fast", async ({
     `${environments.docsUrl}/about/what-is-sanchonet-govtool`
   );
 
+  if (isMobile(page)) {
+    await openDrawer(page);
+  }
   const [faqsPage] = await Promise.all([
     context.waitForEvent("page"),
     page.getByTestId("faqs-link").click(),
   ]);
 
   await expect(faqsPage).toHaveURL(`${environments.docsUrl}/faqs`);
 
+  if (isMobile(page)) {
+    await openDrawer(page);
+  }
   await page.getByTestId("dashboard-link").click();
   expect(page.url()).toEqual(`${environments.frontendUrl}/`);
 });