WITH KARMA & PROTRACTOR

Navigation mit Esc, → und ↓

![johannes](images/johannes.png) ### [Johannes Hoppe](http://JohannesHoppe.de)

## Unit Testing ![tools](images/icon_bug.png)

## Früher Jasmine HTML runner ```html contenteditable small _LT_!DOCTYPE html_GT_ _LT_html_GT_ _LT_head_GT_ _LT_title_GT_Jasmine Spec Runner_LT_/title_GT_ _LT_link rel=_QUOT_stylesheet_QUOT_ href=_QUOT_lib/jasmine-1.3.1/jasmine.css_QUOT_ /_GT_ _LT_script src=_QUOT_lib/jasmine-1.3.1/jasmine.js_QUOT__GT__LT_/script_GT_ _LT_script src=_QUOT_lib/jasmine-1.3.1/jasmine-html.js_QUOT__GT__LT_/script_GT_ _LT_!-- include source files here... --_GT_ _LT_script src=_QUOT_src/Player.js_QUOT__GT__LT_/script_GT_ _LT_script src=_QUOT_src/Song.js_QUOT__GT__LT_/script_GT_ _LT_!-- include spec files here... --_GT_ _LT_script src=_QUOT_spec/SpecHelper.js_QUOT__GT__LT_/script_GT_ _LT_script src=_QUOT_spec/PlayerSpec.js_QUOT__GT__LT_/script_GT_ _LT_script_GT_ (function () { var htmlReporter = new jasmine.HtmlReporter(); var jasmineEnv = jasmine.getEnv(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter = function (spec) { return htmlReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload = function () { if (currentWindowOnload) { currentWindowOnload(); } jasmineEnv.execute(); }; })(); _LT_/script_GT_ _LT_/head_GT_ _LT_body_GT_ _LT_/body_GT_ _LT_/html_GT_ ```

## Früher

__b__ehavior-__d__riven __d__evelopment (BDD) framework

### Suites, Specs & Expectations
```javascript contenteditable describe("a suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); }); ```

On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created Karma - a test runner that fits all our needs.

Demo Hello Garfield: 1 | 2

var gretchenfrage =

plain

grunt

gulp;

Heute mal

### Plain Node.js ```cmd contenteditable cmd $ npm init $ npm install karma --save-dev $ npm install -g karma-cli $ npm install karma-jasmine karma-chrome-launcher --save-dev $ karma init $ karma start #oder: npm test ```

Tipp: Karma nicht global installieren - Versionskonflikte zwischen Projekten!

### Windows? ```txt contenteditable cmd white SET CHROME_BIN = "C:\Users\Me\AppData\Local\Google\Chrome\Application\chrome.exe" ```

### package.json ```javascript contenteditable small { "name": "Tests-Karma-Protractor", "version": "1.0.0", "description": "Example package", "main": "index.js", "directories": { "test": "test" }, "scripts": { "test": "karma start" }, "author": "Johannes Hoppe", "license": "MIT", "devDependencies": { "jasmine-core": "^2.3.4", "karma": "^0.12.36", "karma-chrome-launcher": "^0.1.12", "karma-jasmine": "^0.3.5" } } ```

### karma.conf.js ```javascript contenteditable module.exports = function(config) { config.set({ basePath: 'scripts', frameworks: ['jasmine'], files: ['**/*.js'], exclude: [], autoWatch: true, browsers: ['Chrome'] }); }; ```

### karma.conf.js ```javascript contenteditable style=padding-top:100px;padding-bottom:100px;font-size:30px; files: [ /* Reihenfolge? */ ] ```

var gretchenfrage2 =

RequireJS

CommonJS;

```javascript contenteditable define('Garfield', [], function() { var Garfield = function () { this.getName = function () { return "Garfield"; }; }; return Garfield; }); require(['Garfield'], function(Garfield) { var garfield = new Garfield(); garfield.getName(); }); ```

### Finaler Unit-Test
```javascript contenteditable define(['Garfield'], function(Garfield) { describe('Garfield', function() { it('should have a name', function() { var garfield = new Garfield(); expect(garfield.getName()).toEqual("Garfield"); }); }); }); ```

Demo Hello Garfield (require.js): 1 | 2

## E2E Testing

### Terminologie

Selenium OS-project to automate web browsers
Selenium 2.0 concept of WebDrivers
WebDrivers drivers control a browser (e.g. ChromeDriver)
and implement the WebDriver wire protocol
WebDriverJS JavaScript bindings for WebDriver (over wire protocol)
Protractor end-to-end test framework (not only) for AngularJS
on top of WebDriverJS

[mehr](http://yizeng.me/2014/04/25/relationships-between-different-versions-of-selenium/)

### Installation ```cmd contenteditable cmd style=font-size:1.1em $ npm install -g protractor # 💾 protractor 💾 webdriver-manager $ webdriver-manager update # 💾 ChromeDriver $ webdriver-manager start $ protractor protractor.conf.js ```

### protractor.conf.js ```javascript contenteditable exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['e2e/*Spec.js'] }; ```

### AngularJS Spec ```javascript contenteditable describe('Protractor Demo Spec', function() { it('should have a title', function() { browser.get('http://johanneshoppe.github.io/angular_calc/'); expect(browser.getTitle()).toEqual('AngularJS Calculator'); }); }); ```

### Expect das normale Jasmine expect wurde ge-patched ```javascript contenteditable browser.getTitle().then(function (title) { expect(title).toBe('AngularJS Calculator'); }); ``` ```javascript contenteditable expect(browser.getTitle()).toBe('AngularJS Calculator'); ```

### Ohne Angular ```javascript contenteditable small describe('Johannes Talk at DWX', function() { beforeEach(function () { // no waiting on angular to load and finish its tasks browser.ignoreSynchronization = true; }); it('should have the expected title', function() { browser.get('http://www.developer-week.de/Programm/Veranstaltung/(event)/18498'); var heading = element(by.tagName('h2')); expect(heading.getText()).toEqual('JS Unit- und Oberflächentests mit Karma _AMP_ Protractor'); }); afterEach(function() { return browser.ignoreSynchronization = false; }); }); ```

Locator Spickzettel

[by](https://github.com/angular/protractor/blob/master/docs/locators.md).irgendwas() + asynchronous actions

`<span>{{yourName}}</span>`	`element(by.binding('yourName'));`
`<input ng-model="password">`	`element(by.input('password'));`
`<tr ng-repeat="foo in foos">`	`element(by.repeater('foo in foos')).row(1)`
	`element.by(repeater('foo in foos')).column('foo.bar');`

Debugging

wd-debug	`browser.pause(); // Enter "c" to move the test forward by one task // Enter "repl" to enter interactive mode`
node debugger	`cmd: protractor debug protractor.conf.js browser.debugger() // Enter "c" to continue after breakpoint`
node-debug	`cmd: node-debug node_modules/protractor/bin/protractor protractor.conf.js browser.debugger()`

[Debugging](https://github.com/angular/protractor/blob/master/docs/debugging.md)

Schamlose Werbung

:-)

[

](https://www.npmjs.com/package/gulp-node-debug) [gulp-node-debug](https://www.npmjs.com/package/gulp-node-debug)

## Downloads ![tools](images/icon_file.png) #### [github.com/JohannesHoppe/Presentations2015](https://github.com/JohannesHoppe/Presentations2015/)

# Danke!
* [johanneshoppe.de](http://johanneshoppe.de) * [@JohannesHoppe](https://twitter.com/JohannesHoppe) * [Johannes.Hoppe](https://www.facebook.com/johannes.hoppe)