/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {NgFor, NgIf} from '@angular/common';
import {Control, ControlGroup, ControlValueAccessor, DeprecatedFormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, RadioButtonState, Validator, Validators} from '@angular/common/src/forms-deprecated';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
import {Input, Provider, forwardRef} from '@angular/core';
import {ComponentFixture, TestComponentBuilder, configureModule, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
import {ObservableWrapper, TimerWrapper} from '../../src/facade/async';
import {ListWrapper} from '../../src/facade/collection';
import {PromiseWrapper} from '../../src/facade/promise';
export function main() {
describe('integration tests', () => {
beforeEach(() => {configureModule({modules: [DeprecatedFormsModule]})});
it('should initialize DOM elements with the given form object',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('loginValue')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('loginValue');
async.done();
});
}));
it('should throw if a form isn\'t passed into ngFormModel',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges())
.toThrowError(/ngFormModel expects a form\. Please pass one in/);
async.done();
});
}));
it('should update the control group values on DOM change',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'login': new Control('oldValue')});
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
input.nativeElement.value = 'updatedValue';
dispatchEvent(input.nativeElement, 'input');
expect(form.value).toEqual({'login': 'updatedValue'});
async.done();
});
}));
it('should ignore the change event for ',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'login': new Control('oldValue')});
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
input.nativeElement.value = 'updatedValue';
ObservableWrapper.subscribe(
form.valueChanges, (value) => { throw 'Should not happen'; });
dispatchEvent(input.nativeElement, 'change');
async.done();
});
}));
it('should emit ngSubmit event on submit',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `
{{name}}
`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.debugElement.componentInstance.form = new ControlGroup({});
fixture.debugElement.componentInstance.name = 'old';
tick();
var form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'submit');
tick();
expect(fixture.debugElement.componentInstance.name).toEqual('updated');
})));
it('should mark NgForm as submitted on submit event',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `
{{data}}
`;
var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((root) => {
fixture = root;
});
tick();
fixture.debugElement.componentInstance.data = false;
tick();
var form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'submit');
tick();
expect(fixture.debugElement.componentInstance.data).toEqual(true);
})));
it('should mark NgFormModel as submitted on submit event',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `
{{data}}
`;
var fixture: ComponentFixture;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((root) => {
fixture = root;
});
tick();
fixture.debugElement.componentInstance.form = new ControlGroup({});
fixture.debugElement.componentInstance.data = false;
tick();
var form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'submit');
tick();
expect(fixture.debugElement.componentInstance.data).toEqual(true);
})));
it('should work with single controls',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var control = new Control('loginValue');
var t = ``;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = control;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('loginValue');
input.nativeElement.value = 'updatedValue';
dispatchEvent(input.nativeElement, 'input');
expect(control.value).toEqual('updatedValue');
async.done();
});
}));
it('should update DOM elements when rebinding the control group',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('oldValue')});
fixture.detectChanges();
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('newValue')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('newValue');
async.done();
});
}));
it('should update DOM elements when updating the value of a control',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var login = new Control('oldValue');
var form = new ControlGroup({'login': login});
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
login.updateValue('newValue');
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('newValue');
async.done();
});
}));
it('should mark controls as touched after interacting with the DOM control',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var login = new Control('oldValue');
var form = new ControlGroup({'login': login});
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var loginEl = fixture.debugElement.query(By.css('input'));
expect(login.touched).toBe(false);
dispatchEvent(loginEl.nativeElement, 'blur');
expect(login.touched).toBe(true);
async.done();
});
}));
describe('different control types', () => {
it('should support ',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'text': new Control('old')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('old');
input.nativeElement.value = 'new';
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({'text': 'new'});
async.done();
});
}));
it('should support without type',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `
`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'text': new Control('old')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('old');
input.nativeElement.value = 'new';
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({'text': 'new'});
async.done();
});
}));
it('should support