cx 26.0.14 → 26.1.1

package/src/ui/layout/ContentPlaceholder.spec.tsx

@@ -2,13 +2,13 @@ import { Store } from "../../data/Store";
 import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
 import assert from "assert";
 import { PureContainer } from "../PureContainer";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
 import { bind } from "../bind";
 
 describe("ContentPlaceholder", () => {
-   it("allows putting content inside", () => {
+   it("allows putting content inside", async () => {
       let store = new Store();
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -47,13 +47,13 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("updates content on change", () => {
+   it("updates content on change", async () => {
       let store = new Store({
          data: {
             headerText: "Header",
          },
       });
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -76,13 +76,15 @@ describe("ContentPlaceholder", () => {
       });
 
       assert.deepEqual(component.toJSON(), getTree("Header"));
-      store.set("headerText", "Footer");
+      await act(async () => {
+         store.set("headerText", "Footer");
+      });
       assert.deepEqual(component.toJSON(), getTree("Footer"));
    });
 
-   it("allows putting multiple entries inside", () => {
+   it("allows putting multiple entries inside", async () => {
       let store = new Store();
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -127,9 +129,9 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
+   it("allows putting multiple entries inside when content is defined before and after the placeholder", async () => {
       let store = new Store();
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -183,9 +185,9 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
+   it("allows putting multiple entries into separate placeholders using content placeholder scopes", async () => {
       let store = new Store();
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -249,7 +251,7 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("is used for defining body position in outer layouts", () => {
+   it("is used for defining body position in outer layouts", async () => {
       let store = new Store();
 
       let layout = (
@@ -262,7 +264,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <main outerLayout={layout} />
@@ -292,7 +294,7 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("data in deeply nested placeholders is correctly updated", () => {
+   it("data in deeply nested placeholders is correctly updated", async () => {
       let store = new Store({
          data: {
             header: "H",
@@ -315,7 +317,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <main outerLayout={layout}>
@@ -353,15 +355,21 @@ describe("ContentPlaceholder", () => {
       });
 
       assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-      store.set("header", "H2");
+      await act(async () => {
+         store.set("header", "H2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-      store.set("footer", "F2");
+      await act(async () => {
+         store.set("footer", "F2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-      store.set("body", "B2");
+      await act(async () => {
+         store.set("body", "B2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
    });
 
-   it("inside a two-level deep outer-layout works", () => {
+   it("inside a two-level deep outer-layout works", async () => {
       let store = new Store();
 
       let outerLayout = (
@@ -380,7 +388,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <section outerLayout={innerLayout} />
@@ -388,7 +396,6 @@ describe("ContentPlaceholder", () => {
       );
 
       let tree = component.toJSON();
-      //console.log(tree);
 
       assert.deepEqual(tree, {
          type: "div",
@@ -409,10 +416,10 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("works in strange order", () => {
+   it("works in strange order", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -427,7 +434,6 @@ describe("ContentPlaceholder", () => {
       );
 
       let tree = component.toJSON();
-      //console.log(tree);
 
       assert.deepEqual(tree, {
          type: "div",
@@ -436,7 +442,7 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("inside a complex two-level-deep outer-layout works", () => {
+   it("inside a complex two-level-deep outer-layout works", async () => {
       let store = new Store();
 
       let outerLayout = (
@@ -457,7 +463,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <section outerLayout={innerLayout} />
@@ -471,7 +477,7 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("each level use an outer-layout", () => {
+   it("each level use an outer-layout", async () => {
       let store = new Store();
 
       let outerLayout1 = (
@@ -490,7 +496,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <PureContainer outerLayout={outerLayout1}>
@@ -506,7 +512,7 @@ describe("ContentPlaceholder", () => {
       });
    });
 
-   it("data in a two-level deep outer-layout is correctly updated", () => {
+   it("data in a two-level deep outer-layout is correctly updated", async () => {
       let store = new Store({
          data: {
             header: "H",
@@ -539,7 +545,7 @@ describe("ContentPlaceholder", () => {
          </cx>
       );
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <main outerLayout={innerLayout}>
@@ -577,11 +583,17 @@ describe("ContentPlaceholder", () => {
       });
 
       assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-      store.set("header", "H2");
+      await act(async () => {
+         store.set("header", "H2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-      store.set("footer", "F2");
+      await act(async () => {
+         store.set("footer", "F2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-      store.set("body", "B2");
+      await act(async () => {
+         store.set("body", "B2");
+      });
       assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
    });
 });

package/src/ui/layout/FirstVisibleChildLayout.spec.tsx

@@ -1,6 +1,6 @@
 import { Store } from "../../data/Store";
 import { expr } from "../expr";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
 
 import assert from "assert";
 import { FirstVisibleChildLayout } from "./FirstVisibleChildLayout";
@@ -9,7 +9,7 @@ import { PureContainer } from "../PureContainer";
 import { createFunctionalComponent } from "../createFunctionalComponent";
 
 describe("FirstVisibleChildLayout", () => {
-   it("renders only the first child", () => {
+   it("renders only the first child", async () => {
       let widget = (
          <cx>
             <div layout={FirstVisibleChildLayout}>
@@ -22,7 +22,7 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -32,7 +32,7 @@ describe("FirstVisibleChildLayout", () => {
       });
    });
 
-   it("does not process other widgets", () => {
+   it("does not process other widgets", async () => {
       let h = false,
          m = false,
          f = false;
@@ -61,7 +61,7 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -75,7 +75,7 @@ describe("FirstVisibleChildLayout", () => {
       assert.equal(f, false);
    });
 
-   it("skips the first child if not visible", () => {
+   it("skips the first child if not visible", async () => {
       let widget = (
          <cx>
             <div layout={FirstVisibleChildLayout}>
@@ -88,7 +88,7 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -98,7 +98,7 @@ describe("FirstVisibleChildLayout", () => {
       });
    });
 
-   it("skips pure containers which use parent layouts", () => {
+   it("skips pure containers which use parent layouts", async () => {
       let widget = (
          <cx>
             <div layout={FirstVisibleChildLayout}>
@@ -113,7 +113,7 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -123,7 +123,7 @@ describe("FirstVisibleChildLayout", () => {
       });
    });
 
-   it("works with functional components", () => {
+   it("works with functional components", async () => {
       let FC = createFunctionalComponent(({ children }: { children?: any }) => <cx>{children}</cx>);
 
       let widget = (
@@ -140,7 +140,7 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -150,7 +150,7 @@ describe("FirstVisibleChildLayout", () => {
       });
    });
 
-   it("properly destroys invisible items", () => {
+   it("properly destroys invisible items", async () => {
       let destroyList: number[] = [];
       let widget = (
          <cx>
@@ -166,29 +166,41 @@ describe("FirstVisibleChildLayout", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
-      store.set("index", 0);
+      await act(async () => {
+         store.set("index", 0);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, []);
 
-      store.set("index", 3);
+      await act(async () => {
+         store.set("index", 3);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, [0]);
 
-      store.set("index", 1);
+      await act(async () => {
+         store.set("index", 1);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, [0, 3]);
 
-      store.set("index", 4);
+      await act(async () => {
+         store.set("index", 4);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, [0, 3, 1]);
 
-      store.set("index", 0);
+      await act(async () => {
+         store.set("index", 0);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, [0, 3, 1, 4]);
 
-      store.set("index", -1);
+      await act(async () => {
+         store.set("index", -1);
+      });
       component.toJSON();
       assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
    });

package/src/ui/layout/FirstVisibleChildLayout.ts

@@ -1,60 +1,60 @@
-import { PureContainerConfig } from "./../PureContainer";
-import { Instance } from "../Instance";
-import { PureContainer } from "../PureContainer";
-import { RenderingContext } from "../RenderingContext";
-
-function isVisibleDeep(instance: Instance): boolean {
-   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
-   if (instance.children) {
-      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
-   }
-   return false;
-}
-
-class FirstVisibleChildItem extends PureContainer {
-   constructor(config: PureContainerConfig) {
-      super(config);
-   }
-
-   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
-      if (instance.parent.firstVisibleChild) return false;
-      return super.checkVisible(context, instance, data);
-   }
-
-   explore(context: RenderingContext, instance: any): void {
-      if (instance.parent.firstVisibleChild) return;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: any): void {
-      if (instance.parent.firstVisibleChild) return;
-      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
-   }
-
-   render(context: RenderingContext, instance: any, key: any): any {
-      if (instance.parent.firstVisibleChild != instance) return null;
-      return super.render(context, instance, key);
-   }
-}
-
-FirstVisibleChildItem.prototype.useParentLayout = true;
-
-export class FirstVisibleChildLayout extends PureContainer {
-   explore(context: RenderingContext, instance: any): void {
-      instance.firstVisibleChild = null;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: any): void {
-      let { children, firstVisibleChild } = instance;
-      if (children) {
-         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
-      }
-      instance.children = [];
-      if (firstVisibleChild) instance.children.push(firstVisibleChild);
-   }
-
-   wrapItem(item: any): any {
-      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
-   }
-}
+import { PureContainerConfig } from "./../PureContainer";
+import { Instance } from "../Instance";
+import { PureContainer } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+
+function isVisibleDeep(instance: Instance): boolean {
+   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
+   if (instance.children) {
+      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
+   }
+   return false;
+}
+
+class FirstVisibleChildItem extends PureContainer {
+   constructor(config: PureContainerConfig) {
+      super(config);
+   }
+
+   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
+      if (instance.parent.firstVisibleChild) return false;
+      return super.checkVisible(context, instance, data);
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      if (instance.parent.firstVisibleChild != instance) return null;
+      return super.render(context, instance, key);
+   }
+}
+
+FirstVisibleChildItem.prototype.useParentLayout = true;
+
+export class FirstVisibleChildLayout extends PureContainer {
+   explore(context: RenderingContext, instance: any): void {
+      instance.firstVisibleChild = null;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      let { children, firstVisibleChild } = instance;
+      if (children) {
+         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
+      }
+      instance.children = [];
+      if (firstVisibleChild) instance.children.push(firstVisibleChild);
+   }
+
+   wrapItem(item: any): any {
+      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
+   }
+}