systemview 1.0.1 → 1.1.1

package/src/organisms/TestPanel/TestPanel.js

@@ -0,0 +1,170 @@
+import React, { useState, useContext, useEffect } from "react";
+import BeforeTest from "./BeforeTest/BeforeTest";
+import AfterTest from "./AfterTest/AfterTest";
+import MainTest from "./MainTest/MainTest";
+import EventsTest from "./EventsTest/EventsTest";
+import ServiceContext from "../../ServiceContext";
+import Test from "./components/Test.class";
+import TestController from "./components/TestController.class";
+import "./styles.scss";
+import RunTestIcon from "../../atoms/RunTestIcon";
+import SaveIcon from "../../atoms/SaveIcon/SaveIcon";
+import SavedTests from "../SavedTests/SavedTests";
+import { Client } from "systemlynx";
+import FullTestController from "./components/FullTestController";
+import Title from "../../atoms/Title/Title";
+import { CurrentTest } from "../../atoms/StatusIndicator/StatusIndicator";
+
+const FullTest = ({ serviceId, moduleName, methodName }) => {
+  const namespace = { serviceId, moduleName, methodName };
+  const { connectedServices } = useContext(ServiceContext);
+  const serviceData = connectedServices.find(
+    (service) => service.serviceId === serviceId
+  );
+  const { Plugin } = serviceData
+    ? Client.createService(serviceData.system.connectionData)
+    : {};
+  const [Before, setTestBefore] = useState([]);
+  const [After, setTestAfter] = useState([]);
+  const [Main, setTestMain] = useState([new Test({ namespace, shouldValidate: true })]);
+  const eventNamespace = { serviceId, moduleName, methodName: "on" };
+  const [Events, setEventTest] = useState([]);
+  const FullTest = [Before, Main, Events, After];
+  const [savedTests, setSavedTests] = useState([]);
+  const [saveResponse, setMessage] = useState({ message: "", error: false });
+  window.Tests = FullTest;
+  const testCtrl = (TestSection, setState, section, FullTest) =>
+    new TestController({
+      TestSection,
+      setState,
+      section,
+      FullTest,
+      connectedServices,
+    });
+  const MainCtrl = testCtrl(Main, setTestMain, 1, FullTest);
+  const BeforeCtrl = testCtrl(Before, setTestBefore, 0, FullTest);
+  const EventCtrl = testCtrl(Events, setEventTest, 2, FullTest);
+  const AfterCtrl = testCtrl(After, setTestAfter, 3, FullTest);
+
+  const { runFullTest, saveTests } = new FullTestController({
+    FullTest,
+    connectedServices,
+  });
+
+  const runTest = async () => {
+    const tests = await runFullTest();
+    setFullTest(tests);
+  };
+  const setFullTest = ([Before, Main, Events, After]) => {
+    setTestMain([...Main]);
+    setTestBefore([...Before]);
+    setEventTest([...Events]);
+    setTestAfter([...After]);
+  };
+  const clearMessage = () => setMessage({ error: false, message: "" });
+  const save = async () => {
+    const { error, message } = await saveTests();
+
+    if (!error) {
+      resetTests();
+      //fetchTests();
+    }
+
+    setMessage({ error, message });
+    setTimeout(clearMessage, 4000);
+  };
+
+  const fetchTests = async () => {
+    try {
+      if (Plugin) {
+        const results = await Plugin.getTests(namespace);
+        setSavedTests(results);
+      }
+    } catch (error) {
+      return [];
+    }
+  };
+  const resetTests = () => {
+    setTestBefore([]);
+    setTestAfter([]);
+    setEventTest([]);
+    //get connection for the main test and set state
+    const test = new Test({ namespace, shouldValidate: true }).getConnection(
+      connectedServices
+    );
+    setTestMain([test]);
+  };
+
+  useEffect(() => {
+    resetTests();
+    fetchTests();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [serviceId, moduleName, methodName, connectedServices]);
+
+  return (
+    <section className="test-panel">
+      <div className="container">
+        <div className="row">
+          <Title text="Scratch Pad" />
+          {typeof Main[0].index === "number" && (
+            <CurrentTest name={`Saved Test ${1 + Main[0].index}`} onClick={resetTests} />
+          )}
+        </div>
+        <div>
+          <span className="row test__buttons">
+            <span
+              className={`test-panel__error-message test-panel__error-message--hide-${!saveResponse.message} test-panel__error-message--error-${
+                saveResponse.error
+              } `}
+            >
+              <span>{saveResponse.message}</span>
+              <span onClick={clearMessage} className="test-panel__clear-error btn">
+                ×
+              </span>
+            </span>
+
+            <span>
+              <span className="btn" onClick={runTest}>
+                <RunTestIcon />
+              </span>
+              <span className="btn" onClick={save}>
+                <SaveIcon />
+              </span>
+            </span>
+          </span>
+
+          <div className="row test-panel__section">
+            <BeforeTest TestController={BeforeCtrl} TestSection={Before} />
+          </div>
+          <div className="row test-panel__section">
+            <MainTest TestController={MainCtrl} TestSection={Main} />
+          </div>
+
+          <div className="row test-panel__section">
+            <AfterTest TestController={AfterCtrl} TestSection={After} />
+          </div>
+          <div className="row test-panel__section">
+            <EventsTest
+              TestController={EventCtrl}
+              TestSection={Events}
+              namespace={eventNamespace}
+              FullTest={FullTest}
+            />
+          </div>
+          <div className="row test-panel__section">
+            <SavedTests
+              savedTests={savedTests}
+              connectedServices={connectedServices}
+              setFullTest={setFullTest}
+              Plugin={Plugin}
+              fetchTests={fetchTests}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="scroll-buffer"></div>
+    </section>
+  );
+};
+
+export default FullTest;

package/src/organisms/TestPanel/components/Argument.class.js

@@ -0,0 +1,94 @@
+import {
+  isTargetValueFn,
+  isTargetNamespace,
+  targetValueFnRegex,
+  obj,
+  isEqualArrays,
+  isFunction,
+  strFn,
+} from "./test-helpers";
+
+export function TargetValue(target_namespace, source_map = [], source_index = 0) {
+  this.target_namespace = target_namespace;
+  this.source_map = source_map;
+  this.source_index = source_index;
+}
+export default function Argument(
+  name,
+  FullTest,
+  input_type = "undefined",
+  input,
+  targetValues = []
+) {
+  this.name = name;
+  this.input = input;
+  this.input_type = input_type;
+  this.data_type = "";
+  this.targetValues = targetValues;
+
+  this.value = () => {
+    return this.targetValues.reduce((arg, { source_map, target_namespace: nsp }) => {
+      const [value, placeholder, key] = obj(arg).parse(source_map);
+
+      if (isTargetValueFn(nsp)) {
+        placeholder[key] = value
+          .trim()
+          .replace(nsp, getTargetValue(nsp.substring(3, nsp.length - 1)));
+      } else if (isTargetNamespace(nsp)) {
+        placeholder[key] = getTargetValue(nsp);
+      } else {
+        placeholder[key] = strFn(nsp);
+      }
+
+      return arg;
+      //creating a deep copy in order to lose refs to original
+    }, obj(this).clone()).input;
+  };
+
+  this.parseTargetValues = (input, source_map) => {
+    //extract one or more target replacer text from string (i.e. "tv(beforeTest.Action1.error)")
+    Array.from(input.matchAll(targetValueFnRegex)).forEach((match) => {
+      this.addTargetValue(match[0], source_map, match.index);
+    });
+    if (isTargetNamespace(input) || isFunction(input))
+      this.addTargetValue(input, source_map, 0);
+
+    return this;
+  };
+
+  this.checkTargetNamespaces = () => {
+    // check target namespaces against current input for deletion
+    //keep if the target value string still exist on this.input...
+    this.targetValues = this.targetValues.filter(
+      ({ target_namespace, source_map, source_index }) => {
+        const value = obj(this).valueAt(source_map);
+        return (
+          typeof value === "string" &&
+          value.indexOf(target_namespace, source_index) === source_index
+        );
+      }
+    );
+    return this;
+  };
+
+  this.addTargetValue = (target_namespace, source_map = [], source_index) => {
+    //check to see if target value already exists first
+    this.targetValues.findIndex(
+      (tv) =>
+        tv.target_namespace === target_namespace &&
+        isEqualArrays(tv.source_map, source_map) &&
+        tv.source_index === source_index
+    ) === -1 &&
+      this.targetValues.push(new TargetValue(target_namespace, source_map, source_index));
+    return this;
+  };
+
+  const getTargetValue = (input) => {
+    const [test, action] = input.split(".");
+    const nsp = input
+      .replace(test, { beforeTest: 0, mainTest: 1, Events: 2, afterTest: 3 }[test])
+      .replace(action, parseInt(action.replace("Action", "")) - 1)
+      .replace("error", "results");
+    return obj(FullTest).valueAtNsp(nsp);
+  };
+}

package/src/organisms/TestPanel/components/FullTestController.js

@@ -0,0 +1,78 @@
+import Test from "./Test.class";
+
+const sections = ["Before", "Main", "Events", "After"];
+
+export default function FullTestController({ FullTest, connectedServices }) {
+  this.runFullTest = async ([Before, Main, Events, After] = FullTest) => {
+    Events.forEach((test) => test.runTest());
+
+    await new Promise((resolve) => {
+      function recursiveRunTest(tests, i = 0) {
+        if (i === tests.length) resolve();
+        else tests[i].runTest().then(() => recursiveRunTest(tests, i + 1));
+      }
+      recursiveRunTest([...Before, ...Main, ...After]);
+    });
+
+    return [Before, Main, Events, After];
+  };
+
+  function validateTest({ title, evaluations, shouldValidate }, section, index) {
+    if (!title)
+      return {
+        message: `${sections[section]}: Action ${index + 1} description is required`,
+        error: true,
+      };
+    if (shouldValidate && !evaluations.filter((e) => e.save).length)
+      return {
+        message: `${sections[section]}: Action ${index + 1} validations required`,
+        error: true,
+      };
+
+    return { error: false };
+  }
+  this.saveTests = async (Tests = FullTest) => {
+    const { title, getConnection, namespace, index } = Tests[1][0];
+
+    for (let i = 0; i < Tests.length; i++) {
+      for (let x = 0; x < Tests.length; x++) {
+        const res = Tests[i][x] ? validateTest(Tests[i][x], i, x) : {};
+        if (res.error) return res;
+      }
+    }
+
+    const { connection } = getConnection(connectedServices);
+
+    const { Plugin } = connection[namespace.serviceId];
+
+    if (Plugin) {
+      const [Before, Main, Events, After] = Tests.map((testSection) =>
+        testSection.map((test) => {
+          const { args, evaluations, namespace, title } = test;
+          //resetting scope of test
+          Object.assign(test, new Test(test));
+          return {
+            args,
+            namespace,
+            title,
+            savedEvaluations: evaluations
+              .filter((e) => e.save)
+              .map(({ namespace, expected_type, validations, save, indexed }) => ({
+                namespace,
+                expected_type,
+                validations,
+                save,
+                indexed,
+              })),
+          };
+        })
+      );
+
+      const testIndex = await Plugin.saveTest(
+        { Before, Main, Events, After, title, namespace },
+        index
+      );
+      return { message: "Test Saved!", error: false, testIndex };
+    } else return { message: "Plugin Plugin not connected!", error: true };
+  };
+}

package/src/organisms/TestPanel/components/Test.class.js

@@ -0,0 +1,162 @@
+import { validateResults } from "../../../molecules/ValidationInput/validator";
+import { Client } from "systemlynx";
+import moment from "moment";
+import { getArrayNamespaces, getLastArrayNamespace, obj } from "./test-helpers";
+
+export default function Test({
+  namespace,
+  args,
+  title,
+  shouldValidate = false,
+  savedEvaluations = [],
+  index,
+  editMode = true,
+}) {
+  const logger = new TestLogger(this);
+  this.index = index;
+  this.connection = {};
+  this.title = title;
+  this.args = args || [];
+  this.editMode = editMode;
+  this.shouldValidate = shouldValidate || !!savedEvaluations.length;
+  this.namespace = namespace || {
+    serviceId: "",
+    moduleName: "",
+    methodName: "",
+  };
+  this.clearResults = () => {
+    this.results = null;
+    this.response_type = "";
+    this.test_start = null;
+    this.test_end = null;
+    this.evaluations = [];
+    this.savedEvaluations = obj(savedEvaluations).clone();
+    this.errors = [];
+    return this;
+  };
+
+  this.clearResults();
+
+  this.getErrors = () => {
+    this.errors = this.evaluations
+      .filter(({ save }) => save)
+      .reduce(
+        (sum, { errors, namespace }) =>
+          sum.concat(errors.map((e) => ({ ...e, namespace }))),
+        []
+      );
+    return this.errors;
+  };
+
+  this.validate = validateResults.bind(this);
+
+  this.runTest = async () => {
+    const { serviceId, moduleName, methodName } = this.namespace;
+    const args = this.args.map((arg) => arg.value());
+
+    this.test_start = moment().toJSON();
+    const Module = this.connection[serviceId][moduleName];
+    if (methodName === "on") {
+      const eventTest = (e) => {
+        this.results = e;
+        this.test_end = moment().toJSON();
+        this.response_type = "event";
+        this.shouldValidate && this.validate();
+        logger.end();
+        Module.$clearEvent(args[0], "eventTest");
+      };
+      logger.start(args);
+      Module.on(args[0], eventTest);
+    } else {
+      try {
+        logger.start(args);
+        this.results = await Module[methodName](...args);
+        this.test_end = moment().toJSON();
+        this.response_type = "results";
+        this.shouldValidate && this.validate();
+        logger.end();
+      } catch (error) {
+        this.test_end = moment().toJSON();
+        this.results = error;
+        this.response_type = "error";
+        this.shouldValidate && this.validate();
+        logger.end();
+      }
+    }
+    return this;
+  };
+
+  this.getConnection = (connectedServices) => {
+    const { serviceId } = this.namespace;
+
+    if (connectedServices.length > 0) {
+      const service = connectedServices.find(
+        (service) => service.serviceId === serviceId
+      );
+      if (!service) {
+        console.warn("connection data not found");
+        return this;
+      }
+      const { connectionData } = service.system;
+
+      this.connection[serviceId] = Client.createService(connectionData);
+    }
+
+    return this;
+  };
+
+  this.addEvaluation = (evaluation) => {
+    const savedEval = this.savedEvaluations.find(
+      ({ namespace }) => namespace === evaluation.namespace
+    );
+    if (savedEval) Object.assign(savedEval, evaluation);
+    else this.savedEvaluations.push(evaluation);
+  };
+  this.removeEvaluation = (namespace) => {
+    const index = this.savedEvaluations.findIndex((e) => e.namespace === namespace);
+    if (index > -1) return this.savedEvaluations.splice(index, 1)[0];
+    else return {};
+  };
+
+  this.addSavedIndices = (arrayNamespace, newArrayNamespace) => {
+    //break namespace into multiple array namespaces
+    const nspList = getArrayNamespaces(arrayNamespace);
+    this.evaluations.forEach((e) => {
+      if (nspList.includes(getLastArrayNamespace(e.namespace))) {
+        e.namespace = e.namespace.replace(arrayNamespace, newArrayNamespace);
+        e.indexed = true;
+        e.expected_type = undefined;
+        this.addEvaluation(e);
+      }
+    });
+  };
+  this.removeSavedIndices = (namespace) => {
+    this.savedEvaluations = this.savedEvaluations.filter(
+      (e) => !e.namespace.includes(namespace) //|| !e.indexed
+    );
+  };
+}
+
+function TestLogger(test) {
+  this.start = (args) => {
+    const { serviceId, moduleName, methodName } = test.namespace;
+
+    console.log(
+      `[${moment(this.test_start).format(
+        "L LTS"
+      )}]> [invoking]:${serviceId}.${moduleName}.${methodName}()`
+    );
+    console.log.apply({}, ["args:"].concat(args));
+  };
+  this.end = () => {
+    const { serviceId, moduleName, methodName } = test.namespace;
+    const { results, response_type } = test;
+    console.log(
+      `[${moment(this.test_end).format(
+        "L LTS"
+      )}]> [${response_type}]:${serviceId}.${moduleName}.${methodName}()`,
+      `${response_type}:`,
+      results
+    );
+  };
+}

package/src/organisms/TestPanel/components/TestController.class.js

@@ -0,0 +1,135 @@
+import { getType } from "../../../molecules/ValidationInput/validator";
+import Test from "./Test.class";
+import Argument, { TargetValue } from "./Argument.class";
+export default function TestController({
+  TestSection,
+  setState,
+  section,
+  FullTest,
+  connectedServices,
+}) {
+  this.runTest = async (testIndex) => {
+    const test = TestSection[testIndex];
+    //run only one test
+    await test.runTest();
+    setState([...TestSection]);
+  };
+
+  this.runAllTest = async () => {};
+
+  this.updateNamespace = (index, namespace) => {
+    TestSection[index].namespace = namespace;
+    TestSection[index].getConnection(connectedServices);
+    setState([...TestSection]);
+  };
+  this.addTest = (namespace, args, title) => {
+    TestSection.push(new Test({ namespace, args, title, editMode: true }));
+    setState([...TestSection]);
+    if (namespace) this.updateNamespace(TestSection.length - 1, namespace);
+  };
+  this.deleteTest = (index) => {
+    TestSection.splice(index, 1);
+    setState([...TestSection]);
+  };
+  this.addArg = (index) => {
+    const name = "arg" + (TestSection[0].args.length + 1);
+    TestSection[index].args.push(new Argument(name, FullTest));
+    setState([...TestSection]);
+  };
+  this.deleteArg = (index, arg_index) => {
+    TestSection[index].args.splice(arg_index, 1);
+    setState([...TestSection]);
+  };
+  this.editArg = (index, arg_index, arg) => {
+    arg.data_type = getType(arg.input);
+    TestSection[index].args[arg_index] = arg;
+    setState([...TestSection]);
+  };
+  this.resetResults = (index) => {
+    TestSection[index].clearResults();
+    setState([...TestSection]);
+  };
+
+  this.addTargetValue = (
+    testIndex,
+    arg_index,
+    target_namespace,
+    source_map,
+    source_index
+  ) => {
+    //check to see if target value already exists first
+    const arg = TestSection[testIndex].args[arg_index];
+    arg.addTargetValue(target_namespace, source_map, source_index);
+    setState([...TestSection]);
+  };
+  this.setTargetValue = (
+    testIndex,
+    arg_index,
+    target_index,
+    target_namespace,
+    source_map,
+    source_index
+  ) => {
+    const arg = TestSection[testIndex].args[arg_index];
+
+    arg.targetValues[target_index] = new TargetValue(
+      target_namespace.trim(),
+      source_map,
+      source_index
+    );
+    setState([...TestSection]);
+  };
+
+  this.parseTargetValues = (testIndex, arg_index, input, source_map) => {
+    const arg = TestSection[testIndex].args[arg_index];
+    arg.parseTargetValues(input, source_map).checkTargetNamespaces();
+    setState([...TestSection]);
+  };
+  this.checkTargetValues = (testIndex, arg_index) => {
+    const arg = TestSection[testIndex].args[arg_index];
+    arg.checkTargetNamespaces();
+    setState([...TestSection]);
+  };
+  this.updateTitle = (testIndex, title) => {
+    TestSection[testIndex].title = title;
+    setState([...TestSection]);
+  };
+  this.updateEvaluations = (testIndex, evaluations) => {
+    TestSection[testIndex].evaluations = evaluations;
+    setState([...TestSection]);
+  };
+  this.updateTests = () => {
+    setState([...TestSection]);
+  };
+  this.updateValidationStatus = (testIndex) => {
+    if (section !== 1) {
+      TestSection[testIndex].shouldValidate = !TestSection[testIndex].shouldValidate;
+      if (TestSection[testIndex].shouldValidate) TestSection[testIndex].validate();
+      else TestSection[testIndex].evaluations = [];
+      setState([...TestSection]);
+    }
+  };
+  this.getTargetSuggestions = (testIndex) => {
+    //get target value suggestion (namespaces) for previous test including sub test
+    const suggestions = [];
+    const test_names = ["beforeTest", "mainTest", "afterTest"];
+    //exclude all test sections following current section
+    const targetTests = FullTest.slice(0, section + 1);
+
+    targetTests.forEach((test_section, sIndex) => {
+      //also exclude current test and the tests that follow from the suggestions
+      const count = sIndex === section ? testIndex : test_section.length;
+      for (let i = 0; i < count; i++) {
+        suggestions.push(
+          `${test_names[sIndex]}.${"Action" + (i + 1) + "."}${
+            test_section[i].response_type || "results"
+          }`
+        );
+      }
+    });
+
+    return suggestions;
+  };
+
+  return this;
+}