8. Add test for the event emitter

In this section we will add tests for the AddAttendeeComponent's EventEmitter.

1. Add test to make sure the component emits an attendee

Angular has observables as a built in feature. Here we subscribe to the EventEmitter which is a special type of Observable called a Subject. Subjects are special as they can both be passed values and listened to with a subscription from an Observer. Here we first set the forms name value and then subscribe and start listening to the addAttendee event emitter. We then call the submit method and the subscribe blocks next function is called by the observable. We will dive deeper into observables as the course goes on so if you are new to them do not worry too much for now about the details, just know that subscriptions register an observer with an observable. Feel free to try moving the submit to before the subscription to see it not work as the subscription is registered after the event.

• Add a test to check the event is emitted on submit.

src/app/event/components/add-attendee/add-attendee.component.spec.ts

...

  it('should emit an attendee', async(() => {
    component.addAttendeeForm.controls.name.setValue('Duncan');
    component.addAttendee.subscribe((attendee: Attendee) => {
      expect(attendee.name).toEqual('Duncan');
    });
    component.submit();
  }));
  
  ...

StackBlitz Link

Duncanhunter - Angular And Ngrx Demo App - StackBlitzStackBlitz

Web Link: Link to the demo app running in StackBlitz