We need to perform a unit test and an End2End test on the existing controller. We will configure the Karma test runner.
- [Instructor] In this video, we will be covering how to setup Karma with Protractor for end2end testing of an AngularJS web application. There are multiple levels to testing any application. Testing the smallest component isn't enough. We also have to test how it integrates with other components. But more than that, we have to test it within the same scenarios as the user will interact with it. Therefore, we need end2end testing to simulate user interactions. First, we have to install Protractor and Web Driver Manager.
The Web Driver will be driving the Web Browser. Protractor's the library that allows us to manipulate the Web Browser to make it interact with our application in the same way that a user would. We use npm install save dev to install them. We also install the angular-dev-server which will run a local development server. This is required for Protractor and Web Driver to work correctly.
We have to make sure Web Driver is updated using the webdriver-manager update command. Then we start the Web Driver server using webdriver-manager start. The web server will start import 4-4-4-4. And it will be what Protractor connects to. Now let's write a simple end2end test that makes sure we can navigate to the second page in our Pizza Store application.
Next, we create the directory where the end2end test will be stored. The specs/end2end directory. Now we open the pageobjects.js file. We are going to define the homepage object with convenience methods and variables. The page heading properties stores the welcome message element. The Get Method will tell the browser to go to the index.html page which is where our main controller is used.
The home page object is a a layer of abstraction that let's us focus on the actions that are taken on a page and testing that behavior rather than worrying about whether we're using the correct css selector to find the dom element we are checking. Page objects make end2end testing much simpler. Now, we'll define the main controller end2end test. Open the main controllerspec.js file.
We are checking to make sure that after navigating to the home page, we see the heading has the text, Welcome to the Pizza Store. Using the page object, we define for the home page in page objects.js, makes it very easy to test what's happening. Next, we have to configure Protractor so we open the Protractor.conf.js file. We set the selenium address property to the local host at port 4444 which is the default port.
The specs are to test to run and they are stored in specs/end2end. The capabilities sets the browser to use and what it can do. In our case, we're testing using Firefox. The base url sets where the server is that will run the tests. For using a local development server that serves the AngularJS app at port 80-80-80-80, now run the local development server.
Then run Protractor. It will connect to the selenium web driver server and then use the local development server and run the test. We see that the test passes on the command line. Now we have the infrastructure for both unit testing and end2end testing. We have successfully set up Karma to run unit test and end2end tests. We have Protractor working so that it can run end2end tests.
End2end testing is very important for full test coverage. In the next section, we'll add a few controllers and directives and test their interaction.
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