
Lessons:25Length:2.9 hours
Angular test1
  • Overview
  • Transcript

3.1 Testing Services With Inject and Module

Welcome ladies and gentlemen. This is Daniel for TutsPlus and the next part of this exciting series. We're going to write out some tests that are going to take advantage of the scaffolds that we prepared in the previous video. So let's go to our main_js file, and we're going to add a new service, a contact service, to this file. So the contact service will basically just keep track of a collection of contacts and it'll hold those contacts in array property that'll be called contacts. So when the contacts service initializes, it's going to make an HTTP request to the simple express backend we set up in the previous tutorial. Let's inject the HTTP module into our service. Now we can make an http.git call, passing in the URL of our end-point, which we prepared in a previous lesson. And we'll make that /contacts, and now we provide a second argument, a function which will let's just have it log the data that's returned. We'll represent that data as rez here. Now that we've written part of our app, normally the next step would be implementation. However, we're more interested in testing the app at this point, so we can go ahead and write some tests for this app. Let's go to our main.spec.js, currently, we only have this dummy test, we're going to replace it with a real test right now so it won't be needed. Let's get rid of it. Now we're going to take a simple test describing our contact service And the outer block will be a describe block. We know two things about our contact service. The first thing we know is that it has a property on it that should be an array called contacts. And the second thing we know is that it's going to make a call to HTTP backend, at some point to get the contacts. So let's try adding a test to verify that it has an array called contacts. We'll write an it block and we'll just say that it should have a contacts property. And we'll pass it in a function. Now here's the tricky part. In an angular app, normally we'd get access to our service by injecting it into a directive, a controller, etc. However this can be rather tricky if you just want to get access kind of outside of your map. Luckily there's an app for that and it's called the angular mocks app and we're gonna use that to inject our service. So open up your terminal window. And we're just going to say bower install angular-mocks, and be sure to have a save there. And we'll install angular mocks, and it increases quite a bit of magic, changing the window object and the dom, but this is a common way of testing angular, and we're gonna see how it works right now. So let's navigate to the index file in our test directory and we need to include reference to angular mock. So let's duplicate the line of code that includes angular and we'll just make that into angular-mocks in both places So let's go ahead and call serve test now to make sure that our tests are working as expected so far. So let's go ahead and open up our terminal window and let's just type gulp servetest. And we'll bring that up and here we can see the tests appear to be working correctly. Even though, well, we know they're not. It's because we haven't written any assertions, zero assertions means zero failures means a passing test. However, this is what is called a false positive, and it can be very bad for an effective testing suite. Let's go back to our text editor And we'll go back to our main.spec.js and we're going to start writing a test. It's important to note that now that the angular mocks module has been included it gives us access to some new functions. The first is just the word module. The word module takes a string and then whatever that string is that module becomes available for the rest of our app. So you'll recall that we called our module address book. If we call module the angular mocks function address book, our app will be available for the rest of our tests. This is what we want, so let's include that in there. The second special word is inject and inject will create a special space, a closure if you will, in which we can access to our angular functions. Inject takes a function, and that function takes any number of arguments. Those arguments are injected. Here we've injected the injector keyword which is used to gain access to many other modules. We can attach any module to our global scope by omitting the var keyword. So we can say contactservice is equal to and then we can call injector.get which will return us an instance of our contact service that was made available by module AddressBook. Now we have access to our contact service. So this is looking good from a test perspective we should be able to write the test soon. However, there's one more thing that we need, and we need to write at least one assertion. Previously in our tutorial, we wrote chai.assert, right inside the body of our tests. However, it's good form to specify chai.expect and chai.assert as their own variables at the top of the document. So let's set up assert and we'll set up expect, and we can now write assertions just with expect or assert. So both assert and expect are good in their own ways. In this case we'll use expect and we'll write an expectation about the contact service. So using the expect syntax we can say expect.2.b and if we pass the word and it will match the type of whatever's inside to that. Let's write a failing test a number. Hmm, something doesn't look right inside our Chrome. Perhaps the dev tools will reveal something. Yes, line seven, we've made an error. So let's go back to our line seven and we have an extra quote there. We'll save that, and refresh and now we're getting another error. Hmm, module is not defined. Let's go back to our index.html and we need to include our angular mocks after our mocha setup and our angular js before our mocha setup. This is a little gotcha the solution to which I found on Stack Overflow. So we'll change that. And let's pay our tests another visit. All right, this is good, it's saying that it expected contact array to be a number. We'll that's good because we know it should be an array. We wrote that assertion to fail on purpose. Now that the assertion has failed we know our test is running and we can now investigate and fix the test so that it passes. We know the test can fail so it's less likely to cause a false positive. As a side note if you have any similar problems be sure to check out stack overflow. It can be a good source of help. So let's finish up this tutorial. So we'll go back to the spec and we'll change this so that the spec passes and we'll say instead of number which contactservice is not we'll say an array So let's go ahead and go back to our terminal window. And we've got another error and that's because we should say contactService.contacts, not just contactService. And it'll refresh and very good. It seems to be functioning correctly. In this tutorial we've learned about module and inject and how those can be used to improve your apps functionality. We need module and inject, to test angular apps effectively and in future tutorials, we'll be leveraging them even more, for better results.

Back to the top