it('close() then open() cancel animations when called too fast', testing_1.fakeAsync(function () {
var fixture = createFixture(BasicTestApp, builder, template, style);
var sidenav = fixture.debugElement
.query(platform_browser_1.By.directive(sidenav_1.MdSidenav)).componentInstance;
var closeCalled = false;
var closeCancelled = false;
var openCalled = false;
// First, open the sidenav completely.
sidenav.open();
endSidenavTransition(fixture);
testing_1.tick();
// Then close and check behavior.
sidenav.close().then(function () {
closeCalled = true;
}, function () {
closeCancelled = true;
});
// We do not call transition end, open directly.
sidenav.open().then(function () {
openCalled = true;
});
endSidenavTransition(fixture);
testing_1.tick();
expect(closeCalled).toBe(false);
expect(closeCancelled).toBe(true);
expect(openCalled).toBe(true);
testing_1.tick();
}));
it('open/close() twice returns the same promise', testing_1.fakeAsync(function () {
var fixture = createFixture(BasicTestApp, builder, template, style);
var sidenav = fixture.debugElement
.query(platform_browser_1.By.directive(sidenav_1.MdSidenav)).componentInstance;
var promise = sidenav.open();
expect(sidenav.open()).toBe(promise);
fixture.detectChanges();
testing_1.tick();
promise = sidenav.close();
expect(sidenav.close()).toBe(promise);
testing_1.tick();
}));
testing_1.fakeAsync(function () {
spyOn(testComponent, 'onFocus');
spyOn(testComponent, 'onBlur');
testing_1.expect(testComponent.onFocus).not.toHaveBeenCalled();
testing_1.expect(testComponent.onBlur).not.toHaveBeenCalled();
inputComponent.handleFocus(fakeEvent);
testing_1.tick();
testing_1.expect(testComponent.onFocus).toHaveBeenCalledWith(fakeEvent);
inputComponent.handleBlur(fakeEvent);
testing_1.tick();
testing_1.expect(testComponent.onBlur).toHaveBeenCalledWith(fakeEvent);
})();
testing_1.it('should emit a change event from radio buttons', testing_1.fakeAsync(function () {
expect(radioInstances[0].checked).toBe(false);
var changeSpy = jasmine.createSpy('radio change listener');
radioInstances[0].change.subscribe(changeSpy);
radioInstances[0].checked = true;
fixture.detectChanges();
testing_1.tick();
expect(changeSpy).toHaveBeenCalled();
radioInstances[0].checked = false;
fixture.detectChanges();
testing_1.tick();
expect(changeSpy).toHaveBeenCalledTimes(2);
}));
testing_1.it('should emit a change event from the radio group', testing_1.fakeAsync(function () {
expect(groupInstance.value).toBeFalsy();
var changeSpy = jasmine.createSpy('radio-group change listener');
groupInstance.change.subscribe(changeSpy);
groupInstance.value = 'fire';
fixture.detectChanges();
testing_1.tick();
expect(changeSpy).toHaveBeenCalled();
groupInstance.value = 'water';
fixture.detectChanges();
testing_1.tick();
expect(changeSpy).toHaveBeenCalledTimes(2);
}));
testing_1.fakeAsync(function () {
var instance = fixture.componentInstance;
var component = fixture.debugElement.query(platform_browser_1.By.directive(input_1.MdInput)).componentInstance;
var el = fixture.debugElement.query(platform_browser_1.By.css('input')).nativeElement;
instance.model = 'hello';
fixture.detectChanges();
testing_1.tick();
testing_1.expect(el.value).toEqual('hello');
component.value = 'world';
fixture.detectChanges();
testing_1.tick();
testing_1.expect(el.value).toEqual('world');
})();
testing_1.it('should call the change event on first change after initialization', testing_1.fakeAsync(function () {
fixture.detectChanges();
expect(testComponent.lastEvent).toBeUndefined();
checkboxInstance.checked = true;
fixture.detectChanges();
testing_1.tick();
expect(testComponent.lastEvent.checked).toBe(true);
}));
it('should have the correct ngControl state initially and after interaction', testing_1.fakeAsync(function () {
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(true);
expect(groupNgControl.touched).toBe(false);
buttonToggleInstances[1].checked = true;
fixture.detectChanges();
testing_1.tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(false);
var nativeRadioLabel = buttonToggleDebugElements[2].query(platform_browser_1.By.css('label')).nativeElement;
nativeRadioLabel.click();
fixture.detectChanges();
testing_1.tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(true);
}));
testing_1.it('should update the model before firing change event', testing_1.fakeAsync(function () {
expect(testComponent.modelValue).toBeUndefined();
expect(testComponent.lastEvent).toBeUndefined();
groupInstance.value = 'chocolate';
fixture.detectChanges();
testing_1.tick();
expect(testComponent.modelValue).toBe('chocolate');
expect(testComponent.lastEvent.value).toBe('chocolate');
}));
createFakeAsync(rootComponentType) {
let result;
let error;
PromiseWrapper.then(this.createAsync(rootComponentType), (_result) => { result = _result; }, (_error) => { error = _error; });
tick();
if (isPresent(error)) {
throw error;
}
return result;
}
TestComponentBuilder.prototype.createFakeAsync = function (rootComponentType) {
var result;
var error;
async_1.PromiseWrapper.then(this.createAsync(rootComponentType), function (_result) { result = _result; }, function (_error) { error = _error; });
testing_1.tick();
if (lang_1.isPresent(error)) {
throw error;
}
return result;
};
testing_1.it('should apply the aria-live value polite by default', fakeAsyncTest(function () {
var appFixture = null;
builder.createAsync(TestApp).then(function (fixture) {
appFixture = fixture;
});
testing_1.flushMicrotasks();
live.announce('Hey Google');
// This flushes our 100ms timeout for the screenreaders.
testing_1.tick(100);
testing_1.expect(liveEl.textContent).toBe('Hey Google');
testing_1.expect(liveEl.getAttribute('aria-live')).toBe('polite');
}));
it('open/close() return a promise that resolves after animation end', testing_1.fakeAsync(function () {
var fixture = createFixture(BasicTestApp, builder, template, style);
var sidenav = fixture.debugElement
.query(platform_browser_1.By.directive(sidenav_1.MdSidenav)).componentInstance;
var called = false;
sidenav.open().then(function () {
called = true;
});
expect(called).toBe(false);
endSidenavTransition(fixture);
testing_1.tick();
expect(called).toBe(true);
called = false;
sidenav.close().then(function () {
called = true;
});
expect(called).toBe(false);
endSidenavTransition(fixture);
testing_1.tick();
expect(called).toBe(true);
}));
testing_1.it('should correctly update the announce text', fakeAsyncTest(function () {
var appFixture = null;
builder.createAsync(TestApp).then(function (fixture) {
appFixture = fixture;
});
testing_1.flushMicrotasks();
var buttonElement = appFixture.debugElement
.query(platform_browser_1.By.css('button')).nativeElement;
buttonElement.click();
// This flushes our 100ms timeout for the screenreaders.
testing_1.tick(100);
testing_1.expect(liveEl.textContent).toBe('Test');
}));
testing_1.it('should have the correct control state initially and after interaction', testing_1.fakeAsync(function () {
// The control should start off valid, pristine, and untouched.
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(true);
expect(groupNgControl.touched).toBe(false);
// After changing the value programmatically, the control should become dirty (not pristine),
// but remain untouched.
radioInstances[1].checked = true;
fixture.detectChanges();
testing_1.tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(false);
// After a user interaction occurs (such as a click), the control should remain dirty and
// now also be touched.
radioNativeElements[2].click();
fixture.detectChanges();
testing_1.tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(true);
}));
it('should be able to open and close', testing_1.fakeAsync(function () {
var fixture = createFixture(BasicTestApp, builder, template, style);
var testComponent = fixture.debugElement.componentInstance;
var openButtonElement = fixture.debugElement.query(platform_browser_1.By.css('.open'));
openButtonElement.nativeElement.click();
fixture.detectChanges();
testing_1.tick();
expect(testComponent.openStartCount).toBe(1);
expect(testComponent.openCount).toBe(0);
endSidenavTransition(fixture);
testing_1.tick();
expect(testComponent.openStartCount).toBe(1);
expect(testComponent.openCount).toBe(1);
expect(testComponent.closeStartCount).toBe(0);
expect(testComponent.closeCount).toBe(0);
var sidenavElement = fixture.debugElement.query(platform_browser_1.By.css('md-sidenav'));
var sidenavBackdropElement = fixture.debugElement.query(platform_browser_1.By.css('.md-sidenav-backdrop'));
expect(getComputedStyle(sidenavElement.nativeElement).visibility).toEqual('visible');
expect(getComputedStyle(sidenavBackdropElement.nativeElement).visibility)
.toEqual('visible');
// Close it.
var closeButtonElement = fixture.debugElement.query(platform_browser_1.By.css('.close'));
closeButtonElement.nativeElement.click();
fixture.detectChanges();
testing_1.tick();
expect(testComponent.openStartCount).toBe(1);
expect(testComponent.openCount).toBe(1);
expect(testComponent.closeStartCount).toBe(1);
expect(testComponent.closeCount).toBe(0);
endSidenavTransition(fixture);
testing_1.tick();
expect(testComponent.openStartCount).toBe(1);
expect(testComponent.openCount).toBe(1);
expect(testComponent.closeStartCount).toBe(1);
expect(testComponent.closeCount).toBe(1);
expect(getComputedStyle(sidenavElement.nativeElement).visibility).toEqual('hidden');
expect(getComputedStyle(sidenavBackdropElement.nativeElement).visibility).toEqual('hidden');
}));
testing_1.it('should allow to use a custom live element', fakeAsyncTest(function () {
var customLiveEl = document.createElement('div');
// We need to reset our test injector here, because it is already instantiated above.
testing_1.getTestInjector().reset();
testing_1.getTestInjector().addProviders([
core_1.provide(live_announcer_1.LIVE_ANNOUNCER_ELEMENT_TOKEN, { useValue: customLiveEl }),
live_announcer_1.MdLiveAnnouncer
]);
var injector = testing_1.getTestInjector().createInjector();
var liveService = injector.get(live_announcer_1.MdLiveAnnouncer);
liveService.announce('Custom Element');
// This flushes our 100ms timeout for the screenreaders.
testing_1.tick(100);
testing_1.expect(customLiveEl.textContent).toBe('Custom Element');
}));
/**
* Create a ComponentFixture from the builder. This takes a template and a style for sidenav.
*/
function createFixture(appType, builder, template, style) {
var fixture = null;
// Remove the styles (which remove the animations/transitions).
builder
.overrideView(sidenav_1.MdSidenavLayout, new core_1.ViewMetadata({
template: template,
styles: [style || ''],
directives: [sidenav_1.MdSidenav],
}))
.createAsync(appType).then(function (f) {
fixture = f;
});
testing_1.tick();
return fixture;
}
testing_1.it('should update the ngModel value when selecting a radio button', testing_1.fakeAsync(function () {
radioInstances[1].checked = true;
fixture.detectChanges();
testing_1.tick();
expect(testComponent.modelValue).toBe('chocolate');
}));
it('should update the ngModel value when selecting a button toggle', testing_1.fakeAsync(function () {
buttonToggleInstances[1].checked = true;
fixture.detectChanges();
testing_1.tick();
expect(testComponent.modelValue).toBe('green');
}));
expect(function () {
var fixture = createFixture(SidenavLayoutTwoSidenavTestApp, builder, template, style);
fixture.detectChanges();
testing_1.tick();
}).toThrow();
it('should be able to navigate to weather by URL', testing_1.fakeAsync(testing_1.inject([router_1.Router, common_1.Location], function (router, location) {
testing_1.TestBed.createComponent(app_1.AppComponent);
router.navigateByUrl('/weather');
testing_1.tick();
expect(location.path()).toEqual('/weather');
})));
it('should be able to navigate to weather using commands API', testing_1.fakeAsync(testing_1.inject([router_1.Router, common_1.Location], function (router, location) {
testing_1.TestBed.createComponent(app_1.AppComponent);
router.navigate(['/weather']);
testing_1.tick();
expect(location.path()).toBe('/weather');
})));