triggering click event listener with custom Event

Question

I have a function which is getting triggered on some dynamic created span.

  treeFuncItom(_event:Event, catType){
    console.log('INSIDE COMPONENT', _event);
    let myEvent = {};
     if(catType == 'id'){
      myEvent['value'] = _event['item']['dataItem']['_id'];
      myEvent['module'] = 'id';
     }else {
      myEvent['module'] = 'tag';
      myEvent['value'] = _event['item']['dataItem']['name'];
     }
    this.ItemChange.emit(myEvent);
  }

I am trying to trigger this function by passing dummy event from .spec.ts in angular4.

 it('Should raise ItemChange event, and set module to \'id\'', async () => {
    let _event  = {
      item: {
        dataItem: {
          name: 'abcd'
        },
        index: 0
      },
      originalEvent: 'MouseEvent',
      index: 0
    };

    fixture.detectChanges();

    await fixture.whenStable();
    let ee = JSON.stringify(_event);

    let item = null;
    component.ItemChange.subscribe(it => {
      console.log('Int Test', it);
      item = it;
    });

    component.treeFuncItom(new Event(ee), 'id');
    expect(item).not.toBeNull();
    expect(item.module).toEqual('id');
  });

But I am getting error in console:

ERROR: 'Unhandled Promise rejection:', 'Cannot read property 'dataItem' of undefined', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', TypeError{}, 'TypeError: Cannot read property 'dataItem' of undefined
at SidebarComponent.webpackJsonp../src/app/service-catalog/component/sidebar/sidebar.component.ts.SidebarComponent.treeFuncItom (http://localhost:9876/_karma_webpack_/webpack:/src/app/service-catalog/component/sidebar/sidebar.component.ts:26:40)




LOG: 'INSIDE COMPONENT', Event{isTrusted: false}

why is isTrusted: false and how can I pass the proper event from spec.ts

user4676340 · Accepted Answer · 2018-11-05 10:40:12Z

2

you don't need async and await
You should get rid of asynchronous code in testing : don't test the observable, test that one of its methods has been called (principle of unit testing : don't rely on a dependency)
You don't need to create a new event, you can simply pass a mock to it
It's a function that does not involve the template, you don't need a fixture tampering
Most important of all : keep it ismple.

Here, try this :

it('should whatever', () => {
  const mockEvent: any = {
    item: {
      dataItem: {
        _id: 'item.dataItem.id',
        name: 'item.dataItem.name'
      }
    }
  };

  const itemChange = spyOn(component.itemChange, 'emit');

  component.treeFuncItom(mockEvent, 'id');

  expect(itemChange).toHaveBeenCalledWith({
    module: 'id',
    value: mockEvent.item.dataItem._id
  });
});

answered Nov 5, 2018 at 10:40

user4676340

Sign up to request clarification or add additional context in comments.

1 Comment

raju Over a year ago

Thanks a lot Sir, it helps a lot

Collectives™ on Stack Overflow

triggering click event listener with custom Event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related