如何以角度為方法 addProduct 編寫測試用例

Question

我想為addItem可能在product.component.spec.ts文件中的方法編寫測試用例。 這是我的代碼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  constructor() { }
  productName:any
  quantity:any

 public data:any[]=[
    {
        "ID": 101,
        "Product": "Moto G",
        "Quantity": 2,
    },
    {
        "ID": 102,
        "Product": "TV",
        "Quantity": 4,
    },
    {
        "ID": 105,
        "Product": "Watch",
        "Quantity": 2,
    },   
    ]
 
  ngOnInit(): void {
  } 

  addItem() {
    this.data.push({ Product: this.productName, Quantity: this.quantity});
  }  
}

我開始在product.component.spec.ts文件中編寫

  describe('ProductComponent', () => {
    let component: ProductComponent;
    let fixture: ComponentFixture<ProductComponent>;

    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    });   
  });

product.component.spec.ts文件

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from '../app.component';
import { ProductComponent } from './product.component';

describe('ProductComponent', () => {
  let component: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;

  TestBed.configureTestingModule({
    declarations: [
        AppComponent,
        ProductComponent
    ]
});

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
 
});

Answer 1

一個測試用例總是包括 4-5 個步驟：

1. 撕毀
2. 數據准備
3. 執行
4. 確認
5. （可選）拆卸

你已經擁有的是第一步。 第二步，您需要准備必填字段，即data 、 quantity和productName 。

component.productName = 'Awesome Product';
component.quantity = 3;
component.data = [];

第三步只執行你要測試的方法。

component.addItem();

第四步檢查結果，現在是擴展數組。

expect(component.data).toEqual([{ Product: 'Awesome Product', Quantity: 3 }]);

Answer 2

這是你應該怎么做。

describe('ProductComponent', () => {
  let component: ProductComponent;
  let fixture: ComponentFixture<ProductComponent>;

  TestBed.configureTestingModule({
    declarations: [
        AppComponent,
        ProductComponent
    ]
});

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductComponent);
    component = fixture.componentInstance;
    component.data = [{productName : "p1", quantity : 3}]
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should add items to "data"', () => {
     expect(component.data.length).toBe(1); // since you have initialized the variable
     component.productName = "Prod1";
     component.quantity = 1;
     component.addItem();  // this will trigger the method
     expect(component.data.length).toBe(4); // this will show that the entry was added in "this.data"
  });  
 
});

我還建議您閱讀我的這篇介紹文章，以了解angular單元測試。 本文還附有幾個鏈接，可以幫助您了解測試組件的最佳實踐。 干杯:)