Angular connect. Testing angular apps. at scale.

serenity-js.org#SerenityJS @JanMolak
Testing Angular apps. 
At scale.

Jan Molakconsultant, trainer, lead developer of Serenity/JS

We ❤ E2E

We 💔 E2E
(said no one ever)

Execution time: minutes → hours

Writing: hours → days

Analysis and reporting: hours → days

Analysis and reporting: hours → days
Maintenance: days → weeks

The difference between 
scalable tests  
and a world of pain 
is design.

Testing the Journey Planner

When a commuter wants to travel  
from Waterloo to Canary Wharf  
around 9:00 AM they should be told  
about the 8:59 AM Jubilee Line train.

Open the Journey Planner

Open the Journey Planner 
Choose origin: Waterloo

Enter “Waterloo”

Pick the first suggestion

Wait for the suggestions

Press ▼

Press ▼ 
Press ↩

Choose destination: Canary Wharf

Choose time of departure: 9:00 AM

Click on the “change time” link

Click on the “Leaving” button

Click on the “Leaving” button
Select “09:00”

Confirm selection

Confirm selection
Click on the “Plan my journey”

Confirm selection
Click on the “Plan my journey”
Wait for the results to load

Confirm selection
See a Jubilee Line train at 08:59

At a high level,
it’s just 6 tasks

Scripting the flow

“Use Protractor to write and run the e2e tests. 
End-to-end tests explore the application 
as users experience it.
Protractor makes your scenario tests run
faster and in a stable manner.
- Angular website

const
origin = element(by.id(‘…’)),
originSuggestions = element(by.xpath(‘…’)),
destination = element(by.id(‘…’)),
destinationSuggestions = element(by.xpath(‘…’)),
changeTimeLink = element(by.linkText(‘…’)),
leavingButton = element(by.css(‘…’)),
timeSelector = element(by.id(‘…’)),
planMyJourneyButton = element(by.buttonText(‘…’)),
journeyResults = element(by.css(‘…’)),
fastestJourney = element(by.css(‘…’));

browser.get('https://tfl.gov.uk/');

origin.sendKeys('Waterloo');

browser.wait( 
EC.visibilityOf(originSuggestions), 5000);

browser.wait( 
origin.sendKeys(protractor.Key.ARROW_DOWN);
origin.sendKeys(protractor.Key.ENTER);

browser.wait( 
destination.sendKeys('Canary Wharf');
browser.wait( 
EC.visibilityOf(destinationSuggestions), 5000);
destination.sendKeys(protractor.Key.ARROW_DOWN);
destination.sendKeys(protractor.Key.ENTER);

changeTimeLink.click();
leavingButton.click();
timeSelector.element( 
by.cssContainingText('option', '09:00') 
).click();

).click();
planMyJourneyButton.click();
browser.wait(EC.visibilityOf(journeyResults), 5000);

fastestJourney.getText()
.then(journeyDetailsFromText)
.then(option => {
expect(option).to.deep.equal({
line: 'Jubilee',
departs_at: '08:59',
});
});

cost
 
browser.wait( 
browser.wait( 
).click();
.then(option => {
line: ‘Jubilee',
});
6 tasks ?

cost
 
browser.wait( 
browser.wait( 
).click();
.then(option => {
line: ‘Jubilee',
});
6 tasks buried in
36 lines of noise

“If you have WebDriver APIs
in your test methods,
You’re Doing It Wrong!
- Simon Stewart, creator of WebDriver

A test system needs design

Page Objects to the rescue?

class JourneyPlanner {
// Locators
// Actions
}

 
// Locators
private originField = by.id('...');
private originSuggestions = by.xpath('...');
private destinationField = by.id('...');
private destinationSuggestions = by.xpath('...');
private changeTimeLink = by.linkText('...');
private leavingButton = by.css('...');
private timeSelector = by.id('...');
private planMyJourneyButton = by.buttonText('...');

 
// Actions
chooseOriginOf(origin: string) {
element(this.originField).sendKeys(origin);  
browser.wait(…); 
element(this.originField).sendKeys(…);
}
chooseDestinationOf(destination: string) { … } 
chooseTimeOfDeparture(time: string) { … }
confirmSelection() { … }

const journeyPlanner = new JourneyPlanner();

const journeyPlanner = new JourneyPlanner(); 
journeyPlanner.get();
journeyPlanner.chooseOriginOf('Waterloo');
journeyPlanner.chooseDestinationOf('Canary Wharf');
journeyPlanner.chooseTimeOfDeparture('09:00');
journeyPlanner.confirmSelection();

const journeyResults = new JourneyResults();

expect(journeyResults.fastestTrain()) 
.to.eventually.deep.equal({ line: ‘Jubilee’, …})

expect(journeyResults.fastestOption()) 
not bad!

expect(journeyResults.fastestOption()) 
not bad?

private timeSelector = by.id('...'); 
private planMyJourneyButton = by.buttonText('...'); 

get = () => browser.get('https://tfl.gov.uk/');
}
chooseDestinationOf(destination: string) {
element(this.destinationField).sendKeys(destination);
browser.wait(…);  
element(this.destinationField).sendKeys(…);  
element(this.destinationField).sendKeys(…);
} 
changeJourneyTime() {
element(this.changeTimeLink).click();
} 
chooseTimeOfDeparture(time) {
element(this.leavingButton).click();
element(this.timeSelector).element(…).click();
}
confirmSelection() {
element(this.planMyJourneyButton).click(); 
} 
large classes


}
} 
} 
}
} 
large classes
bloated methods


}
} 
} 
}
} 
large classes
bloated methods
difficult to compose

Serenity/JS and
the Screenplay Pattern

“A good acceptance test 
is user-centred.
It reflects a user’s journey 
to accomplish their goal.

 
Choose origin of Waterloo
Choose destination of Canary Wharf
Choose time of departure: 09:00
Confirm selection
See if the fastest train departs at 08:59

 
OpenJourneyPlanner(),
ChooseOriginOf(‘Waterloo’),
ChooseDestinationOf(‘Canary Wharf’),
ChooseTimeOfDeparture(‘09:00’),
ConfirmSelection(),
See.if(FastestTrain(), departsAt(‘08:59’)),

“A task is a composition 
of interactions with the
system, performed by an actor 
to accomplish a certain goal.

Designing a task

ChooseOriginOf(‘Waterloo’)

const ChooseOriginOf = (station: string) => Task

import { Task } from ‘serenity-js/protractor’
const ChooseOriginOf = (station: string) => Task

import { Task } from ‘serenity-js/protractor’
const ChooseOriginOf = (station: string) =>
Task.where(`#actor selects origin of ${station}`,
);

import { Enter, Task } from ‘serenity-js/protractor’
Enter.theValue(station).into(Planner.Origin), 
);

import { Enter, Task } from ‘serenity-js/protractor’
Enter.theValue(station).into(Planner.Origin),
PickFirstSuggestionFrom(Planner.Origin_Suggestions),
);

Actors perform tasks

import { Actor } from ‘serenity-js/protractor’;
const Connie = Actor.named(‘Connie’);

import { Actor } from ‘serenity-js/protractor’;
const Connie = Actor.named(‘Connie’); 
 
Connie.attemptsTo(
// ...  
);

const Connie = Actor.named(‘Connie’); 
 
Connie.attemptsTo( 
ConfirmSelection(), 
);

Actors have abilities  
that enable interactions
with the system

import { protractor } from ‘protractor’; 
import { Actor, BrowseTheWeb } from ‘serenity-js/protractor’; 
 
const Connie = Actor 
.named(‘Connie’)
.whoCan(BrowseTheWeb.using(protractor.browser));

Actors ask questions
and verify the answers

 
actor.attemptsTo(
See.if( 
question: Question<T>,
assertion: Assertion<T>, 
)
);

import { Text } from ‘serenity-js/protractor’;
actor.attemptsTo(
See.if( 
Text.of(Planner.Header),
equals(‘Plan a Journey’) 
)
);

import { SelectedValue } from ‘serenity-js/protractor’;
 
actor.attemptsTo(
See.if( 
SelectedValue.of(Planner.Time_Selector),
equals(‘09:00’) 
)
);

 
actor.attemptsTo(
See.if( 
FastestTrain(),
departsAt(‘08:59’), 
)
);

The end result

const Connie = Actor.named(‘Connie’)
 
ConfirmSelection(),
See.if(FastestTrain(), departsAt(‘08:59’)) 
);

const Connie = Actor.named(‘Connie’)
 
PlanAJourney.from(‘Waterloo’).to(‘Canary Wharf’). 
departingAt(‘09:00’),
// … 
);

Reporting

Questions to ask:
- How much time do I spend maintaining the tests?
- Am I modelling user’s interactions with the system,  
or how the system is built?
- Can I share elements of my testing framework with others?
- How much duplication and dead code is there in my tests?
- How long would it take me to find the issue if a test fails?
- How long to change the tests when the system changes?
- Can I use my tests to drive the design of the system?

Make your tests 
scalable by design

Thank you!
Learn more at serenity-js.org 
 
janmolak.com 
jan.molak@serenity.io 
twitter.com/JanMolak
linkedin.com/in/janmolak
github.com/jan-molak

Angular connect. Testing angular apps. at scale.

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Angular connect. Testing angular apps. at scale.