CODEWITHSUNDEEP
angulartypescriptjasmine
Tom
Tom

Reputation: 8681

Mousevent method not firing

I have written an angular test to check the event method is called. As you can see in the code below, onDialogClicked taken a parameter of type mouseevent. The mousevent has method stopPropagation. I am getting error when that is fired . I have mocked the mouse event but that doesn't seem to fix it.

TypeError: evt.stopPropagation is not a function

Tests

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();

   });

});

Component

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

Upvotes: 2

Views: 239

Answers (2)

Guerric P
Guerric P

Reputation: 31805

That's because you forgot to instantiate the mock object. By writing this: mockMouseEvent = new Mock<MouseEvent>({ stopPropagation: () => Promise.resolve(true) }); you are creating a kind of class which needs to be instantiated with mockMouseEvent.Object;

To summarize:

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();
    });

});

Source: ts-mocks documentation

Upvotes: 1

CMS Develop
CMS Develop

Reputation: 90

Try like this. it will work

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

Upvotes: 0

Related Questions