Testing Improvements (#715)

Co-authored-by: Sijawusz Pur Rahnama <[email protected]>

core/tests/tests/GlobalComponent.mint

@@ -0,0 +1,11 @@
+global component GlobalTest {
+  fun render : Html {
+    <div class="global-component"/>
+  }
+}
+
+suite "Global Component" {
+  test "It renders on the page" {
+    Dom.getElementBySelector(".global-component") != Maybe.Nothing
+  }
+}

core/tests/tests/Test.mint

@@ -17,3 +17,25 @@ suite "Test (Function)" {
     test() == ""
   }
 }
+
+suite "Test with HTML reference" {
+  test "it works" {
+    <button as button/>
+    |> Test.Html.start
+    |> Test.Context.map((item : Dom.Element) { button != Maybe.Nothing })
+  }
+}
+
+component TestReference {
+  fun render {
+    <div>"TestReference"</div>
+  }
+}
+
+suite "Test with Component reference" {
+  test "it works" {
+    <TestReference as button/>
+    |> Test.Html.start
+    |> Test.Context.map((item : Dom.Element) { button != Maybe.Nothing })
+  }
+}

runtime/src/testing.js

@@ -1,4 +1,5 @@
 import { compare } from "./equality";
+import { render, h } from "preact";
 
 // This is a class for tests. It allows to have multiple steps which are
 // evaluated asynchronously.
@@ -50,8 +51,12 @@ class TestContext {
 // This is the test runner which runs the tests and sends reports to
 // the CLI using websockets.
 class TestRunner {
-  constructor(suites, url, id) {
+  constructor(suites, globals, url, id) {
+    this.root = document.createElement("div")
+    document.body.appendChild(this.root);
+
     this.socket = new WebSocket(url);
+    this.globals = globals;
     this.suites = suites;
     this.url = url;
     this.id = id;
@@ -92,6 +97,16 @@ class TestRunner {
     this.start();
   }
 
+  renderGlobals() {
+    const components = [];
+
+    for (let key in this.globals) {
+      components.push(h(this.globals[key], { key: key }));
+    }
+
+    render(components, this.root);
+  }
+
   start() {
     if (this.socket.readyState === 1) {
       this.run();
@@ -137,7 +152,31 @@ class TestRunner {
     this.report("LOG", null, null, message);
   }
 
-  next(resolve, reject) {
+  cleanSlate() {
+    return new Promise((resolve) => {
+      // Cleanup globals.
+      render(null, this.root);
+
+      // Set the URL to the root one.
+      if (window.location.pathname !== "/") {
+        window.history.replaceState({}, "", "/");
+      }
+
+      // Clear storages.
+      sessionStorage.clear();
+      localStorage.clear();
+
+      // TODO: Reset Stores
+
+      // Wait for rendering.
+      requestAnimationFrame(() => {
+        this.renderGlobals();
+        requestAnimationFrame(resolve);
+      })
+    })
+  }
+
+  next(resolve) {
     requestAnimationFrame(async () => {
       if (!this.suite || this.suite.tests.length === 0) {
         this.suite = this.suites.shift();
@@ -152,18 +191,9 @@ class TestRunner {
       const test = this.suite.tests.shift();
 
       try {
-        const result = await test.proc.call(this.suite.context);
+        await this.cleanSlate();
 
-        // Set the URL to the root one.
-        if (window.location.pathname !== "/") {
-          window.history.replaceState({}, "", "/");
-        }
-
-        // Clear storages.
-        sessionStorage.clear();
-        localStorage.clear();
-
-        // TODO: Reset Stores
+        const result = await test.proc();
 
         if (result instanceof TestContext) {
           try {
@@ -184,7 +214,7 @@ class TestRunner {
         this.reportTested(test, "ERRORED", error);
       }
 
-      this.next(resolve, reject);
+      this.next(resolve);
     });
   }
 }

spec/compilers/test

@@ -0,0 +1,21 @@
+suite "Test" {
+  test "X" {
+    true
+  }
+}
+--------------------------------------------------------------------------------
+import { testRunner as A } from "./runtime.js";
+
+export default () => {
+  new A([{
+    tests: [{
+      proc: () => {
+        return true
+      },
+      location: {"start":[2,2],"end":[4,3],"filename":"compilers/test"},
+      name: `X`
+    }],
+    location: {"start":[1,0],"end":[5,1],"filename":"compilers/test"},
+    name: `Test`
+  }], {}, ``, ``)
+};

spec/compilers/test_with_global_component

@@ -0,0 +1,36 @@
+global component Modal {
+  fun render : Html {
+    <div>"Hello"</div>
+  }
+}
+
+suite "Test" {
+  test "X" {
+    true
+  }
+}
+--------------------------------------------------------------------------------
+import {
+  createElement as A,
+  testRunner as B
+} from "./runtime.js";
+
+export const C = () => {
+  return A(`div`, {}, [`Hello`])
+};
+
+export default () => {
+  new B([{
+    tests: [{
+      proc: () => {
+        return true
+      },
+      location: {"start":[8,2],"end":[10,3],"filename":"compilers/test_with_global_component"},
+      name: `X`
+    }],
+    location: {"start":[7,0],"end":[11,1],"filename":"compilers/test_with_global_component"},
+    name: `Test`
+  }], {
+    C: C
+  }, ``, ``)
+};

spec/compilers/test_with_reference

@@ -0,0 +1,45 @@
+type Maybe(a) {
+  Nothing
+  Just(a)
+}
+
+suite "Test" {
+  test "X" {
+    <button as button/>
+
+    button == Maybe.Nothing
+  }
+}
+--------------------------------------------------------------------------------
+import {
+  createElement as D,
+  testRunner as B,
+  createRef as C,
+  compare as F,
+  variant as A,
+  setRef as E
+} from "./runtime.js";
+
+export const
+  G = A(0, `Maybe.Nothing`),
+  H = A(1, `Maybe.Just`);
+
+export default () => {
+  new B([{
+    tests: [{
+      proc: () => {
+        const a = C(new G());
+        return (() => {
+          D(`button`, {
+            ref: E(a, H)
+          });
+          return F(a.current, new G())
+        })()
+      },
+      location: {"start":[7,2],"end":[11,3],"filename":"compilers/test_with_reference"},
+      name: `X`
+    }],
+    location: {"start":[6,0],"end":[12,1],"filename":"compilers/test_with_reference"},
+    name: `Test`
+  }], {}, ``, ``)
+};

spec/compilers/test_with_reference_component

@@ -0,0 +1,61 @@
+type Maybe(a) {
+  Nothing
+  Just(a)
+}
+
+component Button {
+  fun render : Html {
+    <div/>
+  }
+}
+
+suite "Test" {
+  test "X" {
+    <Button as button/>
+
+    button == Maybe.Nothing
+  }
+}
+--------------------------------------------------------------------------------
+import {
+  createElement as C,
+  testRunner as D,
+  createRef as E,
+  compare as G,
+  useMemo as B,
+  variant as A,
+  setRef as F
+} from "./runtime.js";
+
+export const
+  H = A(0, `Maybe.Nothing`),
+  I = A(1, `Maybe.Just`),
+  J = ({
+    _
+  }) => {
+    const a = B(() => {
+      return {}
+    }, []);
+    (_ ? _(a) : null);
+    return C(`div`, {})
+  };
+
+export default () => {
+  new D([{
+    tests: [{
+      proc: () => {
+        const b = E(new H());
+        return (() => {
+          C(J, {
+            _: F(b, I)
+          });
+          return G(b.current, new H())
+        })()
+      },
+      location: {"start":[13,2],"end":[17,3],"filename":"compilers/test_with_reference_component"},
+      name: `X`
+    }],
+    location: {"start":[12,0],"end":[18,1],"filename":"compilers/test_with_reference_component"},
+    name: `Test`
+  }], {}, ``, ``)
+};

spec/compilers_spec.cr

@@ -17,18 +17,23 @@ Dir
         artifacts =
           Mint::TypeChecker.check(ast)
 
+        test_information =
+          if File.basename(file).starts_with?("test")
+            {url: "", id: "", glob: "**"}
+          end
+
         config =
           Mint::Bundler::Config.new(
             json: Mint::MintJson.parse("{}", "mint.json"),
             generate_source_maps: false,
             generate_manifest: false,
             include_program: false,
+            test: test_information,
             live_reload: false,
             runtime_path: nil,
             skip_icons: false,
             hash_assets: true,
-            optimize: false,
-            test: nil)
+            optimize: false)
 
         files =
           Mint::Bundler.new(

spec/errors/html_element_reference_outside_of_component

@@ -12,7 +12,7 @@ component Main {
 --------------------------------------------------------------------------------
 ░ ERROR (HTML_ELEMENT_REFERENCE_OUTSIDE_OF_COMPONENT) ░░░░░░░░░░░░░░░░░░░░░░░░░░
 
-Referencing elements outside of components is not allowed:
+Referencing elements outside of components or tests is not allowed:
 
    ┌ errors/html_element_reference_outside_of_component:3:13
    ├────────────────────────────────────────────────────────