カテゴリー
【Angular】KarmaでDirectiveのユニットテストをおこなう
※ 当ページには【広告/PR】を含む場合があります。
2019/07/09
2022/08/10
Angularプロジェクトを作成する
$ 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
src/app/directives/my-tmpl-def1/
テスト用のDirectiveを作成する
my-str-tmpl1
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+';
}
}
my-tmpl-def1.directive.ts
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');
}
}
ng g d [Direvtive名]
my-tmpl-def1.directive.spec.ts
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');
});
});
Mocking Component
...
// Simple mocking component
@Component({
template: '<p appMyTmplDef1>Cool Unit Test for Directives</p>'
})
class MockingComponent {
constructor() { }
}
...
ComponentFixture
ComponentFixture
let component: MockingComponent;
let fixture: ComponentFixture<MockingComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
MockingComponent,
MyTmplDef1Directive
]
});
fixture = TestBed.createComponent(MockingComponent);
component = fixture.componentInstance;
});
...
beforeEach
component
...
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');
...
debugElement.nativeElement
querySelector
appMyTmplDef1
fixture.detectChanges();
detectChanges
参考
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー