Course info

Rating

(227)

Level

Intermediate

Updated

Nov 17, 2015

Duration

2h 23m

Description

This course introduces the ngMock module for unit testing in AngularJS. The course will cover this module extensively, giving viewers a solid foundation for unit testing AngularJS code. We will learn by doing - building a movie application as we work through each concept of ngMock. By the end of the course, you will have greater fluency when writing unit tests for your AngularJS applications.

About the author

Bradley Braithwaite is a software engineer at DuckDuckGo.com. For the last 10+ years he has been working with software projects from start-ups looking to bootstrap, to large-scale systems looking to manage complexity. He specializes in web development technologies including HTML5, JavaScript, Angular, Node.js, C# and ASP.NET.

Section Introduction Transcripts

Section Introduction Transcripts

Getting StartedHi I'm Bradley Braithwaite and welcome to this course. AngularJS Unit Testing in-depth, Using ngMock. This course aimed at to get you up to speed quickly in writing unit tests for your AngularJS applications. We will learn by doing, building this movie application in AngularJS using a TDD approach. It looks at movie data via an HTTP API and has functionality that will require us to write unit tests for common AngularJS patterns. Along the way we will explore ngMock in detail which is essential when writing unit tests for AngularJS code. By the end of the course you will have greater fluency when writing unit tests for your AngularJS applications. This an intermediate level course and knowledge of AngularJS and its core principals such as modules, controllers, services and directives is assumed. Also knowledge of basic TDD principals will help in following the course. The minimum software required to complete this course is a text editor and a web browser. All you need the ability to edit JavaScript and HTML. And a modern web browser with JavaScript support.

First Steps with ngMock’s Core FunctionsIn this module, we will look at the fundamental functions of ngMock that are required for any unit test that targets AngularJS code. We will begin by adding logic to our movie application, starting with the service that will provide the movie data that we need to search and find movies. All the movie data, including the images we see, is provided by The Open Movie Database, which you can find over at www. omdbapi. com. By exploring the documentation, we can see that it has search and lookup by ID capabilities. As we work through the code, we aim to answer the following question when starting our unit testing in AngularJS application, which is, how do we get instances of Angular components into our unit tests? NgMock's module and inject functions provide this functionality and therefore will be our starting points as we dive into ngMock.

Unit Testing HTTP Interactions with ngMockIn this module, we will add HTTP lookup logic to our OMDb API service. HTTP interactivity in an Angular application requires us to use its $http service. Of course we will do this using a test-driven approach, and therefore see how we can use Angular's $http service in our unit tests.

Unit Testing Controllers with ngMockHi this is Bradley, in this module we're going to focus on unit testing our Angular controllers. In the last few modules we started building out the API to power the data needs of the application. But up until this point we don't have anything visual. In this module we're going to add the controller module to our app, starting with the logic for the search control. Once we have this in place we can look to add HTML to the application and it will really start to take shape. The main question we will be answering in this module is how do you use Angular's controller service in our unit tests?

Unit Testing with Timeouts and IntervalsHi, this is Bradley. In this module, we're going to look at how we can unit test timeouts and intervals in Angular, using the timeout, and interval service, respectively. We will build upon the visual features we added in the last module. Our first enhancement will be to add functionality similar to auto complete for our search input field, where after a one second pause in typing, movie data will be returned. The second will be to add the rotating movie data that we see on the homepage. Every five seconds, the movie title will be rotated. In order to achieve this, we need to use the timeout and interval services. In order to unit test these, we need to understand how we can unit test the timeout and invariable services in Angular JS, using ngMock.

Unit Testing Directives with $rootScopeHi, this is Bradley. In this module we're going to discuss unit testing directives in ngMock, which comes hand in hand with understanding how to use Angular's $rootScope service in our unit tests. As we've done in all our modules to date, we will add the new feature to our movie app, which in this module we'll be taking our movie data from the simple text we currently have on the homepage to a more visually appealing layout as we see here. More formally, this means we're going to explore how to unit test in Angular Directive, and we will discuss when we should use the $rootScope service in our unit tests. Let's get to it.

Unit Testing with DatesHi, this is Bradley. In this module we're going to work with dates and unit tests. Dates can be tricky in unit tests. But, ngMock can help us out a little with this. As it has its own date type for unit tests called TzDate. The Tz meaning time zone. Therefore, our aim in this module is to explore how we can unit test dates using ngMock's TzDate type. The running theme in this course has been to cover the functionality of ngMock by adding features to our movie app. So in this module we're going to extend our movie result directive. Adding a feature to use the release date of the movie, giving us a user-friendly display, telling us in years or months how long ago a movie was released. We're going to create an Angular filter for this, so we will also see how we can unit test a filter in Angular.

Unit Testing with ExceptionsHi, this is Bradley. We're getting near the end of this course, and are near to finishing our movie app, but one thing we don't have yet is a way of handling exceptions in our application. In this module, we're going to address that, and in doing so, we will explore how to use Angulars $exceptionHandler service in our unit tests. We won't be adding a specific feature to our application in this module. Rather, we will explore how to make our application more robust by handling any potential errors that may crop up. So let's get to it.

Unit Testing with LoggingIn the last module, we added exception handling logic to our application to catch errors as they happen. Another useful feature we will want to add to the application is a mechanism for logging to give us the ability to trace what's going on once a application is running in the browser. In this module we will add logging functionality to our application using Angular's $log Service and to answer the question, How do we unit test with the $log Service in ngMock?

Testing with ngMockE2E BackEndHi, this is Bradley. Welcome to the final module of this course. In this module, we're going to wrap up our movie application by using the ngMockE2E BackEnd module. If you cast your mind back to a few modules ago, we added the rotating slides to the home page of the MovieApp but the list of our dates were hard coded because we didn't have a service side for the API. When we looked at the code to throw exceptions, we took out the hard-coded list and restored the correct code to our PopularMovies resource that would return the list from the server, but we don't have a server. If we fire up the application again, we see that it's broken and we're greeted with a complicated-looking error message along with a 404 in the console. Our unit tests are still passing since we're doing TDD and therefore testing in isolation without needing a real server. Now we want to carry out the testing into the full-stack using the browser. We will see how we can set up a fake backend using the ngMockE2E $httpBackEnd Service.