Copyright © 2015 Packt Publishing
Contents
AngularJS Test-driven Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Introduction to Test-driven Development
An overview of TDD
Fundamentals of TDD
Measuring success
Breaking down the steps
Measure twice cut once
Diving in
Setting up the test
Creating a development to-do list
Test first
Making it run
Making it better
Testing techniques
Testing with a framework
Testing doubles with Jasmine spies
Stubbing a return value
Testing arguments
Refactoring
Building with a builder
Self-test questions
Summary
2. The Karma Way
JavaScript testing tools
Karma
Protractor
JavaScript testing frameworks
Jasmine
Selenium
Mocha
Birth of Karma
The Karma difference
Importance of combining Karma with AngularJS
Installing Karma
Installation prerequisites
Configuring Karma
Customizing Karma’s configuration
Confirming Karma’s installation and configuration
Common installation/configuration issues
Testing with Karma
Confirming the Karma installation
Using Karma with AngularJS
Getting AngularJS
Bower
Bower installation
Installing AngularJS
Installing Angular mocks
Initializing Karma
Testing with AngularJS and Karma
A development to-do list
Testing a list of items
Test first
Assemble, Act, and Assert (3 A’s)
Make it run
Make it better
Adding a function to the controller
Test first
Assemble, Act, and Assert (3 A’s)
Make it run
Make it better
Self-test questions
Summary
3. End-to-end Testing with Protractor
An overview of Protractor
Origins of Protractor
End of life
The birth of Protractor
Life without Protractor
Protractor installation
Installation prerequisites
Installing Protractor
Installing WebDriver for Chrome
Customizing configuration
Confirming installation and configuration
Common installation/configuration issues
Hello Protractor
TDD end-to-end
The pre-setup
The setup
Test first
Installing the test web server
Configuring Protractor
Getting down to business
Specification
The development to-do list
Test first
Assemble, Act, Assert (3 A’s)
Running the test
Make it run
Make it better
Cleaning up the gaps
Async magic
Loading a page before test execution
Assertion on elements that get loaded in promises
TDD with Protractor
Self-test questions
Summary
4. The First Step
Preparing the application’s specification
Setting up the project
Setting up the directory
Setting up Protractor
Setting up Karma
Setting up http-server
Top-down or bottom-up approach
Testing a controller
A simple controller test setup
Initializing the scope
Bring on the comments
Test first
Assemble
Act
Assert
Make it run
Adding the module
Adding the input
Controller
Make it pass
Make it better
Implementing the Submit button
Configuring Karma
Test first
Assemble
Act
Assert
Make it run
Make it better
Back up the test chain
Bind the input
Onwards and upwards
Test first
Assemble
Act
Assert
Make it run
Fixing the unit tests
Make it better
Coupling of the test
Self-test questions
Summary
5. Flip Flop
Fundamentals
Protractor locators
CSS locators
Button and link locators
Angular locators
URL location references
Creating a new project
Setting up headless browser testing for Karma
Preconfiguration
Configuration
Walk-through of Angular routes
Setting up AngularJS routes
Defining directions
Configuring ngRoute
Defining the route controllers
Defining the route views
Assembling the flip flop test
Making the views flip
Asserting a flip
Making flip flop run
Making flip flop better
Searching the TDD way
Deciding on the approach
Walk-through of search query
The search query test
The search query HTML page
The search application
Show me some results!
Creating the search result routes
Testing the search results
Assembling the search result test
Selecting a search result
Confirming a search result
Making the search result test run
Creating a location-aware test
Making the search result better
Confirming the route ID
Setting up the route ID unit test
Confirming the ID
Making the route parameter’s test run
Self-test questions
Summary
6. Telling the World
Before the plunge
Karma configuration
File watching
Using a bottom-up approach
Services
Publishing and subscribing messages
Emitting
Testing emit
Testing broadcast
Testing broadcast
Publishing and subscribing – the good and bad
The good
Communicating through events
Reducing coupling
Harnessing the power of events
The plan
Rebranding
Seeing recently viewed items
Test first
Assembling SearchController
Selecting a product
Expecting events to be published
Making the search controller run
Recently viewed unit test
Test first
Assembling RecentlyViewedController
Invoking a recently viewed item
Confirming RecentlyViewedController
Making RecentlyViewedController run
End-to-end testing
Test first
Assembling the recently viewed end-to-end test
Selecting a search result
Confirming recently viewed items
Making the recentlyViewedItems test pass
Making recently viewed items better
Creating a product cart
Publisher test first
Assembling searchDetailController
Invoking the saving of a product
Confirming the save event
Making the saveProduct test pass
Test for the subscriber first
Assembling the product cart test
Invoking a saved cart event
Confirming the saved cart
Making the cart controller test run
End-to-end testing
Assembling the cart’s end-to-end test
Invoking a save to cart action
Confirming products have been saved
Making the cart’s end-to-end test pass
Self-test questions
Summary
7. Give Me Some Data
REST – the language of the Web
Getting started with REST
Testing asynchronous calls
Creating asynchronous calls in Karma
Creating asynchronous calls in Protractor
Making REST requests using AngularJS
Testing with AngularJS REST
Testing the product service
Testing $http with Karma
Mocking requests with Protractor
Displaying products with REST
Unit testing product requests
Setting up the project
Karma configuration
Using an API builder pattern
The product data service
The product data controller
Assembling the product controller test
Getting products
Asserting product data results
Making the product data tests run
Testing middle-to-end
Test first
Assembling the product test
Getting products
Expecting product data results
Making the product data run
Testing end-to-end
Getting the product data
Self-test questions
Summary
A. Integrating Selenium Server with Protractor
Installation
Protractor configuration
Running Selenium
Let it run
Test first
Assemble
Assert
Make it run
Summary
B. Automating Karma Unit Testing on Commit
GitHub
Test setup
Test scripts
Setting the hook
Creating the hook
Adding a Travis configuration file
References
C. Answers
Chapter 1, Introduction to Test-driven Development
Chapter 2, The Karma Way
Chapter 3, End-to-end Testing with Protractor
Chapter 4, The First Step
Chapter 5, Flip Flop
Chapter 6, Telling the World
Chapter 7, Give Me Some Data
Index
Preface
The book will provide the reader with a complete guide to the test-driven development (TDD) approach for AngularJS. It will provide step-by-step, clear examples to continually reinforce TDD best practices. The book will look at both unit testing with Karma and endto-end testing with Protractor. It will not only focus on how to use the tools, but also on understanding the reason they were built, and why they should be used. Throughout, there will be focus on when, where, and how to use these tools, constantly reinforcing the principles of the TDD life cycle (test, execute, refactor).
What this book covers
This book is basically split into two parts. The initial chapters focus on the TDD life cycle, and how Karma and Protractor fit into the life cycle and development of an AngularJS application. As we proceed, you’ll get a step-by-step approach to AngularJS TDD using Karma and Protractor. Each of the chapters builds up on the previous one and introduces how to test several different AngularJS components.
Chapter 1, Introduction to Test-driven Development, is an introduction to the concepts of TDD and testing techniques.
Chapter 2, The Karma Way, explores the origins of Karma and why it is an essential tool for any AngularJS project.
Chapter 3, End-to-end Testing with Protractor, introduces the simplicity of Protractor, an end-to-end testing tool built specifically for AngularJS.
Chapter 4, The First Steps, covers the TDD journey and shows the fundamentals and tools in action.
Chapter 5, Flip Flop, expands to include testing for multiple controllers, partial views, location references, CSS, and HTML element building on the initial foundational aspects learned in the previous chapter.
Chapter 6, Telling the World, dives into communicating across controllers, and testing services and broadcasting.
Chapter 7, Give Me Some Data, dives into how to apply several of the concepts shown previously, and extend them to pull data using an external API.
Appendix A, Integrating Selenium Server with Protractor, walks through setting up and configuring Protractor to use a standalone Selenium server.
Appendix B, Automating Karma Unit Testing on Commit, covers how to set up Travis CI, a platform for continuous integration, and setting up Karma to test your application.
Who this book is for
This book is for the developer who wants to go beyond the basic tutorials, and wants to take the plunge into AngularJS development. This book is for the developer who has experience with AngularJS and has walked through the basic tutorials but wants to understand the wider context of when, why, and how to apply testing techniques and best practices to create quality-clean code. To get the most out of this book, it is preferred that the reader has basic understanding of HTML, JavaScript, and AngularJS.
Chapter 1. Introduction to Test-driven Development
AngularJS is at the forefront of client-side JavaScript testing. Every AngularJS tutorial includes an accompanying test, and event test modules are part of the core AngularJS package. The Angular team is focused on making testing fundamental to web development.
This chapter introduces you to the fundamentals of test-driven development with AngularJS including:
An overview of TDD
TDD is not used only to develop software. The fundamental principles can be seen in many industries. This section will explore the fundamentals of TDD and how they are applied by a tailor.
Fundamentals of TDD
Know what to code before you code. This may sound cliché, but this is essentially what TDD gives you. TDD begins by defining expectations, then makes you meet the expectations, and finally forces you to refine the changes after the expectations have been met.
Here are a couple of clear benefits of using TDD:
Knowing before you code: A test provides a clear vision of what code needs to do in order to be successful. Setting up tests first allows focus on only components that have been defined in tests.
Confidence in refactoring: Refactoring involves moving, fixing, and changing a project. Tests protect the core logic from refactoring by ensuring that the logic behaves independently of the code structure.
Documentation: Tests define expectations that a particular object or function must meet. The expectation acts as a contract, and can be used to see how a method should or can be used. This makes the code readable and easier to understand.
