【Angular】KarmaでDirectiveのユニットテストをおこなう

            
            $ tree -I node_modules -L 5
.
├── README.md
├── angular.json
├── browserslist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── components
│   │   │   └── my-str-tmpl1
│   │   │       ├── my-str-tmpl1.component.scss
│   │   │       ├── my-str-tmpl1.component.spec.ts
│   │   │       └── my-str-tmpl1.component.ts
│   │   └── directives
│   │       └── my-tmpl-def1
│   │           ├── my-tmpl-def1.directive.spec.ts
│   │           └── my-tmpl-def1.directive.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
└── yarn.lock
        

            
            import {
    Component
} from '@angular/core';

@Component({
    selector: 'app-my-str-tmpl1',
    template: `
    <div appMyTmplDef1>Hello {{name}}</div>
    `,
    styleUrls: ['./my-str-tmpl1.component.scss']
})
export class MyStrTmpl1Component {
    private name: string;
    constructor() {
        this.name = 'ANGULAR 2+';
    }
}
        

            
            import {
    Directive,
    ElementRef,
    Renderer2,
    OnInit
} from '@angular/core';

@Directive({
    selector: '[appMyTmplDef1]'
})
export class MyTmplDef1Directive implements OnInit {

    constructor(
        private el: ElementRef,
        private renderer: Renderer2
    ) {}

    ngOnInit() {
        this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
    }

}
        

            
            import { Component } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyTmplDef1Directive } from './my-tmpl-def1.directive';

// Simple mocking component
@Component({
    template: '<p appMyTmplDef1>Cool Unit Test for Directives</p>'
})
class MockingComponent {
    constructor() { }
}

describe('MyTmplDef1Directive', () => {
    let component: MockingComponent;
    let fixture: ComponentFixture<MockingComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                MockingComponent,
                MyTmplDef1Directive
            ]
        });
        fixture = TestBed.createComponent(MockingComponent);
        component = fixture.componentInstance;
    });

    it('should create a component', () => {
        expect(component).toBeDefined();
    });

    it('should capitalize style against p element', () => {
        const elem: HTMLElement = fixture.debugElement.nativeElement;
        const p: HTMLElement = elem.querySelector('p');

        // Apply style at the directive to the testing component
        fixture.detectChanges(); // !important

        // 'color' property should be set red
        expect(p.style.color).toBe('red');
    });
});
        

            
            ...
// Simple mocking component
@Component({
    template: '<p appMyTmplDef1>Cool Unit Test for Directives</p>'
})
class MockingComponent {
    constructor() { }
}
...
        

            
            let component: MockingComponent;
    let fixture: ComponentFixture<MockingComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [
                MockingComponent,
                MyTmplDef1Directive
            ]
        });
        fixture = TestBed.createComponent(MockingComponent);
        component = fixture.componentInstance;
    });
    ...
        

            
            ...
    const elem: HTMLElement = fixture.debugElement.nativeElement;
    const p: HTMLElement = elem.querySelector('p');

    // Apply style of the directive to test component
    fixture.detectChanges(); // !important

    // 'color' should be set red
    expect(p.style.color).toBe('red');
...
        

            
            fixture.detectChanges();