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

2.3 Serving Mocha Tests

Welcome back, ladies and gentlemen. In this tutorial video, we're going to add Angular to our app, as well as add some additional test-related scaffold to the app. So let's jump right into it. We already installed Angular using Bower in the previous video. So let's go to our index.html file. And we'll just add a reference to Angular. So we'll create a script tag. And we'll make the src equal to bower_components/angular /angular.js. Now let's create a new script file. And save that in our app directory as main.js. Inside main.js, we'll just create an Angular module. So we'll say angular.module And we'll call it AddressBook. And pass an empty array as the second argument. Back in our index.html Let's require the new script at the bottom of the body tag. We'll add a script tag. And make the src main.js. Finally let's link up our Angular app. So in our body tag we'll add the attribute ng app equals. And we'll just make that equal to AddressBook. Now whenever we create a js file in our app directory, we should create a test file to correspond. For this tutorial we're just gonna try and make as few files as possible to keep it simple. So we won't use much more names than main.js. So in your test directory create a new JavaScript file. And we're gonna call that main.spec.js. And this is going to be our very first test file. We won't put anything in it, just yet. Now the first way we're going to serve our tests is through an HTML mini server. You can either serve your tests or run them in Karma. We're gonna do both but first we're gonna set up a server. So when you serve your test. Your tests also need an index.html file. It can be kind of tricky to duplicate the index.html file, but this is what we must do to write tests. So let's just take our index.html, and we'll just copy that and save it to a new file in our test directory. And we'll just call that index.html as well. So let's change this a little bit. First, let's add a title, and we'll just make the title Mocha Spec Runner, to let us know it's our tests. Now, this is going to need Bower, and we're gonna need to install a few things with Bower. We're gonna need Mocha and Chai. So open up your terminal, and type bower install --save mocha chai. This is actually two libraries, they just sound like they go together. So at the top of our body, first we need a DIV tag with the ID mocha. That'll tell mocha where to put our tests. Right after that we need to include mocha.js, so include a script tag and the src will just be equal to bower_components/mocha/mocha.js. Right after that we need to manually set mocha up. So put a different script tag, and inside it, just say mocha.setup. And we pass in a string. We can either pass in bdd, or tdd. When you use bdd, you use the words describe and it. When you use tdd, you use the words test and sweet, when you're writing your tests. For this tutorial series, we'll use bdd. Although they're really quite similar. So just pass the string bdd. Last up we need chai, so let's install chai. Its script path looks just like mocha, so copy the line script src=bower_components/mocha and just change the word mocha to chai, both times. Next, which we've already done, we need to link to all our files. Right now we only have main.js so there it is. Finally to make it all happen we have to add one more script tag. Inside of that script we'll say mocha.run(). All right, that's looking good. Now let's add a task to serve our spec files. Go to the gulp file, and the task we're going to add is really very similar to gulp serve. So let's copy gulp serve and just paste it. Except we're gonna call this task serve-test. And let's change the port, so they don't overlap. Let's make this any other port, like 8081. And here in base directory, we just have to change one little thing. Before app, we have to say serve-test. That's the directory we just made. All right, we should be good to go. Let's try running gulp serve-test. So, that's how that looks. We're not running any tests, so it's a little hard to see what's going on. Let's add a test to our main.spec.js We'll add a describe block. And the first argument of describe block is what the test's describing. So, we'll make a very loose description, since this is just sort of a dummy test, and we'll say the AddressBook app. And inside, we'll put an it statement, it. And for our first it statement, it'll just be a dummy statement, cuz we're just trying to test our index. So we'll say, it should work. And then pass a function. And we'll just do a really simple assertion. Let's say chai.assert.isArray, and we'll just pass it an array. So that will just give us one passing test we run our spec. Let's go back to our spec and see how it looks. Oops, we've forgotten to add our tests to our index.html in our test directory. That's pretty silly. So under main.js, in index.html, let's just add main.spec.js. Save that and let's have a look at our served test directory. And good, you can see we've got an error here. It's run our test and it's saying chia is not defined, let's have a look at our test file. And we've written chia, instead of chai, lets try chai.assert. And it's worked. One little problem, our tests are looking kind of ugly. So let's fix that up. Inside our index.html in tes,t let's get rid of the hello world. So we only see our tests. Next, let's require the bonus add-on css files that come with Mocha. It just makes our Mocha tests look better. And we'll make the href equal to bower_components/mocha/mocha.css. So things should be looking a bit better. Let's refresh our page. All right that's looking good. So now we've set up our app and our tests. All right so we're now able to view and debug our tests inside Mocha in the browser. Very cool, we've already come a very long way towards creating of an Angular app. In the next tutorial we'll set up a scaffold to run tests through Karma as well.

Back to the top