Skip to content

Commit

Permalink
refactor(ivy): move di tests for Attribute to acceptance
Browse files Browse the repository at this point in the history
  • Loading branch information
@cexbrayat
cexbrayat committed Mar 14, 2019
1 parent 018477e commit a39645c
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 124 deletions.
107 changes: 105 additions & 2 deletions packages/core/test/acceptance/di_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {CommonModule} from '@angular/common';
import {Attribute, ChangeDetectorRef, Component, Directive, Inject, LOCALE_ID, Optional, Pipe, PipeTransform, SkipSelf, ViewChild} from '@angular/core';
import {Attribute, ChangeDetectorRef, Component, Directive, EventEmitter, Inject, Input, LOCALE_ID, Optional, Output, Pipe, PipeTransform, SkipSelf, ViewChild} from '@angular/core';
import {ViewRef} from '@angular/core/src/render3/view_ref';
import {TestBed} from '@angular/core/testing';

Expand Down Expand Up @@ -133,6 +133,78 @@ describe('di', () => {

describe('@Attribute', () => {

it('should inject attributes', () => {
@Directive({selector: '[dir]'})
class MyDir {
constructor(
@Attribute('exist') public exist: string,
@Attribute('nonExist') public nonExist: string) {}
}

@Component({template: '<div dir exist="existValue" other="ignore"></div>'})
class MyComp {
@ViewChild(MyDir) directiveInstance !: MyDir;
}

TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();

const directive = fixture.componentInstance.directiveInstance;

expect(directive.exist).toBe('existValue');
expect(directive.nonExist).toBeNull();
});

it('should inject attributes on <ng-template>', () => {
@Directive({selector: '[dir]'})
class MyDir {
constructor(
@Attribute('exist') public exist: string,
@Attribute('dir') public myDirectiveAttrValue: string) {}
}

@Component(
{template: '<ng-template dir="initial" exist="existValue" other="ignore"></ng-template>'})
class MyComp {
@ViewChild(MyDir) directiveInstance !: MyDir;
}

TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();

const directive = fixture.componentInstance.directiveInstance;

expect(directive.exist).toBe('existValue');
expect(directive.myDirectiveAttrValue).toBe('initial');
});

it('should inject attributes on <ng-container>', () => {
@Directive({selector: '[dir]'})
class MyDir {
constructor(
@Attribute('exist') public exist: string,
@Attribute('dir') public myDirectiveAttrValue: string) {}
}

@Component({
template: '<ng-container dir="initial" exist="existValue" other="ignore"></ng-container>'
})
class MyComp {
@ViewChild(MyDir) directiveInstance !: MyDir;
}

TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();

const directive = fixture.componentInstance.directiveInstance;

expect(directive.exist).toBe('existValue');
expect(directive.myDirectiveAttrValue).toBe('initial');
});

it('should be able to inject different kinds of attributes', () => {
@Directive({selector: '[dir]'})
class MyDir {
Expand All @@ -159,7 +231,6 @@ describe('di', () => {
expect(directive.otherAttr).toBe('value');
expect(directive.className).toBe('hello there');
expect(directive.inlineStyles).toBe('margin: 1px; color: red;');

});

it('should not inject attributes with namespace', () => {
Expand Down Expand Up @@ -188,5 +259,37 @@ describe('di', () => {
expect(directive.namespacedExist).toBeNull();
expect(directive.other).toBe('otherValue');
});

it('should not inject attributes representing bindings and outputs', () => {
@Directive({selector: '[dir]'})
class MyDir {
@Input() binding !: string;
@Output() output = new EventEmitter();
constructor(
@Attribute('exist') public exist: string,
@Attribute('binding') public bindingAttr: string,
@Attribute('output') public outputAttr: string,
@Attribute('other') public other: string) {}
}

@Component({
template:
'<div dir exist="existValue" [binding]="bindingValue" (output)="outputValue" other="otherValue" ignore="ignoreValue"></div>'
})
class MyComp {
@ViewChild(MyDir) directiveInstance !: MyDir;
}

TestBed.configureTestingModule({declarations: [MyDir, MyComp]});
const fixture = TestBed.createComponent(MyComp);
fixture.detectChanges();

const directive = fixture.componentInstance.directiveInstance;

expect(directive.exist).toBe('existValue');
expect(directive.bindingAttr).toBeNull();
expect(directive.outputAttr).toBeNull();
expect(directive.other).toBe('otherValue');
});
});
});
124 changes: 2 additions & 122 deletions packages/core/test/render3/di_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Attribute, ChangeDetectorRef, ElementRef, Host, INJECTOR, Inject, InjectFlags, Injector, Optional, Renderer2, Self, SkipSelf, TemplateRef, ViewContainerRef, defineInjectable, defineInjector} from '@angular/core';
import {ChangeDetectorRef, ElementRef, Host, INJECTOR, Inject, InjectFlags, Injector, Optional, Renderer2, Self, SkipSelf, TemplateRef, ViewContainerRef, defineInjectable, defineInjector} from '@angular/core';
import {ComponentType, RenderFlags} from '@angular/core/src/render3/interfaces/definition';

import {defineComponent} from '../../src/render3/definition';
import {bloomAdd, bloomHasToken, bloomHashBitOrFactory as bloomHash, getOrCreateNodeInjectorForNode} from '../../src/render3/di';
import {ProvidersFeature, defineDirective, elementProperty, load, templateRefExtractor} from '../../src/render3/index';

import {allocHostVars, bind, container, containerRefreshEnd, containerRefreshStart, createNodeAtIndex, createLView, createTView, directiveInject, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, injectAttribute, interpolation2, projection, projectionDef, reference, template, text, textBinding, elementContainerStart, elementContainerEnd} from '../../src/render3/instructions';
import {allocHostVars, bind, container, containerRefreshEnd, containerRefreshStart, createNodeAtIndex, createLView, createTView, directiveInject, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, interpolation2, projection, projectionDef, reference, template, text, textBinding, elementContainerStart, elementContainerEnd} from '../../src/render3/instructions';
import {isProceduralRenderer, RElement} from '../../src/render3/interfaces/renderer';
import {AttributeMarker, TNodeType} from '../../src/render3/interfaces/node';
import {getNativeByIndex} from '../../src/render3/util/view_utils';
Expand Down Expand Up @@ -2054,126 +2054,6 @@ describe('di', () => {
() => { expect(() => new ComponentFixture(MyComp)).toThrow(); });
});

describe('@Attribute', () => {
let myDirectiveInstance !: MyDirective | null;

class MyDirective {
exists = 'wrong' as string | null;
myDirective = 'wrong' as string | null;
constructor(
@Attribute('exist') existAttrValue: string|null,
@Attribute('myDirective') myDirectiveAttrValue: string|null) {
this.exists = existAttrValue;
this.myDirective = myDirectiveAttrValue;
}

static ngDirectiveDef = defineDirective({
type: MyDirective,
selectors: [['', 'myDirective', '']],
factory: () => myDirectiveInstance =
new MyDirective(injectAttribute('exist'), injectAttribute('myDirective'))
});
}

beforeEach(() => myDirectiveInstance = null);

it('should inject attribute', () => {
let exist = 'wrong' as string | null;
let nonExist = 'wrong' as string | null;

const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['exist', 'existValue', 'other', 'ignore']);
exist = injectAttribute('exist');
nonExist = injectAttribute('nonExist');
}
}, 1);

new ComponentFixture(MyApp);
expect(exist).toEqual('existValue');
expect(nonExist).toBeNull();
});

// https://stackblitz.com/edit/angular-scawyi?file=src%2Fapp%2Fapp.component.ts
it('should inject attributes on <ng-template>', () => {
let myDirectiveInstance: MyDirective;

/* <ng-template myDirective="initial" exist="existValue" other="ignore"></ng-template>*/
const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, null, 0, 0, 'ng-template',
['myDirective', 'initial', 'exist', 'existValue', 'other', 'ignore']);
}
if (rf & RenderFlags.Update) {
myDirectiveInstance = getDirectiveOnNode(0);
}
}, 1, 0, [MyDirective]);

new ComponentFixture(MyApp);
expect(myDirectiveInstance !.exists).toEqual('existValue');
expect(myDirectiveInstance !.myDirective).toEqual('initial');
});

// https://stackblitz.com/edit/angular-scawyi?file=src%2Fapp%2Fapp.component.ts
it('should inject attributes on <ng-container>', () => {
let myDirectiveInstance: MyDirective;

/* <ng-container myDirective="initial" exist="existValue" other="ignore"></ng-container>*/
const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementContainerStart(
0, ['myDirective', 'initial', 'exist', 'existValue', 'other', 'ignore']);
elementContainerEnd();
}
if (rf & RenderFlags.Update) {
myDirectiveInstance = getDirectiveOnNode(0);
}
}, 1, 0, [MyDirective]);

new ComponentFixture(MyApp);
expect(myDirectiveInstance !.exists).toEqual('existValue');
expect(myDirectiveInstance !.myDirective).toEqual('initial');
});

// https://stackblitz.com/edit/angular-8ytqkp?file=src%2Fapp%2Fapp.component.ts
it('should not inject attributes representing bindings and outputs', () => {
let exist = 'wrong' as string | null;
let nonExist = 'wrong' as string | null;

const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', ['exist', 'existValue', AttributeMarker.Bindings, 'nonExist']);
exist = injectAttribute('exist');
nonExist = injectAttribute('nonExist');
}
}, 1);

new ComponentFixture(MyApp);
expect(exist).toEqual('existValue');
expect(nonExist).toBeNull();
});

it('should not accidentally inject attributes representing bindings and outputs', () => {
let exist = 'wrong' as string | null;
let nonExist = 'wrong' as string | null;

const MyApp = createComponent('my-app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementStart(0, 'div', [
'exist', 'existValue', AttributeMarker.Bindings, 'binding1', 'nonExist', 'binding2'
]);
exist = injectAttribute('exist');
nonExist = injectAttribute('nonExist');
}
}, 1);

new ComponentFixture(MyApp);
expect(exist).toEqual('existValue');
expect(nonExist).toBeNull();
});
});

describe('inject', () => {
describe('bloom filter', () => {
let mockTView: any;
Expand Down

0 comments on commit a39645c

Please sign in to comment.