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

Previous7. Listen to child component eventsNext9. Create EventListComponent

Last updated