fix: redirectmap (#19)

- Re-insert redirectmap functionality, which should be there according to docs
- add redirectmap tests for localstorage and sessionstorage according to docs
- fix/improve custom rpc test which did hang/fail, by proxying to main rpc, but detect that custom rpc is used
- caching of CI dependencies
- update Near Social VM to 2.6.1

.github/workflows/test.yml

@@ -10,9 +10,41 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Playwright test
-        run: |
-          yarn install
-          yarn playwright install-deps
-          yarn playwright install
-          yarn test
+
+      # Cache node_modules
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      # Debugging step to see if node_modules cache was hit
+      - name: Check node_modules cache
+        run: if [ -d "node_modules" ]; then echo "node_modules cache hit"; else echo "node_modules cache miss"; fi
+
+      - name: Install dependencies
+        run: yarn install
+
+      # Cache Playwright browsers
+      - name: Cache Playwright browsers
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      # Debugging step to see if Playwright browsers cache was hit
+      - name: Check Playwright browsers cache
+        run: if [ -d ~/.cache/ms-playwright ]; then echo "Playwright cache hit"; else echo "Playwright cache miss"; fi
+
+      - name: Install Playwright dependencies
+        run: yarn playwright install-deps
+
+      - name: Install Playwright browsers
+        run: yarn playwright install
+
+      - name: Run tests
+        run: yarn test

package.json

@@ -1,10 +1,10 @@
 {
   "name": "near-bos-webcomponent",
-  "version": "0.0.8",
-  "homepage": "https://github.com/petersalomonsen/near-bos-webcomponent",
+  "version": "0.0.9",
+  "homepage": "https://github.com/NEARBuilders/near-bos-webcomponent",
   "repository": {
     "type": "git",
-    "url": "https://github.com/petersalomonsen/near-bos-webcomponent.git"
+    "url": "https://github.com/NEARBuilders/near-bos-webcomponent.git"
   },
   "files": [
     "dist/",
@@ -22,8 +22,7 @@
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^2.1.3",
-    "near-social-vm": "git+https://github.com/NearSocial/VM.git",
-    "near-social-vm-types": "^1.0.0",
+    "near-social-vm": "NearSocial/VM#2.6.1",
     "prettier": "^2.7.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",

playwright-tests/storage-states/bos-loader-url.json

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

playwright-tests/tests/redirectmap.spec.js

@@ -0,0 +1,47 @@
+import { test, describe, expect } from '@playwright/test';
+
+describe("bos-loader-url", () => {
+    test.use({
+        storageState: "playwright-tests/storage-states/bos-loader-url.json"
+    });
+    test("Should be possible to provide a redirectmap through flags in localStorage", async ({
+        page,
+    }) => {
+        await page.route("http://localhost:3030", async (route) => {
+            await route.fulfill({
+                body: JSON.stringify(
+                    {
+                        components:
+                        {
+                            "something.near/widget/testcomponent":
+                                { "code": "return 'I come from a redirect map pointed to by flags in localStorage';" }
+                        }
+                    }
+                )
+            });
+        });
+        await page.goto("/something.near/widget/testcomponent");
+        await expect(page.getByText('I come from a redirect map pointed to by flags in localStorage')).toBeVisible();
+    });
+});
+
+describe("session-storage", () => {
+    test("Should be possible to provide a redirectmap through session storage key", async ({
+        page,
+    }) => {
+        await page.context().addInitScript(() => {
+            console.log('init script');
+            sessionStorage.setItem('nearSocialVMredirectMap', JSON.stringify(
+                {
+                    "something.near/widget/testcomponent":
+                        { "code": "return 'I come from a redirect map from session storage';" }
+                }
+            ));
+        })
+        await page.goto("/something.near/widget/testcomponent");
+        await page.evaluate(() => {
+            console.log(JSON.parse(sessionStorage.getItem("nearSocialVMredirectMap")))
+        })
+        await expect(await page.getByText('I come from a redirect map from session storage')).toBeVisible();
+    });
+});

playwright-tests/tests/rpc.spec.js

@@ -49,22 +49,24 @@ test("Verify custom RPC is called when provided", async ({ page }) => {
   // Verify the viewer is visible
   await waitForSelectorToBeVisible(page, "near-social-viewer");
 
+  let customRPCisCalledPromiseResolve;
+  let customRPCisCalled = new Promise(resolve => {
+    customRPCisCalledPromiseResolve = resolve;
+  });
+
+  // Mock the custom rpc call so that the request doesn't hang
+  await page.route(CUSTOM_RPC_URL, async (route) => {
+    customRPCisCalledPromiseResolve(true);
+    await route.continue({ url: DEFAULT_RPC_URL });
+  });
+
   // Set the rpc attribute to a custom rpc value
   await page.evaluate((url) => {
     document.body.innerHTML = `
     <near-social-viewer src="devs.near/widget/default" rpc="${url}"></near-social-viewer>
     `;
   }, CUSTOM_RPC_URL);
 
-  // Mock the custom rpc call so that the request doesn't hang
-  await page.route(CUSTOM_RPC_URL, (route) => {
-    route.fulfill({
-      status: 200,
-      contentType: "application/json",
-      body: JSON.stringify({ result: "some valid response" }),
-    });
-  });
-
   // Get the value of the rpc attribute
   const actualRpc = await page.evaluate(() => {
     const viewer = document.querySelector("near-social-viewer");
@@ -89,4 +91,5 @@ test("Verify custom RPC is called when provided", async ({ page }) => {
   // Expect that the custom RPC is called
   const customRpcRequest = await page.waitForRequest(CUSTOM_RPC_URL);
   expect(customRpcRequest).toBeTruthy();
+  expect(await customRPCisCalled).toBeTruthy();
 });

src/App.js

@@ -2,7 +2,7 @@ import "App.scss";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "bootstrap/dist/js/bootstrap.bundle";
 import { Widget } from "near-social-vm";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 
 import { sanitizeUrl } from "@braintree/sanitize-url";
@@ -14,6 +14,8 @@ import {
   useLocation,
 } from "react-router-dom";
 
+const SESSION_STORAGE_REDIRECT_MAP_KEY = 'nearSocialVMredirectMap';
+
 function Viewer({ widgetSrc, code, initialProps }) {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -33,12 +35,31 @@ function Viewer({ widgetSrc, code, initialProps }) {
     return pathSrc;
   }, [widgetSrc, path]);
 
+  const [redirectMap, setRedirectMap] = useState(null);
+  useEffect(() => {
+    (async () => {
+      const localStorageFlags = JSON.parse(localStorage.getItem("flags"));
+
+      if (localStorageFlags?.bosLoaderUrl) {
+        setRedirectMap(
+          (await fetch(localStorageFlags.bosLoaderUrl).then((r) => r.json()))
+            .components
+        );
+      } else {
+        setRedirectMap(
+          JSON.parse(sessionStorage.getItem(SESSION_STORAGE_REDIRECT_MAP_KEY))
+        );
+      }
+    })();
+  }, []);
+
   return (
     <>
       <Widget
         src={!code && src}
         code={code} // prioritize code
         props={{ ...initialProps, ...passProps }}
+        config={{ redirectMap }}
       />
     </>
   );