Writing Automated End-To-End tests for Angular JS Applications

==============================================================
> Manual testers always go to heaven; they

ve already had their fair share of hell.

## Prerequisites
It does not matter what technology your API server / UI Server is built with. En
d to end tests are black box, and they hit a local / remote URL to test your app
lication.
*Install the following :*
[NodeJS and NPM](https://nodejs.org/) - chrome's javaScript runtime platform for
mac / windows
Install from nodejs.org.
[Protractor](http://angular.github.io/protractor/#/) - end to end testing for An
gular JS.
`npm install -g protractor`
[WebDriver](http://docs.seleniumhq.org/projects/webdriver/) - browser automation
`node_modules/protractor/bin/webdriver-manager update --standalone`
*Installed under the hood along with the preceding :*
[Jasmine](http://jasmine.github.io/2.2/introduction.html) - Behaviour Driven Jav
aScript
## Configuring Test Specs
Once installed, we create a config.js that bootstraps our tests.
Here is the example format from Protractor docs:
``` javascript
exports.config = {
// The address of a running selenium server. >> doesn't need change usually
seleniumAddress: 'http://localhost:4444/wd/hub',
// Capabilities to be passed to the webdriver instance. >> list browsers to
run tests on
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to the configuration file location passed
// to proractor (in this example conf.js).
// They may include glob patterns. >> include all test files (-spec.js that
contain the test logic)
specs: ['example-spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
}

};
```
[Read more about config files](http://angular.github.io/protractor/#/api-overvie
w)
## Describe / It syntax
Create a file called `example-spec.js` in the same folder. And write a test.
Here is a sample one :
``` javascript
describe('Super Cool Project', function() {
describe('Super Cool Feature', function() {
beforeEach(function() {
browser.get('http://localhost:12002/#/cool');
});
it('should pass the sanity test', function() {
expect(true).toEqual(true);
});
it('should have the correct title', function() {
expect(browser.getTitle()).toEqual('Super Cool Project');
});
});
});
```
Each test suite is the root level unit and follows the following syntax:
``` javascript
describe('what_product_are_you_testing', function() {
describe('what_section_are_you_testing', function() {
it('what_is_the_expected_behavior', function() {
// act like the customer, and check something
});
});
});
```
Each `it('test_case', function() {})` block is a test case.
Each `describe('test_suite', function() {})` block is a test suite, that contai
ns multiple test cases, or nested test suites.

## Writing a test.
0. Find an element.
To find an element by css use: `element(by.css('css_selector'))`
Protractor allows several other ways to find elements. [Read more](http://an
gular.github.io/protractor/#/locators)
0. Find an element's property.
To find an element's properties use the functions on element like: `element(
by.css('css_selector')).getText()`
0. See if it has an expected value.
Use Expect (from [Jasmine](http://jasmine.github.io/2.0/introduction.html))
like : `expect(element_property).toEqual('element_property_value');`
For example, here is a complete test :
``` javascript
it('should have the right heading', function() {
expect(element(by.css('.app-header > h3')).getText()).toEqual('Cool Feature'
);
});
```
## Using Promises, where would I be without you.
Each step in the testing process, must only follow the resolution of the previou
s step.
``` javascript
element(by.css('.big-red-button')).click()
.then(function() {
return element(by.css('.confirm-missle-launch')).click();
}).then(function() {
return // next step goes here.
});
```
## Sleeping
Ask the browser to sleep everytime a complex UI operation runs.
``` javascript
browser.sleep(3000); // time in ms
```
## BeforeEach
Use `beforeEach(function() {})` to run repeated tasks before each test.
## Running the tests

0. Start the Webdriver.

`webdriver-manager start --standalone`
0. Run all the .spec files.
`protractor tests/end-to-end/config.js`
## Grunt Integration
Or instead, you can use `grunt test` to run all end to end tests, and exit.
Our 'test' grunt task runs three new tasks :
0. __express server__ : *runs the node server, and passes control to other grunt
tasks.*
0. __protractor web driver__ : *starts the selenium webdriver to control browser
s.*
0. __protractor__ : *runs the tests in .spec files.*
## Notes
Adding other browsers may involve installing browser specific selenium based dri
vers.