include ../_util-fns

:marked
  We’ll need an Angular application to test, one as simple as possible while having all the angular features we want to test.

  <!-- TODO We have such an app that you can download [here](./#). -->It’s a one-screen variation on the “Tour of Heroes” that should be familiar to you as a reader of this Developers Guide.

  Our test app displays a list of heroes - all favorites of the user named “Bongo”. It looks like this:

figure.image-display
  img(src='/resources/images/devguide/application-under-test/bongos-heroes.png'
  style="width:250px;" alt="Bongo's Heroes")

:marked
  At the top is a master list of heroes; at the bottom the detail for the current hero. Click a hero in the list to change the current hero. Change the name in the textbox and that name updates everywhere. The *Update* button modifies the `Hero.name` in an arbitrary way and that change also propagates everywhere on screen. The *Delete* button deletes the hero from the list and a new hero becomes current. *Refresh* clears both the list and detail, then restores the original list of heroes.

  <!-- TODO You can see a short video of the app in action [here](./#) -->

  This simple app illustrates a number of Angular features that we’d like to test.

  - A simple service that presents the `username` (“Bongo”)
  - A dataservice that fetches and caches the list of heroes.
  - The dataservice depends in turn on another “backend” service that handles the interaction with a remote web api
  - A master `HeroesComponent` presents the list
  - The master communicates with a detail component `HeroDetailComponent` about the current hero both through an attribute and an event.
  - The detail’s template is nested within the master component’s template.
  - The `name` textbox illustrates two-way databinding
  - The update button demonstrates that a programmatic change to the databound model propagates to both component views
  - The delete button triggers an event that is caught by the parent component
  <!-- TODO - [TBD: need to add a filter and a directive to this sample] -->
  <!-- TODO - [TBD: need to shoehorn the router in somehow] -->

  We’ll examine the implementation details as we evolve our tests.