Trigger custom component event

[Wykks]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[X] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

I saw this nice article about simulating events in angular tests: https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6
It's also talking about spectator at the end, but I actually don't find any info about how to trigger custom component event using spectator.

Are you supposed to do spectator.debugElement.triggerEventHandler('customOutput', {customData}), followed by a detectChanges ?
That's seems a little bit off, since spectator provide helpers for native events. (There's spectator.dispatchFakeEvent, but it doesn't take custom data).

Am I missing something ?

Environment

Angular version: 8.2
Spectator version: 4.6.0

[NetanelBasal]

Invoke the method:

it('should emit the $event on click', () => {
  let output;
  spectator.output('click').subscribe(result => (output = result));

  spectator.component.onClick({ type: 'click' });
  expect(output).toEqual({ type: 'click' });
});

[LayZeeDK]

Are you asking about custom elements with custom events or Angular components with output properties? What are you trying to dispatch and trigger?

[Wykks]

Sorry, forgot to answer this....

I'm talking about exactly what's described in the article.

Let say we have :

@Component({
  selector: 'app-stuff',
  template: `
    <app-something (doIt)="letsDoIt($event)"></app-something>
    <div *ngIf="data">{{data}}</div>
  `,
})
class StuffComponent {
  data;
  letsDoIt(data) { 
    [...]
    this.data = data;
  }
}

And the working test :

spectator.query(SomethingComponent)!.doIt.emit('hello world');
expect(spectator.component.letsDoIt).toHaveBeenCalled();
spectator.detectChanges();
expect(spectator.query(byText('hello world'))).toExist();

Or alternatively :

spectator.debugElement.query(By.directive(SomethingComponent)).triggerEventHandler('doIt’, ‘hello world’);
expect(spectator.component.letsDoIt).toHaveBeenCalled();
spectator.detectChanges();
expect(spectator.query(byText('hello world'))).toExist();

In both case we need to call spectator.detectChanges();.

It would be more straightforward to be able to do something like this :

spectator.triggerEventHandler(SomethingComponent, 'doIt', 'hello world');
// With custom data support just like debugElement.triggerEventHandler
// Also call detectChanges & type check component output if possible
expect(spectator.component.letsDoIt).toHaveBeenCalled();
expect(spectator.query(byText('hello world'))).toExist();

Basically https:/ngneat/spectator#events-api but for custom event

[LayZeeDK]

I thought you meant CustomEvents from a web component.

Your example is the output property of a view child Angular component emitting a component-specific event.

[LayZeeDK]

Read Mocking Components in the documentation.

[NetanelBasal]

@Wykks do you want to create a PR?

[Wykks]

@LayZeeDK I'm not sure I understand what you're talking about...

I can try do to a PR, yes :)

[Wykks]

#253