组合组件的单元测试

Question

我已经在 angular2 中编写了一个组合组件并为其编写了单元测试代码。由于我是初学者，所以我无法测试创建的组件。所以请帮助我解决这个问题。

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { ComboInterface } from './ComboInterface';

@Component({
  moduleId: module.id,
  selector: 'combo-compo',
  template: `
      <select name="theme" class="form-control" [ngModel]="selectedObject" (ngModelChange)="onChangeObj($event)">
        <option [ngValue]="theme" *ngFor="let theme of dataObject" >{{theme.value}}</option>
      </select>
            `
})

export class ComboComponent {
  selectedObject: ComboInterface;
  @Input() dataObject: Array<ComboInterface>;
  @Output() onComboChange = new EventEmitter();

  onChangeObj(newObj: ComboInterface) {
    this.selectedObject = newObj;
    this.onComboChange.emit(this.selectedObject);
  }

}

我已经为它编写了下面给出的单元测试代码

describe('ComboComponent Unit Test', () => {
    let comp: ComboComponent;
    let fixture: ComponentFixture<ComboComponent>;
    let de: DebugElement;
    let el: HTMLElement;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ComboComponent], // declare the test component
            imports: [ReactiveFormsModule, FormsModule]
        });
        fixture = TestBed.createComponent(ComboComponent);
        comp = fixture.componentInstance;

    });

    it('should create ComboComponent', () => expect(comp).toBeDefined());

    it('should create a ComboComponent with values', () => {
        comp.dataObject = [
            {
                'value': 'Victoria Cantrell test',
                'key': '0839',
            }, {
                'value': 'Pearl Crosby Test',
                'key': '8262'
            }, {
                'value': 'Colette Foley Test',
                'key': '8968'
            }
        ];
                comp.onChangeObj(comp.dataObject[0]);
    });

});

通过运行npm test，代码运行良好，但我如何测试创建的组件？

Answer 1

测试使用断言。您可以使用expect 进行断言。

例如，您希望您的组件发出一个值，对吗？

所以 oyu 必须在其上放置 间谍：为方便起见，间谍是一种会监视您的函数以查看它是否被调用的东西。

一个示例测试是：

it('onChangeObj should emit an event', () => {
    comp.dataObject = [/* data */];
    let spy = spyOn(component.onComboChange, 'emit');
    comp.onChangeObj(/* anything you want, even null */);
    expect(spy).toHaveBeenCalled();
});

这只是测试的一部分。在expect() 上查看您的 IDE 的自动完成，看看您可以用它做什么，之后您将了解如何进行测试！