/**
* @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 {Component, ContentChild, Directive, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, TemplateRef, ViewChildren} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {expect} from '@angular/platform-browser/testing/src/matchers';
describe('acceptance integration tests', () => {
it('should only call inherited host listeners once', () => {
let clicks = 0;
@Component({template: ''})
class ButtonSuperClass {
@HostListener('click')
clicked() { clicks++; }
}
@Component({selector: 'button[custom-button]', template: ''})
class ButtonSubClass extends ButtonSuperClass {
}
@Component({template: ''})
class MyApp {
}
TestBed.configureTestingModule({declarations: [MyApp, ButtonSuperClass, ButtonSubClass]});
const fixture = TestBed.createComponent(MyApp);
const button = fixture.debugElement.query(By.directive(ButtonSubClass));
fixture.detectChanges();
button.nativeElement.click();
fixture.detectChanges();
expect(clicks).toBe(1);
});
it('should support inherited view queries', () => {
@Directive({selector: '[someDir]'})
class SomeDir {
}
@Component({template: '
'})
class SuperComp {
@ViewChildren(SomeDir) dirs !: QueryList;
}
@Component({selector: 'button[custom-button]', template: ''})
class SubComp extends SuperComp {
}
@Component({template: ''})
class MyApp {
}
TestBed.configureTestingModule({declarations: [MyApp, SuperComp, SubComp, SomeDir]});
const fixture = TestBed.createComponent(MyApp);
const subInstance = fixture.debugElement.query(By.directive(SubComp)).componentInstance;
fixture.detectChanges();
expect(subInstance.dirs.length).toBe(1);
expect(subInstance.dirs.first).toBeAnInstanceOf(SomeDir);
});
it('should not set inputs after destroy', () => {
@Directive({
selector: '[no-assign-after-destroy]',
})
class NoAssignAfterDestroy {
private _isDestroyed = false;
@Input()
get value() { return this._value; }
set value(newValue: any) {
if (this._isDestroyed) {
throw Error('Cannot assign to value after destroy.');
}
this._value = newValue;
}
private _value: any;
ngOnDestroy() { this._isDestroyed = true; }
}
@Component({template: ''})
class App {
directiveValue = 'initial-value';
}
TestBed.configureTestingModule({declarations: [NoAssignAfterDestroy, App]});
let fixture = TestBed.createComponent(App);
fixture.destroy();
expect(() => {
fixture = TestBed.createComponent(App);
fixture.detectChanges();
}).not.toThrow();
});
it('should support host attribute and @ContentChild on the same component', () => {
@Component(
{selector: 'test-component', template: `foo`, host: {'[attr.aria-disabled]': 'true'}})
class TestComponent {
@ContentChild(TemplateRef) tpl !: TemplateRef;
}
TestBed.configureTestingModule({declarations: [TestComponent]});
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.componentInstance.tpl).not.toBeNull();
expect(fixture.debugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
});
it('should inherit inputs from undecorated superclasses', () => {
class ButtonSuperClass {
@Input() isDisabled !: boolean;
}
@Component({selector: 'button[custom-button]', template: ''})
class ButtonSubClass extends ButtonSuperClass {
}
@Component({template: ''})
class MyApp {
disableButton = false;
}
TestBed.configureTestingModule({declarations: [MyApp, ButtonSubClass]});
const fixture = TestBed.createComponent(MyApp);
const button = fixture.debugElement.query(By.directive(ButtonSubClass)).componentInstance;
fixture.detectChanges();
expect(button.isDisabled).toBe(false);
fixture.componentInstance.disableButton = true;
fixture.detectChanges();
expect(button.isDisabled).toBe(true);
});
it('should inherit outputs from undecorated superclasses', () => {
let clicks = 0;
class ButtonSuperClass {
@Output() clicked = new EventEmitter();
emitClick() { this.clicked.emit(); }
}
@Component({selector: 'button[custom-button]', template: ''})
class ButtonSubClass extends ButtonSuperClass {
}
@Component({template: ''})
class MyApp {
handleClick() { clicks++; }
}
TestBed.configureTestingModule({declarations: [MyApp, ButtonSubClass]});
const fixture = TestBed.createComponent(MyApp);
const button = fixture.debugElement.query(By.directive(ButtonSubClass)).componentInstance;
button.emitClick();
fixture.detectChanges();
expect(clicks).toBe(1);
});
it('should inherit host bindings from undecorated superclasses', () => {
class BaseButton {
@HostBinding('attr.tabindex')
tabindex = -1;
}
@Component({selector: '[sub-button]', template: ''})
class SubButton extends BaseButton {
}
@Component({template: ''})
class App {
}
TestBed.configureTestingModule({declarations: [SubButton, App]});
const fixture = TestBed.createComponent(App);
const button = fixture.debugElement.query(By.directive(SubButton));
fixture.detectChanges();
expect(button.nativeElement.getAttribute('tabindex')).toBe('-1');
button.componentInstance.tabindex = 2;
fixture.detectChanges();
expect(button.nativeElement.getAttribute('tabindex')).toBe('2');
});
it('should inherit host bindings from undecorated grand superclasses', () => {
class SuperBaseButton {
@HostBinding('attr.tabindex')
tabindex = -1;
}
class BaseButton extends SuperBaseButton {}
@Component({selector: '[sub-button]', template: ''})
class SubButton extends BaseButton {
}
@Component({template: ''})
class App {
}
TestBed.configureTestingModule({declarations: [SubButton, App]});
const fixture = TestBed.createComponent(App);
const button = fixture.debugElement.query(By.directive(SubButton));
fixture.detectChanges();
expect(button.nativeElement.getAttribute('tabindex')).toBe('-1');
button.componentInstance.tabindex = 2;
fixture.detectChanges();
expect(button.nativeElement.getAttribute('tabindex')).toBe('2');
});
it('should inherit host listeners from undecorated superclasses', () => {
let clicks = 0;
class BaseButton {
@HostListener('click')
handleClick() { clicks++; }
}
@Component({selector: '[sub-button]', template: ''})
class SubButton extends BaseButton {
}
@Component({template: ''})
class App {
}
TestBed.configureTestingModule({declarations: [SubButton, App]});
const fixture = TestBed.createComponent(App);
const button = fixture.debugElement.query(By.directive(SubButton)).nativeElement;
button.click();
fixture.detectChanges();
expect(clicks).toBe(1);
});
// TODO(crisbeto): this fails even with decorated classes
// in master. To be enabled as a part of FW-1294.
xit('should inherit host listeners from undecorated grand superclasses', () => {
let clicks = 0;
class SuperBaseButton {
@HostListener('click')
handleClick() { clicks++; }
}
class BaseButton extends SuperBaseButton {}
@Component({selector: '[sub-button]', template: ''})
class SubButton extends BaseButton {
}
@Component({template: ''})
class App {
}
TestBed.configureTestingModule({declarations: [SubButton, App]});
const fixture = TestBed.createComponent(App);
const button = fixture.debugElement.query(By.directive(SubButton)).nativeElement;
button.click();
fixture.detectChanges();
expect(clicks).toBe(1);
});
});