angular-docs-cn/modules/@angular/common/test/forms/model_spec.ts

import {
  ddescribe,
  describe,
  it,
  iit,
  xit,
  expect,
  beforeEach,
  afterEach,
  inject,
} from '@angular/core/testing/testing_internal';
import {fakeAsync, flushMicrotasks, Log, tick} from '@angular/core/testing';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {ControlGroup, Control, ControlArray, Validators} from '@angular/common';
import {IS_DART, isPresent} from '../../src/facade/lang';
import {PromiseWrapper} from '../../src/facade/promise';
import {TimerWrapper, ObservableWrapper, EventEmitter} from '../../src/facade/async';

export function main() {
  function asyncValidator(expected, timeouts = /*@ts2dart_const*/ {}) {
    return (c) => {
      var completer = PromiseWrapper.completer();
      var t = isPresent(timeouts[c.value]) ? timeouts[c.value] : 0;
      var res = c.value != expected ? {"async": true} : null;

      if (t == 0) {
        completer.resolve(res);
      } else {
        TimerWrapper.setTimeout(() => { completer.resolve(res); }, t);
      }

      return completer.promise;
    };
  }

  function asyncValidatorReturningObservable(c) {
    var e = new EventEmitter();
    PromiseWrapper.scheduleMicrotask(() => ObservableWrapper.callEmit(e, {"async": true}));
    return e;
  }

  describe("Form Model", () => {
    describe("Control", () => {
      it("should default the value to null", () => {
        var c = new Control();
        expect(c.value).toBe(null);
      });

      describe("validator", () => {
        it("should run validator with the initial value", () => {
          var c = new Control("value", Validators.required);
          expect(c.valid).toEqual(true);
        });

        it("should rerun the validator when the value changes", () => {
          var c = new Control("value", Validators.required);
          c.updateValue(null);
          expect(c.valid).toEqual(false);
        });

        it("should return errors", () => {
          var c = new Control(null, Validators.required);
          expect(c.errors).toEqual({"required": true});
        });
      });

      describe("asyncValidator", () => {
        it("should run validator with the initial value", fakeAsync(() => {
             var c = new Control("value", null, asyncValidator("expected"));
             tick();

             expect(c.valid).toEqual(false);
             expect(c.errors).toEqual({"async": true});
           }));

        it("should support validators returning observables", fakeAsync(() => {
             var c = new Control("value", null, asyncValidatorReturningObservable);
             tick();

             expect(c.valid).toEqual(false);
             expect(c.errors).toEqual({"async": true});
           }));

        it("should rerun the validator when the value changes", fakeAsync(() => {
             var c = new Control("value", null, asyncValidator("expected"));

             c.updateValue("expected");
             tick();

             expect(c.valid).toEqual(true);
           }));

        it("should run the async validator only when the sync validator passes", fakeAsync(() => {
             var c = new Control("", Validators.required, asyncValidator("expected"));
             tick();

             expect(c.errors).toEqual({"required": true});

             c.updateValue("some value");
             tick();

             expect(c.errors).toEqual({"async": true});
           }));

        it("should mark the control as pending while running the async validation",
           fakeAsync(() => {
             var c = new Control("", null, asyncValidator("expected"));

             expect(c.pending).toEqual(true);

             tick();

             expect(c.pending).toEqual(false);
           }));

        it("should only use the latest async validation run", fakeAsync(() => {
             var c =
                 new Control("", null, asyncValidator("expected", {"long": 200, "expected": 100}));

             c.updateValue("long");
             c.updateValue("expected");

             tick(300);

             expect(c.valid).toEqual(true);
           }));
      });

      describe("dirty", () => {
        it("should be false after creating a control", () => {
          var c = new Control("value");
          expect(c.dirty).toEqual(false);
        });

        it("should be true after changing the value of the control", () => {
          var c = new Control("value");
          c.markAsDirty();
          expect(c.dirty).toEqual(true);
        });
      });

      describe("updateValue", () => {
        var g, c;
        beforeEach(() => {
          c = new Control("oldValue");
          g = new ControlGroup({"one": c});
        });

        it("should update the value of the control", () => {
          c.updateValue("newValue");
          expect(c.value).toEqual("newValue");
        });

        it("should invoke ngOnChanges if it is present", () => {
          var ngOnChanges;
          c.registerOnChange((v) => ngOnChanges = ["invoked", v]);

          c.updateValue("newValue");

          expect(ngOnChanges).toEqual(["invoked", "newValue"]);
        });

        it("should not invoke on change when explicitly specified", () => {
          var onChange = null;
          c.registerOnChange((v) => onChange = ["invoked", v]);

          c.updateValue("newValue", {emitModelToViewChange: false});

          expect(onChange).toBeNull();
        });

        it("should update the parent", () => {
          c.updateValue("newValue");
          expect(g.value).toEqual({"one": "newValue"});
        });

        it("should not update the parent when explicitly specified", () => {
          c.updateValue("newValue", {onlySelf: true});
          expect(g.value).toEqual({"one": "oldValue"});
        });

        it("should fire an event", fakeAsync(() => {
             ObservableWrapper.subscribe(c.valueChanges,
                                         (value) => { expect(value).toEqual("newValue"); });

             c.updateValue("newValue");
             tick();
           }));

        it("should not fire an event when explicitly specified", fakeAsync(() => {
             ObservableWrapper.subscribe(c.valueChanges, (value) => { throw "Should not happen"; });

             c.updateValue("newValue", {emitEvent: false});

             tick();
           }));
      });

      describe("valueChanges & statusChanges", () => {
        var c;

        beforeEach(() => { c = new Control("old", Validators.required); });

        it("should fire an event after the value has been updated",
           inject([AsyncTestCompleter], (async) => {
             ObservableWrapper.subscribe(c.valueChanges, (value) => {
               expect(c.value).toEqual('new');
               expect(value).toEqual('new');
               async.done();
             });
             c.updateValue("new");
           }));

        it("should fire an event after the status has been updated to invalid", fakeAsync(() => {
             ObservableWrapper.subscribe(c.statusChanges, (status) => {
               expect(c.status).toEqual('INVALID');
               expect(status).toEqual('INVALID');
             });

             c.updateValue("");
             tick();
           }));

        it("should fire an event after the status has been updated to pending", fakeAsync(() => {
             var c = new Control("old", Validators.required, asyncValidator("expected"));

             var log = [];
             ObservableWrapper.subscribe(c.valueChanges, (value) => log.push(`value: '${value}'`));
             ObservableWrapper.subscribe(c.statusChanges,
                                         (status) => log.push(`status: '${status}'`));

             c.updateValue("");
             tick();

             c.updateValue("nonEmpty");
             tick();

             c.updateValue("expected");
             tick();

             expect(log).toEqual([
               "" + "value: ''",
               "status: 'INVALID'",
               "value: 'nonEmpty'",
               "status: 'PENDING'",
               "status: 'INVALID'",
               "value: 'expected'",
               "status: 'PENDING'",
               "status: 'VALID'",
             ]);
           }));

        // TODO: remove the if statement after making observable delivery sync
        if (!IS_DART) {
          it("should update set errors and status before emitting an event",
             inject([AsyncTestCompleter], (async) => {
               c.valueChanges.subscribe(value => {
                 expect(c.valid).toEqual(false);
                 expect(c.errors).toEqual({"required": true});
                 async.done();
               });
               c.updateValue("");
             }));
        }

        it("should return a cold observable", inject([AsyncTestCompleter], (async) => {
             c.updateValue("will be ignored");
             ObservableWrapper.subscribe(c.valueChanges, (value) => {
               expect(value).toEqual('new');
               async.done();
             });
             c.updateValue("new");
           }));
      });

      describe("setErrors", () => {
        it("should set errors on a control", () => {
          var c = new Control("someValue");

          c.setErrors({"someError": true});

          expect(c.valid).toEqual(false);
          expect(c.errors).toEqual({"someError": true});
        });

        it("should reset the errors and validity when the value changes", () => {
          var c = new Control("someValue", Validators.required);

          c.setErrors({"someError": true});
          c.updateValue("");

          expect(c.errors).toEqual({"required": true});
        });

        it("should update the parent group's validity", () => {
          var c = new Control("someValue");
          var g = new ControlGroup({"one": c});

          expect(g.valid).toEqual(true);

          c.setErrors({"someError": true});

          expect(g.valid).toEqual(false);
        });

        it("should not reset parent's errors", () => {
          var c = new Control("someValue");
          var g = new ControlGroup({"one": c});

          g.setErrors({"someGroupError": true});
          c.setErrors({"someError": true});

          expect(g.errors).toEqual({"someGroupError": true});
        });

        it("should reset errors when updating a value", () => {
          var c = new Control("oldValue");
          var g = new ControlGroup({"one": c});

          g.setErrors({"someGroupError": true});
          c.setErrors({"someError": true});

          c.updateValue("newValue");

          expect(c.errors).toEqual(null);
          expect(g.errors).toEqual(null);
        });
      });
    });

    describe("ControlGroup", () => {
      describe("value", () => {
        it("should be the reduced value of the child controls", () => {
          var g = new ControlGroup({"one": new Control("111"), "two": new Control("222")});
          expect(g.value).toEqual({"one": "111", "two": "222"});
        });

        it("should be empty when there are no child controls", () => {
          var g = new ControlGroup({});
          expect(g.value).toEqual({});
        });

        it("should support nested groups", () => {
          var g = new ControlGroup(
              {"one": new Control("111"), "nested": new ControlGroup({"two": new Control("222")})});
          expect(g.value).toEqual({"one": "111", "nested": {"two": "222"}});

          (<Control>(g.controls["nested"].find("two"))).updateValue("333");

          expect(g.value).toEqual({"one": "111", "nested": {"two": "333"}});
        });
      });

      describe("errors", () => {
        it("should run the validator when the value changes", () => {
          var simpleValidator = (c) =>
              c.controls["one"].value != "correct" ? {"broken": true} : null;

          var c = new Control(null);
          var g = new ControlGroup({"one": c}, null, simpleValidator);

          c.updateValue("correct");

          expect(g.valid).toEqual(true);
          expect(g.errors).toEqual(null);

          c.updateValue("incorrect");

          expect(g.valid).toEqual(false);
          expect(g.errors).toEqual({"broken": true});
        });
      });

      describe("dirty", () => {
        var c, g;

        beforeEach(() => {
          c = new Control('value');
          g = new ControlGroup({"one": c});
        });

        it("should be false after creating a control", () => { expect(g.dirty).toEqual(false); });

        it("should be false after changing the value of the control", () => {
          c.markAsDirty();

          expect(g.dirty).toEqual(true);
        });
      });

      describe("optional components", () => {
        describe("contains", () => {
          var group;

          beforeEach(() => {
            group = new ControlGroup(
                {
                  "required": new Control("requiredValue"),
                  "optional": new Control("optionalValue")
                },
                {"optional": false});
          });

          // rename contains into has
          it("should return false when the component is not included",
             () => { expect(group.contains("optional")).toEqual(false); })

              it("should return false when there is no component with the given name",
                 () => { expect(group.contains("something else")).toEqual(false); });

          it("should return true when the component is included", () => {
            expect(group.contains("required")).toEqual(true);

            group.include("optional");

            expect(group.contains("optional")).toEqual(true);
          });
        });

        it("should not include an inactive component into the group value", () => {
          var group = new ControlGroup(
              {"required": new Control("requiredValue"), "optional": new Control("optionalValue")},
              {"optional": false});

          expect(group.value).toEqual({"required": "requiredValue"});

          group.include("optional");

          expect(group.value).toEqual({"required": "requiredValue", "optional": "optionalValue"});
        });

        it("should not run Validators on an inactive component", () => {
          var group = new ControlGroup(
              {
                "required": new Control("requiredValue", Validators.required),
                "optional": new Control("", Validators.required)
              },
              {"optional": false});

          expect(group.valid).toEqual(true);

          group.include("optional");

          expect(group.valid).toEqual(false);
        });
      });

      describe("valueChanges", () => {
        var g, c1, c2;

        beforeEach(() => {
          c1 = new Control("old1");
          c2 = new Control("old2");
          g = new ControlGroup({"one": c1, "two": c2}, {"two": true});
        });

        it("should fire an event after the value has been updated",
           inject([AsyncTestCompleter], (async) => {
             ObservableWrapper.subscribe(g.valueChanges, (value) => {
               expect(g.value).toEqual({'one': 'new1', 'two': 'old2'});
               expect(value).toEqual({'one': 'new1', 'two': 'old2'});
               async.done();
             });
             c1.updateValue("new1");
           }));

        it("should fire an event after the control's observable fired an event",
           inject([AsyncTestCompleter], (async) => {
             var controlCallbackIsCalled = false;

             ObservableWrapper.subscribe(c1.valueChanges,
                                         (value) => { controlCallbackIsCalled = true; });

             ObservableWrapper.subscribe(g.valueChanges, (value) => {
               expect(controlCallbackIsCalled).toBe(true);
               async.done();
             });

             c1.updateValue("new1");
           }));

        it("should fire an event when a control is excluded",
           inject([AsyncTestCompleter], (async) => {
             ObservableWrapper.subscribe(g.valueChanges, (value) => {
               expect(value).toEqual({'one': 'old1'});
               async.done();
             });

             g.exclude("two");
           }));

        it("should fire an event when a control is included",
           inject([AsyncTestCompleter], (async) => {
             g.exclude("two");

             ObservableWrapper.subscribe(g.valueChanges, (value) => {
               expect(value).toEqual({'one': 'old1', 'two': 'old2'});
               async.done();
             });

             g.include("two");
           }));

        it("should fire an event every time a control is updated",
           inject([AsyncTestCompleter], (async) => {
             var loggedValues = [];

             ObservableWrapper.subscribe(g.valueChanges, (value) => {
               loggedValues.push(value);

               if (loggedValues.length == 2) {
                 expect(loggedValues)
                     .toEqual([{"one": "new1", "two": "old2"}, {"one": "new1", "two": "new2"}]);
                 async.done();
               }
             });

             c1.updateValue("new1");
             c2.updateValue("new2");
           }));

        xit("should not fire an event when an excluded control is updated",
            inject([AsyncTestCompleter], (async) => {
                                             // hard to test without hacking zones
                                         }));
      });

      describe("getError", () => {
        it("should return the error when it is present", () => {
          var c = new Control("", Validators.required);
          var g = new ControlGroup({"one": c});
          expect(c.getError("required")).toEqual(true);
          expect(g.getError("required", ["one"])).toEqual(true);
        });

        it("should return null otherwise", () => {
          var c = new Control("not empty", Validators.required);
          var g = new ControlGroup({"one": c});
          expect(c.getError("invalid")).toEqual(null);
          expect(g.getError("required", ["one"])).toEqual(null);
          expect(g.getError("required", ["invalid"])).toEqual(null);
        });
      });

      describe("asyncValidator", () => {
        it("should run the async validator", fakeAsync(() => {
             var c = new Control("value");
             var g = new ControlGroup({"one": c}, null, null, asyncValidator("expected"));

             expect(g.pending).toEqual(true);

             tick(1);

             expect(g.errors).toEqual({"async": true});
             expect(g.pending).toEqual(false);
           }));

        it("should set the parent group's status to pending", fakeAsync(() => {
             var c = new Control("value", null, asyncValidator("expected"));
             var g = new ControlGroup({"one": c});

             expect(g.pending).toEqual(true);

             tick(1);

             expect(g.pending).toEqual(false);
           }));

        it("should run the parent group's async validator when children are pending",
           fakeAsync(() => {
             var c = new Control("value", null, asyncValidator("expected"));
             var g = new ControlGroup({"one": c}, null, null, asyncValidator("expected"));

             tick(1);

             expect(g.errors).toEqual({"async": true});
             expect(g.find(["one"]).errors).toEqual({"async": true});
           }));
      })
    });

    describe("ControlArray", () => {
      describe("adding/removing", () => {
        var a: ControlArray;
        var c1, c2, c3;

        beforeEach(() => {
          a = new ControlArray([]);
          c1 = new Control(1);
          c2 = new Control(2);
          c3 = new Control(3);
        });

        it("should support pushing", () => {
          a.push(c1);
          expect(a.length).toEqual(1);
          expect(a.controls).toEqual([c1]);
        });

        it("should support removing", () => {
          a.push(c1);
          a.push(c2);
          a.push(c3);

          a.removeAt(1);

          expect(a.controls).toEqual([c1, c3]);
        });

        it("should support inserting", () => {
          a.push(c1);
          a.push(c3);

          a.insert(1, c2);

          expect(a.controls).toEqual([c1, c2, c3]);
        });
      });

      describe("value", () => {
        it("should be the reduced value of the child controls", () => {
          var a = new ControlArray([new Control(1), new Control(2)]);
          expect(a.value).toEqual([1, 2]);
        });

        it("should be an empty array when there are no child controls", () => {
          var a = new ControlArray([]);
          expect(a.value).toEqual([]);
        });
      });

      describe("errors", () => {
        it("should run the validator when the value changes", () => {
          var simpleValidator = (c) => c.controls[0].value != "correct" ? {"broken": true} : null;

          var c = new Control(null);
          var g = new ControlArray([c], simpleValidator);

          c.updateValue("correct");

          expect(g.valid).toEqual(true);
          expect(g.errors).toEqual(null);

          c.updateValue("incorrect");

          expect(g.valid).toEqual(false);
          expect(g.errors).toEqual({"broken": true});
        });
      });


      describe("dirty", () => {
        var c: Control;
        var a: ControlArray;

        beforeEach(() => {
          c = new Control('value');
          a = new ControlArray([c]);
        });

        it("should be false after creating a control", () => { expect(a.dirty).toEqual(false); });

        it("should be false after changing the value of the control", () => {
          c.markAsDirty();

          expect(a.dirty).toEqual(true);
        });
      });

      describe("pending", () => {
        var c: Control;
        var a: ControlArray;

        beforeEach(() => {
          c = new Control('value');
          a = new ControlArray([c]);
        });

        it("should be false after creating a control", () => {
          expect(c.pending).toEqual(false);
          expect(a.pending).toEqual(false);
        });

        it("should be true after changing the value of the control", () => {
          c.markAsPending();

          expect(c.pending).toEqual(true);
          expect(a.pending).toEqual(true);
        });

        it("should not update the parent when onlySelf = true", () => {
          c.markAsPending({onlySelf: true});

          expect(c.pending).toEqual(true);
          expect(a.pending).toEqual(false);
        });
      });

      describe("valueChanges", () => {
        var a: ControlArray;
        var c1, c2;

        beforeEach(() => {
          c1 = new Control("old1");
          c2 = new Control("old2");
          a = new ControlArray([c1, c2]);
        });

        it("should fire an event after the value has been updated",
           inject([AsyncTestCompleter], (async) => {
             ObservableWrapper.subscribe(a.valueChanges, (value) => {
               expect(a.value).toEqual(['new1', 'old2']);
               expect(value).toEqual(['new1', 'old2']);
               async.done();
             });
             c1.updateValue("new1");
           }));

        it("should fire an event after the control's observable fired an event",
           inject([AsyncTestCompleter], (async) => {
             var controlCallbackIsCalled = false;

             ObservableWrapper.subscribe(c1.valueChanges,
                                         (value) => { controlCallbackIsCalled = true; });

             ObservableWrapper.subscribe(a.valueChanges, (value) => {
               expect(controlCallbackIsCalled).toBe(true);
               async.done();
             });

             c1.updateValue("new1");
           }));

        it("should fire an event when a control is removed",
           inject([AsyncTestCompleter], (async) => {
             ObservableWrapper.subscribe(a.valueChanges, (value) => {
               expect(value).toEqual(['old1']);
               async.done();
             });

             a.removeAt(1);
           }));

        it("should fire an event when a control is added", inject([AsyncTestCompleter], (async) => {
             a.removeAt(1);

             ObservableWrapper.subscribe(a.valueChanges, (value) => {
               expect(value).toEqual(['old1', 'old2']);
               async.done();
             });

             a.push(c2);
           }));
      });

      describe("find", () => {
        it("should return null when path is null", () => {
          var g = new ControlGroup({});
          expect(g.find(null)).toEqual(null);
        });

        it("should return null when path is empty", () => {
          var g = new ControlGroup({});
          expect(g.find([])).toEqual(null);
        });

        it("should return null when path is invalid", () => {
          var g = new ControlGroup({});
          expect(g.find(["one", "two"])).toEqual(null);
        });

        it("should return a child of a control group", () => {
          var g = new ControlGroup(
              {"one": new Control("111"), "nested": new ControlGroup({"two": new Control("222")})});

          expect(g.find(["nested", "two"]).value).toEqual("222");
          expect(g.find(["one"]).value).toEqual("111");
          expect(g.find("nested/two").value).toEqual("222");
          expect(g.find("one").value).toEqual("111");
        });

        it("should return an element of an array", () => {
          var g = new ControlGroup({"array": new ControlArray([new Control("111")])});

          expect(g.find(["array", 0]).value).toEqual("111");
        });
      });

      describe("asyncValidator", () => {
        it("should run the async validator", fakeAsync(() => {
             var c = new Control("value");
             var g = new ControlArray([c], null, asyncValidator("expected"));

             expect(g.pending).toEqual(true);

             tick(1);

             expect(g.errors).toEqual({"async": true});
             expect(g.pending).toEqual(false);
           }));
      })
    });
  });
}