Angular and NgRx
  • Introduction
  • Setup
  • 1. Create an application
  • 2. Create a home component
  • 3. Test HomeComponent
  • 4. Create event feature module
  • 5.Create AddAttendeeComponent
  • 6. Test AddAttendeeComponent
  • 7. Listen to child component events
  • 8. Add test for the event emitter
  • 9. Create EventListComponent
  • 10. Test EventListComponent
  • 11. Create EventService
  • 12. Test EventService
  • 13. Add simple NgRx spinner
  • 14. Test reducer
  • 15. Strongly type our store
  • 16. Update reducer tests
  • 17. Store dev tools
  • 18. Create selectors
  • 19. Create feature state
  • 20. Create effect
  • 21. Test an effect
  • 22. Use Entity Adapter
  • 23. Add attendee logic
  • 24. Router store
  • 25. Fix EventComponent tests
Powered by GitBook
On this page
  • 1. Add test to make sure the component emits an attendee
  • StackBlitz Link

8. Add test for the event emitter

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

Previous7. Listen to child component eventsNext9. Create EventListComponent

Last updated 6 years ago

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
Logo