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"

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,58 @@
+# 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.
+
+See the test called "should edit a community" in community.spec.js for a full example.
+
+```javascript
+// click button that saves transaction
+
+const transactionObj = JSON.parse(await page.locator("div.modal-body code").innerText());
+
+// do something with transactionObj
+```