Upgrade develop

.github/workflows/continuous-integration.yml

@@ -0,0 +1,38 @@
+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: "yarn"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Run code formatting check
+        run: yarn 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: "yarn"
+      - name: Install dependencies
+        run: |
+          yarn add bos-workspace
+          npx playwright install-deps
+          npx playwright install
+      - name: Run tests
+        run: |
+          npx playwright test

.gitignore

@@ -4,3 +4,5 @@ node_modules
 
 /build
 /dist
+
+test-results

package.json

@@ -5,13 +5,17 @@
   "author": "nearbuilders",
   "license": "MIT",
   "scripts": {
+    "fmt": "prettier --write '**/*.{js,jsx,ts,tsx,json}'",
+    "fmt:check": "prettier --check '**/*.{js,jsx,ts,tsx,json}'",
     "bw": "bos-workspace",
     "dev": "bw dev",
     "dev:testnet": "bw dev -n testnet",
     "build": "bw build",
-    "build:testnet": "bw build -n testnet"
+    "build:testnet": "bw build -n testnet",
+    "test": "npx playwright test"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.1",
     "bos-workspace": "^1.0.0-alpha",
     "prettier": "^2.8.8"
   }

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/storage-states/admin-connected.json

@@ -0,0 +1,27 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "near-wallet-selector:selectedWalletId",
+          "value": "\"my-near-wallet\""
+        },
+        {
+          "name": "near_app_wallet_auth_key",
+          "value": "{\"accountId\":\"devs.near\"}"
+        },
+        {
+          "name": "near-social-vm:v01::accountId:",
+          "value": "devs.near"
+        },
+        {
+          "name": "flags",
+          "value": "{\"bosLoaderUrl\":\"http://127.0.0.1:3030\"}"
+        }
+      ]
+    }
+  ],
+  "sessionStorage": []
+}

playwright-tests/storage-states/wallet-connected.json

@@ -0,0 +1,27 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "near-wallet-selector:selectedWalletId",
+          "value": "\"my-near-wallet\""
+        },
+        {
+          "name": "near_app_wallet_auth_key",
+          "value": "{\"accountId\":\"anybody.near\"}"
+        },
+        {
+          "name": "near-social-vm:v01::accountId:",
+          "value": "anybody.near"
+        },
+        {
+          "name": "flags",
+          "value": "{\"bosLoaderUrl\":\"http://127.0.0.1:3030\"}"
+        }
+      ]
+    }
+  ],
+  "sessionStorage": []
+}

playwright-tests/storage-states/wallet-not-connected.json

@@ -0,0 +1,15 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "flags",
+          "value": "{\"bosLoaderUrl\":\"http://127.0.0.1:3030\"}"
+        }
+      ]
+    }
+  ],
+  "sessionStorage": []
+}

playwright-tests/testUtils.js

@@ -0,0 +1,31 @@
+import { expect } from "@playwright/test";
+
+export const pauseIfVideoRecording = async (page) => {
+  let isVideoRecorded = (await page.video()) ? true : false;
+  if (isVideoRecorded) {
+    await page.waitForTimeout(500);
+  }
+};
+
+export const setInputAndAssert = async (page, selector, value) => {
+  await page.fill(selector, value);
+  const actualValue = await page.inputValue(selector);
+  expect(actualValue).toBe(value);
+};
+
+export const selectAndAssert = async (page, selector, value) => {
+  await page.selectOption(selector, { value: value });
+  const selectedValue = await page.$eval(selector, (select) => select.value);
+  expect(selectedValue).toBe(value);
+};
+
+export const waitForSelectorToBeVisible = async (page, selector) => {
+  await page.waitForSelector(selector, {
+    state: "visible",
+  });
+};
+
+export const clickWhenSelectorIsVisible = async (page, selector) => {
+  waitForSelectorToBeVisible(page, selector);
+  await page.click(selector);
+};

playwright-tests/tests/bosloaderenvironment.spec.js

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+
+test("should find bos loader configuration in localstorage", async ({ page }) => {
+  await page.goto("/");
+
+  const localStoreFlags = await page.evaluate(() => localStorage.getItem("flags"));
+  expect(localStoreFlags).toEqual(
+    JSON.stringify({ bosLoaderUrl: "http://127.0.0.1:8080/api/loader" })
+  );
+});
+
+test("should not get bos loader fetch error", async ({ page }) => {
+  await page.goto("/potlock.near/widget/Index?tab=projects");
+  const bodyText = await page.textContent("body");
+  expect(bodyText).not.toContain('Source code for "potlock.near/widget/Index" is not found');
+});

playwright-tests/util/constants.js

@@ -0,0 +1,3 @@
+/**
+ * constants
+ */

playwright.config.js

@@ -0,0 +1,107 @@
+// @ts-check
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: "./playwright-tests/tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* 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 ? "100%" : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "line",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    video: "off",
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:8080",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    storageState: {
+      cookies: [],
+      origins: [
+        {
+          origin: "http://localhost:8080",
+          localStorage: [
+            {
+              name: "flags",
+              value: JSON.stringify({ bosLoaderUrl: "http://127.0.0.1:8080/api/loader" }),
+            },
+          ],
+        },
+      ],
+    },
+  },
+
+  /* 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'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { channel: 'chrome' },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: "test-results/",
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    port: 8080,
+    reuseExistingServer: !process.env.CI,
+  },
+});