Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Exercise 4" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will write unit tests for the blog component. The tests will be added to blog.spec.js.

Get Unlimited Access Now

Transcript from the "Exercise 4" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott Moss: So now what we're gonna do is write some tests. So if you go to blog_spec.js, everybody's like no tests no, no it's gonna be fine, its gonna be fine.
>> Scott Moss: So what I want you to do in here, there's a couple to dos. I already wrote like one test and I'm showing you like mock stuff out.

[00:00:31] So I'm gonna show you how to run the tests and what not. But what I want you to do is you're gonna go in and you're gonna write some tests for the directives, for the controller and yes you're going to write a test for the template. How you do that, I don't know.

[00:00:43] But you're going to do it. Figure it out, get crazy. It's a string, you have a string with some with HTML in it, make some assertions. I know you can do it. I know you're capable. So, how to run the test if we go here and type in npm test, did I set that up?

[00:01:01] Yeah I did. No, what happened here? Let me do an npm install, okay.
>> Scott Moss: Yeah, it looks like I forgot to install some stuff. Also of yours doesn't work I'm gonna have to come sit down with the exam, I know the latest version of karma breaks everything so I have to revert back.

[00:01:32] No don't do that again. I guess it is install one more time. Yeah, so the latest version of karma breaks everything I found it out two days ago. It's took me a while but it will not work on any of the stuff that were using.
>> Scott Moss: Okay let's see, no.

[00:01:52] Where is this, yeah of course it doesn't work. That's, yeah it doesn't work and that's because this is the solution branch. Yeah you got to fix this stuff, so how it will look if it did work.
>> Scott Moss: Step-4-fix is this.
>> Scott Moss: So if you run npm test, you'll see that karma starts spitting stuff out.

[00:02:19] It's sitting there, it's bundling all the test files, which in this case I think is just one and then it ran all the tests. So I have like six or seven tests in that file, and it ran it and was like, here's the results. But it actually ran it in Chrome, and I'll show you.

[00:02:32] So if I had to run it again, let me back up. You'll see Chrome pop up there's Chrome. That's running our tests in the browser. Boom, and it's done and it closed Chrome. All right, kind of scary, right? But yeah, that's what's happening. So once you see all green here, you're good.

[00:02:52] So not only do you have to write some tests, but if you go into karma, conf.js, that's a solution. I don't want to show you that. If you go to karma conf.js, there's some stuff in there that you have to fix. Yeah this files kind of scary looking.

[00:03:11] Yeah it's a scary looking file I know but you need to fix this file, and I have. So the first thing you need to do is in this files array to figure out what files to pass in right here. So remember, I said Webpack bundles all your files.

[00:03:29] So remember that. There's also a new file in the rules application somewhere. You should look for it. It's right here, spec.bundled.js. So if you look there that's part of the file you need and then you also need to, there's a hit right there too. You also need to hook up these loaders here.

[00:03:48] So we're literally making a new web pack config just like we did in webpack config.js but for our tests. So, think about everything the test is going to use. So, lets go look at blog.spec.js. It's using all this, it's importing blog, blog directive, template. It's import everything our app imports.

[00:04:07] It's the same loaders. It needs the styles, it needs everything. Except there's a small difference and at webpack config.
>> Scott Moss: I put this in to ignore all JavaScript files, so we can't use this config cuz it won't work or in fact we can't use this test assertion. So our webpack config.

[00:04:30] Inside our karma.js or karma conf.js is gonna look very similar to this, except it doesn't exclude spec files. So that's a little hint. And then.
>> Scott Moss: Yeah it's all you have to do in here. So do that, write yourself some tests and run in npm tests to test it and see if they pass and if you can't get them to pass, write the code make it pass.