SlideShare a Scribd company logo
AUTOMATED TESTING
IN ANGULARJS
WITH JIM LYNCH
AUGUST 2016
OVERVIEW
▸ Why write tests?
▸ UI / E2e Testing
▸ Unit Testing & TDD
▸ Acceptance Testing
WHY USE AUTOMATED TESTING AT ALL?
IF YOU DON’T HAVE AUTOMATED TESTS…
▸ Refactoring becomes dangerous since you can break
something and not be alerted of it.
▸ The team must rely on heavily on manual testing to ensure
quality which is expensive and lengthens each iteration.
▸ Anyone reading your code has nothing to help him or her
understand the code besides that source code itself.
▸ Every push to production leaves you with fear and worry in
the back of your mind that something might go wrong.
“OUR HIGHEST PRIORITY IS TO SATISFY
THE CUSTOMER WITH EARLY AND
CONTINUOUS DELIVERY OF VALUABLE
SOFTWARE”
#1 Principle of Agile Manifesto 12 Principles
IT ALL COMES BACK TO THIS
MANUAL TESTING
▸ Can you think of a manual test that can’t be automated?
▸ Manual Testing is the Devil!
▸ Quickly becomes expensive, error prone, time consuming…
▸ Don’t rely only on “____ serve” for development because
then you need to test manually!
▸ Used only for exploratory / usability testing and
should NOT be a step in the deployment process.
AVOID IT!
PROTRACTOR
SETTING UP PROTRACTOR
‣ Create a config file:
‣ You might also need to update webdriver-manager:
‣ Install the library:
‣ And then run it:
AN EXAMPLE OF A PROTRACTOR TEST
PAGE OBJECTS
▸ These are the mysterious .po.js files.
▸ They allow you to separate the DOM selection code from
the core test logic.
▸ Existed way before Protractor was even a thing. Tons of
info has been written on the web about page objects.
▸ Example:
KEEP YOUR UI TESTS MAINTAINABLE!
PROTRACTOR IS AWESOME!
▸ Test on virtually any browser via Sauce Labs!
▸ Allows you to control Selenium WebDriver with friendly,
JavaScript API.
▸ Tip: Start with functional testing of user interactions
and flow through the app.
▸ Keep it real! Instead of mocking backend services, just
run your tests on the real app and call it e2e testing too!
WE ARE SO LUCKY.
TEST ON ALL THE BROWSERS WITH SAUCE LABS!
ALL THE THINGS!
PROTRACTOR REPORTS
Install the package:
And then add this to your protractor config file
exports.config object:
Then on every
run you’ll get a
generated
report with
screenshots!
FOR WHEN YOU CARE WHAT ACTUALLY HAPPENED
KARMA
SETTING UP KARMA
Install Karma:
Install any plugins you’ll need:
Create a
config file:
And run it like this:
AN EXAMPLE OF A UNIT TEST
THE CODE COVERAGE REPORT
TEST DRIVEN DEVELOPMENT
IF YOU WANT TO REFACTOR,
THE ESSENTIAL PRECONDITION
IS HAVING SOLID TESTS.
Martin Fowler
author of Refactoring: Improving the Design of Existing Code
TDD: WHAT IS IT?
▸ TDD is all about writing unit tests for your source code.
▸ When you write the failing test first and then make it pass
with source code you can be confident that the test is
really covering the piece of functionality that it should.
▸ Ideally you should avoid writing testless lines of code.
▸ Write the tests first, inventing the names of controllers,
services, and methods in your tests. Then generate them
(or create them by hand), and implement them in a way
that makes the tests pass.
LET THE TESTS DRIVE THE DEVELOPMENT (DUH)
WHY IS TDD SO AWESOME?
▸ Unit tests can expose runtime errors immediately after
every change of the code which helps to keep quality high
and prevent regression.
▸ Seeing a unit test fail, making a change in the source, and
seeing it pass helps show that the test is indeed checking
what it should.
▸ You don’t have to “go in after you’re done” and add in
unit tests.
▸ It encourages prolific refactoring with confidence.
TDD: YOU SHOULD LOVE IT
▸ You appreciate the importance of DELETING code.
TIPS FOR TDD & UNIT TESTING
▸ TDD is hard. Getting into the right mindset comes with practice.
▸ Try “Reverse TDD” (green-red-green-refactor) or “Transplant TDD”.
▸ Use mocks and spies. Check only one thing per test.
▸ Imagine testing each of your Angular objects in a black hole in
outer space separately from the rest of the application.
▸ Don’t worry about the UI details. Focus on testing the functions,
logic, and calculations of your source code.
▸ Focus on explicitly calling your “public methods” which in turn will
use the private methods to do it’s work.
THE HOLE IN PURE TDD
▸ You can sometimes find that it’s unclear “what test to write
next”.
▸ TDD Tests only that that software is free of errors but doesn’t
necessarily test that it provides real business value.
▸ It’s unclear how or when ui testing tools like Protractor fit
into the TDD development cycle.
▸ It says nothing about how to actually turn the requirements
into unit tests.
WHAT’S MISSING WITH TDD?
WOULDN’T IT BE NICE IF:
▸ we could save our requirements in source control also have them
accessible, readable, and easily understandable for all
stakeholders?
▸ the requirements were able to be run against our
codebase quickly and easily, recording which ones passed
and which ones failed?
▸ recordings could be visualized in a report similar to a
code coverage report but for show if our requirements
tests are passing?
IF ONLY WE HAD TDD FOR OUR REQUIREMENTS
YES!
IT IS A THING!
TERMS THAT ALL REALLY REFER TO THIS SAME IDEA:
▸ Specification by Example
▸ Behavior Driven Development
▸ Acceptance-Test Driven Development
▸ Agile Acceptance Testing
WHAT SHOULD WE CALL IT?
“SPECIFICATION BY
EXAMPLE IS TDD APPLIED TO
BUSINESS PROBLEMS”
Gojko Adzic
from Specification by Example
OK,
SHOW ME AN
EXAMPLE.
A SNIPPET OF GHERKIN CODE
GHERKIN
▸ Meant to be easily readable by non-programmers.
▸ Aids in building a common understanding of the requirements
between all parties and is accessible to non-programmers.
▸ Becomes incredibly nice as documentation and progress
reporting once the project begins.
▸ Meant to be written during a “Three Amigos” meeting.
Scenario: eat 5 out of 12
Given there are 12 cucumbers
When I eat 5 cucumbers
Then I should have 7 cucumbers
Scenario: Adding items to basket
Given I have no items in my shopping cart.
When I add 2 pumpkins
And remove two pumpkins
Then I should no items in my shopping cart.
FOR TEAMS PRACTICING BDD, THE
REQUIREMENTS AND THE EXECUTABLE
SPECIFICATIONS ARE THE SAME THING.
John Ferguson Smart
from BDD In Action
OK... BUT HOW IS AN
ENGLISH SENTENCE
“EXECUTED”?
A. STEP DEFINITIONS
STEP DEFINITIONS
▸ Uses a Given-When-Then syntax which separate the test logic into setup
code, action code, and assertion code, respectively..
▸ The Gherkin is mapped to a
step definition function that
uses a regex to match the
Gherkin text.
▸ These functions then
implement what the Gherkin
says should happen and
checks these business
requirements against the
source code.
MAPPING GHERKIN STEPS TO JAVASCRIPT FUNCTIONS
BUT HOW DOES ONE SIMPLY
“IMPLEMENT A STEP DEFINITION”

IN ANGULARJS?
UNDERSTANDING CUCUMBERJS
▸ Instead of running the acceptance tests through cucumber
itself, we can “cucumberize” or existing test runners.
▸ The most common JavaScript acceptance test running
framework is called, “Cucumber-JS”.
▸ Running CucumberJS itself might be fine for a NodeJS
project, but AngularJS testing requires special setup that
CucumberJS does not know how to do.
CUCUMBERIZING YOUR TEST RUNNERS
▸ For Karma I recommend, “karma-cucumber-js”: 

https://github.com/eugene-sea/karma-cucumber-js
▸ Karma and Protractor both know how to execute gherkin.
▸ Both have a “frameworks” option that gets changed
▸ For Protractor, check out “protractor-cucumber-framework”:

https://github.com/mattfritz/protractor-cucumber-framework
CUCUMBERIZING PROTRACTOR
Install the library via npm:
And then edit the framework parameter in your config block:
RUNNING CUCUMBERIZED PROTRACTOR TESTS
▸ You can also set up gulp / grunt tasks for acceptance tests.
▸ Tell Protractor to only
look for the files with
BDD suffixes
like .feature
or .step.js
▸ Run the Protractor executable and pass in your config file:
CUCUMBERIZING KARMA
‣ Notice that this project uses a slightly different syntax
from Protractor step definitions:
▸ I recommend “karma-cucumber-js” (by eugene-sea) and not
“karma-cucumberjs” (works with newer versions on cucumberjs).
WRITING KARMA STEP DEFINITIONS
▸ The Then is where you do the assertion that what you
expected to happen did happen.
▸ The Given is similar to your “beforeEach” regular unit
tests. It is where you can inject Angular objects and create
mocks.
▸ The When is where you do some action, in this case
normally calling a public method of some controller,
service, etc.
THE CUCUMBER “WORLD”
▸ Cucumber has the concept of a “World object” that is
somewhat of a global object for your acceptance tests.
▸ You can set frameworks like chai to the World object,
allowing you to use chai API in your step definitions.
▸ Depending on your cucumber framework it’s either an
object or a function that you can implement.
▸ It’s purpose is to allow you to define “utility properties”
that can be used in step definitions.
WHY YOU SHOULD ALSO STILL USE YOUR NON-
CUCUMBERIZED TEST RUNNERS
▸ If you’re worried about having two separate code coverage
reports, you can combine them with “Instanbul-combine”.
▸ Use cucumberized karma when you don’t need the
UI to test the BUSINESS CASE of the scenario.
▸ It’s important to be able to increase your code coverage
without needing to write “boring scenarios”.
TEXT
A CUCUMBER REPORT EXAMPLE
GOOD REPORTS ARE KEY TO SUCCESS
▸ Cucumber reports allow you to see the progress of the
application at any point in time.
▸ The reports should be seen as incredibly useful.
▸ Reports are all just-in-time generated (ideally from a
build server) giving everyone up-to-date reports
available at any time without the devs ever needing to
“write documentation”.
▸ Code coverage report lets you know what has’t been
covered by unit tests.


YOUR LIVING DOCUMENTATION!
▸ Great for the BAU team trying to understand your code.
THE MOST SUCCESSFUL TEAMS DISCOVERED
THE LONG-TERM BENEFIT ON
IMPLEMENTING SPECIFICATION BY EXAMPLE
COMES FROM LIVING DOCUMENTATION.
Gojko Adzic
from “Specification by Example”
A LOT OF PREPARATION GOES A LONG WAY
▸ But it’s worth it!
▸ Jenkins pipeline to run all of these tests, hosts the
reports, and deploy the final build.
▸ Creating a cucumberized Protractor config file.
▸ Creating a cucumberized Karma config file.
▸ Learning and understanding gherkin / step definitions.
CAN WE START YET?
▸ More complicated file globbing patterns.
TEXT
EXAMPLE OF A TRAVIS.YML FILE
BDD WITHOUT CUCUMBER
▸ Some downsides to not cucumberizing your runners
include:
▸ You can still practice some form of Behavior Driven
Development even without cucumberized test runners.
▸ You can still have “Three Amigos” conversations about the
requirements and even create Gherkin feature files without
executing them.
KEEP AN ACCEPTANCE TESTING MINDSET
1) You don’t get reports (ie living documentation).
2) You don’t know if your code passes or fails the scenarios.
3) You don’t have explicit step definition functions.
ADDITIONAL BENEFITS OF ACCEPTANCE TESTS
▸ Misunderstandings get thrashed out early.
▸ Better team communication and ubiquitous language.
▸ Requirements and code are always in sync
▸ Removes the manual testing bottleneck.
▸ JIT documentation for development and beyond.
IF YOU’RE STILL NOT CONVINCED
▸ It helps developers think more in the business domain 

than just falling back to computer science patterns.
BUT WE DON’T HAVE TIME FOR TESTING
▸ Remind him that with the all of the rework, regression, and
manual testing it could easily take longer to build the
project without tests.
▸ Remind the boss that this is a long-term project, and the
reports increase in value as the project ages.
▸ The 99% perfect rule: Nobody wants 99% perfect
software. If it’s not bug-free then it’s not really finished.
▸ Is it that your team doesn’t have time, or is it that they just
don’t know how and no one wants to pair program on it?
BUILD IT QUICKLY VS BUILD IT FOR LONGEVITY
HIGH QUALITY -> HIGH PERFORMANCE
PERFORMANCE TESTING
▸ Manual performance testing available through Chrome
dev tools, WebPageTest, Google Pagespeed…
▸ Command line utility “Benchpress” that can be used for
getting stats on and benchmarking any web application.
▸ In general, favor automated performance tests for the
same reasons we automate our other tests.
▸ You could even host your benchpress report(s) on every
build as part of your living documentation!
WHERE DO I PUT ALL OF THESE FILES?
▸ Avoid parallel directory structures
or you might find yourself with
“scrolling like mad syndrome”.
▸ It usually makes sense to work
on one component at a time,
and it’s nice to have all the
things relating to that
component in one place.
DIRECTORY DIVING
IT’S “LIVING” DOCUMENTATION, SET IT LIVE!
THE IMPORTANCE OF HOSTING YOUR REPORTS
▸ Without hosting your reports at a url for everyone to see,
no one on your team can see the reports!
▸ Reports should NOT be generated and hosted manually.
Generating the reports (by running the tests) and hosting
them should be steps in your CI pipeline.
▸ As a CEO or business leader, if you can create a culture
that highly values and utilizes these three types of reports,
everything else will* fall into place.
▸ Access to up-to-date reports for non-programmers is
CRITICAL for them to do their job properly.
GREAT BOOKS ON BDD / AUTOMATED ACCEPTANCE TESTING
UGAT
github.com/JimTheMan/AngularJS-UGAT
AN EXAMPLE PROJECT
OFFICIAL UGAT PROJECT: NG-NJ
THANKS!!
Send any questions to twitter.com/webWhizJim
(or just ask them right now!)

More Related Content

What's hot

AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
Chiew Carol
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
Adam Klein
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
 
Intro to Service Worker API and its use cases
Intro to Service Worker API and its use casesIntro to Service Worker API and its use cases
Intro to Service Worker API and its use cases
satejsahu
 
Front-End Testing: Demystified
Front-End Testing: DemystifiedFront-End Testing: Demystified
Front-End Testing: Demystified
Seth McLaughlin
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
Shailendra Chauhan
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
Mek Srunyu Stittri
 
Automated Testing using JavaScript
Automated Testing using JavaScriptAutomated Testing using JavaScript
Automated Testing using JavaScript
Simon Guest
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
Sriram Angajala
 
Protractor for angularJS
Protractor for angularJSProtractor for angularJS
Protractor for angularJS
Krishna Kumar
 
Angular Unit Testing from the Trenches
Angular Unit Testing from the TrenchesAngular Unit Testing from the Trenches
Angular Unit Testing from the Trenches
Justin James
 
Angular UI Testing with Protractor
Angular UI Testing with ProtractorAngular UI Testing with Protractor
Angular UI Testing with Protractor
Andrew Eisenberg
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
Seth McLaughlin
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
Troy Miles
 
Automated Smoke Tests with Protractor
Automated Smoke Tests with ProtractorAutomated Smoke Tests with Protractor
Automated Smoke Tests with Protractor
🌱 Dale Spoonemore
 
Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 
Protractor training
Protractor trainingProtractor training
Protractor training
Sergiy Stotskiy
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Yakov Fain
 
Automated Web Testing using JavaScript
Automated Web Testing using JavaScriptAutomated Web Testing using JavaScript
Automated Web Testing using JavaScript
Simon Guest
 
Angular Unit Test
Angular Unit TestAngular Unit Test
Angular Unit Test
Michael Haberman
 

What's hot (20)

AngularJS Unit Test
AngularJS Unit TestAngularJS Unit Test
AngularJS Unit Test
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
 
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
 
Intro to Service Worker API and its use cases
Intro to Service Worker API and its use casesIntro to Service Worker API and its use cases
Intro to Service Worker API and its use cases
 
Front-End Testing: Demystified
Front-End Testing: DemystifiedFront-End Testing: Demystified
Front-End Testing: Demystified
 
Angular Unit Testing
Angular Unit TestingAngular Unit Testing
Angular Unit Testing
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
 
Automated Testing using JavaScript
Automated Testing using JavaScriptAutomated Testing using JavaScript
Automated Testing using JavaScript
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
 
Protractor for angularJS
Protractor for angularJSProtractor for angularJS
Protractor for angularJS
 
Angular Unit Testing from the Trenches
Angular Unit Testing from the TrenchesAngular Unit Testing from the Trenches
Angular Unit Testing from the Trenches
 
Angular UI Testing with Protractor
Angular UI Testing with ProtractorAngular UI Testing with Protractor
Angular UI Testing with Protractor
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
Automated Smoke Tests with Protractor
Automated Smoke Tests with ProtractorAutomated Smoke Tests with Protractor
Automated Smoke Tests with Protractor
 
Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012
 
Protractor training
Protractor trainingProtractor training
Protractor training
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
 
Automated Web Testing using JavaScript
Automated Web Testing using JavaScriptAutomated Web Testing using JavaScript
Automated Web Testing using JavaScript
 
Angular Unit Test
Angular Unit TestAngular Unit Test
Angular Unit Test
 

Viewers also liked

Protractor: Tips & Tricks
Protractor: Tips & TricksProtractor: Tips & Tricks
Protractor: Tips & Tricks
Sergey Bolshchikov
 
Protractor
ProtractorProtractor
Protractor
kapilsethi9
 
Bring stories to life using BDD (Behaviour driven development)
Bring stories to life using BDD (Behaviour driven development)Bring stories to life using BDD (Behaviour driven development)
Bring stories to life using BDD (Behaviour driven development)
Srikanth Nutigattu
 
Presentation_Protractor
Presentation_ProtractorPresentation_Protractor
Presentation_Protractor
Umesh Randhe
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applications
Binary Studio
 
Cucumber.js: Cuke up your JavaScript!
Cucumber.js: Cuke up your JavaScript!Cucumber.js: Cuke up your JavaScript!
Cucumber.js: Cuke up your JavaScript!
Julien Biezemans
 
The LAZY Developer's Guide to BDD (with Cucumber)
The LAZY Developer's Guide to BDD (with Cucumber)The LAZY Developer's Guide to BDD (with Cucumber)
The LAZY Developer's Guide to BDD (with Cucumber)
Tze Yang Ng
 
Workshop - E2e tests with protractor
Workshop - E2e tests with protractorWorkshop - E2e tests with protractor
Workshop - E2e tests with protractor
Walmyr Lima e Silva Filho
 
Automated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and SeleniumAutomated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and Selenium
Dev9Com
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
Florian Fesseler
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
Jie-Wei Wu
 
Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"
Fwdays
 
ATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD ApproachATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD Approach
Agile Testing Alliance
 

Viewers also liked (13)

Protractor: Tips & Tricks
Protractor: Tips & TricksProtractor: Tips & Tricks
Protractor: Tips & Tricks
 
Protractor
ProtractorProtractor
Protractor
 
Bring stories to life using BDD (Behaviour driven development)
Bring stories to life using BDD (Behaviour driven development)Bring stories to life using BDD (Behaviour driven development)
Bring stories to life using BDD (Behaviour driven development)
 
Presentation_Protractor
Presentation_ProtractorPresentation_Protractor
Presentation_Protractor
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applications
 
Cucumber.js: Cuke up your JavaScript!
Cucumber.js: Cuke up your JavaScript!Cucumber.js: Cuke up your JavaScript!
Cucumber.js: Cuke up your JavaScript!
 
The LAZY Developer's Guide to BDD (with Cucumber)
The LAZY Developer's Guide to BDD (with Cucumber)The LAZY Developer's Guide to BDD (with Cucumber)
The LAZY Developer's Guide to BDD (with Cucumber)
 
Workshop - E2e tests with protractor
Workshop - E2e tests with protractorWorkshop - E2e tests with protractor
Workshop - E2e tests with protractor
 
Automated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and SeleniumAutomated Testing with Cucumber, PhantomJS and Selenium
Automated Testing with Cucumber, PhantomJS and Selenium
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"Сергей Больщиков "Protractor Tips & Tricks"
Сергей Больщиков "Protractor Tips & Tricks"
 
ATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD ApproachATAGTR2017 Protractor Cucumber BDD Approach
ATAGTR2017 Protractor Cucumber BDD Approach
 

Similar to Automated Testing in Angular Slides

Continuous Testing With React Storybook & WebdriverIO
Continuous Testing With React Storybook & WebdriverIOContinuous Testing With React Storybook & WebdriverIO
Continuous Testing With React Storybook & WebdriverIO
Josh Cypher
 
Writing useful automated tests for the single page applications you build
Writing useful automated tests for the single page applications you buildWriting useful automated tests for the single page applications you build
Writing useful automated tests for the single page applications you build
Andrei Sebastian Cîmpean
 
High Performance Software Engineering Teams
High Performance Software Engineering TeamsHigh Performance Software Engineering Teams
High Performance Software Engineering Teams
Lars Thorup
 
Continuous Delivery for Agile Teams
Continuous Delivery for Agile TeamsContinuous Delivery for Agile Teams
Continuous Delivery for Agile Teams
Mike Bowler
 
Beyond TDD: Enabling Your Team to Continuously Deliver Software
Beyond TDD: Enabling Your Team to Continuously Deliver SoftwareBeyond TDD: Enabling Your Team to Continuously Deliver Software
Beyond TDD: Enabling Your Team to Continuously Deliver Software
Chris Weldon
 
Devops for drupal
Devops for  drupalDevops for  drupal
Devops for drupal
Kris Buytaert
 
You only have to change on thing to do the DevOps, everything
You only have to change on thing to do the DevOps, everythingYou only have to change on thing to do the DevOps, everything
You only have to change on thing to do the DevOps, everything
Ken Mugrage
 
Quality Assurance: What is it and what are the Business Benefits?
Quality Assurance: What is it and what are the Business Benefits?Quality Assurance: What is it and what are the Business Benefits?
Quality Assurance: What is it and what are the Business Benefits?
Sparkhound Inc.
 
Quality Assurance - SQLSatBR presentation
Quality Assurance - SQLSatBR presentationQuality Assurance - SQLSatBR presentation
Quality Assurance - SQLSatBR presentation
Lyle Hutson
 
Quality assurance sql sat-br presentation
Quality assurance   sql sat-br presentationQuality assurance   sql sat-br presentation
Quality assurance sql sat-br presentation
Lyle Hutson
 
DeKnowledge - Try us
DeKnowledge - Try usDeKnowledge - Try us
DeKnowledge - Try us
Bob Pinto
 
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
Applitools
 
Intro to DevOps
Intro to DevOpsIntro to DevOps
Intro to DevOps
Ernest Mueller
 
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
flufftailshop
 
Don't hate, automate. lessons learned from implementing continuous delivery
Don't hate, automate. lessons learned from implementing continuous deliveryDon't hate, automate. lessons learned from implementing continuous delivery
Don't hate, automate. lessons learned from implementing continuous delivery
Solano Labs
 
Tasting Your First Test Burger
Tasting Your First Test BurgerTasting Your First Test Burger
Tasting Your First Test Burger
Tautrimas Pajarskas
 
TestDrivenDeveloment
TestDrivenDevelomentTestDrivenDeveloment
TestDrivenDeveloment
Antonio Tapper
 
Dream QA: Designing the QA team where we'd love to work
Dream QA: Designing the QA team where we'd love to workDream QA: Designing the QA team where we'd love to work
Dream QA: Designing the QA team where we'd love to work
Manuel de la Peña Peña
 
Lets cook cucumber !!
Lets cook cucumber !!Lets cook cucumber !!
Lets cook cucumber !!
vodQA
 
Unit testing
Unit testingUnit testing
Unit testing
PiXeL16
 

Similar to Automated Testing in Angular Slides (20)

Continuous Testing With React Storybook & WebdriverIO
Continuous Testing With React Storybook & WebdriverIOContinuous Testing With React Storybook & WebdriverIO
Continuous Testing With React Storybook & WebdriverIO
 
Writing useful automated tests for the single page applications you build
Writing useful automated tests for the single page applications you buildWriting useful automated tests for the single page applications you build
Writing useful automated tests for the single page applications you build
 
High Performance Software Engineering Teams
High Performance Software Engineering TeamsHigh Performance Software Engineering Teams
High Performance Software Engineering Teams
 
Continuous Delivery for Agile Teams
Continuous Delivery for Agile TeamsContinuous Delivery for Agile Teams
Continuous Delivery for Agile Teams
 
Beyond TDD: Enabling Your Team to Continuously Deliver Software
Beyond TDD: Enabling Your Team to Continuously Deliver SoftwareBeyond TDD: Enabling Your Team to Continuously Deliver Software
Beyond TDD: Enabling Your Team to Continuously Deliver Software
 
Devops for drupal
Devops for  drupalDevops for  drupal
Devops for drupal
 
You only have to change on thing to do the DevOps, everything
You only have to change on thing to do the DevOps, everythingYou only have to change on thing to do the DevOps, everything
You only have to change on thing to do the DevOps, everything
 
Quality Assurance: What is it and what are the Business Benefits?
Quality Assurance: What is it and what are the Business Benefits?Quality Assurance: What is it and what are the Business Benefits?
Quality Assurance: What is it and what are the Business Benefits?
 
Quality Assurance - SQLSatBR presentation
Quality Assurance - SQLSatBR presentationQuality Assurance - SQLSatBR presentation
Quality Assurance - SQLSatBR presentation
 
Quality assurance sql sat-br presentation
Quality assurance   sql sat-br presentationQuality assurance   sql sat-br presentation
Quality assurance sql sat-br presentation
 
DeKnowledge - Try us
DeKnowledge - Try usDeKnowledge - Try us
DeKnowledge - Try us
 
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
Testing Hourglass at Jira Frontend - by Alexey Shpakov, Sr. Developer @ Atlas...
 
Intro to DevOps
Intro to DevOpsIntro to DevOps
Intro to DevOps
 
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
A Comprehensive Guide to Conducting Test Automation Using Appium & Cucumber o...
 
Don't hate, automate. lessons learned from implementing continuous delivery
Don't hate, automate. lessons learned from implementing continuous deliveryDon't hate, automate. lessons learned from implementing continuous delivery
Don't hate, automate. lessons learned from implementing continuous delivery
 
Tasting Your First Test Burger
Tasting Your First Test BurgerTasting Your First Test Burger
Tasting Your First Test Burger
 
TestDrivenDeveloment
TestDrivenDevelomentTestDrivenDeveloment
TestDrivenDeveloment
 
Dream QA: Designing the QA team where we'd love to work
Dream QA: Designing the QA team where we'd love to workDream QA: Designing the QA team where we'd love to work
Dream QA: Designing the QA team where we'd love to work
 
Lets cook cucumber !!
Lets cook cucumber !!Lets cook cucumber !!
Lets cook cucumber !!
 
Unit testing
Unit testingUnit testing
Unit testing
 

More from Jim Lynch

Learning Rust By Building Small CLI Tools!.pdf
Learning Rust By Building Small CLI Tools!.pdfLearning Rust By Building Small CLI Tools!.pdf
Learning Rust By Building Small CLI Tools!.pdf
Jim Lynch
 
Intro To Serverless ClojureScript
Intro To Serverless ClojureScriptIntro To Serverless ClojureScript
Intro To Serverless ClojureScript
Jim Lynch
 
10 Tips For Serverless Backends With NodeJS and AWS Lambda
10 Tips For Serverless Backends With NodeJS and AWS Lambda10 Tips For Serverless Backends With NodeJS and AWS Lambda
10 Tips For Serverless Backends With NodeJS and AWS Lambda
Jim Lynch
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
Jim Lynch
 
Describe's Full of It's
Describe's Full of It'sDescribe's Full of It's
Describe's Full of It's
Jim Lynch
 
Intro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJSIntro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJS
Jim Lynch
 

More from Jim Lynch (6)

Learning Rust By Building Small CLI Tools!.pdf
Learning Rust By Building Small CLI Tools!.pdfLearning Rust By Building Small CLI Tools!.pdf
Learning Rust By Building Small CLI Tools!.pdf
 
Intro To Serverless ClojureScript
Intro To Serverless ClojureScriptIntro To Serverless ClojureScript
Intro To Serverless ClojureScript
 
10 Tips For Serverless Backends With NodeJS and AWS Lambda
10 Tips For Serverless Backends With NodeJS and AWS Lambda10 Tips For Serverless Backends With NodeJS and AWS Lambda
10 Tips For Serverless Backends With NodeJS and AWS Lambda
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
Describe's Full of It's
Describe's Full of It'sDescribe's Full of It's
Describe's Full of It's
 
Intro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJSIntro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJS
 

Recently uploaded

openshift technical overview - Flow of openshift containerisatoin
openshift technical overview - Flow of openshift containerisatoinopenshift technical overview - Flow of openshift containerisatoin
openshift technical overview - Flow of openshift containerisatoin
snaprevwdev
 
Flow Through Pipe: the analysis of fluid flow within pipes
Flow Through Pipe:  the analysis of fluid flow within pipesFlow Through Pipe:  the analysis of fluid flow within pipes
Flow Through Pipe: the analysis of fluid flow within pipes
Indrajeet sahu
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
nedcocy
 
Object Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOADObject Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOAD
PreethaV16
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
Atif Razi
 
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
PriyankaKilaniya
 
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
nonods
 
Ericsson LTE Throughput Troubleshooting Techniques.ppt
Ericsson LTE Throughput Troubleshooting Techniques.pptEricsson LTE Throughput Troubleshooting Techniques.ppt
Ericsson LTE Throughput Troubleshooting Techniques.ppt
wafawafa52
 
SELENIUM CONF -PALLAVI SHARMA - 2024.pdf
SELENIUM CONF -PALLAVI SHARMA - 2024.pdfSELENIUM CONF -PALLAVI SHARMA - 2024.pdf
SELENIUM CONF -PALLAVI SHARMA - 2024.pdf
Pallavi Sharma
 
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
DharmaBanothu
 
Blood finder application project report (1).pdf
Blood finder application project report (1).pdfBlood finder application project report (1).pdf
Blood finder application project report (1).pdf
Kamal Acharya
 
Literature review for prompt engineering of ChatGPT.pptx
Literature review for prompt engineering of ChatGPT.pptxLiterature review for prompt engineering of ChatGPT.pptx
Literature review for prompt engineering of ChatGPT.pptx
LokerXu2
 
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
IJCNCJournal
 
paper relate Chozhavendhan et al. 2020.pdf
paper relate Chozhavendhan et al. 2020.pdfpaper relate Chozhavendhan et al. 2020.pdf
paper relate Chozhavendhan et al. 2020.pdf
ShurooqTaib
 
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdfFUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
EMERSON EDUARDO RODRIGUES
 
Advancements in Automobile Engineering for Sustainable Development.pdf
Advancements in Automobile Engineering for Sustainable Development.pdfAdvancements in Automobile Engineering for Sustainable Development.pdf
Advancements in Automobile Engineering for Sustainable Development.pdf
JaveedKhan59
 
Lateral load-resisting systems in buildings.pptx
Lateral load-resisting systems in buildings.pptxLateral load-resisting systems in buildings.pptx
Lateral load-resisting systems in buildings.pptx
DebendraDevKhanal1
 
Impartiality as per ISO /IEC 17025:2017 Standard
Impartiality as per ISO /IEC 17025:2017 StandardImpartiality as per ISO /IEC 17025:2017 Standard
Impartiality as per ISO /IEC 17025:2017 Standard
MuhammadJazib15
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
uqyfuc
 
SMT process how to making and defects finding
SMT process how to making and defects findingSMT process how to making and defects finding
SMT process how to making and defects finding
rameshqapcba
 

Recently uploaded (20)

openshift technical overview - Flow of openshift containerisatoin
openshift technical overview - Flow of openshift containerisatoinopenshift technical overview - Flow of openshift containerisatoin
openshift technical overview - Flow of openshift containerisatoin
 
Flow Through Pipe: the analysis of fluid flow within pipes
Flow Through Pipe:  the analysis of fluid flow within pipesFlow Through Pipe:  the analysis of fluid flow within pipes
Flow Through Pipe: the analysis of fluid flow within pipes
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
 
Object Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOADObject Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOAD
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
 
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
Prediction of Electrical Energy Efficiency Using Information on Consumer's Ac...
 
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
一比一原版(psu学位证书)美国匹兹堡州立大学毕业证如何办理
 
Ericsson LTE Throughput Troubleshooting Techniques.ppt
Ericsson LTE Throughput Troubleshooting Techniques.pptEricsson LTE Throughput Troubleshooting Techniques.ppt
Ericsson LTE Throughput Troubleshooting Techniques.ppt
 
SELENIUM CONF -PALLAVI SHARMA - 2024.pdf
SELENIUM CONF -PALLAVI SHARMA - 2024.pdfSELENIUM CONF -PALLAVI SHARMA - 2024.pdf
SELENIUM CONF -PALLAVI SHARMA - 2024.pdf
 
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
An In-Depth Exploration of Natural Language Processing: Evolution, Applicatio...
 
Blood finder application project report (1).pdf
Blood finder application project report (1).pdfBlood finder application project report (1).pdf
Blood finder application project report (1).pdf
 
Literature review for prompt engineering of ChatGPT.pptx
Literature review for prompt engineering of ChatGPT.pptxLiterature review for prompt engineering of ChatGPT.pptx
Literature review for prompt engineering of ChatGPT.pptx
 
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
Particle Swarm Optimization–Long Short-Term Memory based Channel Estimation w...
 
paper relate Chozhavendhan et al. 2020.pdf
paper relate Chozhavendhan et al. 2020.pdfpaper relate Chozhavendhan et al. 2020.pdf
paper relate Chozhavendhan et al. 2020.pdf
 
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdfFUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
FUNDAMENTALS OF MECHANICAL ENGINEERING.pdf
 
Advancements in Automobile Engineering for Sustainable Development.pdf
Advancements in Automobile Engineering for Sustainable Development.pdfAdvancements in Automobile Engineering for Sustainable Development.pdf
Advancements in Automobile Engineering for Sustainable Development.pdf
 
Lateral load-resisting systems in buildings.pptx
Lateral load-resisting systems in buildings.pptxLateral load-resisting systems in buildings.pptx
Lateral load-resisting systems in buildings.pptx
 
Impartiality as per ISO /IEC 17025:2017 Standard
Impartiality as per ISO /IEC 17025:2017 StandardImpartiality as per ISO /IEC 17025:2017 Standard
Impartiality as per ISO /IEC 17025:2017 Standard
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
SMT process how to making and defects finding
SMT process how to making and defects findingSMT process how to making and defects finding
SMT process how to making and defects finding
 

Automated Testing in Angular Slides

  • 1. AUTOMATED TESTING IN ANGULARJS WITH JIM LYNCH AUGUST 2016
  • 2. OVERVIEW ▸ Why write tests? ▸ UI / E2e Testing ▸ Unit Testing & TDD ▸ Acceptance Testing
  • 3. WHY USE AUTOMATED TESTING AT ALL? IF YOU DON’T HAVE AUTOMATED TESTS… ▸ Refactoring becomes dangerous since you can break something and not be alerted of it. ▸ The team must rely on heavily on manual testing to ensure quality which is expensive and lengthens each iteration. ▸ Anyone reading your code has nothing to help him or her understand the code besides that source code itself. ▸ Every push to production leaves you with fear and worry in the back of your mind that something might go wrong.
  • 4. “OUR HIGHEST PRIORITY IS TO SATISFY THE CUSTOMER WITH EARLY AND CONTINUOUS DELIVERY OF VALUABLE SOFTWARE” #1 Principle of Agile Manifesto 12 Principles IT ALL COMES BACK TO THIS
  • 5. MANUAL TESTING ▸ Can you think of a manual test that can’t be automated? ▸ Manual Testing is the Devil! ▸ Quickly becomes expensive, error prone, time consuming… ▸ Don’t rely only on “____ serve” for development because then you need to test manually! ▸ Used only for exploratory / usability testing and should NOT be a step in the deployment process. AVOID IT!
  • 7. SETTING UP PROTRACTOR ‣ Create a config file: ‣ You might also need to update webdriver-manager: ‣ Install the library: ‣ And then run it:
  • 8. AN EXAMPLE OF A PROTRACTOR TEST
  • 9. PAGE OBJECTS ▸ These are the mysterious .po.js files. ▸ They allow you to separate the DOM selection code from the core test logic. ▸ Existed way before Protractor was even a thing. Tons of info has been written on the web about page objects. ▸ Example: KEEP YOUR UI TESTS MAINTAINABLE!
  • 10. PROTRACTOR IS AWESOME! ▸ Test on virtually any browser via Sauce Labs! ▸ Allows you to control Selenium WebDriver with friendly, JavaScript API. ▸ Tip: Start with functional testing of user interactions and flow through the app. ▸ Keep it real! Instead of mocking backend services, just run your tests on the real app and call it e2e testing too! WE ARE SO LUCKY.
  • 11. TEST ON ALL THE BROWSERS WITH SAUCE LABS! ALL THE THINGS!
  • 12. PROTRACTOR REPORTS Install the package: And then add this to your protractor config file exports.config object: Then on every run you’ll get a generated report with screenshots! FOR WHEN YOU CARE WHAT ACTUALLY HAPPENED
  • 13. KARMA
  • 14. SETTING UP KARMA Install Karma: Install any plugins you’ll need: Create a config file: And run it like this:
  • 15. AN EXAMPLE OF A UNIT TEST
  • 18. IF YOU WANT TO REFACTOR, THE ESSENTIAL PRECONDITION IS HAVING SOLID TESTS. Martin Fowler author of Refactoring: Improving the Design of Existing Code
  • 19. TDD: WHAT IS IT? ▸ TDD is all about writing unit tests for your source code. ▸ When you write the failing test first and then make it pass with source code you can be confident that the test is really covering the piece of functionality that it should. ▸ Ideally you should avoid writing testless lines of code. ▸ Write the tests first, inventing the names of controllers, services, and methods in your tests. Then generate them (or create them by hand), and implement them in a way that makes the tests pass. LET THE TESTS DRIVE THE DEVELOPMENT (DUH)
  • 20. WHY IS TDD SO AWESOME? ▸ Unit tests can expose runtime errors immediately after every change of the code which helps to keep quality high and prevent regression. ▸ Seeing a unit test fail, making a change in the source, and seeing it pass helps show that the test is indeed checking what it should. ▸ You don’t have to “go in after you’re done” and add in unit tests. ▸ It encourages prolific refactoring with confidence. TDD: YOU SHOULD LOVE IT ▸ You appreciate the importance of DELETING code.
  • 21. TIPS FOR TDD & UNIT TESTING ▸ TDD is hard. Getting into the right mindset comes with practice. ▸ Try “Reverse TDD” (green-red-green-refactor) or “Transplant TDD”. ▸ Use mocks and spies. Check only one thing per test. ▸ Imagine testing each of your Angular objects in a black hole in outer space separately from the rest of the application. ▸ Don’t worry about the UI details. Focus on testing the functions, logic, and calculations of your source code. ▸ Focus on explicitly calling your “public methods” which in turn will use the private methods to do it’s work.
  • 22. THE HOLE IN PURE TDD ▸ You can sometimes find that it’s unclear “what test to write next”. ▸ TDD Tests only that that software is free of errors but doesn’t necessarily test that it provides real business value. ▸ It’s unclear how or when ui testing tools like Protractor fit into the TDD development cycle. ▸ It says nothing about how to actually turn the requirements into unit tests. WHAT’S MISSING WITH TDD?
  • 23. WOULDN’T IT BE NICE IF: ▸ we could save our requirements in source control also have them accessible, readable, and easily understandable for all stakeholders? ▸ the requirements were able to be run against our codebase quickly and easily, recording which ones passed and which ones failed? ▸ recordings could be visualized in a report similar to a code coverage report but for show if our requirements tests are passing? IF ONLY WE HAD TDD FOR OUR REQUIREMENTS
  • 24. YES! IT IS A THING!
  • 25. TERMS THAT ALL REALLY REFER TO THIS SAME IDEA: ▸ Specification by Example ▸ Behavior Driven Development ▸ Acceptance-Test Driven Development ▸ Agile Acceptance Testing WHAT SHOULD WE CALL IT?
  • 26. “SPECIFICATION BY EXAMPLE IS TDD APPLIED TO BUSINESS PROBLEMS” Gojko Adzic from Specification by Example
  • 28. A SNIPPET OF GHERKIN CODE
  • 29. GHERKIN ▸ Meant to be easily readable by non-programmers. ▸ Aids in building a common understanding of the requirements between all parties and is accessible to non-programmers. ▸ Becomes incredibly nice as documentation and progress reporting once the project begins. ▸ Meant to be written during a “Three Amigos” meeting.
  • 30. Scenario: eat 5 out of 12 Given there are 12 cucumbers When I eat 5 cucumbers Then I should have 7 cucumbers
  • 31. Scenario: Adding items to basket Given I have no items in my shopping cart. When I add 2 pumpkins And remove two pumpkins Then I should no items in my shopping cart.
  • 32. FOR TEAMS PRACTICING BDD, THE REQUIREMENTS AND THE EXECUTABLE SPECIFICATIONS ARE THE SAME THING. John Ferguson Smart from BDD In Action
  • 33. OK... BUT HOW IS AN ENGLISH SENTENCE “EXECUTED”? A. STEP DEFINITIONS
  • 34. STEP DEFINITIONS ▸ Uses a Given-When-Then syntax which separate the test logic into setup code, action code, and assertion code, respectively.. ▸ The Gherkin is mapped to a step definition function that uses a regex to match the Gherkin text. ▸ These functions then implement what the Gherkin says should happen and checks these business requirements against the source code. MAPPING GHERKIN STEPS TO JAVASCRIPT FUNCTIONS
  • 35. BUT HOW DOES ONE SIMPLY “IMPLEMENT A STEP DEFINITION”
 IN ANGULARJS?
  • 36. UNDERSTANDING CUCUMBERJS ▸ Instead of running the acceptance tests through cucumber itself, we can “cucumberize” or existing test runners. ▸ The most common JavaScript acceptance test running framework is called, “Cucumber-JS”. ▸ Running CucumberJS itself might be fine for a NodeJS project, but AngularJS testing requires special setup that CucumberJS does not know how to do.
  • 37. CUCUMBERIZING YOUR TEST RUNNERS ▸ For Karma I recommend, “karma-cucumber-js”: 
 https://github.com/eugene-sea/karma-cucumber-js ▸ Karma and Protractor both know how to execute gherkin. ▸ Both have a “frameworks” option that gets changed ▸ For Protractor, check out “protractor-cucumber-framework”:
 https://github.com/mattfritz/protractor-cucumber-framework
  • 38. CUCUMBERIZING PROTRACTOR Install the library via npm: And then edit the framework parameter in your config block:
  • 39. RUNNING CUCUMBERIZED PROTRACTOR TESTS ▸ You can also set up gulp / grunt tasks for acceptance tests. ▸ Tell Protractor to only look for the files with BDD suffixes like .feature or .step.js ▸ Run the Protractor executable and pass in your config file:
  • 40. CUCUMBERIZING KARMA ‣ Notice that this project uses a slightly different syntax from Protractor step definitions: ▸ I recommend “karma-cucumber-js” (by eugene-sea) and not “karma-cucumberjs” (works with newer versions on cucumberjs).
  • 41. WRITING KARMA STEP DEFINITIONS ▸ The Then is where you do the assertion that what you expected to happen did happen. ▸ The Given is similar to your “beforeEach” regular unit tests. It is where you can inject Angular objects and create mocks. ▸ The When is where you do some action, in this case normally calling a public method of some controller, service, etc.
  • 42. THE CUCUMBER “WORLD” ▸ Cucumber has the concept of a “World object” that is somewhat of a global object for your acceptance tests. ▸ You can set frameworks like chai to the World object, allowing you to use chai API in your step definitions. ▸ Depending on your cucumber framework it’s either an object or a function that you can implement. ▸ It’s purpose is to allow you to define “utility properties” that can be used in step definitions.
  • 43. WHY YOU SHOULD ALSO STILL USE YOUR NON- CUCUMBERIZED TEST RUNNERS ▸ If you’re worried about having two separate code coverage reports, you can combine them with “Instanbul-combine”. ▸ Use cucumberized karma when you don’t need the UI to test the BUSINESS CASE of the scenario. ▸ It’s important to be able to increase your code coverage without needing to write “boring scenarios”.
  • 45. GOOD REPORTS ARE KEY TO SUCCESS ▸ Cucumber reports allow you to see the progress of the application at any point in time. ▸ The reports should be seen as incredibly useful. ▸ Reports are all just-in-time generated (ideally from a build server) giving everyone up-to-date reports available at any time without the devs ever needing to “write documentation”. ▸ Code coverage report lets you know what has’t been covered by unit tests. 
 YOUR LIVING DOCUMENTATION! ▸ Great for the BAU team trying to understand your code.
  • 46. THE MOST SUCCESSFUL TEAMS DISCOVERED THE LONG-TERM BENEFIT ON IMPLEMENTING SPECIFICATION BY EXAMPLE COMES FROM LIVING DOCUMENTATION. Gojko Adzic from “Specification by Example”
  • 47. A LOT OF PREPARATION GOES A LONG WAY ▸ But it’s worth it! ▸ Jenkins pipeline to run all of these tests, hosts the reports, and deploy the final build. ▸ Creating a cucumberized Protractor config file. ▸ Creating a cucumberized Karma config file. ▸ Learning and understanding gherkin / step definitions. CAN WE START YET? ▸ More complicated file globbing patterns.
  • 48. TEXT EXAMPLE OF A TRAVIS.YML FILE
  • 49. BDD WITHOUT CUCUMBER ▸ Some downsides to not cucumberizing your runners include: ▸ You can still practice some form of Behavior Driven Development even without cucumberized test runners. ▸ You can still have “Three Amigos” conversations about the requirements and even create Gherkin feature files without executing them. KEEP AN ACCEPTANCE TESTING MINDSET 1) You don’t get reports (ie living documentation). 2) You don’t know if your code passes or fails the scenarios. 3) You don’t have explicit step definition functions.
  • 50. ADDITIONAL BENEFITS OF ACCEPTANCE TESTS ▸ Misunderstandings get thrashed out early. ▸ Better team communication and ubiquitous language. ▸ Requirements and code are always in sync ▸ Removes the manual testing bottleneck. ▸ JIT documentation for development and beyond. IF YOU’RE STILL NOT CONVINCED ▸ It helps developers think more in the business domain 
 than just falling back to computer science patterns.
  • 51. BUT WE DON’T HAVE TIME FOR TESTING ▸ Remind him that with the all of the rework, regression, and manual testing it could easily take longer to build the project without tests. ▸ Remind the boss that this is a long-term project, and the reports increase in value as the project ages. ▸ The 99% perfect rule: Nobody wants 99% perfect software. If it’s not bug-free then it’s not really finished. ▸ Is it that your team doesn’t have time, or is it that they just don’t know how and no one wants to pair program on it? BUILD IT QUICKLY VS BUILD IT FOR LONGEVITY
  • 52. HIGH QUALITY -> HIGH PERFORMANCE PERFORMANCE TESTING ▸ Manual performance testing available through Chrome dev tools, WebPageTest, Google Pagespeed… ▸ Command line utility “Benchpress” that can be used for getting stats on and benchmarking any web application. ▸ In general, favor automated performance tests for the same reasons we automate our other tests. ▸ You could even host your benchpress report(s) on every build as part of your living documentation!
  • 53. WHERE DO I PUT ALL OF THESE FILES? ▸ Avoid parallel directory structures or you might find yourself with “scrolling like mad syndrome”. ▸ It usually makes sense to work on one component at a time, and it’s nice to have all the things relating to that component in one place. DIRECTORY DIVING
  • 54. IT’S “LIVING” DOCUMENTATION, SET IT LIVE! THE IMPORTANCE OF HOSTING YOUR REPORTS ▸ Without hosting your reports at a url for everyone to see, no one on your team can see the reports! ▸ Reports should NOT be generated and hosted manually. Generating the reports (by running the tests) and hosting them should be steps in your CI pipeline. ▸ As a CEO or business leader, if you can create a culture that highly values and utilizes these three types of reports, everything else will* fall into place. ▸ Access to up-to-date reports for non-programmers is CRITICAL for them to do their job properly.
  • 55. GREAT BOOKS ON BDD / AUTOMATED ACCEPTANCE TESTING
  • 57. AN EXAMPLE PROJECT OFFICIAL UGAT PROJECT: NG-NJ
  • 58. THANKS!! Send any questions to twitter.com/webWhizJim (or just ask them right now!)