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个步骤：

撕裂
数据准备
执行
验证
（可选）拆除

您已经拥有的是第一步。第二步，您需要准备必填字段，分别为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"
  });  
 
});

我还建议您通过this intro article of mine来了解angular中的单元测试。本文中也很少有链接，这些链接可以帮助您了解测试组件的最佳实践。干杯：）

如何在angular中为方法addProduct编写测试用例

2 个答案: