test: community regression tests

docs: dev container setup
create community spec
edit community test
more docs on writing tests
change from devgovgigs.near to devhub.near in community tests

CONTRIBUTING.md

@@ -6,6 +6,20 @@ At DevHub, we value the contributions of each individual. This document provides
 
 ## Developer Setup
 
+You can set up everything manually as described further down, or you can use the dev container setup which has everything out of the box and will get you started quickly.
+
+### Using a dev container
+
+This project is configured for developing with github codespaces or a locally hosted [devcontainer](https://containers.dev/). If using one of these options you get all the dev setup you need out of the box, and you don't have to spend time on installing any dependencies.
+
+Once your dev container is started you can run the test suite, which is a good check to verify that all is running as expected:
+
+`npm run test:watch:codespaces`
+
+This will give you a web interface for all the tests, and you can run them to see how everything is expected to work. You should also use the test suite when developing new functionality, as it is a much more efficient workflow for the testing and development iterations. Also it prevents future regression if you develop the test driven way.
+
+If your work requires changes to the developer setup, you should also include and test them in the devcontainer setup so that this is always up to date.
+
 ### Prerequisites
 
 Before you start contributing to neardevhub-widgets, ensure you have the following prerequisites installed on your machine:
@@ -169,7 +183,19 @@ npm run fmt
 
 We use [Playwright](https://playwright.dev) for tests, which are located in the [playwright-tests](./playwright-tests/) folder. For each change or addition to the codebase you should also make sure that your changes are covered by tests in order to ensure that other developers will not break it in the future. Also you should write tests to accelerate your own development, so that you don't have to do manual coding/test interations via the browser.
 
-See the [test-pipeline](./.github/workflows/continuous-integration-workflow.yml) for what dependencies that needs to be installed on your workstation for tests to run.
+Use the [dev-container](#using-a-dev-container) setup mentioned above for getting quick access to a complete development environment with test dependencies included, or see the [test-pipeline](./.github/workflows/continuous-integration-workflow.yml) for what dependencies that needs to be installed on your workstation for tests to run.
+
+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.
+
+Here is an example snippet to capture the VM confirmation popup:
+
+```javascript
+const transactionObj = JSON.parse(
+    await page.locator("div.modal-body code").innerText()
+);
+```
+
+This will parse the text contents into the javascript object that we here call `transactionObj`. You can then make assertions on the properties. See the test called "should edit a community" in [community.spec.js](./playwright-tests/tests/community.spec.js) for a full example.
 
 #### Storage Deposit
 

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

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

playwright-tests/tests/communities.spec.js

@@ -13,33 +13,19 @@ test.describe("Wallet is connected", () => {
   test("should show spawner when user clicks create community", async ({
     page,
   }) => {
-    await page.goto("/devgovgigs.near/widget/app?page=communities");
+    await page.goto("/devhub.near/widget/app?page=communities");
 
-    const createCommunityButtonSelector = 'button:has-text("Create Community")';
-
-    await page.waitForSelector(createCommunityButtonSelector, {
-      state: "visible",
-    });
-    await page.click(createCommunityButtonSelector);
+    await page.getByRole("button", { name: " Community" }).click();
 
-    const communitySpawnerSelector = 'div:has-text("Community information")';
-    await page.waitForSelector(communitySpawnerSelector, { state: "visible" });
+    await page.getByTestId("1-name--editable").fill("the new community name");
   });
 
   test("should validate input when user is creating a new community", async ({
     page,
   }) => {
-    await page.goto("/devgovgigs.near/widget/app?page=communities");
+    await page.goto("/devhub.near/widget/app?page=communities");
 
-    await clickWhenSelectorIsVisible(
-      page,
-      'button:has-text("Create Community")'
-    );
-
-    await waitForSelectorToBeVisible(
-      page,
-      'div:has-text("Community information")'
-    );
+    await page.getByRole("button", { name: " Community" }).click();
 
     // missing title
     await expectInputValidation(
@@ -91,6 +77,44 @@ test.describe("Wallet is connected", () => {
       true
     );
   });
+  test("should create a new community", async ({ page }) => {
+    await page.goto("/devhub.near/widget/app?page=communities");
+
+    await page.getByRole("button", { name: " Community" }).click();
+
+    await page.getByTestId("1-name--editable").fill("My new community");
+    await page
+      .getByTestId("3-description--editable")
+      .fill("A very nice community to be in");
+    await page.getByTestId("0-handle--editable").fill("mynewcommunity");
+    await page.getByTestId("2-tag--editable").fill("mynewcommunity");
+    await page.getByText("Launch").click();
+    const transactionText = JSON.stringify(
+      JSON.parse(await page.locator("div.modal-body code").innerText()),
+      null,
+      1
+    );
+    await expect(transactionText).toEqual(
+      JSON.stringify(
+        {
+          inputs: {
+            handle: "mynewcommunity",
+            name: "My new community",
+            tag: "mynewcommunity",
+            description: "A very nice community to be in",
+            bio_markdown:
+              "This is a sample text about your community.\nYou can change it on the community configuration page.",
+            logo_url:
+              "https://ipfs.near.social/ipfs/bafkreibysr2mkwhb4j36h2t7mqwhynqdy4vzjfygfkfg65kuspd2bawauu",
+            banner_url:
+              "https://ipfs.near.social/ipfs/bafkreic4xgorjt6ha5z4s5e3hscjqrowe5ahd7hlfc5p4hb6kdfp6prgy4",
+          },
+        },
+        null,
+        1
+      )
+    );
+  });
 });
 
 const expectInputValidation = async (
@@ -115,7 +139,7 @@ test.describe("Wallet is not connected", () => {
   });
 
   test("spawner and button should not be visible", async ({ page }) => {
-    await page.goto("/devgovgigs.near/widget/app?page=communities");
+    await page.goto("/devhub.near/widget/app?page=communities");
 
     const createCommunityButtonSelector = 'button:has-text("Create Community")';
 

playwright-tests/tests/community.spec.js

@@ -20,7 +20,7 @@ test("should load a community page if handle exists", async ({ page }) => {
 
 test("should load an error page if handle does not exist", async ({ page }) => {
   await page.goto(
-    "/devgovgigs.near/widget/app?page=community&handle=devhub-faketest"
+    "/devhub.near/widget/app?page=community&handle=devhub-faketest"
   );
 
   // Using the <Link> that wraps the card to identify a community
@@ -89,7 +89,7 @@ test.describe("Wallet is not connected", () => {
     page,
   }) => {
     await page.goto(
-      "/devgovgigs.near/widget/app?page=community&handle=devhub-test"
+      "/devhub.near/widget/app?page=community&handle=devhub-test"
     );
 
     const createCommunityButtonSelector = 'button:has-text("Post")';
@@ -99,3 +99,30 @@ test.describe("Wallet is not connected", () => {
     });
   });
 });
+
+test.describe("Is community admin", () => {
+  test.use({
+    storageState:
+      "playwright-tests/storage-states/wallet-connected-community-admin.json",
+  });
+  test("should edit a community", async ({ page }) => {
+    await page.goto(
+      "/devhub.near/widget/app?page=community.configuration&handle=webassemblymusic"
+    );
+    await page.locator('h5:has-text("Community Information")').waitFor();
+    await page.getByRole("button", { name: " Edit" }).first().click();
+
+    await page
+      .getByTestId("1-description--editable")
+      .fill("Music written in stone on NEAR");
+
+    await page.getByRole("button", { name: " Submit" }).click();
+    await page.getByRole("button", { name: "Save" }).click();
+    const transactionObj = JSON.parse(
+      await page.locator("div.modal-body code").innerText()
+    );
+    expect(transactionObj.community.description).toBe(
+      "Music written in stone on NEAR"
+    );
+  });
+});