时间戳

首页 > 解决方案 > 如何以角度为方法 addProduct 编写测试用例

javascript - 如何以角度为方法 addProduct 编写测试用例

问题描述

我想为一个方法编写测试用例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();
  });
 
});

标签： javascriptangulartypescriptunit-testingkarma-jasmine

解决方案

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

推荐阅读