Merge pull request #513 from PotLock/tests

Adds Testing Guide

.github/workflows/continuous-integration.yml

@@ -0,0 +1,39 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Run code formatting check
+        run: npm run fmt:check
+  playwright-tests:
+    name: Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: |
+          npm ci
+          npm install bos-workspace
+          npx playwright install-deps
+          npx playwright install
+      - name: Run tests
+        run: |
+          npx playwright test

.vscode/settings.json

@@ -1,10 +1,9 @@
 {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "[javascript]": {
-      "editor.formatOnSave": true
-    },
-    "prettier.semi": false,
-    "prettier.singleQuote": true
-  }
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "prettier.semi": false,
+  "prettier.singleQuote": true
+}

README.md

@@ -18,20 +18,6 @@ npm run dev
 
 This will start a gateway at http://127.0.0.1:8080 which will render your local widgets. The entry point for this app is [potlock.near/widget/Index](http://127.0.0.1:8080/potlock.near/widget/Index).
 
-## Running tests
+## Testing framework
 
-This project uses [playwright](https://playwright.dev/) for end-to-end testing. To run the tests:
-
-```cmd
-npm run test
-```
-
-You may automatically record video with your tests by setting
-
-```
-use: {
-  video: "on"
-}
-```
-
-in the [playwright.config.js](./playwright.config.js). After running tests, you will find the output as a `.webm` in `./test-results`. Then, [convert to MP4](https://video.online-convert.com/convert/webm-to-mp4) and share.
+This project uses [playwright](https://playwright.dev/) for end-to-end testing. These tests are located in the [playwright-tests](./playwright-tests) folder. please read the [README](./playwright-tests/README.md) to learn more about running and writing tests.

apps/potlock/widget/Components/InfoSegment.jsx

@@ -2,13 +2,7 @@ const title = props.title;
 const description = props.description;
 
 const icon = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M10.0001 13.3327V9.99935M10.0001 6.66602H10.0084M18.3334 9.99935C18.3334 14.6017 14.6025 18.3327 10.0001 18.3327C5.39771 18.3327 1.66675 14.6017 1.66675 9.99935C1.66675 5.39698 5.39771 1.66602 10.0001 1.66602C14.6025 1.66602 18.3334 5.39698 18.3334 9.99935Z"
       stroke="#475467"

apps/potlock/widget/Inputs/Text.jsx

@@ -105,6 +105,7 @@ return (
         disabled={!!props.disabled}
         onKeyDown={props.handleKeyPress ?? null}
         style={props.inputStyles || {}}
+        name={props.name}
       />
       {props.percent && <PercentageSign>%</PercentageSign>}
       {props.postInputChildren && props.postInputChildren}

apps/potlock/widget/Project/ModalDonation.jsx

@@ -811,6 +811,7 @@ return (
               <Widget
                 src={`${ownerId}/widget/Inputs.Text`}
                 props={{
+                  name: "amount",
                   label: "Amount",
                   placeholder: "0",
                   value: state.amount,

package.json

@@ -6,6 +6,8 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
+    "fmt": "prettier --write '**/*.{js,jsx,ts,tsx,json}'",
+    "fmt:check": "prettier --check '**/*.{js,jsx,ts,tsx,json}'",
     "bw": "bos-workspace",
     "dev": "npm run bw dev",
     "test": "npx playwright test"

playwright-tests/README.md

@@ -0,0 +1,64 @@
+# Testing Guide
+
+This project uses [playwright](https://playwright.dev/) for end-to-end testing. Please become familiar with this documentation.
+
+## Writing tests
+
+Tests should be written for each change or addition to the codebase.
+If a new feature is introduced, tests should be written to validate its functionality. If a bug is fixed, tests should be written to prevent regression. Writing tests not only safeguards against future breaks by other developers but also accelerates development by minimizing manual coding and browser interactions.
+
+When writing tests, remember to:
+
+- Test user-visible behavior
+- Make tests as isolated as possible
+- Avoid testing third-party dependencies
+
+> **[LEARN BEST PRACTICES](https://playwright.dev/docs/best-practices)**
+
+See the [cookbook](#cookbook) for help in covering scenerios. It is possible to [generate tests](https://playwright.dev/docs/codegen) via the [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).
+
+## Running tests
+
+To run the tests, you may do so through the command line:
+
+```cmd
+npm run test
+```
+
+Or through VS Code **(recommended)**, see [Getting started - VS Code](https://playwright.dev/docs/getting-started-vscode).
+
+## Recording video
+
+You may automatically record video with your tests by setting
+
+```
+use: {
+  video: "on"
+}
+```
+
+in the [playwright.config.js](../playwright.config.js). After running tests, you will find the output as a `.webm` in `./test-results`. Then, [convert to MP4](https://video.online-convert.com/convert/webm-to-mp4) and share.
+
+It is encouraged to include video in pull requests in order to demonstrate functionality and prove thorough testing.
+
+## Cookbook
+
+### Capturing the VM Confirmation Popup
+
+Currently, none of the tests post actual transactions to the smart contracts. Still you should try writing your tests so that they do the actual function call, but just skip the final step of sending the transaction. You can do this by capturing the transaction confirmation popup provided by the NEAR social VM.
+
+```javascript
+// click button that triggers transaction
+await page.getByRole("button", { name: "Donate" }).nth(1).click();
+
+const transactionObj = JSON.parse(await page.locator("div.modal-body code").innerText());
+
+// do something with transactionObj
+expect(transactionObj).toMatchObject({
+  amount: 100,
+  message: "",
+  projectId: DEFAULT_PROJECT_ID,
+});
+```
+
+See the test called "project with no active pot should donate direct with correct amount" in donate.spec.js for a full example.

playwright-tests/tests/app.spec.js

@@ -0,0 +1,27 @@
+/**
+ * root of the app
+ * general sanity tests
+ */
+
+import { expect, test } from "@playwright/test";
+import { ROOT_SRC, ROUTER_CONFIG } from "../util/constants";
+
+// currently skipping
+test.skip("should load the correct pages per route", async ({ page }) => {
+  ROUTER_CONFIG.routes.forEach(async (route) => {
+    await page.goto(`${ROOT_SRC}?${ROUTER_CONFIG.param}=${route.path}`);
+
+    const pageSelector = `div[data-component="${route.element.src}"]`; // because this gets applied via bos-workspace v1.0.0
+    // and we have not updated yet
+
+    await page.waitForSelector(pageSelector, {
+      state: "visible",
+    });
+
+    // Find all matching elements
+    const elements = await page.$$(pageSelector);
+
+    // Assert that at at least one element was found
+    expect(elements.length).toBeGreaterThan(0);
+  });
+});

playwright-tests/tests/donate.spec.js

@@ -0,0 +1,30 @@
+/**
+ * donate modal
+ */
+
+import { test, expect } from "@playwright/test";
+import { ROOT_SRC, DEFAULT_PROJECT_ID } from "../util/constants";
+
+test("should open donate modal", async ({ page }) => {
+  test.setTimeout(120000); // 2 minutes... we want to improve performance
+  await page.goto(`${ROOT_SRC}?tab=project&projectId=${DEFAULT_PROJECT_ID}`);
+  await page.getByRole("button", { name: "Donate" }).click();
+  expect(await page.isVisible("text=Donate to project")).toBeTruthy();
+});
+
+test("project with no active pot should donate direct with correct amount", async ({ page }) => {
+  test.setTimeout(120000); // 2 minutes... we want to improve performance
+  await page.goto(`${ROOT_SRC}?tab=project&projectId=${DEFAULT_PROJECT_ID}`);
+  await page.getByRole("button", { name: "Donate" }).click();
+  expect(await page.isVisible("text=Donate to project")).toBeTruthy();
+  await page.fill("input[name=amount]", "100");
+  await page.getByRole("button", { name: "Donate" }).nth(1).click();
+
+  // Confirmation modal should be visible
+  const transactionObj = JSON.parse(await page.locator("div.modal-body code").innerText());
+  expect(transactionObj).toMatchObject({
+    bypass_protocol_fee: false,
+    message: "",
+    recipient_id: DEFAULT_PROJECT_ID,
+  });
+});

playwright-tests/tests/pot.spec.js

@@ -0,0 +1,18 @@
+/**
+ * ?tab=pot
+ */
+
+import { test, expect } from "@playwright/test";
+import { ROOT_SRC, DEFAULT_POT_ID } from "../util/constants";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`${ROOT_SRC}?tab=pot&potId=${DEFAULT_POT_ID}`);
+});
+
+test("clicking pot card should go to pot page", async ({ page }) => {
+  await page.getByText("NEAR Retroactive Builders").click();
+
+  const url = page.url();
+
+  expect(url).toContain("?tab=pot&potId=build.v1.potfactory.potlock.near");
+});

playwright-tests/tests/pots.spec.js

@@ -0,0 +1,42 @@
+/**
+ * ?tab=pots
+ */
+
+import { test, expect } from "@playwright/test";
+import { ROOT_SRC, DEFAULT_POT_ID } from "../util/constants";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`${ROOT_SRC}?tab=pots`);
+});
+
+test("clicking pot card should go to pot page", async ({ page }) => {
+  await page.getByText("NEAR Retroactive Builders").click();
+
+  const url = page.url();
+
+  expect(url).toContain(`?tab=pot&potId=${DEFAULT_POT_ID}`);
+});
+
+test("clicking deploy button should go to deploypot page", async ({ page }) => {
+  // TODO:
+});
+
+test("clicking learn more button should...", async ({ page }) => {
+  // TODO:
+});
+
+test("should show active pots", async ({ page }) => {
+  // TODO:
+});
+
+test("should show completed pots", async ({ page }) => {
+  // TODO:
+});
+
+test("should sort pots", async ({ page }) => {
+  // TODO:
+});
+
+test("should filter pots", async ({ page }) => {
+  // TODO:
+});

playwright-tests/tests/project.spec.js

@@ -0,0 +1,14 @@
+/**
+ * donate modal
+ */
+
+import { test, expect } from "@playwright/test";
+import { ROOT_SRC, DEFAULT_PROJECT_ID } from "../util/constants";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`${ROOT_SRC}?tab=project&projectId=${DEFAULT_PROJECT_ID}`);
+});
+
+test.skip("clicking donate button should show donate modal", async ({ page }) => {
+  await page.getByRole("button", { name: "Donate" }).click();
+});