Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:25Length:2.9 hours
  • Overview
  • Transcript

2.1 Introducing the Ironclad Address Book

Hello, ladies and gentlemen. This is Daniel for Tuts+. In this tutorial video we're gonna be taking a quick overview of the app that we're gonna be building over the course of this tutorial series. Here in my web browser, I have the app open up. As you can see, it's an address book. Or as I like to call it, the iron clad address book because it has so many tests backing it up. You know just nothing is gonna go wrong with this app. As you can see, it's fairly simple, but not altogether trivial. We have a list of contacts here, and we've made a little avatar directive that shows a colored version of the first letter of their name. And we're actually gonna test that avatar functionality. We also have an option to add a new contact. And when added, the contact will appear immediately on the list to the right, and will also be updated to the server automatically. So this is the app, but there's a lot more to it than that. This application is going to have a lot of tests. And, those tests need views as well. Let's take a look at how our tests will look. Here is the final output from the Mocha test runner, that's running the tests on our app. As you can see, there are quite a few tests. And these tests are all being run automatically, every time we save our app. We'll be writing many of these tests in the tutorial series. So here I am in the project in my Brackets editor, and let's take a quick look at the project directory. Now, this directory that we're looking at has a few extra files. We're not going to be building this app 100% out during this tutorial because some stuff, like for example, the CSS styles, just doesn't really have enough to do with testing to actually teach it. But, don't worry because this version with all the stuff in it is going to be available online for download. Nonetheless, I'm only going to talk about the stuff that's going to apply to this tutorial series. Here, I have the heart of our application and the thing we're going to be building very early, the gulp file. The gulp file is what we use to run our animation. And as you can see from this brief peek, it's automating Mocha, Protractor, Karma, and more. We're gonna be building out this whole gulp file during this course. Also, I'll navigate here to my karma.config file. And this is the file that we have to set up to get Karma to work. As you can see, there's a lot of stuff here, but it's really not so difficult. Now, I'll navigate over to package.json, and this package holds our dependencies for our app. As you can see, there's quite a few. It's going to be a challenging app. I'll now navigate over to server.js. This is the file we're going to be used to serve our simple backend. In the example here, we're using a database file, which is just a JSON file. In the real course, we're actually just going to use an array inside the server JS, because this isn't a course about databases. It's a course about testing. Now, I'll navigate over to our bower.json. And this just contains a front end dependencies. Notice the dependency on Chai, Angular-mocks, and Mocha, this is all for testing. Our top folder on the left is our app folder, and this contains all the logic and templates for app. As you can see, there is a few script files, an index file, and some styles. And the style are just to make it look okay. More interestingly in this next directory below, we have the test directory. The test directory is full of really cool stuff. In the coverage directory is an automatically generated web page by Istanbul showing our coverage in our app. We're gonna be building that in the series tutorials. Below that, the e2e folder contains all our end-to-end tests that we're gonna be running with Protractor. In our spec folder, we have all the regular tests that we're going to use to run unit tests against our individual pieces of code. Each spec file contains tests for a different file in our app. Here in our test folder is the protractor.config file, which we need to use to get Protractor working. Building a Protractor config file is a little tricky, so we'll be tackling it later on in this course series. Well, that's basically our app. Over the course of the next few videos, we're going to be going from an empty directory to putting together this, or something very similar to this. I hope you'll join us for this exciting course series.

Back to the top