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 =

<script>
||

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)

Created by Johannes Hoppe | Print PDF