cx 26.1.0 → 26.1.1

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/selection/PropertySelection.ts

@@ -1,87 +1,87 @@
-import { Selection, SelectionOptions } from "./Selection";
-import { View } from "../../data/View";
-import { isAccessorChain } from "../../data/createAccessorModelProxy";
-import { Binding } from "../Prop";
-
-export interface PropertySelectionConfig {
-   /** Name of the field used to indicate selection. Default is `selected`. */
-   selectedField?: string;
-
-   /** Set to `true` to allow multiple selection. */
-   multiple?: boolean;
-
-   /** Name of the field used as a key. */
-   keyField?: string;
-
-   /** Record binding. */
-   record?: Binding;
-
-   /** Records binding. */
-   records?: Binding;
-
-   /** Index binding. */
-   index?: Binding;
-
-   /** Binding path for selection state. */
-   bind?: string;
-}
-
-export class PropertySelection extends Selection {
-   declare records: any;
-   declare selectedField: string;
-
-   constructor(config?: PropertySelectionConfig) {
-      super(config);
-   }
-
-   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
-      if (this.toggle) toggle = true;
-
-      if (!this.records) return false;
-
-      let path = isAccessorChain(this.records) ? this.records.toString() : this.records.bind;
-      if (!path) return false;
-
-      let array = store.get(path);
-      let newArray = [...array];
-      let dirty = false;
-
-      if (!toggle && !add) {
-         newArray.forEach((r, i) => {
-            if (r[this.selectedField]) {
-               let nr = Object.assign({}, r);
-               nr[this.selectedField] = false;
-               newArray[i] = nr;
-               dirty = true;
-            }
-         });
-      }
-
-      records.forEach((record, i) => {
-         let index = indexes[i];
-         let rec = newArray[index];
-         if (array[index] !== record) throw new Error("Stale data.");
-
-         let value = rec[this.selectedField];
-         let newValue = add ? true : toggle ? !value : true;
-
-         if (value == newValue) return;
-
-         let newRec = Object.assign({}, rec);
-         newRec[this.selectedField] = newValue;
-         newArray[index] = newRec;
-         dirty = true;
-      });
-
-      if (dirty) store.set(path, newArray);
-   }
-
-   isSelected(store: View, record: any, index: any): boolean {
-      return record && record[this.selectedField!];
-   }
-}
-
-PropertySelection.prototype.selectedField = "selected";
-PropertySelection.prototype.multiple = false;
-
-(Selection as any).alias("property", PropertySelection);
+import { Selection, SelectionOptions } from "./Selection";
+import { View } from "../../data/View";
+import { isAccessorChain } from "../../data/createAccessorModelProxy";
+import { Binding } from "../Prop";
+
+export interface PropertySelectionConfig {
+   /** Name of the field used to indicate selection. Default is `selected`. */
+   selectedField?: string;
+
+   /** Set to `true` to allow multiple selection. */
+   multiple?: boolean;
+
+   /** Name of the field used as a key. */
+   keyField?: string;
+
+   /** Record binding. */
+   record?: Binding;
+
+   /** Records binding. */
+   records?: Binding;
+
+   /** Index binding. */
+   index?: Binding;
+
+   /** Binding path for selection state. */
+   bind?: string;
+}
+
+export class PropertySelection extends Selection {
+   declare records: any;
+   declare selectedField: string;
+
+   constructor(config?: PropertySelectionConfig) {
+      super(config);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
+      if (this.toggle) toggle = true;
+
+      if (!this.records) return false;
+
+      let path = isAccessorChain(this.records) ? this.records.toString() : this.records.bind;
+      if (!path) return false;
+
+      let array = store.get(path);
+      let newArray = [...array];
+      let dirty = false;
+
+      if (!toggle && !add) {
+         newArray.forEach((r, i) => {
+            if (r[this.selectedField]) {
+               let nr = Object.assign({}, r);
+               nr[this.selectedField] = false;
+               newArray[i] = nr;
+               dirty = true;
+            }
+         });
+      }
+
+      records.forEach((record, i) => {
+         let index = indexes[i];
+         let rec = newArray[index];
+         if (array[index] !== record) throw new Error("Stale data.");
+
+         let value = rec[this.selectedField];
+         let newValue = add ? true : toggle ? !value : true;
+
+         if (value == newValue) return;
+
+         let newRec = Object.assign({}, rec);
+         newRec[this.selectedField] = newValue;
+         newArray[index] = newRec;
+         dirty = true;
+      });
+
+      if (dirty) store.set(path, newArray);
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return record && record[this.selectedField!];
+   }
+}
+
+PropertySelection.prototype.selectedField = "selected";
+PropertySelection.prototype.multiple = false;
+
+(Selection as any).alias("property", PropertySelection);

package/src/util/Component.spec.ts

@@ -211,6 +211,36 @@ describe("Component.create", function () {
       });
    });
 
+   describe("type in second argument (more)", function () {
+      it("should create instance of type specified in second argument", function () {
+         const result = TestWidget.create({ text: "hello" }, { type: TestButton });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "hello");
+      });
+
+      it("should create instance of $type specified in second argument", function () {
+         const result = TestWidget.create({ text: "world" }, { $type: TestButton });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "world");
+      });
+
+      it("should work when first argument is an array and second has type", function () {
+         const results = Component.create([{ text: "A" }, { text: "B" }], { type: TestButton });
+         assert.equal(results.length, 2);
+         assert.ok(results[0] instanceof TestButton);
+         assert.ok(results[1] instanceof TestButton);
+         assert.equal(results[0].text, "A");
+         assert.equal(results[1].text, "B");
+      });
+
+      it("should work when type is passed as first arg with array config and type in more", function () {
+         const results = Component.create(TestWidget, [{ text: "X" }], { type: TestButton });
+         assert.equal(results.length, 1);
+         assert.ok(results[0] instanceof TestButton);
+         assert.equal(results[0].text, "X");
+      });
+   });
+
    describe("heterogeneous array with type property", function () {
       it("creates array of different component types", function () {
          const results = Component.create([