运行使用 *ngFor 和输入进行单元测试

Question

我是 Angular 的新手。我创建了一个使用 *ngFor 显示按钮的组件。

ts 文件：

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

    @Component({
      selector: 'display-button',
      templateUrl: './display-button.component.html',
      styleUrls: ['./display-button.component.scss']
    })
    export class DisplayButtonComponent implements OnInit {

      @Input() compInput: any;
      buttons: any;

      constructor() { }

      ngOnInit() {
        if (this.compInput) {
          this.buttons = this.compInput.scriptButtonData.buttons;
        }
      }

      buttonClicked(selectedValue) {
        //do something
        }
      }
    }

html 文件:

<button class="scriptButton" *ngFor="let button of buttons" (click)="buttonClicked(button.value)" >{{button.name}}</button>

spec.ts 文件:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { InlineScriptButtonComponent } from './display-button.component';
import {By} from '@angular/platform-browser';

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

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

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

  fit('should contain label', () => {
    component.compInput= {
      scriptButtonData: {
        type: "scriptButton",
        buttons: [
          {
            name: "Proceed",
            value: "Yes"
          },
          {
            name: "Cancel",
            value: "No"
          },
        ]
      },
      someOtherProperty: null,
    };
    fixture.detectChanges();
    let buttonLabels = fixture.debugElement.queryAll(By.css('scriptButton'));
    expect( buttonLabels.length).toBe(2);
  });

});

我正在编写单元测试来测试是否显示了 2 个按钮。当我运行测试时，它失败了，因为 buttonLabels.length 是 0。即使我在测试中初始化输入变量 compInput，它在遇到行

时似乎为空

if (this.compInput) {

为什么这个是空的？我究竟做错了什么？此外，一种作弊方法是通过这种方式初始化测试：

component.buttons = [
  {
    name: "Proceed",
    value: "Yes"
  },
  {
    name: "Cancel",
    value: "No"
  },
]

虽然通过添加上述行测试通过，但这是作弊，因为我没有测试 ngOnInit 函数中的代码。

为什么我设置的值 component.compInput 对测试不可用。测试此功能的正确方法是什么？

Answer 1

您指定的 CSS class 有误，因此找不到任何包含 class 的按钮。请改用 'scriptButton'。

Answer 2

从您的测试中调用 ngOnInit()，否则它会在您设置 component.compInput 之前完成。还要查找 document.getElementsByClass('scriptButton') 以获取您的元素。

我也不会直接从 ngOnInit() 调用您的 if 语句，而是将其放在从 ngOnInit() 调用的方法中。这是我个人喜欢的风格，让生命周期挂钩更清晰。

这是您的健康声明，并进行了更新。

fit('should contain label', () => {
    component.compInput = {
        scriptButtonData: {
        type: 'scriptButton',
        buttons: [
        {
          name: 'Proceed',
          value: 'Yes'
        },
        {
          name: 'Cancel',
          value: 'No'
        }
      ]
    },
    someOtherProperty: null
  };

  component.ngOnInit();  //need to invoke ngOnInit()

  fixture.detectChanges();
  let buttonLabels = document.getElementsByClassName('scriptButton');
  expect(buttonLabels.length).toBe(2);
 });

运行使用 *ngFor 和输入进行单元测试

Run unit test with *ngFor and Input

javascript

unit-testing

karma-jasmine

angular

运行 使用 *ngFor 和输入进行单元测试

Run unit test with *ngFor and Input

javascript

unit-testing

karma-jasmine

angular

运行使用 *ngFor 和输入进行单元测试