Add Proof-of-Concept Interactors Inspector package

.circleci/config.yml

@@ -86,13 +86,25 @@ jobs:
       executor:
         type: executor
         default: "linux"
+      nvm:
+        type: boolean
+        default: false
       prepack:
         type: boolean
         default: true
     environment:
       DRIVER: <<parameters.driver>>
     steps:
       - checkout
+      - when:
+          condition: <<parameters.nvm>>
+          steps:
+            - run:
+                name: Install NodeJS from .nvmrc
+                command: |
+                  type .\.nvmrc | %{$_ -replace "v",""} | %{nvm install $_}
+                  type .\.nvmrc | %{$_ -replace "v",""} | %{nvm use $_}
+                  npm install -g yarn
       - yarn_install
       - when:
           condition: <<parameters.prepack>>
@@ -162,6 +174,7 @@ workflows:
           requires:
             - prepack
       - test:
+          nvm: true
           executor:
             name: "win/default"
             size: "medium"

.nvmrc

@@ -0,0 +1 @@
+v12.13.0

package.json

@@ -17,6 +17,7 @@
       "packages/suite",
       "packages/globals",
       "packages/interactor",
+      "packages/inspector",
       "packages/agent",
       "packages/driver",
       "packages/webdriver",
@@ -47,7 +48,7 @@
     "prepack:all": "yarn prepack && yarn install:integrations && yarn prepack:integrations"
   },
   "volta": {
-    "node": "12.11.1",
+    "node": "12.13.0",
     "yarn": "1.22.4"
   },
   "devDependencies": {

packages/agent/package.json

@@ -17,7 +17,7 @@
     "test": "mocha -r ts-node/register test/**/*.test.ts",
     "mocha": "mocha -r ts-node/register",
     "start": "parcel serve --out-dir dist/app app/index.html app/harness.ts",
-    "prepack:app": "parcel build --public-url ./ --no-minify --out-dir dist/app app/index.html app/test-frame.html app/harness.ts",
+    "prepack:app": "NODE_PATH=../../ parcel build --public-url ./ --no-minify --out-dir dist/app app/index.html app/test-frame.html app/harness.ts",
     "prepack:tsc": "yarn tsc --build ./tsconfig.dist.json",
     "prepack": "yarn prepack:tsc && yarn prepack:app",
     "pretest:manifest": "parcel build test/fixtures/manifest.js test/fixtures/app.html --out-dir tmp/test --no-minify --global __bigtestManifest",

packages/inspector/README.md

@@ -0,0 +1,17 @@
+# @bigtest/inspector
+
+## How to start
+
+- `yarn prepack`
+
+## How to use
+
+- Add entry point to your app `@bigtest/inspector`
+- In a browser devtools execute function `__BIGTEST_TOGGLE_INSPECTOR__` to show the inspector view
+- On the left side are all matched built-in interactors to dom elements.
+- On the right side you can write custom interactors by using `createInteractor` API or use built-in interactors to write action sequence
+
+## What doesn't work yet
+
+- Interactor actions execute synchronously, that blocks UI updates
+- Add interactor snippets

packages/inspector/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@bigtest/inspector",
+  "version": "0.1.0",
+  "description": "Inspector to investigate matched interactors and play around with actions editor",
+  "main": "dist/main.js",
+  "browser": "dist/main.js",
+  "repository": "https://github.com/thefrontside/bigtest.git",
+  "author": "Frontside Engineering <[email protected]>",
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "lint": "eslint \"src/**/*.ts{,x}\"",
+    "prepack": "webpack build --mode production"
+  },
+  "devDependencies": {
+    "@bigtest/interactor": "^0.28.2",
+    "@medv/finder": "^2.0.0",
+    "@types/prismjs": "^1.16.3",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.1",
+    "autoprefixer": "^10.2.5",
+    "css-loader": "^5.1.1",
+    "effector": "^21.8.8",
+    "effector-react": "^21.2.1",
+    "postcss": "^8.2.7",
+    "postcss-loader": "^5.1.0",
+    "prismjs": "^1.23.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.17",
+    "webpack": "^5.24.3",
+    "webpack-cli": "^4.5.0"
+  }
+}

packages/inspector/src/App.tsx

@@ -0,0 +1,58 @@
+import { useStore } from "effector-react";
+import { createInteractor } from "@bigtest/interactor";
+import { useCallback } from "react";
+import { InspectorView } from "./interactors/InspectorView";
+import { ActionsEditor } from "./interactors/ActionsEditior";
+import { $code, $interactors, $isLoading, end, refresh, start } from "./actions";
+import {
+  Button,
+  CheckBox,
+  Heading,
+  Link,
+  MultiSelect,
+  RadioButton,
+  Select,
+  TextField,
+} from "./interactors/getInteractors";
+
+export function App(): JSX.Element {
+  let interactors = useStore($interactors);
+  let isLoading = useStore($isLoading);
+  let code = useStore($code);
+
+  let runHandler = useCallback(async () => {
+    start();
+    try {
+      await eval(
+        `async ({ Button, CheckBox, Heading, Link, MultiSelect, RadioButton, Select, TextField, createInteractor }) => { ${code} }`
+      )({ Button, CheckBox, Heading, Link, MultiSelect, RadioButton, Select, TextField, createInteractor });
+    } catch (error) {
+      throw error;
+    } finally {
+      refresh();
+      end();
+    }
+  }, [code]);
+
+  return (
+    <div className="relative flex bottom-8 left-8 bg-white p-4 w-max">
+      <div className="mr-4 flex-shrink-0">
+        <div className="max-w-lg min-w-32 min-h-64 max-h-128 overflow-y-auto rounded-lg border-black border p-2">
+          <InspectorView interactors={interactors} />
+        </div>
+      </div>
+      <div className="flex flex-col items-start">
+        <button
+          className="rounded border-gray-500 border shadow outline-none focus:outline-none mb-2"
+          onClick={runHandler}
+        >
+          <span className="m-1">Run</span>
+        </button>
+        <div className="rounded-lg border-black border p-1 h-full">
+          <ActionsEditor />
+        </div>
+      </div>
+      {isLoading ? <div className="top-0 left-0 absolute w-full h-full bg-gray-400 opacity-50" /> : null}
+    </div>
+  );
+}