
- Overview
- Transcript
6.1 Reviewing our App
In this video, we'll review our completed app and its components, including the Karma configuration, Protractor configuration, and Node dependencies.
1.Introduction3 lessons, 07:24
Free Lesson 1.1Introduction01:12
Free Lesson 1.2Test-Driven Development in Angular04:14
1.3Before You Start01:58
2.Scaffolding a Testable Angular App5 lessons, 46:23
2.1Introducing the Ironclad Address Book04:57
2.2App Setup11:37
2.3Serving Mocha Tests10:32
2.4Running Karma Tests11:33
2.5Implementing a Simple Back End With Express07:44
3.Testing Angular Applications5 lessons, 51:44
3.1Testing Services With Inject and Module12:45
3.2Verifying GET and POST Functionality With $httpBackend05:43
3.3Testing Angular Controllers12:27
3.4Testing Angular Filters10:19
3.5Testing Angular Directives10:30
4.Code Coverage With Istanbul3 lessons, 18:01
4.1What Is Istanbul?01:14
4.2Adding Istanbul to our Application09:40
4.3Generating and Serving a Code Coverage Report07:07
5.End-to-End Testing With Protractor4 lessons, 23:27
5.1Installing Protractor Dependencies03:55
5.2Configuring Selenium08:30
5.3Testing With Protractor05:06
5.4Automating Protractor05:56
6.Adding Finishing Touches4 lessons, 23:06
6.1Reviewing our App03:56
6.2Adding Contacts07:27
6.3Updating the Contact Display04:47
6.4Adding Styles06:56
7.Conclusion1 lesson, 04:05
7.1Conclusion04:05
6.1 Reviewing our App
Welcome back, ladies and gentleman. This is Daniel for TutsPlus and this series of tutorials we're going to review what we've learned in the previous tutorial on test driven development in Angular. It's been a very exciting and interesting tutorial series. In this video we're going to review all the files we've build in this tutorial. In this tutorial we'll be looking at the actual finished files, as opposed to the pre-finished files that are available in the repository. First I'm gonna navigate to my gulp file. Why do we start with the gulp file? Well, the gulp file is always a good place to start since it shows more or less the app's full capabilities. By browsing through this gulp file you can see that we can serve various kinds of tests. We can serve coverage and we can serve Protractor. Gulp is a very important tool and a very good one to use if our aim is to automate tests. Now let's have a look at our protractor.config in test. This is what we use to set a Protractor. It's not a whole lot but then again we didn't really tap into a lot of Protractor's more advanced functionality. Using a protractor.config you can see up almost any app to work with Protractor. In the same directory is the tests we wrote in main.spec.js. We did quite a bit of testing. We used module and inject and I'm glad we got a chance to cover that. We haven't written very many tests but we've written enough to get a reasonably decent test suite. This test suite would alert us if something catastrophic were to go wrong with our app but might not catch something subtle Let's pop over to bower.json. Here we see the front end dependencies of an Angular td app. Those include Mocha, Chai and Angular mocks, none of which actually make it to the user on the front-end, but we use them for testing. Also in the root directory is karma.conf.js This configures karma, and you can see we're passing a list of the files we want from karma. And we've configured two reporters, a text reporter and a coverage reporter. This karma.conf file is a good file to start with, if you want to make a test-driven development app. Last, let's a look at package.json. Package.json shows all our dependencies back-end for making our tdd app. As you can see there are quite a few cors, istanbul, karma, various karma plugins. This is very convenient because if you share this package with a friend without the node modules package someone can just type mpm install and they'll already get access to all these technologies. Which as we saw are all more or less necessary in one way or another for testing. And that was a quick look at our files that we put together.