Метод мышиный не стреляет

Question

Я написал angular тест для проверки вызова метода события. Как видно из приведенного ниже кода, onDialogClicked принимает параметр типа mouseevent. 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

Это потому, что вы забыли создать экземпляр фиктивного объекта. Написав это: mockMouseEvent = new Mock<MouseEvent>({ stopPropagation: () => Promise.resolve(true) }); вы создаете класс, экземпляр которого нужно создать с помощью mockMouseEvent.Object;

Подводя итог:

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 документация

Answer 2

Попробуй вот так. это будет работать

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