💻 Exercise 1 - Get to know the application
Please take a look at the existing Tour of Heros application - Existing Tour of Heros
- Click through the UI
- Notice we are using Angular Routing
- Notice the components:
- dashboard
- hero-detail
- hero-search
- heroes
- Notice the hero.service.ts
- Notice the message.service.ts
💻 Exercise 2 - Test setup
Open Exercise
You will learn: Setup a TestBed
There are probably a lot of questions that popped up. We tried to cover them in a roundup
💻 Exercise 3 - Test the hero-detail component
We have two different exercise here you can choose from:
You will learn:
- render the component under test
- test the component DOM
- write meaningful test descriptions
You will learn:
- writing CSS selectors
- how to trigger change detection and when this is necessary
💻 Exercise 4 - Testing ViewChilds
There are many different approaches to testing with
@ViewChild's
It is hard to tell which one is fitting the best for you, as this is dependent on the use case.Exercise ViewChild Testing - 1: using Spies
Exercise ViewChild Testing - 2: using Stubs & Spies
Exercise ViewChild Testing - 3: using ViewChild architecture pattern (sometimes needed for high performant compontents)
💻 Exercise 5 - Container Components & Presentational Components
Using so called Container and Presentational Components can make our testing life easier. But it's no just our testing life. The overall developer experience should become better when using this approach. We should strive for this pattern when creating new components. Open Exercise