test(ivy): move render3 directive tests to acceptance (#30432)
Moves all manual render3 directive tests to TestBed acceptance tests. PR Close #30432
This commit is contained in:
Paul Gschwendtner
Alex Rickabaugh
parent
a57f3e7bbf
commit
d09d8e0adf
|
|
@ -6,7 +6,9 @@
|
||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {Component, Directive} from '@angular/core';
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {Component, Directive, EventEmitter, Output, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
|
||||||
|
import {Input} from '@angular/core/src/metadata';
|
||||||
import {TestBed} from '@angular/core/testing';
|
import {TestBed} from '@angular/core/testing';
|
||||||
import {By} from '@angular/platform-browser';
|
import {By} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
|
@ -16,6 +18,7 @@ describe('directives', () => {
|
||||||
|
|
||||||
@Directive({selector: 'ng-template[test]'})
|
@Directive({selector: 'ng-template[test]'})
|
||||||
class TestDirective {
|
class TestDirective {
|
||||||
|
constructor(public templateRef: TemplateRef<any>) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({selector: '[title]'})
|
@Directive({selector: '[title]'})
|
||||||
|
|
@ -26,6 +29,77 @@ describe('directives', () => {
|
||||||
class TestComponent {
|
class TestComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
it('should match directives with attribute selectors on bindings', () => {
|
||||||
|
@Directive({selector: '[test]'})
|
||||||
|
class TestDir {
|
||||||
|
testValue: boolean|undefined;
|
||||||
|
|
||||||
|
/** Setter to assert that a binding is not invoked with stringified attribute value */
|
||||||
|
@Input()
|
||||||
|
set test(value: any) {
|
||||||
|
// Assert that the binding is processed correctly. The property should be set
|
||||||
|
// to a "false" boolean and never to the "false" string literal.
|
||||||
|
this.testValue = value;
|
||||||
|
if (value !== false) {
|
||||||
|
fail('Should only be called with a false Boolean value, got a non-falsy value');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule({declarations: [TestComponent, TestDir]});
|
||||||
|
TestBed.overrideTemplate(TestComponent, `<span class="fade" [test]="false"></span>`);
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(TestComponent);
|
||||||
|
const testDir = fixture.debugElement.query(By.directive(TestDir)).injector.get(TestDir);
|
||||||
|
const spanEl = fixture.nativeElement.children[0];
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
// the "test" attribute should not be reflected in the DOM as it is here only
|
||||||
|
// for directive matching purposes
|
||||||
|
expect(spanEl.hasAttribute('test')).toBe(false);
|
||||||
|
expect(spanEl.getAttribute('class')).toBe('fade');
|
||||||
|
expect(testDir.testValue).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not accidentally set inputs from attributes extracted from bindings / outputs',
|
||||||
|
() => {
|
||||||
|
@Directive({selector: '[test]'})
|
||||||
|
class TestDir {
|
||||||
|
@Input() prop1: boolean|undefined;
|
||||||
|
@Input() prop2: boolean|undefined;
|
||||||
|
testValue: boolean|undefined;
|
||||||
|
|
||||||
|
/** Setter to assert that a binding is not invoked with stringified attribute value */
|
||||||
|
@Input()
|
||||||
|
set test(value: any) {
|
||||||
|
// Assert that the binding is processed correctly. The property should be set
|
||||||
|
// to a "false" boolean and never to the "false" string literal.
|
||||||
|
this.testValue = value;
|
||||||
|
if (value !== false) {
|
||||||
|
fail('Should only be called with a false Boolean value, got a non-falsy value');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule({declarations: [TestComponent, TestDir]});
|
||||||
|
TestBed.overrideTemplate(
|
||||||
|
TestComponent,
|
||||||
|
`<span class="fade" [prop1]="true" [test]="false" [prop2]="true"></span>`);
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(TestComponent);
|
||||||
|
const testDir = fixture.debugElement.query(By.directive(TestDir)).injector.get(TestDir);
|
||||||
|
const spanEl = fixture.nativeElement.children[0];
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
// the "test" attribute should not be reflected in the DOM as it is here only
|
||||||
|
// for directive matching purposes
|
||||||
|
expect(spanEl.hasAttribute('test')).toBe(false);
|
||||||
|
expect(spanEl.hasAttribute('prop1')).toBe(false);
|
||||||
|
expect(spanEl.hasAttribute('prop2')).toBe(false);
|
||||||
|
expect(spanEl.getAttribute('class')).toBe('fade');
|
||||||
|
expect(testDir.testValue).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
it('should match directives on ng-template', () => {
|
it('should match directives on ng-template', () => {
|
||||||
TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
|
TestBed.configureTestingModule({declarations: [TestComponent, TestDirective]});
|
||||||
TestBed.overrideTemplate(TestComponent, `<ng-template test></ng-template>`);
|
TestBed.overrideTemplate(TestComponent, `<ng-template test></ng-template>`);
|
||||||
|
|
@ -34,6 +108,8 @@ describe('directives', () => {
|
||||||
const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
|
const nodesWithDirective = fixture.debugElement.queryAllNodes(By.directive(TestDirective));
|
||||||
|
|
||||||
expect(nodesWithDirective.length).toBe(1);
|
expect(nodesWithDirective.length).toBe(1);
|
||||||
|
expect(nodesWithDirective[0].injector.get(TestDirective).templateRef instanceof TemplateRef)
|
||||||
|
.toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should match directives on ng-template created by * syntax', () => {
|
it('should match directives on ng-template created by * syntax', () => {
|
||||||
|
|
@ -46,6 +122,32 @@ describe('directives', () => {
|
||||||
expect(nodesWithDirective.length).toBe(1);
|
expect(nodesWithDirective.length).toBe(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should match directives on <ng-container>', () => {
|
||||||
|
@Directive({selector: 'ng-container[directiveA]'})
|
||||||
|
class DirectiveA {
|
||||||
|
constructor(public viewContainerRef: ViewContainerRef) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-component',
|
||||||
|
template: `
|
||||||
|
<ng-container *ngIf="visible" directiveA>
|
||||||
|
<span>Some content</span>
|
||||||
|
</ng-container>`
|
||||||
|
})
|
||||||
|
class MyComponent {
|
||||||
|
visible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule(
|
||||||
|
{declarations: [MyComponent, DirectiveA], imports: [CommonModule]});
|
||||||
|
const fixture = TestBed.createComponent(MyComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const directiveA = fixture.debugElement.query(By.css('span')).injector.get(DirectiveA);
|
||||||
|
|
||||||
|
expect(directiveA.viewContainerRef).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
it('should match directives on i18n-annotated attributes', () => {
|
it('should match directives on i18n-annotated attributes', () => {
|
||||||
TestBed.configureTestingModule({declarations: [TestComponent, TitleDirective]});
|
TestBed.configureTestingModule({declarations: [TestComponent, TitleDirective]});
|
||||||
TestBed.overrideTemplate(TestComponent, `
|
TestBed.overrideTemplate(TestComponent, `
|
||||||
|
|
@ -82,6 +184,73 @@ describe('directives', () => {
|
||||||
expect(nodesWithDirective.length).toBe(0);
|
expect(nodesWithDirective.length).toBe(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should match directives with attribute selectors on outputs', () => {
|
||||||
|
@Directive({selector: '[out]'})
|
||||||
|
class TestDir {
|
||||||
|
@Output() out = new EventEmitter();
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule({declarations: [TestComponent, TestDir]});
|
||||||
|
TestBed.overrideTemplate(TestComponent, `<span class="span" (out)="someVar = true"></span>`);
|
||||||
|
|
||||||
|
const fixture = TestBed.createComponent(TestComponent);
|
||||||
|
const spanEl = fixture.nativeElement.children[0];
|
||||||
|
|
||||||
|
// "out" should not be part of reflected attributes
|
||||||
|
expect(spanEl.hasAttribute('out')).toBe(false);
|
||||||
|
expect(spanEl.getAttribute('class')).toBe('span');
|
||||||
|
expect(fixture.debugElement.query(By.directive(TestDir))).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('outputs', () => {
|
||||||
|
@Directive({selector: '[out]'})
|
||||||
|
class TestDir {
|
||||||
|
@Output() out = new EventEmitter();
|
||||||
|
}
|
||||||
|
|
||||||
|
it('should allow outputs of directive on ng-template', () => {
|
||||||
|
@Component({template: `<ng-template (out)="value = true"></ng-template>`})
|
||||||
|
class TestComp {
|
||||||
|
@ViewChild(TestDir) testDir: TestDir|undefined;
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule({declarations: [TestComp, TestDir]});
|
||||||
|
const fixture = TestBed.createComponent(TestComp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(fixture.componentInstance.testDir).toBeTruthy();
|
||||||
|
expect(fixture.componentInstance.value).toBe(false);
|
||||||
|
|
||||||
|
fixture.componentInstance.testDir !.out.emit();
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(fixture.componentInstance.value).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow outputs of directive on ng-container', () => {
|
||||||
|
@Component({
|
||||||
|
template: `
|
||||||
|
<ng-container (out)="value = true">
|
||||||
|
<span>Hello</span>
|
||||||
|
</ng-container>`
|
||||||
|
})
|
||||||
|
class TestComp {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
TestBed.configureTestingModule({declarations: [TestComp, TestDir]});
|
||||||
|
const fixture = TestBed.createComponent(TestComp);
|
||||||
|
const testDir = fixture.debugElement.query(By.css('span')).injector.get(TestDir);
|
||||||
|
|
||||||
|
expect(fixture.componentInstance.value).toBe(false);
|
||||||
|
|
||||||
|
testDir.out.emit();
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(fixture.componentInstance.value).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,316 +0,0 @@
|
||||||
/**
|
|
||||||
* @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 {EventEmitter, TemplateRef, ViewContainerRef} from '@angular/core';
|
|
||||||
|
|
||||||
import {AttributeMarker, RenderFlags, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdirectiveInject} from '../../src/render3/index';
|
|
||||||
import {ɵɵbind, ɵɵelement, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵlistener, ɵɵtemplate, ɵɵtext} from '../../src/render3/instructions/all';
|
|
||||||
|
|
||||||
import {NgIf} from './common_with_def';
|
|
||||||
import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
|
|
||||||
|
|
||||||
describe('directive', () => {
|
|
||||||
|
|
||||||
describe('selectors', () => {
|
|
||||||
|
|
||||||
it('should match directives with attribute selectors on bindings', () => {
|
|
||||||
let directiveInstance: Directive;
|
|
||||||
|
|
||||||
class Directive {
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: Directive,
|
|
||||||
selectors: [['', 'test', '']],
|
|
||||||
factory: () => directiveInstance = new Directive,
|
|
||||||
inputs: {test: 'test', other: 'other'}
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO(issue/24571): remove '!'.
|
|
||||||
testValue !: boolean;
|
|
||||||
// TODO(issue/24571): remove '!'.
|
|
||||||
other !: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A setter to assert that a binding is not invoked with stringified attribute value
|
|
||||||
*/
|
|
||||||
set test(value: any) {
|
|
||||||
// if a binding is processed correctly we should only be invoked with a false Boolean
|
|
||||||
// and never with the "false" string literal
|
|
||||||
this.testValue = value;
|
|
||||||
if (value !== false) {
|
|
||||||
fail('Should only be called with a false Boolean value, got a non-falsy value');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* <span [test]="false" [other]="true"></span>
|
|
||||||
*/
|
|
||||||
function createTemplate() {
|
|
||||||
// using 2 bindings to show example shape of attributes array
|
|
||||||
ɵɵelement(0, 'span', ['class', 'fade', AttributeMarker.Bindings, 'test', 'other']);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateTemplate() { ɵɵelementProperty(0, 'test', ɵɵbind(false)); }
|
|
||||||
|
|
||||||
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 1, [Directive]);
|
|
||||||
|
|
||||||
// the "test" attribute should not be reflected in the DOM as it is here only for directive
|
|
||||||
// matching purposes
|
|
||||||
expect(fixture.html).toEqual('<span class="fade"></span>');
|
|
||||||
expect(directiveInstance !.testValue).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not accidentally set inputs from attributes extracted from bindings / outputs',
|
|
||||||
() => {
|
|
||||||
let directiveInstance: Directive;
|
|
||||||
|
|
||||||
class Directive {
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: Directive,
|
|
||||||
selectors: [['', 'test', '']],
|
|
||||||
factory: () => directiveInstance = new Directive,
|
|
||||||
inputs: {test: 'test', prop1: 'prop1', prop2: 'prop2'}
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO(issue/24571): remove '!'.
|
|
||||||
prop1 !: boolean;
|
|
||||||
// TODO(issue/24571): remove '!'.
|
|
||||||
prop2 !: boolean;
|
|
||||||
// TODO(issue/24571): remove '!'.
|
|
||||||
testValue !: boolean;
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A setter to assert that a binding is not invoked with stringified attribute value
|
|
||||||
*/
|
|
||||||
set test(value: any) {
|
|
||||||
// if a binding is processed correctly we should only be invoked with a false Boolean
|
|
||||||
// and never with the "false" string literal
|
|
||||||
this.testValue = value;
|
|
||||||
if (value !== false) {
|
|
||||||
fail('Should only be called with a false Boolean value, got a non-falsy value');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* <span class="fade" [prop1]="true" [test]="false" [prop2]="true"></span>
|
|
||||||
*/
|
|
||||||
function createTemplate() {
|
|
||||||
// putting name (test) in the "usual" value position
|
|
||||||
ɵɵelement(
|
|
||||||
0, 'span', ['class', 'fade', AttributeMarker.Bindings, 'prop1', 'test', 'prop2']);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateTemplate() {
|
|
||||||
ɵɵelementProperty(0, 'prop1', ɵɵbind(true));
|
|
||||||
ɵɵelementProperty(0, 'test', ɵɵbind(false));
|
|
||||||
ɵɵelementProperty(0, 'prop2', ɵɵbind(true));
|
|
||||||
}
|
|
||||||
|
|
||||||
const fixture = new TemplateFixture(createTemplate, updateTemplate, 1, 3, [Directive]);
|
|
||||||
|
|
||||||
// the "test" attribute should not be reflected in the DOM as it is here only for directive
|
|
||||||
// matching purposes
|
|
||||||
expect(fixture.html).toEqual('<span class="fade"></span>');
|
|
||||||
expect(directiveInstance !.testValue).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should match directives on <ng-template>', () => {
|
|
||||||
/**
|
|
||||||
* @Directive({
|
|
||||||
* selector: 'ng-template[directiveA]'
|
|
||||||
* })
|
|
||||||
* export class DirectiveA {
|
|
||||||
* constructor(public templateRef: TemplateRef<any>) {}
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
let tmplRef: any;
|
|
||||||
class DirectiveA {
|
|
||||||
constructor(public templateRef: any) { tmplRef = templateRef; }
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: DirectiveA,
|
|
||||||
selectors: [['ng-template', 'directiveA', '']],
|
|
||||||
factory: () => new DirectiveA(ɵɵdirectiveInject(TemplateRef as any))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function MyComponent_ng_template_Template_0(rf: RenderFlags, ctx: any) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵtext(0, 'Some content');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class MyComponent {
|
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: MyComponent,
|
|
||||||
selectors: [['my-component']],
|
|
||||||
factory: () => new MyComponent(),
|
|
||||||
consts: 1,
|
|
||||||
vars: 0,
|
|
||||||
// <ng-template directiveA>Some content</ng-template>
|
|
||||||
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵtemplate(
|
|
||||||
0, MyComponent_ng_template_Template_0, 1, 0, 'ng-template', ['directiveA', '']);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
directives: [DirectiveA]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
new ComponentFixture(MyComponent);
|
|
||||||
expect(tmplRef instanceof TemplateRef).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should match directives on <ng-container>', () => {
|
|
||||||
/**
|
|
||||||
* @Directive({
|
|
||||||
* selector: 'ng-container[directiveA]'
|
|
||||||
* })
|
|
||||||
* export class DirectiveA {
|
|
||||||
* constructor(public vcRef: ViewContainerRef<any>) {}
|
|
||||||
* }
|
|
||||||
*/
|
|
||||||
let vcRef: any;
|
|
||||||
class DirectiveA {
|
|
||||||
constructor(public viewContainerRef: any) { vcRef = viewContainerRef; }
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: DirectiveA,
|
|
||||||
selectors: [['ng-container', 'directiveA', '']],
|
|
||||||
factory: () => new DirectiveA(ɵɵdirectiveInject(ViewContainerRef as any))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function MyComponent_ng_container_Template_0(rf: RenderFlags, ctx: any) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelementContainerStart(0, ['directiveA', '']);
|
|
||||||
ɵɵtext(1, 'Some content');
|
|
||||||
ɵɵelementContainerEnd();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class MyComponent {
|
|
||||||
visible = true;
|
|
||||||
|
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: MyComponent,
|
|
||||||
selectors: [['my-component']],
|
|
||||||
factory: () => new MyComponent(),
|
|
||||||
consts: 1,
|
|
||||||
vars: 1,
|
|
||||||
// <ng-container *ngIf="visible" directiveA>Some content</ng-container>
|
|
||||||
template: function MyComponent_Template(rf: RenderFlags, ctx: any) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵtemplate(
|
|
||||||
0, MyComponent_ng_container_Template_0, 2, 0, 'ng-container',
|
|
||||||
['directiveA', '', AttributeMarker.Template, 'ngIf']);
|
|
||||||
}
|
|
||||||
if (rf & RenderFlags.Update) {
|
|
||||||
ɵɵelementProperty(0, 'ngIf', ɵɵbind(ctx.visible));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
directives: [DirectiveA, NgIf]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
new ComponentFixture(MyComponent);
|
|
||||||
expect(vcRef instanceof ViewContainerRef).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should match directives with attribute selectors on outputs', () => {
|
|
||||||
let directiveInstance: Directive;
|
|
||||||
|
|
||||||
class Directive {
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: Directive,
|
|
||||||
selectors: [['', 'out', '']],
|
|
||||||
factory: () => directiveInstance = new Directive,
|
|
||||||
outputs: {out: 'out'}
|
|
||||||
});
|
|
||||||
|
|
||||||
out = new EventEmitter();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* <span (out)="someVar = true"></span>
|
|
||||||
*/
|
|
||||||
function createTemplate() {
|
|
||||||
ɵɵelementStart(0, 'span', [AttributeMarker.Bindings, 'out']);
|
|
||||||
{ ɵɵlistener('out', () => {}); }
|
|
||||||
ɵɵelementEnd();
|
|
||||||
}
|
|
||||||
|
|
||||||
const fixture = new TemplateFixture(createTemplate, () => {}, 1, 0, [Directive]);
|
|
||||||
|
|
||||||
// "out" should not be part of reflected attributes
|
|
||||||
expect(fixture.html).toEqual('<span></span>');
|
|
||||||
expect(directiveInstance !).not.toBeUndefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('outputs', () => {
|
|
||||||
|
|
||||||
let directiveInstance: Directive;
|
|
||||||
|
|
||||||
class Directive {
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: Directive,
|
|
||||||
selectors: [['', 'out', '']],
|
|
||||||
factory: () => directiveInstance = new Directive,
|
|
||||||
outputs: {out: 'out'}
|
|
||||||
});
|
|
||||||
|
|
||||||
out = new EventEmitter();
|
|
||||||
}
|
|
||||||
|
|
||||||
it('should allow outputs of directive on ng-template', () => {
|
|
||||||
/**
|
|
||||||
* <ng-template (out)="value = true"></ng-template>
|
|
||||||
*/
|
|
||||||
const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵtemplate(0, null, 0, 0, 'ng-template', [AttributeMarker.Bindings, 'out']);
|
|
||||||
ɵɵlistener('out', () => { ctx.value = true; });
|
|
||||||
}
|
|
||||||
}, 1, 0, [Directive]);
|
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Cmpt);
|
|
||||||
|
|
||||||
expect(directiveInstance !).not.toBeUndefined();
|
|
||||||
expect(fixture.component.value).toBeFalsy();
|
|
||||||
|
|
||||||
directiveInstance !.out.emit();
|
|
||||||
fixture.update();
|
|
||||||
expect(fixture.component.value).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should allow outputs of directive on ng-container', () => {
|
|
||||||
/**
|
|
||||||
* <ng-container (out)="value = true"></ng-container>
|
|
||||||
*/
|
|
||||||
const Cmpt = createComponent('Cmpt', function(rf: RenderFlags, ctx: {value: any}) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelementContainerStart(0, [AttributeMarker.Bindings, 'out']);
|
|
||||||
{
|
|
||||||
ɵɵlistener('out', () => { ctx.value = true; });
|
|
||||||
}
|
|
||||||
ɵɵelementContainerEnd();
|
|
||||||
}
|
|
||||||
}, 1, 0, [Directive]);
|
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Cmpt);
|
|
||||||
|
|
||||||
expect(directiveInstance !).not.toBeUndefined();
|
|
||||||
expect(fixture.component.value).toBeFalsy();
|
|
||||||
|
|
||||||
directiveInstance !.out.emit();
|
|
||||||
fixture.update();
|
|
||||||
expect(fixture.component.value).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue