如何以角度为方法 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

你应该这样做。

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 中的单元测试。本文附带的链接也很少，它们可以帮助您了解测试组件的最佳实践。干杯:)

Answer 2

一个测试用例总是包含 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 }]);