Merge pull request #42 from agile-ts/tests/rewrite-tests

Tests/rewrite tests

Author: bennobuilder

examples/AwesomeTSProject/__tests__/App-test.tsx

@@ -0,0 +1 @@
+ SKIP_PREFLIGHT_CHECK=true

examples/react-typescript/.env

@@ -15,10 +15,8 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

examples/react-typescript/package-lock.json

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import "./App.css";
 import { useAgile, useEvent, useWatcher } from "@agile-ts/react";
 import {
-  multiEditor,
   MY_COLLECTION,
   MY_COMPUTED,
   MY_EVENT,
@@ -49,8 +48,6 @@ const App = (props: any) => {
     console.log("MY_STATE changes");
   });
 
-  useAgile(multiEditor.deps);
-
   // Create global Instance of Core (for better debugging)
   useEffect(() => {
     globalBind("__core__", { ...require("./core") });
@@ -120,43 +117,8 @@ const App = (props: any) => {
         <button onClick={() => MY_COLLECTION.removeSelector("mySelector")}>
           Remove mySelector
         </button>
-      </header>
-
-      <form>
-        <label>Name</label>
-        <input
-          name={"name"}
-          onChange={(e) => {
-            multiEditor.setValue("name", e.target.value, { background: false });
-          }}
-          value={multiEditor.getValueById("name")}
-        />
-        {multiEditor.getStatus("name")?.type === "error" && (
-          <p style={{ color: "red" }}>
-            {multiEditor.getStatus("name")?.message}
-          </p>
-        )}
-
-        <label>Email</label>
-        <input
-          name={"email"}
-          onChange={(e) => multiEditor.setValue("email", e.target.value)}
-        />
-        {multiEditor.getStatus("email")?.type === "error" && (
-          <p style={{ color: "red" }}>
-            {multiEditor.getStatus("email")?.message}
-          </p>
-        )}
-
         <p>{rerenderCount}</p>
-      </form>
-      <button
-        onClick={() => {
-          multiEditor.submit();
-        }}
-      >
-        Submit
-      </button>
+      </header>
     </div>
   );
 };

examples/react-typescript/package.json

@@ -1,12 +1,13 @@
-import { Agile } from "@agile-ts/core";
-import { MultiEditor, Validator } from "@agile-ts/multieditor";
+import { Agile, clone, Logger } from "@agile-ts/core";
 
 export const App = new Agile({
-  logConfig: { active: true },
+  logConfig: { level: Logger.level.DEBUG },
 });
 
-export const MY_STATE = App.State<string>("MyState", "my-state"); //.persist();
-export const MY_STATE_2 = App.State<string>("MyState2").persist("my-state2");
+export const MY_STATE = App.State<string>("MyState", { key: "my-state" }); //.persist();
+export const MY_STATE_2 = App.State<string>("MyState2", {
+  key: "my-state2",
+}).persist();
 MY_STATE_2.onLoad(() => {
   console.log("On Load");
 });
@@ -18,7 +19,7 @@ MY_STATE.watch("test", (value: any) => {
 
 export const MY_COMPUTED = App.Computed<string>(() => {
   return "test" + MY_STATE.value + "_computed_" + MY_STATE_2.value;
-});
+}, []);
 
 interface collectionValueInterface {
   id: string;
@@ -39,12 +40,15 @@ export const MY_COLLECTION = App.Collection<collectionValueInterface>(
 MY_COLLECTION.collect({ id: "id1", name: "test" });
 MY_COLLECTION.collect({ id: "id2", name: "test2" }, "myGroup");
 MY_COLLECTION.update("id1", { id: "id1Updated", name: "testUpdated" });
-MY_COLLECTION.getGroup("myGroup")?.persist({ followCollectionPattern: true });
+MY_COLLECTION.getGroup("myGroup")?.persist({
+  followCollectionPersistKeyPattern: true,
+});
 
-console.log("Initial: myCollection ", MY_COLLECTION);
+console.log("Initial: myCollection ", clone(MY_COLLECTION));
 
 export const MY_EVENT = App.Event<{ name: string }>({
   delay: 3000,
+  key: "myEvent",
 });
 
 MY_EVENT.on(() => {
@@ -55,51 +59,6 @@ MY_EVENT.on("Test", () => {
   console.log("Triggered Event (Test)");
 });
 
-// MULTIEDITOR TEST
-
-const emailValidator = new Validator().string().email().required();
-
-export const multiEditor = new MultiEditor<string | undefined, boolean>(
-  (editor) => ({
-    data: {
-      id: "myId",
-      email: undefined,
-      name: undefined,
-    },
-    onSubmit: async (data) => {
-      console.log("Submitted MultiEditor", data);
-      return Promise.resolve(true);
-    },
-    fixedProperties: ["id"],
-    validateMethods: {
-      email: emailValidator,
-      name: editor
-        .Validator()
-        .required()
-        .string()
-        .max(10)
-        .min(2)
-        .addValidationMethod("testFuck", (key, value, editor) => {
-          const isValid = value !== "Fuck";
-
-          if (!isValid) {
-            editor.setStatus(key, "error", "Fuck is no valid Name!");
-          }
-
-          return Promise.resolve(isValid);
-        }),
-    },
-    computeMethods: {
-      name: (value) => {
-        return value ? value?.charAt(0).toUpperCase() + value?.slice(1) : value;
-      },
-    },
-    editableProperties: ["email", "name"],
-    reValidateMode: "onChange",
-    validate: "all",
-  })
-);
-
 // LOGGER tests
 
 /*

examples/react-typescript/src/App.tsx

@@ -0,0 +1,9 @@
+module.exports = {
+  testEnvironment: "node",
+  coveragePathIgnorePatterns: ["(tests/.*.mock).(jsx?|tsx?)$"],
+  modulePathIgnorePatterns: ["dist"],
+  testMatch: ["<rootDir>/packages/**/tests/**/*.test.ts"],
+  transform: {
+    "^.+\\.ts?$": "ts-jest",
+  },
+};

examples/react-typescript/src/core/index.ts

@@ -0,0 +1,6 @@
+const baseConfig = require("./jest.config.base.js");
+
+module.exports = {
+  ...baseConfig,
+  projects: ["<rootDir>/packages/*/jest.config.js"],
+};