@angular-wave/angular.ts 0.7.0-beta.1 → 0.7.2

package/src/directive/options/options.spec.js

@@ -10,7 +10,7 @@ import {
 } from "../../shared/utils.js";
 import { browserTrigger, wait } from "../../shared/test-utils.js";
 
-xdescribe("ngOptions", () => {
+describe("ngOptions", () => {
   let scope;
   let formElement;
   let element;
@@ -165,6 +165,7 @@ xdescribe("ngOptions", () => {
       .module("myModule", ["ng"])
       .decorator("$exceptionHandler", function () {
         return (exception) => {
+          console.error(exception.message);
           errors.push(exception.message);
         };
       });
@@ -277,13 +278,13 @@ xdescribe("ngOptions", () => {
     );
   }
 
-  it('should throw when not formated "? for ? in ?"', async () => {
+  fit('should throw when not formated "? for ? in ?"', async () => {
     compile('<select ng-model="selected" ng-options="i dont parse"></select>');
     await wait();
     expect(errors[0]).toMatch("iexp");
   });
 
-  it("should have a dependency on ngModel", async () => {
+  fit("should have a dependency on ngModel", async () => {
     try {
       await compile('<select ng-options="item in items"></select>');
       await wait();
@@ -292,37 +293,37 @@ xdescribe("ngOptions", () => {
     }
   });
 
-  it("should render a list", async () => {
+  fit("should render a list", async () => {
     element.innerHTML =
       '<select ng-model="selected" ng-options="value.name for value in values"></select>';
     injector = window.angular.bootstrap(element, ["myModule"]);
+    await wait();
     scope = injector.get("$rootScope");
     await wait();
     scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
     await wait();
-    debugger;
-    scope.selected = { name: "B" };
-
+    scope.selected = scope.values[1];
     await wait();
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(3);
-    // expect(options[0]).toEqualOption(scope.values[0], "A");
-    // expect(options[1]).toEqualOption(scope.values[1], "B");
-    // expect(options[2]).toEqualOption(scope.values[2], "C");
-    // expect(options[1].selected).toEqual(true);
+    expect(options[0]).toEqualOption(scope.values[0], "A");
+    expect(options[1]).toEqualOption(scope.values[1], "B");
+    expect(options[2]).toEqualOption(scope.values[2], "C");
+    expect(options[1].selected).toEqual(true);
   });
 
-  it("should not include properties with non-numeric keys in array-like collections when using array syntax", () => {
-    createSelect({
-      "ng-model": "selected",
-      "ng-options": "value for value in values",
-    });
-
+  fit("should not include properties with non-numeric keys in array-like collections when using array syntax", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
     scope.$apply(() => {
       scope.values = { 0: "X", 1: "Y", 2: "Z", a: "A", length: 3 };
-      scope.selected = scope.values[1];
     });
-
+    await wait();
+    scope.selected = scope.values[1];
+    await wait();
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(3);
     expect(options[0]).toEqualOption("X");
@@ -330,36 +331,38 @@ xdescribe("ngOptions", () => {
     expect(options[2]).toEqualOption("Z");
   });
 
-  it("should include properties with non-numeric keys in array-like collections when using object syntax", () => {
-    createSelect({
-      "ng-model": "selected",
-      "ng-options": "value for (key, value) in values",
-    });
-
+  fit("should include properties with non-numeric keys in array-like collections when using object syntax", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value for (key, value) in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
     scope.$apply(() => {
       scope.values = { 0: "X", 1: "Y", 2: "Z", a: "A", length: 3 };
       scope.selected = scope.values[1];
     });
-
+    await wait();
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(5);
     expect(options[0]).toEqualOption("X");
     expect(options[1]).toEqualOption("Y");
     expect(options[2]).toEqualOption("Z");
-    expect(options.eq(3)).toEqualOption("A");
-    expect(options.eq(4)).toEqualOption(3);
+    expect(options[3]).toEqualOption("A");
+    expect(options[4]).toEqualOption(3);
   });
 
-  it("should render an object", () => {
-    createSelect({
-      "ng-model": "selected",
-      "ng-options": "value as key for (key, value) in object",
-    });
+  fit("should render an object", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value as key for (key, value) in object"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
 
     scope.$apply(() => {
       scope.object = { red: "FF0000", green: "00FF00", blue: "0000FF" };
       scope.selected = scope.object.green;
     });
+    await wait();
 
     let options = element.querySelectorAll("option");
     expect(options.length).toEqual(3);
@@ -368,17 +371,21 @@ xdescribe("ngOptions", () => {
     expect(options[2]).toEqualOption("0000FF", "blue");
     expect(options[1].selected).toEqual(true);
     scope.$apply('object.azur = "8888FF"');
-
+    await wait();
     options = element.querySelectorAll("option");
     expect(options[1].selected).toEqual(true);
-
+    await wait();
     scope.$apply("selected = object.azur");
-
+    await wait();
     options = element.querySelectorAll("option");
     expect(options[3].selected).toEqual(true);
   });
 
-  it('should set the "selected" attribute and property on selected options', () => {
+  fit('should set the "selected" attribute and property on selected options', async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="option.id as option.display for option in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
     scope.values = [
       {
         id: "FF0000",
@@ -390,35 +397,37 @@ xdescribe("ngOptions", () => {
       },
     ];
     scope.selected = "FF0000";
+    await wait();
 
-    createSelect({
-      "ng-model": "selected",
-      "ng-options": "option.id as option.display for option in values",
-    });
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(2);
     expect(options[0]).toEqualOption("FF0000", "red");
     expect(options[1]).toEqualOption("0000FF", "blue");
 
-    expect(options[0][0].getAttribute("selected")).toBe("selected");
     expect(options[0].getAttribute("selected")).toBe("selected");
-    expect(options[0][0].selected).toBe(true);
-    expect(options[0][0].selected).toBe(true);
+    expect(options[0].getAttribute("selected")).toBe("selected");
+    expect(options[0].selected).toBe(true);
+    expect(options[0].selected).toBe(true);
 
     scope.selected = "0000FF";
-    expect(options[1][0].getAttribute("selected")).toBe("selected");
+    await wait();
     expect(options[1].getAttribute("selected")).toBe("selected");
-    expect(options[1][0].selected).toBe(true);
-    expect(options[1][0].selected).toBe(true);
+    expect(options[1].getAttribute("selected")).toBe("selected");
+    expect(options[1].selected).toBe(true);
+    expect(options[1].selected).toBe(true);
   });
 
-  it("should render zero as a valid display value", () => {
-    createSingleSelect();
-
+  fit("should render zero as a valid display value", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
     scope.$apply(() => {
       scope.values = [{ name: 0 }, { name: 1 }, { name: 2 }];
       scope.selected = scope.values[0];
     });
+    await wait();
 
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(3);
@@ -427,36 +436,38 @@ xdescribe("ngOptions", () => {
     expect(options[2]).toEqualOption(scope.values[2], "2");
   });
 
-  it("should not be set when an option is selected and options are set asynchronously", (done) => {
-    element = $compile(
+  fit("should not be set when an option is selected and options are set asynchronously", async () => {
+    element.innerHTML =
       '<select ng-model="model" ng-options="opt.id as opt.label for opt in options">' +
-        "</select>",
-    )(scope);
+      "</select>";
 
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
     scope.$apply(() => {
       scope.model = 0;
     });
-
-    setTimeout(() => {
-      scope.options = [
-        { id: 0, label: "x" },
-        { id: 1, label: "y" },
-      ];
-      const options = element.querySelectorAll("option");
-      expect(options.length).toEqual(2);
-      expect(options[0]).toEqualOption(0, "x");
-      expect(options[1]).toEqualOption(1, "y");
-      done();
-    }, 0);
+    await wait();
+    scope.options = [
+      { id: 0, label: "x" },
+      { id: 1, label: "y" },
+    ];
+    await wait();
+    const options = element.querySelectorAll("option");
+    expect(options.length).toEqual(2);
+    expect(options[0]).toEqualOption(0, "x");
+    expect(options[1]).toEqualOption(1, "y");
   });
 
-  it("should grow list", () => {
-    createSingleSelect();
+  fit("should grow list", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
     scope.$apply(() => {
       scope.values = [];
     });
-
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(1); // because we add special unknown option
     expect(element.querySelectorAll("option")[0]).toEqualUnknownOption();
 
@@ -464,9 +475,9 @@ xdescribe("ngOptions", () => {
       scope.values.push({ name: "A" });
       scope.selected = scope.values[0];
     });
-
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(1);
-    expect(element.querySelectorAll("option")).toEqualOption(
+    expect(element.querySelectorAll("option")[0]).toEqualOption(
       scope.values[0],
       "A",
     );
@@ -474,7 +485,7 @@ xdescribe("ngOptions", () => {
     scope.$apply(() => {
       scope.values.push({ name: "B" });
     });
-
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(2);
     expect(element.querySelectorAll("option")[0]).toEqualOption(
       scope.values[0],
@@ -486,20 +497,23 @@ xdescribe("ngOptions", () => {
     );
   });
 
-  it("should shrink list", () => {
-    createSingleSelect();
-
+  fit("should shrink list", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
     scope.$apply(() => {
       scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
       scope.selected = scope.values[0];
     });
-
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(3);
 
     scope.$apply(() => {
       scope.values.pop();
     });
-
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(2);
     expect(element.querySelectorAll("option")[0]).toEqualOption(
       scope.values[0],
@@ -513,9 +527,10 @@ xdescribe("ngOptions", () => {
     scope.$apply(() => {
       scope.values.pop();
     });
+    await wait();
 
     expect(element.querySelectorAll("option").length).toEqual(1);
-    expect(element.querySelectorAll("option")).toEqualOption(
+    expect(element.querySelectorAll("option")[0]).toEqualOption(
       scope.values[0],
       "A",
     );
@@ -524,48 +539,50 @@ xdescribe("ngOptions", () => {
       scope.values.pop();
       scope.selected = null;
     });
+    await wait();
 
     expect(element.querySelectorAll("option").length).toEqual(1); // we add back the special empty option
   });
 
-  it("should shrink and then grow list", () => {
-    createSingleSelect();
-
-    scope.$apply(() => {
-      scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
-      scope.selected = scope.values[0];
-    });
-
+  fit("should shrink and then grow list", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
+    scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(3);
 
-    scope.$apply(() => {
-      scope.values = [{ name: "1" }, { name: "2" }];
-      scope.selected = scope.values[0];
-    });
-
+    scope.values = [{ name: "1" }, { name: "2" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(2);
 
-    scope.$apply(() => {
-      scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
-      scope.selected = scope.values[0];
-    });
-
+    scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(3);
   });
 
-  it("should update list", () => {
-    createSingleSelect();
-
-    scope.$apply(() => {
-      scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
-      scope.selected = scope.values[0];
-    });
-
-    scope.$apply(() => {
-      scope.values = [{ name: "B" }, { name: "C" }, { name: "D" }];
-      scope.selected = scope.values[0];
-    });
+  fit("should update list", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
+    scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
+    scope.values = [{ name: "B" }, { name: "C" }, { name: "D" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(3);
     expect(options[0]).toEqualOption(scope.values[0], "B");
@@ -573,37 +590,36 @@ xdescribe("ngOptions", () => {
     expect(options[2]).toEqualOption(scope.values[2], "D");
   });
 
-  it("should preserve pre-existing empty option", () => {
-    createSingleSelect(true);
-
-    scope.$apply(() => {
-      scope.values = [];
-    });
+  fit("should preserve pre-existing empty option", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
+    await wait();
+    scope.values = [];
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(1);
-
-    scope.$apply(() => {
-      scope.values = [{ name: "A" }];
-      scope.selected = scope.values[0];
-    });
-
+    scope.values = [{ name: "A" }];
+    await wait();
+    scope.selected = scope.values[0];
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(2);
     expect(element.querySelectorAll("option")[0].textContent).toEqual("blank");
     expect(element.querySelectorAll("option")[1].textContent).toEqual("A");
 
-    scope.$apply(() => {
-      scope.values = [];
-      scope.selected = null;
-    });
-
+    scope.values = [];
+    await wait();
+    scope.selected = null;
+    await wait();
     expect(element.querySelectorAll("option").length).toEqual(1);
     expect(element.querySelectorAll("option")[0].textContent).toEqual("blank");
   });
 
-  it("should ignore $ and $$ properties", () => {
-    createSelect({
-      "ng-options": "key as value for (key, value) in object",
-      "ng-model": "selected",
-    });
+  fit("should ignore $ and $$ properties", async () => {
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="key as value for (key, value) in object"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
     scope.$apply(() => {
       scope.object = {
@@ -613,7 +629,7 @@ xdescribe("ngOptions", () => {
       };
       scope.selected = "regularProperty";
     });
-
+    await wait();
     const options = element.querySelectorAll("option");
     expect(options.length).toEqual(1);
     expect(options[0]).toEqualOption("regularProperty", "visible");
@@ -687,7 +703,10 @@ xdescribe("ngOptions", () => {
   it("should not update selected property of an option element on digest with no change event", () => {
     // ng-options="value.name for value in values"
     // ng-model="selected"
-    createSingleSelect();
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
     scope.$apply(() => {
       scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
@@ -713,7 +732,10 @@ xdescribe("ngOptions", () => {
   it("should update the label property", () => {
     // ng-options="value.name for value in values"
     // ng-model="selected"
-    createSingleSelect();
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
     scope.$apply(() => {
       scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
@@ -729,7 +751,10 @@ xdescribe("ngOptions", () => {
   it("should update the label if only the property has changed", () => {
     // ng-options="value.name for value in values"
     // ng-model="selected"
-    createSingleSelect();
+    element.innerHTML =
+      '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+    injector = window.angular.bootstrap(element, ["myModule"]);
+    scope = injector.get("$rootScope");
 
     scope.$apply(() => {
       scope.values = [{ name: "A" }, { name: "B" }, { name: "C" }];
@@ -1710,7 +1735,10 @@ xdescribe("ngOptions", () => {
 
   describe("binding", () => {
     it("should bind to scope value", () => {
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }, { name: "B" }];
@@ -2177,7 +2205,10 @@ xdescribe("ngOptions", () => {
     });
 
     it("should insert the unknown option if bound to null", () => {
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }];
@@ -2197,7 +2228,10 @@ xdescribe("ngOptions", () => {
     });
 
     it("should select the provided empty option if bound to null", () => {
-      createSingleSelect(true);
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }];
@@ -2218,7 +2252,10 @@ xdescribe("ngOptions", () => {
     });
 
     it("should reuse blank option if bound to null", () => {
-      createSingleSelect(true);
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }];
@@ -2260,7 +2297,10 @@ xdescribe("ngOptions", () => {
     });
 
     it("should insert a unknown option if bound to something not in the list", () => {
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }];
@@ -2287,7 +2327,10 @@ xdescribe("ngOptions", () => {
       () => {
         scope.selected = "C";
         scope.values = [{ name: "A" }, { name: "B" }];
-        createSingleSelect(true);
+        element.innerHTML =
+          '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+        injector = window.angular.bootstrap(element, ["myModule"]);
+        scope = injector.get("$rootScope");
 
         expect(element.value).toBe("?");
         expect(element.length).toBe(4);
@@ -2300,7 +2343,10 @@ xdescribe("ngOptions", () => {
     );
 
     it('should select correct input if previously selected option was "?"', () => {
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }, { name: "B" }];
@@ -2321,7 +2367,10 @@ xdescribe("ngOptions", () => {
     it("should remove unknown option when empty option exists and model is undefined", () => {
       scope.selected = "C";
       scope.values = [{ name: "A" }, { name: "B" }];
-      createSingleSelect(true);
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       expect(element.value).toBe("?");
 
@@ -2578,7 +2627,10 @@ xdescribe("ngOptions", () => {
       scope.$apply(() => {
         scope.values = [{ name: "A" }];
       });
-      createSingleSelect(true);
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
       // ensure the first option (the blank option) is selected
       expect(element.selectedIndex).toEqual(0);
       // ensure the option has not changed following the digest
@@ -2739,7 +2791,10 @@ xdescribe("ngOptions", () => {
 
   describe("on change", () => {
     it("should update model on change", () => {
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }, { name: "B" }];
@@ -2773,7 +2828,10 @@ xdescribe("ngOptions", () => {
     });
 
     it("should update model to null on change", () => {
-      createSingleSelect(true);
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"><option value="">blank</option></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       scope.$apply(() => {
         scope.values = [{ name: "A" }, { name: "B" }];
@@ -3221,7 +3279,10 @@ xdescribe("ngOptions", () => {
         scope.values = ["a", "b"];
       });
 
-      createSingleSelect();
+      element.innerHTML =
+        '<select ng-model="selected" ng-options="value.name for value in values"></select>';
+      injector = window.angular.bootstrap(element, ["myModule"]);
+      scope = injector.get("$rootScope");
 
       expect(element.classList.contains("ng-valid")).toBeTrue();
       expect(element.classList.contains("ng-pristine")).toBeTrue();