},

"jasmine-testing-101": {

"title": "Jasmine Testing 101"

},

"application-under-test": {

"title": "The Application Under Test"

},

"first-app-tests": {

"title": "First App Tests"

},

"testing-an-angular-pipe": {

"title": "Testing an Angular Pipe"

}

include ../../../../_includes/_util-fns

:markdown

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

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="Bong'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.

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

- [TBD: need to add a filter and a directive to this sample]

- [TBD: need to shoehorn the router in somehow]

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

## 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 written in Jasmine.

var path = require('canonical-path');

var fs = require("fs");

var FRAGMENT_DIR = "./public/docs/_fragments";

module.exports = function exampleInlineTagDef(getLinkInfo, createDocMessage, log) {

return {

name: 'example',

description: 'Process inline example tags (of the form {@example some/uri Some Title}), replacing them with HTML anchors',

handler: function(doc, tagName, tagDescription) {

var tagArgs = parseArgs(tagDescription);

var unnamedArgs = tagArgs._;

var relativePath = unnamedArgs[0];

var region = unnamedArgs.length > 1 && unnamedArgs[1];

var title = tagArgs.title;

// TODO: not yet implemented here

var stylePattern = tagArgs.stylePattern;

var dir = path.join("_api", path.dirname(relativePath));

var extn = path.extname(relativePath);

var baseNameNoExtn = path.basename(relativePath, extn);

var fileName = region ? baseNameNoExtn + "-" + region + extn : baseNameNoExtn + extn;

var fullFileName = path.join(FRAGMENT_DIR, dir, fileName);

if ( !fs.existsSync(fileName)) {

log.warn(createDocMessage('Invalid example (unable to locate fragment file: ' + quote(fullFileName), doc));

}

var comma = ', '

var res = [ "+makeExample(", quote(dir), comma, quote(fileName), comma, title ? quote(title) : 'null', ")" ].join('');

return res;

}

};

function quote(str) {

if (str == null || str.length === 0) return str;

str = str.replace("'","'\'");

return "'" + str + "'";

function parseArgs(str) {

// regex from npm string-argv

//[^\s'"] Match if not a space ' or "

//+|['] or Match '

//([^']*) Match anything that is not '

//['] Close match if '

//+|["] or Match "

//([^"]*) Match anything that is not "

//["] Close match if "

var rx = /[^\s'"]+|[']([^']*?)[']|["]([^"]*?)["]/gi;

var value = str;

var unnammedArgs = [];

var args = { _: unnammedArgs };

var match, key;

do {

//Each call to exec returns the next regex match as an array

match = rx.exec(value);

if (match !== null) {

//Index 1 in the array is the captured group if it exists

//Index 0 is the matched text, which we use if no captured group exists

var arg = match[2] ? match[2] : (match[1]?match[1]:match[0]);

if (key) {

args[key] = arg;

key = null;

} else {

if (arg.substr(arg.length-1) === '=') {

key = arg.substr(0, arg.length-1);

// remove leading '-' if it exists.

if (key.substr(0,1)=='-') {

key = key.substr(1);

}

} else {

unnammedArgs.push(arg)

key = null;

}

}

}

} while (match !== null);

return args;