如何在 Angular 6 单元测试中验证 ngCopy 方法调用

Question

我正在使用 ngCopy 模块将文本复制到我的一个角组件中的剪贴板

import {Component, Input, OnInit} from '@angular/core';
import {ngCopy} from 'angular-6-clipboard';

@Component({
  selector: 'app-error-message',
  templateUrl: './error-message.component.html',
  styleUrls: ['./error-message.component.scss']
})
export class ErrorMessageComponent implements OnInit {
  constructor() {
  }

  ngOnInit() {
  }

  copyMessage() {
    ngCopy('message');
  }

}

下面是这个组件的规范文件

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {ErrorMessageComponent} from './error-message.component';

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

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

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

  it('should create component', () => {
    expect(component).toBeTruthy();
  });

  it('should verify ngCopy', () => {
    const errorMessageComponent = TestBed.createComponent(ErrorMessageComponent).debugElement.componentInstance;
    errorMessageComponent.copyMessage();
    //Verify ngCopy Method call
  });

});

我目前正在使用 ts-mockito 框架，但不知道如何模拟 ngCopy 模块

如何在单元测试中以“消息”作为参数验证 ngCopy 方法调用？

Answer 1

好的，您可以使用spyOn 完成此操作

spec.ts 文件

import * as ngClipBoard from 'angular-6-clipboard';    // get alias to your library

................

it('should verify ngCopy', () => {
    const errorMessageComponent = TestBed.createComponent(ErrorMessageComponent).debugElement.componentInstance;

    let spy = spyOn(ngClipBoard,'ngCopy');    // create spy here

    errorMessageComponent.copyMessage();    // invoke method

    //Verify ngCopy Method call along with its parameter value
    expect(spy).toHaveBeenCalledWith('message');
});