使用 *ngFor 和 Input 運行單元測試

Question

我是 Angular 的新手。 我創建了一個使用 *ngFor 顯示按鈕的組件。

.ts 文件：

 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'display-button', templateUrl: './display-button.component.html', styleUrls: ['./display-button.component.scss'] }) export class DisplayButtonComponent implements OnInit { @Input() compInput: any; buttons: any; constructor() { } ngOnInit() { if (this.compInput) { this.buttons = this.compInput.scriptButtonData.buttons; } } buttonClicked(selectedValue) { //do something } } }

html文件：

<button class="scriptButton" *ngFor="let button of buttons" (click)="buttonClicked(button.value)" >{{button.name}}</button>

spec.ts 文件：

 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { InlineScriptButtonComponent } from './display-button.component'; import {By} from '@angular/platform-browser'; describe('DisplayButtonComponent', () => { let component: DisplayButtonComponent; let fixture: ComponentFixture<DisplayButtonComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ DisplayButtonComponent] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(DisplayButtonComponent); component = fixture.componentInstance; fixture.detectChanges(); }); fit('should contain label', () => { component.compInput= { scriptButtonData: { type: "scriptButton", buttons: [ { name: "Proceed", value: "Yes" }, { name: "Cancel", value: "No" }, ] }, someOtherProperty: null, }; fixture.detectChanges(); let buttonLabels = fixture.debugElement.queryAll(By.css('scriptButton')); expect( buttonLabels.length).toBe(2); }); });

我正在編寫單元測試來測試是否顯示 2 個按鈕。 當我運行測試時，它失敗了，因為 buttonLabels.length 為 0。即使我在測試中初始化輸入變量 compInput，遇到行時它似乎為空

if (this.compInput) {

為什么這是空的？ 我究竟做錯了什么？ 此外，作弊的一種方法是通過這種方式初始化測試：

component.buttons = [
  {
    name: "Proceed",
    value: "Yes"
  },
  {
    name: "Cancel",
    value: "No"
  },
]

雖然測試通過添加上面的行，但這是作弊，因為我沒有測試 ngOnInit 函數中的代碼。

為什么我設置 component.compInput 的值對測試不可用。 測試此功能的正確方法是什么？

Answer 1

您指定了錯誤的 CSS 類，因此找不到該類的任何按鈕。 改用'scriptButton'。

Answer 2

從你的測試中調用 ngOnInit() ，否則它在你設置 component.compInput 之前完成。 還要查找 document.getElementsByClass('scriptButton') 以獲取您的元素。

我也不會直接從 ngOnInit() 調用 if 語句，而是將它放在從 ngOnInit() 調用的方法中。 這是我個人喜歡的一種風格，使生命周期掛鈎更清晰。

這是您的合身聲明，以及更新。

fit('should contain label', () => {
    component.compInput = {
        scriptButtonData: {
        type: 'scriptButton',
        buttons: [
        {
          name: 'Proceed',
          value: 'Yes'
        },
        {
          name: 'Cancel',
          value: 'No'
        }
      ]
    },
    someOtherProperty: null
  };

  component.ngOnInit();  //need to invoke ngOnInit()

  fixture.detectChanges();
  let buttonLabels = document.getElementsByClassName('scriptButton');
  expect(buttonLabels.length).toBe(2);
 });