From 3525c9c074b9a03cd67b830a3662c26c8669ef4a Mon Sep 17 00:00:00 2001 From: vsavkin Date: Fri, 22 May 2015 12:32:49 -0700 Subject: [PATCH] chore(forms): moved tests/forms to typescript --- ...{directives_spec.js => directives_spec.ts} | 25 +- ...m_builder_spec.js => form_builder_spec.ts} | 49 +- .../angular2/test/forms/integration_spec.js | 429 ------------------ .../angular2/test/forms/integration_spec.ts | 402 ++++++++++++++++ .../forms/{model_spec.js => model_spec.ts} | 312 +++++++------ ...{validators_spec.js => validators_spec.ts} | 52 +-- 6 files changed, 619 insertions(+), 650 deletions(-) rename modules/angular2/test/forms/{directives_spec.js => directives_spec.ts} (59%) rename modules/angular2/test/forms/{form_builder_spec.js => form_builder_spec.ts} (61%) delete mode 100644 modules/angular2/test/forms/integration_spec.js create mode 100644 modules/angular2/test/forms/integration_spec.ts rename modules/angular2/test/forms/{model_spec.js => model_spec.ts} (55%) rename modules/angular2/test/forms/{validators_spec.js => validators_spec.ts} (54%) diff --git a/modules/angular2/test/forms/directives_spec.js b/modules/angular2/test/forms/directives_spec.ts similarity index 59% rename from modules/angular2/test/forms/directives_spec.js rename to modules/angular2/test/forms/directives_spec.ts index 5e1dcf723b..3c9bb02c39 100644 --- a/modules/angular2/test/forms/directives_spec.js +++ b/modules/angular2/test/forms/directives_spec.ts @@ -1,5 +1,16 @@ -import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el, - AsyncTestCompleter, inject} from 'angular2/test_lib'; +import { + ddescribe, + describe, + it, + iit, + xit, + expect, + beforeEach, + afterEach, + el, + AsyncTestCompleter, + inject +} from 'angular2/test_lib'; import {ControlGroup, ControlDirective, ControlGroupDirective} from 'angular2/forms'; export function main() { @@ -7,9 +18,8 @@ export function main() { describe("Control", () => { it("should throw when the group is not found and the control is not set", () => { var c = new ControlDirective(null); - expect(() => { - c.controlOrName = 'login'; - }).toThrowError(new RegExp('No control group found for "login"')); + expect(() => { c.controlOrName = 'login'; }) + .toThrowError(new RegExp('No control group found for "login"')); }); it("should throw when cannot find the control in the group", () => { @@ -17,9 +27,8 @@ export function main() { emptyGroup.controlOrName = new ControlGroup({}); var c = new ControlDirective(emptyGroup); - expect(() => { - c.controlOrName = 'login'; - }).toThrowError(new RegExp('Cannot find control "login"')); + expect(() => { c.controlOrName = 'login'; }) + .toThrowError(new RegExp('Cannot find control "login"')); }); }); }); diff --git a/modules/angular2/test/forms/form_builder_spec.js b/modules/angular2/test/forms/form_builder_spec.ts similarity index 61% rename from modules/angular2/test/forms/form_builder_spec.js rename to modules/angular2/test/forms/form_builder_spec.ts index 538dc9eefb..02e33fbce8 100644 --- a/modules/angular2/test/forms/form_builder_spec.js +++ b/modules/angular2/test/forms/form_builder_spec.ts @@ -1,27 +1,30 @@ -import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib'; +import { + ddescribe, + describe, + it, + iit, + xit, + expect, + beforeEach, + afterEach, + el +} from 'angular2/test_lib'; import {Control, FormBuilder, Validators} from 'angular2/forms'; export function main() { describe("Form Builder", () => { var b; - beforeEach(() => { - b = new FormBuilder(); - }); + beforeEach(() => { b = new FormBuilder(); }); it("should create controls from a value", () => { - var g = b.group({ - "login": "some value" - }); + var g = b.group({"login": "some value"}); expect(g.controls["login"].value).toEqual("some value"); }); it("should create controls from an array", () => { - var g = b.group({ - "login": ["some value"], - "password": ["some value", Validators.required] - }); + var g = b.group({"login": ["some value"], "password": ["some value", Validators.required]}); expect(g.controls["login"].value).toEqual("some value"); expect(g.controls["password"].value).toEqual("some value"); @@ -29,49 +32,35 @@ export function main() { }); it("should use controls", () => { - var g = b.group({ - "login": b.control("some value", Validators.required) - }); + var g = b.group({"login": b.control("some value", Validators.required)}); expect(g.controls["login"].value).toEqual("some value"); expect(g.controls["login"].validator).toBe(Validators.required); }); it("should create groups with optional controls", () => { - var g = b.group({ - "login": "some value" - }, {"optionals": {"login" : false}}); + var g = b.group({"login": "some value"}, {"optionals": {"login": false}}); expect(g.contains("login")).toEqual(false); }); it("should create groups with a custom validator", () => { - var g = b.group({ - "login": "some value" - }, {"validator": Validators.nullValidator}); + var g = b.group({"login": "some value"}, {"validator": Validators.nullValidator}); expect(g.validator).toBe(Validators.nullValidator); }); it("should use default validators when no validators are provided", () => { - var g = b.group({ - "login": "some value" - }); + var g = b.group({"login": "some value"}); expect(g.controls["login"].validator).toBe(Validators.nullValidator); expect(g.validator).toBe(Validators.group); }); it("should create control arrays", () => { var c = b.control("three"); - var a = b.array([ - "one", - ["two", Validators.required], - c, - b.array(['four']) - ]); + var a = b.array(["one", ["two", Validators.required], c, b.array(['four'])]); expect(a.value).toEqual(['one', 'two', 'three', ['four']]); }); }); } - diff --git a/modules/angular2/test/forms/integration_spec.js b/modules/angular2/test/forms/integration_spec.js deleted file mode 100644 index bfb7176b47..0000000000 --- a/modules/angular2/test/forms/integration_spec.js +++ /dev/null @@ -1,429 +0,0 @@ -import { - afterEach, - AsyncTestCompleter, - beforeEach, - ddescribe, - describe, - dispatchEvent, - el, - expect, - iit, - inject, - it, - xit -} from 'angular2/test_lib'; -import {DOM} from 'angular2/src/dom/dom_adapter'; - -import {Inject} from 'angular2/src/di/annotations_impl'; - -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; -import {View} from 'angular2/src/core/annotations_impl/view'; - -import {TestBed} from 'angular2/src/test_lib/test_bed'; - -import {ControlGroupDirective, ControlDirective, Control, ControlGroup, RequiredValidatorDirective, CheckboxControlValueAccessor, DefaultValueAccessor, SelectControlValueAccessor, Validators} from 'angular2/forms'; - -export function main() { - describe("integration tests", () => { - - it("should initialize DOM elements with the given form object", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({ - "login": new Control("loginValue") - })); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input"); - expect(input.value).toEqual("loginValue"); - async.done(); - }); - })); - - - it("should update the control group values on DOM change", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({ - "login": new Control("oldValue") - }); - var ctx = new MyComp(form); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input"); - - input.value = "updatedValue"; - dispatchEvent(input, "change"); - - expect(form.value).toEqual({"login": "updatedValue"}); - async.done(); - }); - })); - - it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var control = new Control("loginValue"); - var ctx = new MyComp(control); - - var t = `
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("loginValue"); - - input.value = "updatedValue"; - dispatchEvent(input, "change"); - - expect(control.value).toEqual("updatedValue"); - async.done(); - }); - })); - - it("should update DOM elements when rebinding the control group", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({ - "login": new Control("oldValue") - }); - var ctx = new MyComp(form); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - ctx.form = new ControlGroup({ - "login": new Control("newValue") - }); - view.detectChanges(); - - var input = view.querySelector("input") - expect(input.value).toEqual("newValue"); - async.done(); - }); - })); - - it("should update DOM element when rebinding the control name", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({ - "one": new Control("one"), - "two": new Control("two") - }), "one"); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("one"); - - ctx.name = "two"; - view.detectChanges(); - - expect(input.value).toEqual("two"); - async.done(); - }); - })); - - describe("different control types", () => { - it("should support ", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({"text": new Control("old")})); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("old"); - - input.value = "new"; - dispatchEvent(input, "input"); - - expect(ctx.form.value).toEqual({"text": "new"}); - async.done(); - }); - })); - - it("should support without type", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({"text": new Control("old")})); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("old"); - - input.value = "new"; - dispatchEvent(input, "input"); - - expect(ctx.form.value).toEqual({"text": "new"}); - async.done(); - }); - })); - - it("should support - `; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var textarea = view.querySelector("textarea") - expect(textarea.value).toEqual("old"); - - textarea.value = "new"; - dispatchEvent(textarea, "input"); - - expect(ctx.form.value).toEqual({"text": 'new'}); - async.done(); - }); - })); - - it("should support ", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)})); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.checked).toBe(true); - - input.checked = false; - dispatchEvent(input, "change"); - - expect(ctx.form.value).toEqual({"checkbox": false}); - async.done(); - }); - })); - - it("should support - - - - `; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var select = view.querySelector("select") - var sfOption = view.querySelector("option") - expect(select.value).toEqual('SF'); - if (DOM.supportsDOMEvents()) { - expect(sfOption.selected).toBe(true); - } - - select.value = 'NYC'; - dispatchEvent(select, "change"); - - expect(ctx.form.value).toEqual({"city": 'NYC'}); - if (DOM.supportsDOMEvents()) { - expect(sfOption.selected).toBe(false); - } - async.done(); - }); - })); - - it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({"name": new Control("aa")})); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("!aa!"); - - input.value = "!bb!"; - dispatchEvent(input, "change"); - - expect(ctx.form.value).toEqual({"name": "bb"}); - async.done(); - }); - })); - - it("should throw when cannot find a value accessor", inject([TestBed, AsyncTestCompleter], (tb, async) => { - var ctx = new MyComp(new ControlGroup({"name": new Control("aa")})); - - var t = `
-
-
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - expect(() => view.detectChanges()).toThrowError(new RegExp("Cannot find value accessor")) - async.done(); - }); - })); - }); - - describe("validations", () => { - it("should use validators defined in html", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({"login": new Control("aa")}); - var ctx = new MyComp(form); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - expect(form.valid).toEqual(true); - - var input = view.querySelector("input"); - - input.value = ""; - dispatchEvent(input, "change"); - - expect(form.valid).toEqual(false); - async.done(); - }); - })); - - it("should use validators defined in the model", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({"login": new Control("aa", Validators.required)}); - var ctx = new MyComp(form); - - var t = `
- -
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - expect(form.valid).toEqual(true); - - var input = view.querySelector("input"); - - input.value = ""; - dispatchEvent(input, "change"); - - expect(form.valid).toEqual(false); - async.done(); - }); - })); - }); - - describe("nested forms", () => { - it("should init DOM with the given form object", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({ - "nested": new ControlGroup({ - "login": new Control("value") - }) - }); - var ctx = new MyComp(form); - - var t = `
-
- -
-
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - expect(input.value).toEqual("value"); - async.done(); - }); - })); - - it("should update the control group values on DOM change", - inject([TestBed, AsyncTestCompleter], (tb, async) => { - var form = new ControlGroup({ - "nested": new ControlGroup({ - "login": new Control("value") - }) - }); - var ctx = new MyComp(form); - - var t = `
-
- -
-
`; - - tb.createView(MyComp, {context: ctx, html: t}).then((view) => { - view.detectChanges(); - var input = view.querySelector("input") - - input.value = "updatedValue"; - dispatchEvent(input, "change"); - - expect(form.value).toEqual({"nested": {"login": "updatedValue"}}); - async.done(); - }); - })); - }); - }); -} - -@Component({selector: "my-comp"}) -@View({directives: [ - ControlGroupDirective, - ControlDirective, - WrappedValue, - RequiredValidatorDirective, - DefaultValueAccessor, - CheckboxControlValueAccessor, - SelectControlValueAccessor -]}) -class MyComp { - form:any; - name:string; - - constructor(@Inject('form') form = null, @Inject('name') name = null) { - this.form = form; - this.name = name; - } -} - -@Directive({ - selector:'[wrapped-value]', - hostListeners: { - 'change' : 'handleOnChange($event.target.value)' - }, - hostProperties: { - 'value' : 'value' - } -}) -class WrappedValue { - value; - onChange:Function; - - constructor(cd:ControlDirective) { - cd.valueAccessor = this; - } - - writeValue(value) { - this.value = `!${value}!`; - } - - handleOnChange(value) { - this.onChange(value.substring(1, value.length - 1)); - } -} diff --git a/modules/angular2/test/forms/integration_spec.ts b/modules/angular2/test/forms/integration_spec.ts new file mode 100644 index 0000000000..dca06040ad --- /dev/null +++ b/modules/angular2/test/forms/integration_spec.ts @@ -0,0 +1,402 @@ +import { + afterEach, + AsyncTestCompleter, + beforeEach, + ddescribe, + describe, + dispatchEvent, + el, + expect, + iit, + inject, + it, + xit +} from 'angular2/test_lib'; +import {DOM} from 'angular2/src/dom/dom_adapter'; +import {Component, Directive, View} from 'angular2/angular2'; +import {TestBed} from 'angular2/src/test_lib/test_bed'; +import { + Control, + ControlGroup, + ControlDirective, + RequiredValidatorDirective, + Validators, + formDirectives +} from 'angular2/forms'; + +export function main() { + describe("integration tests", () => { + it("should initialize DOM elements with the given form object", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({form: new ControlGroup({"login": new Control("loginValue")})}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("loginValue"); + async.done(); + }); + })); + + it("should update the control group values on DOM change", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = new ControlGroup({"login": new Control("oldValue")}); + var ctx = MyComp.create({form: form}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + + input.value = "updatedValue"; + dispatchEvent(input, "change"); + + expect(form.value).toEqual({"login": "updatedValue"}); + async.done(); + }); + })); + + it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => { + var control = new Control("loginValue"); + var ctx = MyComp.create({form: control}); + + var t = `
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("loginValue"); + + input.value = "updatedValue"; + dispatchEvent(input, "change"); + + expect(control.value).toEqual("updatedValue"); + async.done(); + }); + })); + + it("should update DOM elements when rebinding the control group", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = new ControlGroup({"login": new Control("oldValue")}); + var ctx = MyComp.create({form: form}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + ctx.form = new ControlGroup({"login": new Control("newValue")}); + view.detectChanges(); + + var input = view.querySelector("input"); + expect(input.value).toEqual("newValue"); + async.done(); + }); + })); + + it("should update DOM element when rebinding the control name", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({ + form: new ControlGroup({"one": new Control("one"), "two": new Control("two")}), + name: "one" + }); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("one"); + + ctx.name = "two"; + view.detectChanges(); + + expect(input.value).toEqual("two"); + async.done(); + }); + })); + + describe("different control types", () => { + it("should support ", inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("old"); + + input.value = "new"; + dispatchEvent(input, "input"); + + expect(ctx.form.value).toEqual({"text": "new"}); + async.done(); + }); + })); + + it("should support without type", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("old"); + + input.value = "new"; + dispatchEvent(input, "input"); + + expect(ctx.form.value).toEqual({"text": "new"}); + async.done(); + }); + })); + + it("should support +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var textarea = view.querySelector("textarea"); + expect(textarea.value).toEqual("old"); + + textarea.value = "new"; + dispatchEvent(textarea, "input"); + + expect(ctx.form.value).toEqual({"text": 'new'}); + async.done(); + }); + })); + + it("should support ", inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({form: new ControlGroup({"checkbox": new Control(true)})}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.checked).toBe(true); + + input.checked = false; + dispatchEvent(input, "change"); + + expect(ctx.form.value).toEqual({"checkbox": false}); + async.done(); + }); + })); + + it("should support + + + + `; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var select = view.querySelector("select"); + var sfOption = view.querySelector("option"); + expect(select.value).toEqual('SF'); + if (DOM.supportsDOMEvents()) { + expect(sfOption.selected).toBe(true); + } + + select.value = 'NYC'; + dispatchEvent(select, "change"); + + expect(ctx.form.value).toEqual({"city": 'NYC'}); + if (DOM.supportsDOMEvents()) { + expect(sfOption.selected).toBe(false); + } + async.done(); + }); + })); + + it("should support custom value accessors", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var ctx = MyComp.create({form: new ControlGroup({"name": new Control("aa")})}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("!aa!"); + + input.value = "!bb!"; + dispatchEvent(input, "change"); + + expect(ctx.form.value).toEqual({"name": "bb"}); + async.done(); + }); + })); + }); + + describe("validations", () => { + it("should use validators defined in html", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = new ControlGroup({"login": new Control("aa")}); + var ctx = MyComp.create({form: form}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + expect(form.valid).toEqual(true); + + var input = view.querySelector("input"); + + input.value = ""; + dispatchEvent(input, "change"); + + expect(form.valid).toEqual(false); + async.done(); + }); + })); + + it("should use validators defined in the model", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = new ControlGroup({"login": new Control("aa", Validators.required)}); + var ctx = MyComp.create({form: form}); + + var t = `
+ +
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + expect(form.valid).toEqual(true); + + var input = view.querySelector("input"); + + input.value = ""; + dispatchEvent(input, "change"); + + expect(form.valid).toEqual(false); + async.done(); + }); + })); + }); + + describe("nested forms", () => { + it("should init DOM with the given form object", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = + new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})}); + var ctx = MyComp.create({form: form}); + + var t = `
+
+ +
+
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input"); + expect(input.value).toEqual("value"); + async.done(); + }); + })); + + it("should update the control group values on DOM change", + inject([TestBed, AsyncTestCompleter], (tb, async) => { + var form = + new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})}); + var ctx = MyComp.create({form: form}); + + var t = `
+
+ +
+
`; + + tb.createView(MyComp, {context: ctx, html: t}) + .then((view) => { + view.detectChanges(); + var input = view.querySelector("input") + + input.value = "updatedValue"; + dispatchEvent(input, "change"); + + expect(form.value).toEqual({"nested": {"login": "updatedValue"}}); + async.done(); + }); + })); + }); + }); +} + +@Directive({ + selector: '[wrapped-value]', + hostListeners: {'change': 'handleOnChange($event.target.value)'}, + hostProperties: {'value': 'value'} +}) +class WrappedValue { + value; + onChange: Function; + + constructor(cd: ControlDirective) { cd.valueAccessor = this; } + + writeValue(value) { this.value = `!${value}!`; } + + handleOnChange(value) { this.onChange(value.substring(1, value.length - 1)); } +} + +@Component({selector: "my-comp"}) +@View({directives: [WrappedValue, formDirectives, RequiredValidatorDirective]}) +class MyComp { + form: any; + name: string; + + static create({form, name}: {form?, name?}) { + var mc = new MyComp(); + mc.form = form; + mc.name = name; + return mc; + } +} \ No newline at end of file diff --git a/modules/angular2/test/forms/model_spec.js b/modules/angular2/test/forms/model_spec.ts similarity index 55% rename from modules/angular2/test/forms/model_spec.js rename to modules/angular2/test/forms/model_spec.ts index d3155fb947..7c44fa0aa8 100644 --- a/modules/angular2/test/forms/model_spec.js +++ b/modules/angular2/test/forms/model_spec.ts @@ -1,5 +1,16 @@ -import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el, - AsyncTestCompleter, inject} from 'angular2/test_lib'; +import { + ddescribe, + describe, + it, + iit, + xit, + expect, + beforeEach, + afterEach, + el, + AsyncTestCompleter, + inject +} from 'angular2/test_lib'; import {ControlGroup, Control, ControlArray, Validators} from 'angular2/forms'; import {ObservableWrapper} from 'angular2/src/facade/async'; import {ListWrapper} from 'angular2/src/facade/collection'; @@ -21,7 +32,7 @@ export function main() { it("should return errors", () => { var c = new Control(null, Validators.required); - expect(c.errors).toEqual({"required" : true}); + expect(c.errors).toEqual({"required": true}); }); }); @@ -54,37 +65,33 @@ export function main() { describe("valueChanges", () => { var c; - beforeEach(() => { - c = new Control("old"); - }); + beforeEach(() => { c = new Control("old"); }); - 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 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 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"); - })); + 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("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") - }); + var g = new ControlGroup({"one": new Control("111"), "two": new Control("222")}); expect(g.value).toEqual({"one": "111", "two": "222"}); }); @@ -96,23 +103,19 @@ export function main() { it("should support nested groups", () => { var g = new ControlGroup({ "one": new Control("111"), - "nested": new ControlGroup({ - "two" : new Control("222") - }) + "nested": new ControlGroup({"two": new Control("222")}) }); - expect(g.value).toEqual({"one": "111", "nested" : {"two": "222"}}); + expect(g.value).toEqual({"one": "111", "nested": {"two": "222"}}); g.controls["nested"].controls["two"].updateValue("333"); - expect(g.value).toEqual({"one": "111", "nested" : {"two": "333"}}); + expect(g.value).toEqual({"one": "111", "nested": {"two": "333"}}); }); }); describe("validator", () => { it("should run the validator with the initial value (valid)", () => { - var g = new ControlGroup({ - "one": new Control('value', Validators.required) - }); + var g = new ControlGroup({"one": new Control('value', Validators.required)}); expect(g.valid).toEqual(true); @@ -161,22 +164,20 @@ export function main() { var group; beforeEach(() => { - group = new ControlGroup({ - "required": new Control("requiredValue"), - "optional": new Control("optionalValue") - }, { - "optional": false - }); + 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 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 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); @@ -188,27 +189,24 @@ export function main() { }); 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 - }); + var group = new ControlGroup( + {"required": new Control("requiredValue"), "optional": new Control("optionalValue")}, + {"optional": false}); - expect(group.value).toEqual({"required" : "requiredValue"}); + expect(group.value).toEqual({"required": "requiredValue"}); group.include("optional"); - expect(group.value).toEqual({"required" : "requiredValue", "optional" : "optionalValue"}); + 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 - }); + var group = new ControlGroup( + { + "required": new Control("requiredValue", Validators.required), + "optional": new Control("", Validators.required) + }, + {"optional": false}); expect(group.valid).toEqual(true); @@ -222,80 +220,79 @@ export function main() { beforeEach(() => { c1 = new Control("old1"); - c2 = new Control("old2") - g = new ControlGroup({ - "one" : c1, "two" : c2 - }, { - "two" : true - }); + 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 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; + 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(c1.valueChanges, + (value) => { controlCallbackIsCalled = true; }); - ObservableWrapper.subscribe(g.valueChanges, (value) => { - expect(controlCallbackIsCalled).toBe(true); - async.done(); - }); + ObservableWrapper.subscribe(g.valueChanges, (value) => { + expect(controlCallbackIsCalled).toBe(true); + async.done(); + }); - c1.updateValue("new1"); - })); + 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(); - }); + 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"); - })); + g.exclude("two"); + })); - it("should fire an event when a control is included", inject([AsyncTestCompleter], (async) => { - 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(); - }); + ObservableWrapper.subscribe(g.valueChanges, (value) => { + expect(value).toEqual({'one': 'old1', 'two': 'old2'}); + async.done(); + }); - g.include("two"); - })); + g.include("two"); + })); - it("should fire an event every time a control is updated", inject([AsyncTestCompleter], (async) => { - var loggedValues = []; + it("should fire an event every time a control is updated", + inject([AsyncTestCompleter], (async) => { + var loggedValues = []; - ObservableWrapper.subscribe(g.valueChanges, (value) => { - ListWrapper.push(loggedValues, value); + ObservableWrapper.subscribe(g.valueChanges, (value) => { + ListWrapper.push(loggedValues, value); - if (loggedValues.length == 2) { - expect(loggedValues).toEqual([ - {"one" : "new1", "two" : "old2"}, - {"one" : "new1", "two" : "new2"} - ]) - async.done(); - } - }); + if (loggedValues.length == 2) { + expect(loggedValues) + .toEqual([{"one": "new1", "two": "old2"}, {"one": "new1", "two": "new2"}]) + async.done(); + } + }); - c1.updateValue("new1"); - c2.updateValue("new2"); - })); + 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 - })); + xit("should not fire an event when an excluded control is updated", + inject([AsyncTestCompleter], (async) => { + // hard to test without hacking zones + })); }); }); @@ -351,10 +348,8 @@ export function main() { describe("validator", () => { it("should run the validator with the initial value (valid)", () => { - var a = new ControlArray([ - new Control(1, Validators.required), - new Control(2, Validators.required) - ]); + var a = new ControlArray( + [new Control(1, Validators.required), new Control(2, Validators.required)]); expect(a.valid).toBe(true); expect(a.errors).toBe(null); @@ -405,53 +400,56 @@ export function main() { beforeEach(() => { c1 = new Control("old1"); - c2 = new Control("old2") + 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 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; + 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(c1.valueChanges, + (value) => { controlCallbackIsCalled = true; }); - ObservableWrapper.subscribe(a.valueChanges, (value) => { - expect(controlCallbackIsCalled).toBe(true); - async.done(); - }); + ObservableWrapper.subscribe(a.valueChanges, (value) => { + expect(controlCallbackIsCalled).toBe(true); + async.done(); + }); - c1.updateValue("new1"); - })); + 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(); - }); + 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); - })); + a.removeAt(1); + })); - it("should fire an event when a control is added", inject([AsyncTestCompleter], (async) => { - 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(); - }); + ObservableWrapper.subscribe(a.valueChanges, (value) => { + expect(value).toEqual(['old1', 'old2']); + async.done(); + }); - a.push(c2); - })); + a.push(c2); + })); }); }); }); diff --git a/modules/angular2/test/forms/validators_spec.js b/modules/angular2/test/forms/validators_spec.ts similarity index 54% rename from modules/angular2/test/forms/validators_spec.js rename to modules/angular2/test/forms/validators_spec.ts index 8293093424..8fbb807691 100644 --- a/modules/angular2/test/forms/validators_spec.js +++ b/modules/angular2/test/forms/validators_spec.ts @@ -1,9 +1,19 @@ -import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib'; +import { + ddescribe, + describe, + it, + iit, + xit, + expect, + beforeEach, + afterEach, + el +} from 'angular2/test_lib'; import {ControlGroup, Control, Validators} from 'angular2/forms'; export function main() { - function validator(key:string, error:any){ - return function(c:Control) { + function validator(key: string, error: any) { + return function(c: Control) { var r = {}; r[key] = error; return r; @@ -12,28 +22,25 @@ export function main() { describe("Validators", () => { describe("required", () => { - it("should error on an empty string", () => { - expect(Validators.required(new Control(""))).toEqual({"required" : true}); - }); + it("should error on an empty string", + () => { expect(Validators.required(new Control(""))).toEqual({"required": true}); }); - it("should error on null", () => { - expect(Validators.required(new Control(null))).toEqual({"required" : true}); - }); + it("should error on null", + () => { expect(Validators.required(new Control(null))).toEqual({"required": true}); }); - it("should not error on a non-empty string", () => { - expect(Validators.required(new Control("not empty"))).toEqual(null); - }); + it("should not error on a non-empty string", + () => { expect(Validators.required(new Control("not empty"))).toEqual(null); }); }); describe("compose", () => { it("should collect errors from all the validators", () => { var c = Validators.compose([validator("a", true), validator("b", true)]); - expect(c(new Control(""))).toEqual({"a" : true, "b" : true}); + expect(c(new Control(""))).toEqual({"a": true, "b": true}); }); it("should run validators left to right", () => { var c = Validators.compose([validator("a", 1), validator("a", 2)]); - expect(c(new Control(""))).toEqual({"a" : 2}); + expect(c(new Control(""))).toEqual({"a": 2}); }); it("should return null when no errors", () => { @@ -46,28 +53,21 @@ export function main() { it("should collect errors from the child controls", () => { var one = new Control("one", validator("a", true)); var two = new Control("one", validator("b", true)); - var g = new ControlGroup({"one" : one, "two" : two}); + var g = new ControlGroup({"one": one, "two": two}); - expect(Validators.group(g)).toEqual({ - "a" : [one], - "b" : [two] - }); + expect(Validators.group(g)).toEqual({"a": [one], "b": [two]}); }); it("should not include controls that have no errors", () => { var one = new Control("one", validator("a", true)); var two = new Control("two"); - var g = new ControlGroup({"one" : one, "two" : two}); + var g = new ControlGroup({"one": one, "two": two}); - expect(Validators.group(g)).toEqual({ - "a": [one] - }); + expect(Validators.group(g)).toEqual({"a": [one]}); }); it("should return null when no errors", () => { - var g = new ControlGroup({ - "one" : new Control("one") - }); + var g = new ControlGroup({"one": new Control("one")}); expect(Validators.group(g)).toEqual(null); });