A controller needs testing and is self-contained. We will write unit tests for this.
- View Offline
- [Instructor] Hello and welcome to the second section of this course. In the previous section, we set up Grunt, Karma, and Protractor for unit testing, and end-to-end testing. In this section, we're going to be testing controllers. In this video, we're creating a controller for selecting a pizza type, and then, writing a unit test. When we're writing an angular tray dsf, we always start with the controller that exists within a module. Modules grouped together, controllers, services, and directives. Controllers control how the user interacts with the app, and ties services and directives together.
In our case, we start with a simple controller that has no dependencies on any services. We start by writing the unit test for our controller in spec slash unit slash select pizza control spec dot js. Before we write any tests, we have to load the pizza store module, and inject the select pizza controller.
We use the scope variable to keep track of the controllers scope. This is how we'll call and inspect the controllers scope variables. Now, to write our tests. What we want to test for is whether we can place an order or not. In our first test, we set the pizza type to a blank string, and then, call place order.
We expect that no order will be in progress. In our next test, we set the pizza type to the first choice that a user can select. Then, we call place order, and expect that there will be an order in progress.
Now, we open a new file where we will place our controller, and write code that passes the unit test that we have just created. We define the pizza choices that are available. Canadian, pepperoni, and vegetarian. We also define the pizza type that is currently selected. At first, this is blank, which means there's no pizza selected. Open the html template for the controller, and let's add multiple choices for the type of pizza that customers can choose.
We're using the ng options directive to populate the choices of pizza type that can be selected. This simplifies our html template and it's also easier to test. Open the app dot js file, and let's change the main routes to point to our new controller and template. Instead of using main controller and views slash main dot html, we will be using select pizza controller and views slash select pizza dot html.
When we hit that particular URL, the redder will load the template and controller. This is something we will test later on in video three of this section with an end-to-end test. For now, we are focusing on unit testing the controller. We also need to load the controller java script file. Let's open index dot html and add it to head element. The unit test to see that they fail.
Let's update the controller to implement the place order method, so that we can start passing the unit test. Since the controller has no dependencies, we will be pretending that it makes a call to a service that places an order. We check if a pizza type is selected, and then, set the scope variable order in progress to true. Next, we add the unit test to our Karma configuration files so that we can run it.
However, before the unit test is loaded, we also need to load the Angular JS libraries. To be able to run unit tests, we absolutely need to load the ng mocks library. Now, we run the unit test, and it checks to make sure that they drop down selection is working, and that our controller can see the changes in its scope.
That's how we write a unit test for a controller that has no dependencies. Awesome. In the next video, we will discuss how to add a service to the controller, and how to test the controller using a mock service.
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