Karma-jasmine 我如何在模态中测试关闭函数

Question

我需要测试这个，但我是新测试，我不知道，我正在使用 angular，我只想测试关闭功能，也许它是否呈现。

这是html。

<div class="modal active" *ngIf="active" id="modal">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title">{{tittle}}</h1>
          <button type="button" class="close" (click)="close()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <ng-content select="[modal-body]"></ng-content>
          <div modal-body>
            <h5 class="modal-description">{{description}}</h5>
          </div>
        </div>
        <div class="modal-footer">
          <ng-content select="[modal-footer]"></ng-content>
          <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
        </div>
      </div>
    </div>
    <div class="modal-background" (click)="close()"></div>
  </div>

这是 modal.component.ts


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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  @Input() tittle: string = ''
  @Input() description: string = ''
  @Input() active: boolean = false;
  @Output() activeChange = new EventEmitter<boolean>();

  close() {
    this.active = false;
    this.activeChange.emit(this.active);
  }
}

Answer 1

为了测试 EventEmitter 是否在单击背景 div 时发出事件，您应该使用 spyOn 编写一个测试，如下所示：

it('should emit event for closing a modal on click event on background div', () => {
        spyOn(component.activeChange, 'emit');

        component.close();

        expect(component.activeChange.emit).toHaveBeenCalled();
    });

通过在 beforeEach 块中添加以下行，确保您可以访问 component：

beforeEach(() => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
});

Karma-jasmine 我如何在模态中测试关闭函数

Karma-jasmine How i test a close function in a modal

javascript

testing

modal-dialog

karma-jasmine

angular