cx 26.1.0 → 26.1.1

package/src/ui/ContentResolver.spec.tsx

@@ -1,6 +1,6 @@
 import { ContentResolver } from "./ContentResolver";
 import { Store } from "../data/Store";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import assert from "assert";
 import { bind } from "./bind";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
@@ -16,7 +16,7 @@ interface TestModel {
 }
 
 describe("ContentResolver", () => {
-   it("resolves content based on params", () => {
+   it("resolves content based on params", async () => {
       let widget = (
          <cx>
             <div>
@@ -31,7 +31,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -47,7 +47,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("re-resolves when params change", () => {
+   it("re-resolves when params change", async () => {
       let resolveCount = 0;
 
       let widget = (
@@ -70,7 +70,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -86,7 +86,9 @@ describe("ContentResolver", () => {
       });
       assert.equal(resolveCount, 1);
 
-      store.set("value", 2);
+      await act(async () => {
+         store.set("value", 2);
+      });
       tree = component.toJSON();
       assert.deepEqual(tree, {
          type: "div",
@@ -102,7 +104,7 @@ describe("ContentResolver", () => {
       assert.equal(resolveCount, 2);
    });
 
-   it("does not re-resolve if params are unchanged", () => {
+   it("does not re-resolve if params are unchanged", async () => {
       let resolveCount = 0;
 
       let widget = (
@@ -126,7 +128,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
       assert.equal(resolveCount, 1);
 
       // Change unrelated data
@@ -135,7 +137,7 @@ describe("ContentResolver", () => {
       assert.equal(resolveCount, 1);
    });
 
-   it("supports literal values in params", () => {
+   it("supports literal values in params", async () => {
       let receivedParams: any = null;
 
       let widget = (
@@ -154,7 +156,7 @@ describe("ContentResolver", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -172,7 +174,7 @@ describe("ContentResolver", () => {
       assert.equal(receivedParams.name, "test");
    });
 
-   it("supports mode=prepend", () => {
+   it("supports mode=prepend", async () => {
       let widget = (
          <cx>
             <div>
@@ -185,7 +187,7 @@ describe("ContentResolver", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -206,7 +208,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("supports mode=append", () => {
+   it("supports mode=append", async () => {
       let widget = (
          <cx>
             <div>
@@ -219,7 +221,7 @@ describe("ContentResolver", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -240,7 +242,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("supports mode=replace (default)", () => {
+   it("supports mode=replace (default)", async () => {
       let widget = (
          <cx>
             <div>
@@ -253,7 +255,7 @@ describe("ContentResolver", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -295,7 +297,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       // Initially loading should be true
       assert.equal(store.get("loading"), true);
@@ -323,7 +325,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("supports typed params with accessor chains", () => {
+   it("supports typed params with accessor chains", async () => {
       const model = createAccessorModelProxy<TestModel>();
 
       // This test verifies type inference works correctly.
@@ -362,7 +364,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -378,7 +380,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("infers types from literal params", () => {
+   it("infers types from literal params", async () => {
       // When using literal values, TypeScript can infer their types
       let widget = (
          <cx>
@@ -399,7 +401,7 @@ describe("ContentResolver", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -415,7 +417,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("supports simple Prop params (non-structured)", () => {
+   it("supports simple Prop params (non-structured)", async () => {
       const model = createAccessorModelProxy<TestModel>();
 
       // Test using a single AccessorChain as params instead of an object
@@ -444,7 +446,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -460,7 +462,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("supports simple bind() as params", () => {
+   it("supports simple bind() as params", async () => {
       let widget = (
          <cx>
             <div>
@@ -480,7 +482,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -496,7 +498,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("resolves Selector<string> | null to string | null", () => {
+   it("resolves Selector<string> | null to string | null", async () => {
       const text: string | null = "Hello {user.name}";
 
       let widget = (
@@ -524,7 +526,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
       let tree = component.toJSON();
       assert.deepEqual(tree, {
          type: "div",
@@ -533,7 +535,7 @@ describe("ContentResolver", () => {
       });
    });
 
-   it("resolves Prop<string> to string (not any)", () => {
+   it("resolves Prop<string> to string (not any)", async () => {
       const model = createAccessorModelProxy<TestModel>();
 
       // When params is typed as Prop<string>, onResolve should receive string (not any)
@@ -565,7 +567,7 @@ describe("ContentResolver", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {

package/src/ui/Controller.spec.tsx

@@ -1,6 +1,6 @@
 import { Store } from "../data/Store";
 import { Controller, ControllerConfig } from "./Controller";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import { VDOM, Widget, WidgetConfig } from "./Widget";
 import { Instance } from "./Instance";
 import { bind } from "./bind";
@@ -8,7 +8,7 @@ import assert from "assert";
 import { RenderingContext } from "./RenderingContext";
 
 describe("Controller", () => {
-   it("invokes lifetime methods", () => {
+   it("invokes lifetime methods", async () => {
       let init = 0,
          prepare = 0,
          explore = 0,
@@ -34,7 +34,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController} />
@@ -48,7 +48,7 @@ describe("Controller", () => {
       assert.equal(cleanup, 1);
    });
 
-   it("widgets invoke controller methods specified as strings", () => {
+   it("widgets invoke controller methods specified as strings", async () => {
       let callback = 0;
 
       class TestController extends Controller {
@@ -70,7 +70,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <Cmp controller={TestController} onTest="callback" />
@@ -81,7 +81,7 @@ describe("Controller", () => {
       assert.equal(callback, 1);
    });
 
-   it("widgets can access controller methods specified in ancestor controllers", () => {
+   it("widgets can access controller methods specified in ancestor controllers", async () => {
       let callback1 = 0;
       let callback2 = 0;
 
@@ -110,7 +110,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController1}>
@@ -124,7 +124,7 @@ describe("Controller", () => {
       assert.equal(callback2, 0);
    });
 
-   it("ancestor controllers are initialized first", () => {
+   it("ancestor controllers are initialized first", async () => {
       let order: string[] = [];
 
       class TestController1 extends Controller {
@@ -141,7 +141,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController1}>
@@ -154,7 +154,7 @@ describe("Controller", () => {
       assert.deepEqual(order, ["1", "2"]);
    });
 
-   it("controllers on invisible elements are not initialized", () => {
+   it("controllers on invisible elements are not initialized", async () => {
       let order: string[] = [];
 
       class TestController1 extends Controller {
@@ -171,7 +171,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController1}>
@@ -184,7 +184,7 @@ describe("Controller", () => {
       assert.deepEqual(order, ["1"]);
    });
 
-   it("invokes triggers and computables in order of definition", () => {
+   it("invokes triggers and computables in order of definition", async () => {
       let log: string[] = [];
 
       class TestController extends Controller {
@@ -216,7 +216,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController} />
@@ -227,7 +227,7 @@ describe("Controller", () => {
       assert.deepEqual(log, ["t1", "c1", "t2"]);
    });
 
-   it("is recreated if a component is hidden and shown", () => {
+   it("is recreated if a component is hidden and shown", async () => {
       let initCount = 0;
 
       class TestController extends Controller {
@@ -239,7 +239,7 @@ describe("Controller", () => {
       let store = new Store();
       store.set("visible", true);
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div visible={bind("visible")} controller={TestController} />
@@ -249,11 +249,15 @@ describe("Controller", () => {
       let tree1 = component.toJSON();
       assert.equal(initCount, 1);
 
-      store.set("visible", false);
+      await act(async () => {
+         store.set("visible", false);
+      });
       let tree2 = component.toJSON();
       assert.equal(tree2, null);
 
-      store.set("visible", true);
+      await act(async () => {
+         store.set("visible", true);
+      });
       let tree3 = component.toJSON();
       assert.equal(initCount, 2);
    });
@@ -275,7 +279,7 @@ describe("Controller", () => {
       assert.equal(store.get("x"), 1);
    });
 
-   it("lifetime methods of a functional controller are properly invoked", () => {
+   it("lifetime methods of a functional controller are properly invoked", async () => {
       let initCount = 0,
          destroyCount = 0;
 
@@ -292,7 +296,7 @@ describe("Controller", () => {
       let store = new Store();
       store.set("visible", true);
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div visible={bind("visible")} controller={testController} />
@@ -302,19 +306,23 @@ describe("Controller", () => {
       let tree1 = component.toJSON();
       assert.equal(initCount, 1);
 
-      store.set("visible", false);
+      await act(async () => {
+         store.set("visible", false);
+      });
       let tree2 = component.toJSON();
       assert.equal(destroyCount, 1);
 
-      store.set("visible", true);
+      await act(async () => {
+         store.set("visible", true);
+      });
       let tree3 = component.toJSON();
       assert.equal(initCount, 2);
    });
 
-   it("widgets can easily define controller methods", () => {
+   it("widgets can easily define controller methods", async () => {
       let store = new Store({ data: { x: 0 } });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div
@@ -339,10 +347,10 @@ describe("Controller", () => {
       assert.equal(store.get("x"), 1);
    });
 
-   it("functional controllers get store methods through configuration", () => {
+   it("functional controllers get store methods through configuration", async () => {
       let store = new Store({ data: { x: 0 } });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div
@@ -367,10 +375,10 @@ describe("Controller", () => {
       assert.equal(store.get("x"), 1);
    });
 
-   it("addComputable accepts refs", () => {
+   it("addComputable accepts refs", async () => {
       let store = new Store({ data: { x: 0 } });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div
@@ -390,7 +398,7 @@ describe("Controller", () => {
       assert.equal(store.get("y"), 1);
    });
 
-   it("invokeParentMethod is invoked on parent instance", () => {
+   it("invokeParentMethod is invoked on parent instance", async () => {
       let testValid: number[] = [];
 
       class TestController1 extends Controller {
@@ -411,7 +419,7 @@ describe("Controller", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={TestController2}>
@@ -446,10 +454,10 @@ describe("Controller types", () => {
       }
    }
 
-   it("accepts Controller class directly", () => {
+   it("accepts Controller class directly", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={MyController} />
@@ -460,7 +468,7 @@ describe("Controller types", () => {
       assert.ok(tree);
    });
 
-   it("accepts config with type property", () => {
+   it("accepts config with type property", async () => {
       let store = new Store();
       let initCalled = false;
 
@@ -477,7 +485,7 @@ describe("Controller types", () => {
          }
       }
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div controller={{ type: TypedController, customValue: 42 }} />
@@ -489,10 +497,10 @@ describe("Controller types", () => {
       assert.equal(initCalled, true);
    });
 
-   it("accepts inline config object with ThisType", () => {
+   it("accepts inline config object with ThisType", async () => {
       let store = new Store({ data: { count: 0 } });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div
@@ -510,10 +518,10 @@ describe("Controller types", () => {
       assert.equal(store.get("count"), 1);
    });
 
-   it("accepts factory function", () => {
+   it("accepts factory function", async () => {
       let store = new Store({ data: { count: 0 } });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div
@@ -530,7 +538,7 @@ describe("Controller types", () => {
       assert.equal(store.get("count"), 5);
    });
 
-   it("accepts CreateConfig with type and required properties", () => {
+   it("accepts CreateConfig with type and required properties", async () => {
       let store = new Store({ data: { result: 0 } });
 
       interface RequiredPropControllerConfig extends ControllerConfig {
@@ -549,7 +557,7 @@ describe("Controller types", () => {
          }
       }
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div

package/src/ui/Cx.spec.tsx

@@ -3,12 +3,12 @@ import { VDOM } from "./VDOM";
 import { Container, ContainerBase, ContainerConfig } from "./Container";
 import { Store } from "../data/Store";
 import { bind } from "./bind";
-import { createTestRenderer, createTestWidget } from "../util/test/createTestRenderer";
+import { createTestRenderer, createTestWidget, act } from "../util/test/createTestRenderer";
 import assert from "assert";
 import { HtmlElement } from "../widgets/HtmlElement";
 
 describe("Cx", () => {
-   it("can render cx content", () => {
+   it("can render cx content", async () => {
       let widget = (
          <cx>
             <div>Test</div>
@@ -17,7 +17,7 @@ describe("Cx", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -27,7 +27,7 @@ describe("Cx", () => {
       });
    });
 
-   it("store changes preserve the instance", () => {
+   it("store changes preserve the instance", async () => {
       let instanceLog: any[] = [];
       let storeLog: any[] = [];
 
@@ -46,7 +46,7 @@ describe("Cx", () => {
       let store1 = new Store({ data: { text: "Test1" } });
       let store2 = new Store({ data: { text: "Test2" } });
 
-      const component = createTestRenderer(store1, widget);
+      const component = await createTestRenderer(store1, widget);
 
       let tree1 = component.toJSON();
       assert.deepEqual(tree1, {
@@ -55,7 +55,9 @@ describe("Cx", () => {
          children: ["Test1"],
       });
 
-      component.update(createTestWidget(store2, widget));
+      await act(async () => {
+         component.update(createTestWidget(store2, widget));
+      });
 
       let tree2 = component.toJSON();
       assert.deepEqual(tree2, {
@@ -70,7 +72,7 @@ describe("Cx", () => {
       assert(storeLog[1] === store2);
    });
 
-   it("invokes lifetime methods in the right order", () => {
+   it("invokes lifetime methods in the right order", async () => {
       let events: any[] = [];
 
       interface TestWidgetConfig extends ContainerConfig {
@@ -123,7 +125,7 @@ describe("Cx", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {