feat: setup playwright, blocks snapshot

.github/workflows/jest.yml

@@ -14,4 +14,4 @@ jobs:
       - name: Run Tests
         run: |
           yarn 
-          yarn test
+          yarn test:unit

.github/workflows/playwright.yml

@@ -0,0 +1,35 @@
+name: Playwright Tests
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+jobs:
+  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: Run Playwright tests
+        run: yarn playwright test
+        env:
+          NEXT_PUBLIC_DUMMY_MNEMONIC: ${{ secrets.DUMMY_MNEMONIC }}
+          NEXT_PUBLIC_SUPPORTED_CHAIN_IDS: ${{ vars.SUPPORTED_CHAIN_IDS }}
+          NEXT_PUBLIC_CELATONE_API_OVERRIDE: ${{ vars.CELATONE_API_OVERRIDE }}
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -54,3 +54,7 @@ next.config.wizardcopy.js
 # yarn 
 /.yarn
 .yarnrc.yml
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#715](https://github.com/alleslabs/celatone-frontend/pull/715) Setup Playwright, blocks page test case
 - [#711](https://github.com/alleslabs/celatone-frontend/pull/711) Refactor assetInfos and add movePoolInfos to tx details
 
 ### Improvements

package.json

@@ -23,7 +23,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "test": "jest --coverage",
+    "test:unit": "jest --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:update": "playwright test --update-snapshots",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "start": "next start",
     "lint": "next lint",
@@ -125,8 +127,10 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^18.1.0",
     "@commitlint/cz-commitlint": "^18.2.0",
+    "@playwright/test": "^1.40.1",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.4.0",
+    "@types/node": "^20.10.6",
     "@types/node-gzip": "^1.1.0",
     "@types/react": "^18.0.21",
     "@types/react-linkify": "^1.0.1",

playwright-tests/base.ts

@@ -0,0 +1,13 @@
+import { test as baseTest } from "@playwright/test";
+
+import { setFakeDateTime } from "./utils/faketime";
+
+export const test = baseTest.extend({
+  page: async ({ page }, use) => {
+    await setFakeDateTime(page, "2024-02-20T00:00:00.000Z");
+
+    await use(page);
+  },
+});
+
+export const { expect } = test;

playwright-tests/blocks/blocks.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "../base";
+import { mockBlocksResponse } from "../mocks";
+
+test("should render blocks and compare snapshot", async ({ page }) => {
+  await page.route(/\/v1\/osmosis\/osmosis-1\/blocks/, async (route) => {
+    await route.fulfill({ json: mockBlocksResponse });
+  });
+
+  await page.goto("/blocks");
+
+  await expect.soft(page.getByText("13151707")).toBeVisible();
+  await expect.soft(page.getByText("6F99E1...560C3B")).toBeVisible();
+  await expect.soft(page.getByRole("img", { name: "Larry" })).toBeVisible();
+  await expect.soft(page).toHaveScreenshot();
+});

playwright-tests/mocks/blocks.ts

@@ -0,0 +1,118 @@
+const mockBlocksResponse = {
+  items: [
+    {
+      hash: "\\x6f99e19f6dcb91d124cd5f968c2cc82531b281ffeeb7d417fd64f4894a560c3b",
+      height: 13151707,
+      timestamp: "2024-01-08T04:51:06.037362",
+      transaction_count: 8,
+      validator: {
+        identity: "",
+        moniker: "Larry Engineer",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xaeea6b9ea38ce7928e9cc40b902c8b780d98aad77a2cf68dbb145a608329726e",
+      height: 13151706,
+      timestamp: "2024-01-08T04:51:00.995297",
+      transaction_count: 23,
+      validator: {
+        identity: "",
+        moniker: " Lavender.Five Nodes",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xc29b9c4e53905087ec40dff674338439853f2f775b3db8272cfbba5173e90950",
+      height: 13151705,
+      timestamp: "2024-01-08T04:50:55.97078",
+      transaction_count: 15,
+      validator: {
+        identity: "",
+        moniker: "Zero Knowledge Validator (ZKV)",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xfd85ab98b4d8ea44f5fc30daeec7c0d2b7ed365a8d9d31f9a4e94f3e2bece9ed",
+      height: 13151704,
+      timestamp: "2024-01-08T04:50:50.43911",
+      transaction_count: 23,
+      validator: {
+        identity: "",
+        moniker: "defiantlabs",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xbfeec43c618b67d13acf9678839d6c1824f4dbd4264b349322a242ed73f90d9b",
+      height: 13151703,
+      timestamp: "2024-01-08T04:50:47.549033",
+      transaction_count: 4,
+      validator: {
+        identity: "",
+        moniker: "Astroquirks | Profit Sharing",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xb97036c1f599aba09fabe2a33ddb49ae75d4976b22aa1bdb2bbb541f45cc7162",
+      height: 13151702,
+      timestamp: "2024-01-08T04:50:41.553911",
+      transaction_count: 0,
+      validator: {
+        identity: "",
+        moniker: "PRYZM | Stake & Earn",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xff6b4c7aaa7c565a7a53b558a09f43f4c725117e2cabdb86d32ffa6f7017c92e",
+      height: 13151701,
+      timestamp: "2024-01-08T04:50:38.545866",
+      transaction_count: 6,
+      validator: {
+        identity: "",
+        moniker: "ECO Stake \ud83c\udf31",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\x5ed9d4dde30c3ef8c5cb91f5daf45603ae52acfe2c7401571dfc85ff25195ed0",
+      height: 13151700,
+      timestamp: "2024-01-08T04:50:33.591776",
+      transaction_count: 20,
+      validator: {
+        identity: "",
+        moniker: "Crosnest",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\xf9be589d7cc330331e13794ba5822d8ff21a6004703839d51d9310a86033d43f",
+      height: 13151699,
+      timestamp: "2024-01-08T04:50:27.660374",
+      transaction_count: 3,
+      validator: {
+        identity: "",
+        moniker: "ChainLayer",
+        operator_address: "mock",
+      },
+    },
+    {
+      hash: "\\x5df483b1e36806dbdb78a176d6b710628c95468205931efaeae8722bbf812375",
+      height: 13151698,
+      timestamp: "2024-01-08T04:50:21.385011",
+      transaction_count: 24,
+      validator: {
+        identity: "",
+        moniker: "Chandra Station ",
+        operator_address: "mock",
+      },
+    },
+  ],
+  total: 13151707,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { mockBlocksResponse };

playwright-tests/mocks/index.ts

@@ -0,0 +1 @@
+export * from "./blocks";

playwright-tests/utils/faketime.ts

@@ -0,0 +1,24 @@
+import type { Page } from "@playwright/test";
+
+export const setFakeDateTime = async (page: Page, fakeDateTime: string) => {
+  // mock date
+  const fakeNow = new Date(fakeDateTime).valueOf();
+
+  // Update the Date accordingly in your test pages
+  await page.addInitScript(`{
+     // Extend Date constructor to default to fakeNow
+     Date = class extends Date {
+       constructor(...args) {
+         if (args.length === 0) {
+           super(${fakeNow});
+         } else {
+           super(...args);
+         }
+       }
+     }
+     // Override Date.now() to start from fakeNow
+     const __DateNowOffset = ${fakeNow} - Date.now();
+     const __DateNow = Date.now;
+     Date.now = () => __DateNow() + __DateNowOffset;
+     }`);
+};

playwright.config.ts

@@ -0,0 +1,74 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig, devices } from "@playwright/test";
+
+const BASE_URL = process.env.BASE_URL || `http://localhost:3000`;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./playwright-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 ? 1 : 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: "html",
+  /* 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: BASE_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   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 Pro"] },
+    // },
+
+    /* Test against branded browsers. */
+    {
+      name: "Microsoft Edge",
+      use: { ...devices["Desktop Edge"], channel: "msedge" },
+    },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "yarn dev",
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+  },
+});

yarn.lock

@@ -3618,6 +3618,13 @@
     picocolors "^1.0.0"
     tslib "^2.6.0"
 
+"@playwright/test@^1.40.1":
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.1.tgz#9e66322d97b1d74b9f8718bacab15080f24cde65"
+  integrity sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==
+  dependencies:
+    playwright "1.40.1"
+
 "@popperjs/core@^2.9.3":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -4294,6 +4301,13 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^20.10.6":
+  version "20.10.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.6.tgz#a3ec84c22965802bf763da55b2394424f22bfbb5"
+  integrity sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.3.tgz#291c243e4b94dbfbc0c0ee26b7666f1d5c030e2c"
@@ -7642,6 +7656,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -10421,6 +10440,20 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+[email protected]:
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05"
+  integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
+
+[email protected]:
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.1.tgz#a11bf8dca15be5a194851dbbf3df235b9f53d7ae"
+  integrity sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==
+  dependencies:
+    playwright-core "1.40.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 plur@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/plur/-/plur-5.1.0.tgz#bff58c9f557b9061d60d8ebf93959cf4b08594ae"