Upgrades to react-router 6.4 (#6)

* upgrades to react-router 6.20

* init test framework

* router tests

* cleanup

* pause for video recording

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/test-results
 
 # production
 /build

package.json

@@ -12,6 +12,7 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@playwright/test": "^1.38.1",
     "@braintree/sanitize-url": "^6.0.2",
     "big.js": "^6.1.1",
     "bn.js": "^5.1.1",
@@ -29,7 +30,7 @@
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-typeahead": "^6.1.2",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.20.0",
     "styled-components": "^5.3.6"
   },
   "scripts": {
@@ -41,7 +42,8 @@
     "start": "yarn run dev && http-server -p 3000 dist --allowed-hosts=all",
     "serve:prod": "http-server -p 3000 dist",
     "generateimportmap": "(cd public && jspm link index.html -o index.html)",
-    "web4:deploy": "NEAR_ENV=mainnet npx web4-deploy dist psalomobos.near --nearfs"
+    "web4:deploy": "NEAR_ENV=mainnet npx web4-deploy dist psalomobos.near --nearfs",
+    "test": "npx playwright test"
   },
   "eslintConfig": {
     "extends": [

playwright-tests/testUtils.js

@@ -0,0 +1,31 @@
+import { expect } from "@playwright/test";
+
+export const pauseIfVideoRecording = async (page, pause = 500) => {
+  let isVideoRecorded = (await page.video()) ? true : false;
+  if (isVideoRecorded) {
+    await page.waitForTimeout(pause);
+  }
+};
+
+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/router.spec.js

@@ -0,0 +1,55 @@
+import { expect, test } from "@playwright/test";
+import { pauseIfVideoRecording, waitForSelectorToBeVisible } from "../testUtils";
+
+test("Verify default route loads successfully and displays expected content", async ({
+  page,
+}) => {
+  // Navigate to the default route
+  await page.goto("/");
+
+  // Verify the viewer's default route
+  await waitForSelectorToBeVisible(
+    page,
+    'near-social-viewer[src="devs.near/widget/default"]'
+  );
+
+  // Get the value of the initialProps attribute
+  const initialProps = await page.evaluate(() => {
+    const viewer = document.querySelector(
+      'near-social-viewer[src="devs.near/widget/default"]'
+    );
+    return viewer.getAttribute("initialProps");
+  });
+
+  // Assert initialProps parse correctly
+  expect(JSON.parse(initialProps)).toEqual({ message: "hello world!" });
+
+  // Verify default component renders
+  await waitForSelectorToBeVisible(
+    page,
+    'div[data-component="devs.near/widget/default"]'
+  );
+
+  // Verify default props are active
+  await waitForSelectorToBeVisible(page, 'h4:has-text("hello world!")');
+
+  await pauseIfVideoRecording(page, 1000);
+});
+
+test("should load the other routes with params when provided", async ({
+  page,
+}) => {
+  // // Navigate to some route
+  await page.goto("/efiz.near/widget/Tree?rootPath=devs.near");
+
+  // Verify route loads
+  await waitForSelectorToBeVisible(
+    page,
+    'div[data-component="efiz.near/widget/Node"]'
+  );
+
+  // Verify provided props are active
+  await waitForSelectorToBeVisible(page, 'div:has-text("devs.near")');
+
+  await pauseIfVideoRecording(page, 1000);
+});

playwright.config.js

@@ -0,0 +1,102 @@
+// @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:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    storageState: {
+      cookies: [],
+      origins: [
+        {
+          origin: "http://localhost:3000",
+          localStorage: [],
+        },
+      ],
+    },
+  },
+
+  /* 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 start",
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/App.js

@@ -1,19 +1,18 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Widget } from "near-social-vm";
+import "App.scss";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import "react-bootstrap-typeahead/css/Typeahead.css";
-import "react-bootstrap-typeahead/css/Typeahead.bs5.css";
 import "bootstrap/dist/js/bootstrap.bundle";
-import "App.scss";
+import { Widget } from "near-social-vm";
+import React, { useEffect, useMemo, useState } from "react";
+import "react-bootstrap-typeahead/css/Typeahead.css";
 
+import { sanitizeUrl } from "@braintree/sanitize-url";
+import { useAccount, useInitNear } from "near-social-vm";
 import {
-  BrowserRouter as Router,
+  createBrowserRouter,
   Link,
-  Route,
+  RouterProvider,
   useLocation,
 } from "react-router-dom";
-import { sanitizeUrl } from "@braintree/sanitize-url";
-import { useInitNear, useAccount } from "near-social-vm";
 
 const SESSION_STORAGE_REDIRECT_MAP_KEY = "nearSocialVMredirectMap";
 
@@ -95,19 +94,30 @@ function App(props) {
             return <Link {...props} />;
           },
         },
+        features: {
+          enableComponentSrcDataKey: true,
+        },
         config: {
           defaultFinality: undefined,
         },
       });
   }, [initNear]);
 
-  return (
-    <Router>
-      <Route>
-        <Viewer widgetSrc={props.src} code={props.code} initialProps={props.initialProps}></Viewer>
-      </Route>
-    </Router>
-  );
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: (
+        <Viewer
+          widgetSrc={props.src}
+          code={props.code}
+          initialProps={props.initialProps}
+        />
+      ),
+    },
+    { path: "/*", element: <Viewer /> },
+  ]);
+
+  return <RouterProvider router={router} />;
 }
 
 export default App;