37
Testing with Angular.JS Ruben Vermeersch @rubenv [email protected]

Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

  • Upload
    dangthu

  • View
    219

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Testing with Angular.JS

Ruben Vermeersch!@rubenv!

[email protected]

Page 2: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Ruben Vermeersch (@rubenv)[email protected]

Page 3: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Two assumptions

Page 4: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Two assumptions• You should test more

Page 5: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Two assumptions

• You should test more

• You know (some) Angular.JS

Page 6: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 7: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Part one: Unit testing

Part two: E2E testing

Page 8: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Unit vs E2E

Page 9: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Unit vs E2EUnit test E2E test

APIs UIs

Tiny Large

White-box Black-box

Isolated from the world Make the pieces fit together

Page 10: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Unit testing

Page 11: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

$scope is a wonderful thing

Page 12: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Simple test case

Page 13: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 14: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

npm -g install karma

npm install --save-dev karma-mocha karma-chai

Install:

Configure & run:karma init

karma start karma.conf.js

Page 15: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Debugging tests

Page 16: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Faking HTTPThere’s no HTTP in unit tests!

Because we like to control the environment.

$httpBackend is your friend.

Page 17: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Faking timeThere’s no time in unit tests!

Has to be fast!

$timeout is your friend.

Page 18: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Learn when to $digestEspecially when testing promises and directives.

Page 19: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Use grunt!

Page 20: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

DependenciesAngular.JS is like an onion.

Page 21: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Questions?

Page 22: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

E2E testing

Page 23: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Unit vs E2EUnit test E2E test

APIs UIs

Tiny Large

White-box Black-box

Isolated from the world Make the pieces fit together

Browser automation!

Page 24: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 25: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 26: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 27: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS
Page 28: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

npm install --save-dev grunt-contrib-connect grunt-protractor-runner

Install:

Configure & run:Gruntfile.js, protractor.conf.js

grunt

Page 29: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Execution• chromeOnly

• Local Selenium

• Sauce Labs

Page 30: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Locators

https://github.com/angular/protractor/blob/master/docs/api.md

Page 31: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Page objectsReusing page structure among tests

Page 32: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Counting things1 + 1 !== 3

Page 33: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Authentication & Session setup

Page 34: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

CoffeescriptERROR ON LINE 15: UNEXPECTED BY

Page 35: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

sendKeys(protractor.Key.RETURN)

sendKeys(protractor.Key.ENTER)vs

Page 36: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Questions?

Page 37: Testing with Angular - Ruben Vermeersch (rubenv) · PDF file$scope is a wonderful thing. Simple test case. ... Testing with Angular.JS Ruben Vermeersch! @rubenv! ruben@ . Title: Angular.JS

Testing with Angular.JS

Ruben Vermeersch!@rubenv!

[email protected]