Make tests use act

Author: mstijak

packages/cx/src/hooks/invokeCallback.spec.tsx

@@ -5,7 +5,7 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import { invokeCallback } from "./invokeCallback";
 
 describe("invokeCallback", () => {
-   it("works with functions", () => {
+   it("works with functions", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
          invokeCallback(null!, onTest, "works");
          return (
@@ -17,7 +17,7 @@ describe("invokeCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, {
+      const component = await createTestRenderer(store, {
          type: FComp,
          onTest: (v: any) => {
             value = v;
@@ -28,7 +28,7 @@ describe("invokeCallback", () => {
       assert.equal(value, "works");
    });
 
-   it("works with controller methods", () => {
+   it("works with controller methods", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (v: any) => void }) => {
          return (
             <cx>
@@ -43,7 +43,7 @@ describe("invokeCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(store, {
+      const component = await createTestRenderer(store, {
          type: FComp,
          onTest: "onTest",
          controller: {

packages/cx/src/hooks/resolveCallback.spec.tsx

@@ -5,7 +5,7 @@ import { createTestRenderer } from "../util/test/createTestRenderer";
 import { resolveCallback } from "./resolveCallback";
 
 describe("resolveCallback", () => {
-   it("works with functions", () => {
+   it("works with functions", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: (value: string) => void }) => {
          let callback = resolveCallback(onTest);
          assert(typeof callback === "function");
@@ -19,7 +19,7 @@ describe("resolveCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <FComp
@@ -34,7 +34,7 @@ describe("resolveCallback", () => {
       assert.equal(value, "works");
    });
 
-   it("works with controller methods", () => {
+   it("works with controller methods", async () => {
       const FComp = createFunctionalComponent(({ onTest }: { onTest: string | ((value: string) => void) }) => {
          let callback = resolveCallback(onTest);
          assert(typeof callback === "function");
@@ -51,7 +51,7 @@ describe("resolveCallback", () => {
 
       let store = new Store();
       let value;
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <FComp

packages/cx/src/hooks/store.spec.tsx

@@ -7,7 +7,7 @@ import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { ref } from "./store";
 
 describe("ref", () => {
-   it("allows store references in functional components", () => {
+   it("allows store references in functional components", async () => {
       const FComp = createFunctionalComponent(({}) => {
          let testValue = ref({ bind: "x", defaultValue: 10 });
          return (
@@ -19,7 +19,7 @@ describe("ref", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -29,7 +29,7 @@ describe("ref", () => {
       });
    });
 
-   it("can be used to adapt any prop passed to a functional component", () => {
+   it("can be used to adapt any prop passed to a functional component", async () => {
       const FComp = createFunctionalComponent(({ value }: { value: Prop<any> }) => {
          return (
             <cx>
@@ -40,8 +40,8 @@ describe("ref", () => {
 
       let store = new Store({ data: { value: 100 } });
 
-      function test(value: Prop<any>, expectation: any) {
-         const component = createTestRenderer(store, <FComp value={value} />);
+      async function test(value: Prop<any>, expectation: any) {
+         const component = await createTestRenderer(store, <FComp value={value} />);
          let tree = component.toJSON();
          assert.deepEqual(tree, {
             type: "div",
@@ -50,18 +50,18 @@ describe("ref", () => {
          });
       }
 
-      test({ bind: "value" }, "x100");
-      test({ expr: "{value}" }, "x100");
-      test({ tpl: "{value:n;2}" }, "x100.00");
-      test(200, "x200");
-      test(() => 500, "x500");
-      test(
+      await test({ bind: "value" }, "x100");
+      await test({ expr: "{value}" }, "x100");
+      await test({ tpl: "{value:n;2}" }, "x100.00");
+      await test(200, "x200");
+      await test(() => 500, "x500");
+      await test(
          computable("value", (value: string) => value + 100),
          "x200",
       );
-      test(null, "xnull");
-      test(undefined, "xundefined");
-      test(0, "x0");
-      test(false, "xfalse");
+      await test(null, "xnull");
+      await test(undefined, "xundefined");
+      await test(0, "x0");
+      await test(false, "xfalse");
    });
 });

packages/cx/src/hooks/useTrigger.spec.tsx

@@ -1,11 +1,11 @@
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { useTrigger } from "./useTrigger";
 
 describe("useTrigger", () => {
-   it("works", () => {
+   it("works", async () => {
       let last = null;
 
       const FComp = createFunctionalComponent(({ ...props }) => {
@@ -23,17 +23,19 @@ describe("useTrigger", () => {
       let store = new Store();
       let test = store.ref("test", 1);
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, null); //trigger did not fire because it didn't receive true as the last argument
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });
 
-   it("fires immediately if the last argument is true", () => {
+   it("fires immediately if the last argument is true", async () => {
       let last = null;
 
       const FComp = createFunctionalComponent(({ ...props }) => {
@@ -55,17 +57,19 @@ describe("useTrigger", () => {
       let store = new Store();
       let test = store.ref("test", 1);
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, 1);
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });
 
-   it("accepts refs as arguments", () => {
+   it("accepts refs as arguments", async () => {
       let last = null;
 
       let store = new Store();
@@ -87,12 +91,14 @@ describe("useTrigger", () => {
          );
       });
 
-      const component = createTestRenderer(store, FComp);
+      const component = await createTestRenderer(store, FComp);
 
       component.toJSON();
       assert.equal(last, 1);
 
-      test.set(2);
+      await act(async () => {
+         test.set(2);
+      });
       component.toJSON();
       assert.equal(last, 2);
    });