V2 Add Playwright testing framework with initial tests (#748)

* Updated dependencies

* Playwright config + initial tests

* Disable missingSuspenseWithCSRBailout

* Replace class selector with testId

.github/workflows/build_and_test.yml

@@ -0,0 +1,19 @@
+name: Build the app and run Playwright Tests
+on: [push, pull_request]
+jobs:
+  build_and_test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Build app
+        run: yarn build
+      - name: Run Playwright tests
+        run: yarn test

.gitignore

@@ -40,3 +40,7 @@ next-env.d.ts
 
 # generated Git info
 /src/generated/gitInfo.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.husky/post-merge

@@ -0,0 +1 @@
+yarn install-if-package-changed

.husky/pre-commit

@@ -0,0 +1 @@
+yarn pre-commit

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   distDir: "build",
+  experimental: {
+    missingSuspenseWithCSRBailout: false,
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -8,8 +8,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "playwright test",
     "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && npm install || exit 0",
-    "prepare": "husky install",
+    "prepare": "husky",
     "pre-commit": "concurrently 'lint-staged'",
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
@@ -20,25 +21,26 @@
     "dompurify": "^3.0.9",
     "html-react-parser": "^5.1.8",
     "immer": "^10.0.3",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "zustand": "^4.5.0",
+    "zustand": "^4.5.1",
     "zustand-querystring": "^0.0.19"
   },
   "devDependencies": {
+    "@playwright/test": "^1.42.0",
     "@types/dompurify": "^3.0.5",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.11.23",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
     "concurrently": "^8.2.2",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1",
-    "sass": "^1.69.7",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "sass": "^1.71.1",
     "typescript": "^5"
   }
 }

playwright.config.ts

@@ -0,0 +1,86 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000;
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  /* Timeout per test */
+  timeout: 30 * 1000,
+  /* Tests directory */
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "list",
+  /* 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('/')`. */
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "yarn dev",
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // TODO: enable these later if needed
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* 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' },
+    // },
+  ],
+});

src/app/page.tsx

@@ -109,6 +109,8 @@ export default function Introduction() {
           </Card>
         ))}
       </div>
+
+      {/* TODO: add TOS and Privacy */}
     </LayoutContentContainer>
   );
 }

src/components/MainNav.tsx

@@ -1,4 +1,4 @@
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname } from "next/navigation";
 
 import { Routes } from "@/constants/routes";
 import { NextLink } from "@/components/NextLink";
@@ -44,11 +44,6 @@ const secondaryNavLinks: NavLink[] = [
 
 export const MainNav = () => {
   const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  // TODO: remove after testing
-  console.log(">>> pathname: ", pathname);
-  console.log(">>> searchParams: ", searchParams.toString());
 
   const isActiveRoute = (link: string) => {
     if (link.startsWith("http")) {

src/components/NetworkSelector/index.tsx

@@ -241,6 +241,7 @@ export const NetworkSelector = () => {
         ref={buttonRef}
         onClick={() => toggleDropdown(!isDropdownVisible)}
         tabIndex={0}
+        data-testid="networkSelector-button"
       >
         <NetworkIndicator networkId={network.id} networkLabel={network.label} />
         <Icon.ChevronDown />
@@ -251,6 +252,7 @@ export const NetworkSelector = () => {
         data-is-visible={isDropdownVisible}
         ref={dropdownRef}
         tabIndex={0}
+        data-testid="networkSelector-dropdown"
       >
         <div className="NetworkSelector__body">
           <div className="NetworkSelector__body__links">
@@ -262,6 +264,7 @@ export const NetworkSelector = () => {
                 role="button"
                 onClick={() => handleSelectActive(op.id)}
                 tabIndex={0}
+                data-testid="networkSelector-option"
               >
                 <NetworkIndicator networkId={op.id} networkLabel={op.label} />
                 {op.id === activeNetworkId ? (
@@ -337,6 +340,7 @@ export const NetworkSelector = () => {
                 type="submit"
                 disabled={isSubmitDisabled}
                 tabIndex={0}
+                data-testid="networkSelector-submit-button"
               >
                 {getButtonLabel()}
               </Button>

tests/introductionPage.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Network selector", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:3000/");
+  });
+
+  test("Loads", async ({ page }) => {
+    await expect(page.locator("h1")).toHaveText("Stellar Laboratory");
+  });
+
+  test("Renders info cards", async ({ page }) => {
+    await expect(page.locator("h2")).toHaveText([
+      "Stellar Quest",
+      "Tools",
+      "Learn about the Soroban RPC",
+      "Learn about Horizon",
+    ]);
+  });
+});