鼠标事件方法未触发

Question

我已经编写了一个 angular 测试来检查事件方法是否被调用。正如您在下面的代码中看到的，onDialogClicked 接受了一个 mousevent 类型的参数。 mousevent 有方法 stopPropagation。当它被解雇时我收到错误。我模拟了鼠标事件，但这似乎无法解决问题。

TypeError: evt.stopPropagation is not a function

测试

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';

import { ModalDialogConfig } from './config/modal-dialog.config';
import { SharedModule } from '../../shared.module';
import { ExampleComponent } from 'src/app/components/example/example.component';
import { ModalDialogModule } from '../../modal-dialog.module';
import { ModalDialogComponent } from './modal-dialog.component';
import { ModalDialogRef } from './config/modal-dialog-ref';
import { Observable } from 'rxjs';
import { NgxsModule } from '@ngxs/store';
import { Mock } from 'ts-mocks';


describe('ModalDialogComponent', () => {
  let component: ModalDialogComponent;
  let childComponent: ExampleComponent;
  let fixture: ComponentFixture<ModalDialogComponent>;
  let childFixture: ComponentFixture<ExampleComponent>;
  let mockMouseEvent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [SharedModule, ModalDialogModule, NgxsModule.forRoot([])],
      providers: [ModalDialogConfig, ModalDialogRef ]
    })
    .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ModalDialogComponent, ExampleComponent] } })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ModalDialogComponent);
    childFixture = TestBed.createComponent(ExampleComponent);
    mockMouseEvent = new Mock<MouseEvent>({ stopPropagation: () => Promise.resolve(true) });
    component = fixture.componentInstance;
    childComponent = childFixture.componentInstance;

    component.childComponentType = ExampleComponent;

    component.componentRef = childFixture.componentRef;
    spyOn(component.componentRef.instance, 'closeModal').and.returnValue(Observable.of(true));
    fixture.detectChanges();
  });


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

  it('should call destroy ', () => {
    spyOn(component.componentRef, 'destroy').and.callThrough();
    component.ngOnDestroy();
    expect(component.componentRef.destroy).toHaveBeenCalled();
  });


  it('should set call onDialogClicked click', () => {
    fixture.detectChanges();

     spyOn(component, 'onDialogClicked').and.callThrough();
     const overlay = fixture.debugElement.query(By.css('.dialog'));
     overlay.triggerEventHandler('click', {});
     fixture.detectChanges();

     expect(component.onDialogClicked(mockMouseEvent)).toHaveBeenCalled();

   });

});

组件

  onDialogClicked(evt: MouseEvent) {
    evt.stopPropagation();
  }

Answer 1

这样试试。它会起作用

expect(component.onDialogClicked).toHaveBeenCalledWith(new MouseEvent('click'));

Answer 2

那是因为你忘了实例化模拟对象。通过这样写：mockMouseEvent = new Mock<MouseEvent>({ stopPropagation: () => Promise.resolve(true) }); 你正在创建一种需要用 mockMouseEvent.Object;

实例化的 class

总结一下：

import { Mock } from 'ts-mocks';

const component = {
    onDialogClicked: function(evt) {
        evt.stopPropagation();
    }
}

describe('onDialogClicked', () => {

    let onDialogClicked;

    beforeEach(() => {
        onDialogClicked = spyOn(component, 'onDialogClicked').and.callThrough();
        const mockMouseEvent = new Mock<MouseEvent>({
            stopPropagation: () => console.log('yay it worked!')
        });

        mouseEvent = mockMouseEvent.Object;
        onDialogClicked(mouseEvent);
    });

    it('Should have been called', () => {
        expect(onDialogClicked).toHaveBeenCalled();
    });

});

来源：ts-mocks documentation

鼠标事件方法未触发

Mousevent method not firing

jasmine

typescript

angular