angular-cn/public/docs/ts/latest/testing/application-under-test.jade

include ../../../../_includes/_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:400px;" 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.

.l-main-section
:marked
	## What’s Next?
	Now that we’re familiar with how the test app works, we’re ready to poke at it with our [first application tests](first-app-tests.html) written in Jasmine.