systemview 1.0.1 → 1.1.2

package/src/organisms/TestPanel/Evaluations.js

@@ -0,0 +1,369 @@
+import React, { useState, useEffect } from "react";
+import ExpandableSection from "../../molecules/ExpandableSection/ExpandableSection";
+import ValidationInput from "../../molecules/ValidationInput/ValidationInput";
+import ValidationOptions, {
+  inputToTypes,
+} from "../../molecules/ValidationInput/ValidationOptions";
+import TypeSelector from "../../atoms/TypeSelector/TypeSelector";
+import { getErrors, defaultValue } from "../../molecules/ValidationInput/validator";
+import Count from "../../atoms/Count";
+import { endsWithArrayIndex } from "./components/test-helpers";
+
+const validationCount = (evaluations) =>
+  evaluations.reduce((sum, e) => (e.save ? e.validations.length + 1 : 0) + sum, 0);
+export default function Evaluations({ test, updateTests }) {
+  const { evaluations, errors } = test;
+  const [open, setOpen] = useState(false);
+  const [saveAll, setSaveAll] = useState(!test.savedEvaluations.length);
+  const [totalValidations, setTotalValidations] = useState(
+    validationCount(test.evaluations)
+  );
+  const toggleExpansion = () => {
+    setOpen((state) => !state);
+  };
+
+  const updateEvaluation = (evaluation) => {
+    evaluation.errors = getErrors(evaluation);
+    test.addEvaluation(evaluation);
+    test.errors = test.getErrors();
+    updateTests();
+  };
+
+  const addValidation = (x) => {
+    const { expected_type } = evaluations[x];
+    const input_type = ValidationOptions[expected_type].inputs[0];
+    evaluations[x].validations.push({
+      name: ValidationOptions[expected_type].values[0],
+      value: defaultValue(inputToTypes[input_type]),
+    });
+    updateEvaluation(evaluations[x]);
+    setTotalValidations(validationCount(evaluations));
+  };
+
+  const deleteValidation = (x, y) => {
+    evaluations[x].validations.splice(y, 1);
+    updateEvaluation(evaluations[x]);
+    setTotalValidations(validationCount(evaluations));
+  };
+
+  const updateValidations = (x, y, p, v) => {
+    evaluations[x].validations[y][p] = v;
+    updateEvaluation(evaluations[x]);
+  };
+
+  const updateExpectedType = (x, e) => {
+    evaluations[x].expected_type = e.target.value;
+    evaluations[x].validations = [];
+    updateEvaluation(evaluations[x]);
+  };
+
+  const updateSaveStatus = (x, save) => {
+    evaluations[x].save = save;
+    updateEvaluation(evaluations[x]);
+    setTotalValidations(validationCount(evaluations));
+  };
+
+  const toggleAllSaveStatuses = () => {
+    setSaveAll(!saveAll);
+    test.evaluations = test.evaluations.map((e) => ({ ...e, save: !saveAll }));
+    test.errors = test.getErrors();
+    updateTests();
+    setTotalValidations(validationCount(evaluations));
+  };
+
+  useEffect(() => {
+    if (test.test_end !== null) {
+      updateTests(test.evaluations);
+    } else {
+      updateTests([]);
+    }
+    if (test.test_end !== null) setTotalValidations(validationCount(test.evaluations));
+  }, [test.evaluations, test.test_end]);
+
+  return (
+    <div className={`evaluations evaluations--visible-${evaluations.length > 0}`}>
+      <ExpandableSection
+        open={open}
+        toggleExpansion={toggleExpansion}
+        title={
+          <>
+            <div className={`evaluations__title evaluations--error-${errors.length > 0}`}>
+              <span className="evaluations__namespace">
+                {errors.length > 0 ? "Test Failed: " : "Test Passed: "}
+              </span>
+              <span
+                className={`evaluations__type evaluations--error-${errors.length > 0}`}
+              >
+                <Count count={errors.length} type={errors.length && "error"} /> errors
+              </span>
+              <Count count={totalValidations} />{" "}
+              <span className="evaluations__total">Total</span>
+            </div>
+            <input
+              className="evaluations__checkbox"
+              type="checkbox"
+              checked={saveAll}
+              onChange={toggleAllSaveStatuses}
+            />
+          </>
+        }
+      >
+        {evaluations.map(
+          (
+            { namespace, type, expected_type, save, errors, validations, indexed, value },
+            i
+          ) => {
+            return (
+              <EvaluationRow
+                key={i}
+                namespace={namespace}
+                type={type}
+                expected_type={expected_type}
+                errors={errors}
+                validations={validations}
+                index={i}
+                addValidation={addValidation}
+                deleteValidation={deleteValidation}
+                updateValidations={updateValidations}
+                updateExpectedType={updateExpectedType}
+                updateSaveStatus={updateSaveStatus}
+                updateTests={updateTests}
+                save={save}
+                test={test}
+                indexed={indexed}
+                value={value}
+              />
+            );
+          }
+        )}
+      </ExpandableSection>
+    </div>
+  );
+}
+
+const EvaluationRow = ({
+  namespace,
+  type,
+  expected_type,
+  errors,
+  validations,
+  index,
+  addValidation,
+  deleteValidation,
+  updateValidations,
+  updateExpectedType,
+  updateSaveStatus,
+  updateTests,
+  save,
+  test,
+  indexed,
+  value,
+}) => {
+  const calcWidth = (text = "") => Math.ceil(text.length / 0.12);
+  const [type_width, setWidth] = useState(calcWidth(0));
+  const style = { "--type-width": type_width + "px" };
+  const [open, setOpen] = useState(errors.length && validations.length);
+
+  const typeError = !!errors.find(({ name }) => name === "typeError");
+  const toggleExpansion = () => {
+    setOpen((state) => !state);
+  };
+  const onSelect = (i, e) => {
+    updateExpectedType(i, e);
+    setWidth(calcWidth(e.target.value));
+  };
+  const toggleSave = () => updateSaveStatus(index, !save);
+  useEffect(
+    () => setWidth(calcWidth(expected_type)),
+
+    [expected_type, type_width]
+  );
+
+  useEffect(() => {
+    if (errors.length && validations.length) setOpen(true);
+  }, [errors]);
+  return (
+    <ExpandableSection
+      open={open}
+      toggleExpansion={toggleExpansion}
+      title={
+        <>
+          <div className={`evaluations__title`} style={style}>
+            {endsWithArrayIndex(namespace) ? (
+              <ArrayNamespace
+                updateTests={updateTests}
+                namespace={namespace}
+                test={test}
+                indexed={indexed}
+                value={value}
+              />
+            ) : (
+              <span
+                className={`evaluations__namespace evaluations--error-${
+                  errors.length > 0
+                }`}
+              >
+                {namespace}:{" "}
+              </span>
+            )}
+            <TypeSelector
+              default_type={expected_type}
+              onSelect={onSelect.bind(this, index)}
+            />
+            <span
+              className={`evaluations__type-error-msg 
+              evaluations__type-error-msg--${typeError} 
+              evaluations--error-${typeError}`}
+            >
+              (received {type})
+            </span>
+            {!!validations.length && <Count count={validations.length} />}
+          </div>
+          <input
+            className="evaluations__checkbox"
+            type="checkbox"
+            checked={save}
+            onChange={toggleSave}
+          />
+        </>
+      }
+    >
+      <div className="evaluations__row">
+        <span
+          className={`evaluations__input evaluations__input--visible-${
+            expected_type !== "object" &&
+            expected_type !== "null" &&
+            expected_type !== "undefined"
+          }`}
+        >
+          <div className="evaluations__add-btn-container">
+            <span
+              className="evaluations__add-validation-btn btn"
+              onClick={addValidation.bind(this, index)}
+            >
+              +
+            </span>
+          </div>
+          <div className="evaluations__validation-container">
+            {validations.map(({ name, value }, i) => {
+              const isError = !!errors.find(({ name: errName }) => errName === name);
+              return (
+                <div className="evaluations__validation" key={i}>
+                  <ValidationInput
+                    className={`evaluations--error-${isError} evaluations__validation__input`}
+                    type={expected_type}
+                    name={name}
+                    value={value}
+                    onSelect={updateValidations.bind(this, index, i, "name")}
+                    onInputChanged={updateValidations.bind(this, index, i, "value")}
+                  />
+                  <span
+                    className="evaluations__validation__delete-btn btn"
+                    onClick={deleteValidation.bind(this, index, i)}
+                  >
+                    x
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </span>
+      </div>
+    </ExpandableSection>
+  );
+};
+
+function ArrayNamespace({ namespace, errorCount, updateTests, test, indexed, value }) {
+  const [name = "", index = ""] = namespace.split(/(\[\d+\])$/);
+  const [open, setOpen] = useState(false);
+  const [isIndexed, setIsIndexed] = useState(!!indexed);
+  const [testIndex, setIndex] = useState(parseInt(index.substr(1, index.length - 1)));
+
+  const inputChange = (e) => setIndex(parseInt(e.target.value));
+  const add = () => {
+    // push ensures that the evaluation namespace is add and not overwritten
+    test.savedEvaluations.push({
+      namespace: `${name}[${testIndex + 1}]`,
+      save: true,
+      indexed: true,
+    });
+
+    if (!indexed)
+      //add the current index because the test will only use the one
+      //saved index, but we need the current index to stay as well
+      test.addSavedIndices(namespace, `${name}[${testIndex}]`);
+
+    test.validate();
+    updateTests();
+    setOpen(false);
+  };
+  const show = () => setOpen(true);
+
+  const hide = () => {
+    test.removeSavedIndices(namespace);
+    if (isIndexed) {
+      test.addSavedIndices(namespace, `${name}[${testIndex}]`);
+    } else {
+      const e = test.evaluations.find((e) => e.namespace === namespace);
+      if (e) {
+        e.indexed = false;
+        e.expected_type = undefined;
+        test.addEvaluation(e);
+      }
+    }
+    test.validate();
+    updateTests();
+    setOpen(false);
+  };
+  const handleCheck = (e) => setIsIndexed(e.target.checked);
+
+  useEffect(() => setIsIndexed(!!indexed), [indexed]);
+  useEffect(() => {
+    const [name = "", index = ""] = namespace.split(/(\[\d+\])$/);
+    setIndex(parseInt(index.substr(1, index.length - 1)));
+  }, [namespace]);
+
+  return (
+    <span className={`evaluations__namespace evaluations--error-${errorCount > 0}`}>
+      <span>{name}</span>
+      {!open ? (
+        <span
+          onClick={show}
+          className={`evaluations__index-button btn evaluations__index-button--indexed-${isIndexed}`}
+        >
+          {index}
+        </span>
+      ) : (
+        <span className={`evaluations__index-button`}>
+          <span className="evaluations__brackets">{"["}</span>
+          {isIndexed ? (
+            <input
+              className="evaluations__index-input"
+              type={"number"}
+              onChange={inputChange}
+              min={0}
+              //max={value.length}
+              value={testIndex}
+            />
+          ) : (
+            <span className="evaluations__random">random</span>
+          )}
+          <input
+            className="evaluations__index-checkbox"
+            checked={isIndexed}
+            onChange={handleCheck}
+            type={"checkbox"}
+          />
+          <span onClick={add} className="evaluations__add-index-btn btn">
+            +
+          </span>
+          <span className="evaluations__brackets">{"]"}</span>
+          <span onClick={hide} className="evaluations__clear-error btn">
+            ×
+          </span>
+        </span>
+      )}
+      :{" "}
+    </span>
+  );
+}

package/src/organisms/TestPanel/EventsTest/EventsTest.js

@@ -0,0 +1,19 @@
+import React from "react";
+import MultiTestSection from "../../MultiTestSection/MultiTestSection";
+import "./styles.scss";
+
+const EventsTest = ({ TestSection, TestController, namespace, FullTest, connection }) => {
+  return (
+    <MultiTestSection
+      dynamic={false}
+      TestSection={TestSection}
+      TestController={TestController}
+      namespace={namespace}
+      arg={{ name: "event_name", input_type: "string", FullTest }}
+      caption="Events"
+      staticArguments={true}
+    />
+  );
+};
+
+export default EventsTest;

package/src/organisms/TestPanel/MainTest/MainTest.js

@@ -0,0 +1,20 @@
+import React from "react";
+import TestContainer from "../../TestContainer/TestContainer";
+
+import "./styles.scss";
+
+const MainTest = ({ TestController, TestSection }) => {
+  return (
+    <section className="current-data-section">
+      <TestContainer
+        title="Main:"
+        open={true}
+        test={TestSection[0]}
+        testIndex={0}
+        TestController={TestController}
+      />
+    </section>
+  );
+};
+
+export default MainTest;

package/src/organisms/TestPanel/MainTest/styles.scss

@@ -0,0 +1,143 @@
+.evaluations {
+  background: #25d0a8;
+  background: #76b1f7;
+  background: #ced8f4;
+
+  border-radius: 0px 0px 4px 4px;
+  overflow-wrap: anywhere;
+  padding: 12px 18px;
+  font-family: monospace;
+  &--visible-false {
+    display: none;
+  }
+  &__row {
+    margin: 4px;
+    padding: 8px 5px;
+  }
+
+  &__title {
+    --type-width: auto;
+    margin-left: 10px;
+    width: 100%;
+    & select {
+      width: var(--type-width);
+    }
+  }
+
+  &__input {
+    & > input {
+      width: 100%;
+      padding: 6px 9px;
+      margin: 8px 0;
+      box-sizing: border-box;
+      border: none;
+      border: 1px solid #383836;
+      background: #a5ffda;
+    }
+    &--visible-false {
+      display: none;
+    }
+  }
+  &__add-validation-btn {
+    background: #5a77ca;
+    padding: 0px 5px 1px 5px;
+    border-radius: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  &__validation-container {
+    display: inline-grid;
+    margin-left: 4px;
+  }
+  &__add-btn-container {
+    display: inline-grid;
+  }
+  &__validation {
+    border-bottom: 1px solid #9797d1;
+    &__delete-btn {
+      display: inline;
+      font-family: system-ui;
+      margin-left: 6px;
+      font-size: 15px;
+      color: #6565a1;
+      &:hover {
+        color: #c30f0f;
+      }
+    }
+    &__input {
+      display: inline-flex;
+    }
+  }
+  &__type-error-msg {
+    display: none;
+    &--true {
+      display: initial;
+    }
+  }
+  &--error-true,
+  &--error-true > * {
+    color: #cd4343;
+    //color: #993939;
+    font-weight: bold;
+    //font-style: italic;
+  }
+  &__total {
+    color: grey;
+  }
+  &__checkbox {
+    cursor: pointer;
+  }
+  &__index-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &.btn:hover {
+      font-weight: bold;
+      color: #2326fe;
+      color: #ff5722;
+      color: #c717e5;
+      color: #1131df;
+    }
+    &--indexed-true {
+      font-weight: bold;
+    }
+  }
+  &__namespace {
+    display: inline-flex;
+    flex-wrap: wrap;
+  }
+
+  &__index-input {
+    width: 45px;
+    height: 15px;
+  }
+
+  &__brackets {
+    align-self: baseline;
+    font-size: 14px;
+    color: black;
+    font-weight: bold;
+  }
+
+  &__index-checkbox {
+    cursor: pointer;
+  }
+  &__random {
+    align-self: baseline;
+    font-weight: bold;
+    color: #2b9b2c;
+    font-style: italic;
+  }
+  &__clear-error {
+    color: gray;
+    font-size: 16px;
+    &:hover {
+      color: black;
+    }
+  }
+  &__add-index-btn {
+    color: #2776ff;
+    font-weight: bold;
+    font-size: 16px;
+  }
+}