We want to run and write unit tests to practice test-driven development. We will use a test framework and a test/task runner.
- [Narrator] Hello and welcome to the first section of this course, Setting Up AngularJS for Unit Testing and End2End Testing. In this section, we'll cover setting up our environment and configuration for testing. Since we are practicing test-driven development, our goal in this video is to create a unit test and run it using a task and test runner. In this video we will install Jasmine and create a unit test, install Karma and configure how we run unit tests, and install Grunt to run unit tests as soon as we modify our code.
In test-driven development, before we write any code we have to write a unit test to make sure that we write the correct functionality. To write unit tests, we need a test framework, a test runner, and a task runner. We can use Jasmine as our test framework, Karma as our test runner, and Grunt as our task runner. The reason we use Jasmine is because it has understandable and readable methods for testing. It makes unit tests almost read like a sentence. We're using Karma as our test runner because it will run unit tests in all web browsers that we want.
It is the standard test-runner used by many AngularJS projects. We use Grunt because of its easy-to-read configuration format, which makes it easier to maintain and expand as our project gets bigger and adds more tasks. First we will install all the packages we need using NPM. The --save-dev command line switch will save the packages to the package.json file as dependencies of our project. We're going to use NPM to install the test framework Jasmine, the Karma test runner, the Jasmine extension for Karma, the Firefox launcher for Karma, the Grunt task-runner, and the Karma extension for Grunt.
We'll need to create a configuration file for Karma so that it can run the Jasmine unit tests. We begin by opening up karma-unit.conf.js in the main project directory. We start by exporting function that takes one parameter, the Karma configuration object, and we call set and we're going to pass in new configuration parameters to Karma.
First we set the framework, which is Jasmine, and then we're going to set the browsers, in this case only one, in which the unit test will be run. Next we set the files that Karma will load up as part of running the unit tests. After Jasmine and Karma are set up we can create an example unit test and run it. We create the unit test directory in spec, and after that's done we can switch to our editor and then create the unit test in spec/unit/example.js.
The example test will do nothing except check that the value true is equal to true. We set up the description of the test, example unit test, and then we set up our first test case. And as mentioned, we expect that the value true will be equal to true. This is a good way to ensure that the test harness is set up and working correctly. Now let's integrate this with Grunt task-runner. First we open up Gruntfile.js in the main project directory.
Begin by exporting a function that takes one parameter, grunt. We start by initializing the configuration and passing it a configuration object. We only have one task right now, Karma, and there's a sub-task within Karma called unit. This will run our unit tests. The configuration file we use with Karma is karma-unit.conf.js. After initializing the configuration for Grunt, we have to load up tasks from grunt-karma.
So the task we just created has to be loaded. Great. Now we can use Grunt to run the unit tests. Later on in the videos we can use Grunt to run the end-to-end tests too. Let's take a look at how that looks right now. In our Grunt file we have karma task, and now we switch back to the command line and we write grunt karma:unit. This will run the karma task and the unit subtask.
It starts up the browser Firefox. It runs the unit tests. Let me just move that out of the way, and we can see that it executed exactly one test, example.js. Now we have the infrastructure in place to write unit tests and to be able to run them. We can successfully practice test-driven development as we go along the project and make sure that our code is of a higher quality. In the next video, we'll be covering the project structure.
AngularJS offers the perfect balance between layout and code, making the framework a favorite of developers around the world. But what you might not know is that Angular also provides an outstanding infrastructure for testing, for developing bug-free and easily maintainable applications. Learning AngularJS Testing helps you to understand the different aspects involved in testing Angular components, including controllers and directives, with the help of a practical pizza-ordering application.
Author Rudolf Olah starts by installing and initializing various helpful testing tools, such as Karma, Jasmine, and Grunt. Then he creates controllers for ordering the pizza and reviewing the order, and tests them with and without dependencies. Chapter 3 shows how to create accordion directives for the application, unit test them, and resolve the errors if these tests fail. Rudolf also goes through testing of the navigation between two controllers with the help of End2End testing. Finally, learn how to modify services to use the $resource module and interact with REST API web services, as well as unit test them with the help of mocks and spies. Rudolf also shows how to create and test directives and controllers that fetch information from the service and display it.
- Configuring Angular, Grunt, Karma, and Jasmine for testing
- Testing controllers
- Testing directives
- Inspecting the navigation between components with End2End testing
- Creating REST API services and unit testing them to make your app compelling and user friendly