前言

我們知道angular組件間通訊有多種方法，其中最常用的一種方法就是借助于 @Input 和 @Output 進(jìn)行通訊。具體如何通訊請(qǐng)參考angular組件間通訊，本文不再贅述，我們來講講關(guān)于此方法如何進(jìn)行單元測(cè)試。

創(chuàng)建假組件

我們單元測(cè)試父組件與子組件的的交互是否符合我們的要求，我們?cè)诟附M件進(jìn)行測(cè)試，就需要模擬一個(gè)假的子組件出來，這樣排除其他因素對(duì)測(cè)試的影響。

比如現(xiàn)在我在分頁(yè)組件里寫了一個(gè)每頁(yè)大小選擇組件，現(xiàn)在要測(cè)試一下組件間交互。現(xiàn)在分頁(yè)組件就是我們的父組件，每頁(yè)大小組件就是我們的子組件。我們現(xiàn)在需要去模擬一個(gè)假的子組件出來。我們先模擬一個(gè)假模塊出來。

我們的子組件在core模塊里，我們?cè)赾ore模塊下創(chuàng)造一個(gè)core-testing模擬模塊。再在core-testing模塊下創(chuàng)造一個(gè)core組件，因?yàn)槲覀兪且粋€(gè)模擬模塊，我們只需要ts文件即可。

@Component({
 selector: 'app-size',
 template: `
 <p>
  size-select works!
 </p>
 `,
 styles: []
})
export class SizeComponent implements OnInit {
 constructor() {
 }

 ngOnInit() {
 }
}

為了我們可以在父組件的測(cè)試文件中得到模擬的子組件，我們還需要一個(gè)controller，在core-testing文件夾下創(chuàng)建一個(gè)core-testing-controller.ts文件。CoreTestingController類繼承TestingController。

export class CoreTestingController extends TestingController {
}

同時(shí)在我們的core-testing.module里聲明CoreTestingController為提供者

providers: [
 CoreTestingController
 ]

此時(shí)我們的目錄樹

 core-testing git:(134) ✗ tree  
.
├── core-testing-controller.ts
├── core-testing.module.ts
├── page
│   └── page.component.ts
└── size
    └── size.component.ts

因?yàn)槲覀兪悄M的子組件，所以我們應(yīng)該添加子組件的@Input 和 @Output，同時(shí)在構(gòu)造函數(shù)里把這個(gè)模擬的子組件添加到CoreTestingController里。

export class SizeComponent implements OnInit {
 @Input() size: number;

 @Output() onChangeSize = new EventEmitter<number>();

 constructor(private controller: CoreTestingController) {
 this.controller.addUnit(this);
 }
}

此時(shí)我們的準(zhǔn)備工作就完成了。

單元測(cè)試

首先我們引入假組件并聲明提供者

import {CoreTestingController} from '../core-testing/core-testing-controller';
import {SizeComponent} from '../core-testing/size/size.component';

beforeEach(async(() => {
 TestBed.configureTestingModule({
  declarations: [ PageComponent, SizeComponent ],
  imports: [FormsModule],
  providers: [
  CoreTestingController
  ]
 })
 .compileComponents();
 }));

我你們這里引入的是我們創(chuàng)造的假的SizeComponent，因?yàn)槲覀兏附M件與子組件在同一個(gè)模塊里，所以我們直接引入SizeComponent就可以。

此時(shí)我們父組件想要子組件時(shí)就會(huì)使用假的子組件。

我們先斷言@Input，我們斷言父組件的值與我們假的子組件值相等

it('選擇每頁(yè)大小', () => {
 const controller = TestBed.get(CoreTestingController) as CoreTestingController;
 const sizeComponent = controller.get(SizeComponent) as SizeComponent;
 expect(sizeComponent.size).toBe(component.size);
 });

我們這里的get方法就對(duì)應(yīng)的我們之前的構(gòu)造函數(shù)的addUnit方法，具體參考TestingController類定義的方法。

然后我們?cè)贁嘌宰咏M件向父組件@Output也沒有問題，我們先spyon父組件接收子組件值的方法，然后定義一個(gè)變量并傳給父組件，然后斷言父組件接收到的值與子組件傳的值相同。

spyOn(component, 'onSizeSelected');
const emitSize = 4;
sizeComponent.onChangeSize.emit(emitSize);
expect(component.onSizeSelected).toHaveBeenCalledWith(4);

這時(shí)我們就達(dá)到了我們測(cè)試的目的。

我們啟動(dòng)測(cè)試，發(fā)現(xiàn)我們本來的選擇下拉框變成了文字，這就是我們假的子組件的效果。

總結(jié)

我們進(jìn)行單元測(cè)試，就需要除被測(cè)組件外，其他引用組件盡量為假，才能達(dá)到我們的目的。

到此這篇關(guān)于angular組件間傳值測(cè)試的文章就介紹到這了,更多相關(guān)angular組件間傳值測(cè)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論