如何使用 object 模擬數組數據以在 Angular 8 中進行單元測試

Question

我想編寫一個單元測試來測試 expectedData 是否按expectedData顯示。 HTML 代碼正在運行，它可以正確顯示所有內容。

HTML 代碼：

 <div class="col-6 p-0 LHS" *ngIf="data && data.type === 'App'"> <div *ngFor="let d of data"> <div class="row"> <div class="col-auto">Item1:</div> <div class="appItem1">{{d.item1}}</div> </div> </div> </div>

TS 文件：

  data = [{item1: "Item 1", item2: "Item 2"}, type: "App", display: true]; // sample input data
  expectedData;

  getExpectedData() {
    if (this.data && this.data.item) {
      switch (this.data.type) {
        case ("File"):
           this.expectedData = $('.fileItem1')[0].innerHTML;  
          break;
        case ("App"):
          this.expectedData = $('.appItem1')[0].innerHTML;              
          break;
      }
    }
  }

我的測試用例：

it('should verify expected data', () => {
    const mockdata= [{item1: "Item 1"}];
    mockdata.type= 'App'; // getting error because this can't be pushed to array
    mockdata.display= true; // getting error because this can't be pushed to array
    component.data = mockdata;
    fixture.detectChanges();
    component.getExpectedData();
    expect(component.expectedData).toBe("Item 1");
  });

但是，在我的測試用例中，似乎無法將數據模擬為那種類型的數據，是否有任何可能的方法來測試getExpectedData() ？

謝謝

Answer 1

我不知道為什么你有一個變異的數組，但就這樣吧。 答案之一是使用

//@ts-ignore

const mockdata= [{item1: "Item 1"}];
//@ts-ignore
mockdata.type= 'App'; 
//@ts-ignore
mockdata.display= true; 
component.data = mockdata;

https://stackblitz.com/edit/typescript-ae5pvs?file=index.ts