We have to set up project directories and other files. We will create the project structure.
- [Instructor] In the last video we set up Karma Test Runner, Jasmine test frame work and Grunt Task Run. Now we are going to set up the project structure for a pizza store application. In this video we will be creating directories for project components, adding the AngularJS library and grading a base file and creating one route to controller and making an html template. First we need to create the directory where our app will be stored. It is named app. Second we create the directory for this script to our app, named app/script.
In that directory we also need to store the controllers, directives, filters and services of our app. This includes app/script/controllers, app/script/directives, app/script/filters and/script/services. Finally we create the directory for our html template views named app/views. Next we create app/index.html which is our base template.
The title of our app is pizza store. In the body tag we set the app module to load pizza store in the ng dash app attribute. Then we set up the view of the app using the ng dash view directive. We will be using the cdn.js hosted copy of AngularJS and the AngularJS route library by inserting the script tags into the header.
Our app is named pizza store and we need to include the script for the main controller and the app. Next we set up the initial app script, app/script/app.js. In this file we create the pizza store module with ng route as a dependency of the module. Then we configure the default route to point to the main controller.
After that we can create the main controller. This controller will display a welcome message. We also need to create the template view that will be used with the controller, let's open up app/view/main.html and display the welcome message from the controller.
Now let's open index.html in Firefox and see what happens. In the next video you will see how to use Karma to unit test the controller and how to use Karma and Protractor to end to end test the controller route.
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