Angular 2 logo

Testing your Angular2 application

w/ Protractor, Gherkin & CucumberJS

Protractor logo CucumberJs logo

By Sam Vloeberghs / @samvloeberghs

who am i?

Sam Vloeberghs

Sam Vloeberghs
Freelance Software Engineer

Questions? Ask anytime

mail / hangout (sam.vloeberghs)
follow / tweet @samvloeberghs
connect

Today's topics

  • Testing :) jeeeuj
  • Protractor for E2E testing
  • BDD with Gherkin features & scenarios
  • CucumberJS

Play around: example project: Github repo

Unit vs E2E testing

  • test units / atomic parts of app
  • mocks out dependencies
  • code & business logic perspective

vs

  • test full functional parts of app
  • verify integration of different parts
  • user behaviour perspective

What is protractor?

A way to measure the possible sharp angles of your Angular project

  • Google product
  • successor of the scenario runner
  • E2E testing framework
  • runs on top of selenium webdriver
  • do things automatically in the browser

Locators & actions

  • find elements
  • perform actions
  • retrieve values

All operations are async!

Locators


element(by.id('addbutton'));	// 
element(by.css('some-css'));	// 
element(by.css('.special'));	// 

element(by.binding('first'));	// {{first}}
element(by.model('second'));	// 

element(by.css('my-css'));	// is the same as
$('my-css');			// short cut selector  ( css selectors )

Protractor documentation : locators

Finding multiple elements


element.all(by.css('.selector')).then((elements) => {
/* elements is an array of ElementFinders. */
});

/* Number of elements */
element.all(locator).count();

/* Get by index (starting at 0) */
element.all(locator).get(index);

/* First and last */
element.all(locator).first();
element.all(locator).last();

Protractor documentation : multiple elements

Actions


var el = element(locator);

/* Click on the element */
el.click();

/* Send keys to the element (usually an input) */
el.sendKeys('my text');

/* Clear the text in an element (usually an input) */
el.clear();

/* Get the value of an attribute, for example, get the value of an input */
el.getAttribute('value');

Protractor documentation : actions

Best practices in E2E testing

Mostly based on the styleguide by Carmen Popoviciu

  • do not cheat on your tests
  • don't retest what's unit tested
  • wrap common elements in page objects
  • don't mock unless you need to
  • reset state before every test
    -> refresh / navigate

Protractor 3.x.x - 4.x.X & Angular 2 changes

  • Only Jasmine 2 out of the box support
  • All frameworks ( like CucumberJs ) need explicit require
  • use "useAllAngular2AppRoots" if multiple A2 apps
  • "by.binding" & "by.model" not available for Angular 2 apps
  • No perfect support for async actions (HTTP) yet..
    ( see Angular Air podcast #59 with Julie Ralph)
  • collision Protractor & jQuery typings
    -> consider moving tests to seperate project
    -> run a post typings install step to fix

What is BDD & Gherkin

  • Behaviour driven development
  • Business definable and readable DSL
  • Set of features describing behaviour

Feature files


Feature: This feature describes the scenarios of the set new password
     part of our authentication component

Scenario Outline: The user is setting a new password ( valid link )

Given user clicks the valid set new password link
And '<password>' is the provided new password
And '<repeatPassword>' is the repeated new password
When submitting the set new password form
Then the set new password form is validated '<valid>'

Examples:
| password | repeatPassword | valid |
|          |                | false |
| 123      |                | false |
...
| 12345678 | 12345678       | true  |

Feature files

  • contain scenarios related to the feature
  • Scenarios serve as documentation
  • Scenarios define the tests to write

Gherkin documentation : docs

What is CucumberJs

  • BDD framework
  • glue between Protractor & Gherkin
  • reads the feature files
  • projects them on the step definitions

Integration with SauceLabs

  • easy setup / configuration
  • easily test different browsers

export SAUCE_USERNAME=samvloeberghs
export SAUCE_ACCESS_KEY=xxxx

sauceUser: process.env.SAUCE_USERNAME,
sauceKey: process.env.SAUCE_ACCESS_KEY

Demo

Recap

  1. use feature files to describe behaviour
  2. read those features / scenarios via CucumberJS
  3. map the behaviour on step definitions
  4. implement the behaviour via page objects
  5. automate browser interactions with protractor
  6. test against expectations using an assertion framework

So what's next &
what does the future bring?

  • make it part of your CI setup
  • better async support ( HTTP for example )
  • more automated testing
    = less QA testing teams
    = more developers writing tests

NG-BE 2016

NG BE logo

8-9/12/2016 - Holiday Inn - Ghent Expo

1 day high level workshop
1 day conference

Thank you!

Thaaaaaaanks

Questions? Ask anytime

mail / hangout (sam.vloeberghs)
follow / tweet @samvloeberghs
connect