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

39 lines
2.4 KiB
Plaintext
Raw Normal View History

include ../../../../_includes/_util-fns
:markdown
Well need an Angular application to test, one as simple as possible while having all the angular features we want to test.
2015-10-10 06:29:34 -04:00
<!-- TODO We have such an app that you can download [here](./#). -->Its 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
2015-10-10 06:29:34 -04:00
img(src='/resources/images/devguide/application-under-test/bongos-heroes.png'
style="width:400px;" alt="Bongo's Heroes")
:markdown
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.
2015-10-10 06:29:34 -04:00
<!-- TODO You can see a short video of the app in action [here](./#) -->
This simple app illustrates a number of Angular features that wed 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 details template is nested within the master components 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
2015-10-10 06:29:34 -04:00
<!-- TODO - [TBD: need to add a filter and a directive to this sample] -->
<!-- TODO - [TBD: need to shoehorn the router in somehow] -->
Well examine the implementation details as we evolve our tests.
.l-main-section
:markdown
## Whats Next?
Now that were familiar with how the test app works, were ready to poke at it with our first application tests written in Jasmine.