如何實(shí)現(xiàn)angular組件間傳值測(cè)試

這篇文章主要講解了如何實(shí)現(xiàn)angular組件間傳值測(cè)試，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

前言

我們知道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)在我在分頁組件里寫了一個(gè)每頁大小選擇組件，現(xiàn)在要測(cè)試一下組件間交互?，F(xiàn)在分頁組件就是我們的父組件，每頁大小組件就是我們的子組件。我們現(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('選擇每頁大小', () => {
 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)我們本來的選擇下拉框變成了文字，這就是我們假的子組件的效果。

看完上述內(nèi)容，是不是對(duì)如何實(shí)現(xiàn)angular組件間傳值測(cè)試有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。