Component-Based Architecture in AngularJS 1.x and ES6 Exercise 4 Solution, continued

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

[00:00:03]
>> Scott Moss: Cool, so here are some of my tests that I wrote. And let's just run them because I don't remember what they are.
>> Scott Moss: Oops, wrong command, npm test. It's a good practice to have these commands in your package.json, so people don't need to know about your build system.

[00:00:22] Like if you don't know Gulp, and I forced you to type in Gulp to run my build system, it's not that cool. Like if I just say, just type npm test. Why do you care what's building it? Just type an npm test or type npm start. I could use Broccoli, I could Gulp, I could use Grunt, you don't really care.

[00:00:38] Just type in npm start. So it's a really good practice to do that. Sweet, so here's my tests. I have like six tests, but I think I have way more assertions. So each one of these is an it. So every time you see it, you see one of these, but that it might have many assertions inside of them.

[00:00:57] So, let's take a look. I think this one was already here. Expect blog name, blog name. So this is where you get, you can do some powerful stuff in this one because you have this blog right here, which is the actual module. Just to show you what this looks like, let me show you.

[00:01:12] Let me show you how powerful this is. So if you were to console.log(JSON., and we wanna stringify this, stringify(blog, and then we're gonna pass in 2. Does anybody know what that does when you do that with JSON.stringify, you pass it a number? You ever try that before?
>> Off Camera 1: It's the indentation.

[00:01:32]
>> Scott Moss: Yeah, it's the indentation. Yeah, I found that out a couple months ago. I was like, that's crazy. I didn't know that.
>> Off Camera 1: [LAUGH]
>> Scott Moss: [LAUGH] If I would've known that like a long time ago, that would have been amazing. So this module, this is why I export the module.

[00:01:47] This is why I don't just export the name. Look at all this stuff on here. You can do some crazy testing on here. You can figure out, like you can even say yeah, expect this module to require ui.router, you can do some very stringent testing. This is why I export the module, because you miss out on so much if you don't.

[00:02:05] If you're just like, I'm just gonna export the name like everybody else. But look at this, you can really make somebody mad by [LAUGH] writing some good tests, you know?
>> Off Camera 1: [LAUGH]
>> Scott Moss: Why miss that opportunity? So, yeah, some really good tests running right here. And then you also learn a lot about the internals of Angular.

[00:02:22] This is how I learn how Angular works internally, is by looking at this module and seeing what's going on when I change different things, like if I add a controller, what happens here? If I add this, what happens here? This is a good way to do that. So, I highly recommend checking that stuff out.

[00:02:34] So you can do some really good tests here. And I mean really good coverage and stuff, instead you'll be testing Angular itself but, whatever. It's really good. So that was already there. So for directive, the way I did it was I just held this closure up here for the ddo, Directive Definition Object, and then beforeEach I just make a new directive.

[00:02:57] So this beforeEach will happen for every single it inside this describe. So it'll happen here, then it'll happen here, it'll happen here, it'll happen here. So it's gonna be reinitialized every time. The only way that it'll happen one time is just put a before, and it will only happen once.

[00:03:11] I think that's the expected behavior, but I always just use this.
>> Scott Moss: So and because I defined it up here, it's available down here. So it's a closure, all right? So it should have the right template. So now I'm checking to see if the template on the ddo is the same template that I imported up top, right?

[00:03:30] I'm gonna make sure you put the right template on that thing. Same thing with the controller, is it the same controller? Are you using the isolate scope? This type needs to be an object, right? Are using controllerAs, right? I can even check to see if it says VM or stuff like that.

[00:03:47] Just to make sure everything is set up right. And then for the controller, this one’s okay. I make a controller. I expect posts to be an array. And I'd expect a post to have these properties, an author and a title. And that's it. I guess I didn't get creative with the template.

[00:04:06] Did anybody write tests for their templates? Nobody did it? You did it? What did you write?
>> Off Camera 2: I just checked for a bunch of presence of the different template pages. String contains or whatever the Mocha contains-
>> Scott Moss: Nice.
>> Off Camera 2: Yeah.
>> Scott Moss: Nice, I didn't think of that. I forgot they had the contains thing in there.

[00:04:25] Nice, that's really good, yeah. So, yeah, but you could see, you could get pretty creative with those templates, man, because people in HTML and Angular they get crazy. And they start ng-repeating everything, they start doing all this stuff. Now you can write tests and like no, no nested ng engine repeats, you know what I mean?

[00:04:42] You can write a test for that now. That's really crazy I really like that, so yep. Yes.
>> Off Camera 3: So could you have a group of tests that run on every template and it's defined in one place and then it just loops across all your templates? Do you see what I'm saying?

[00:04:58] Cuz there are probably some things.
>> Scott Moss: Yeah, you can do that, I mean you would-
>> Off Camera 1: Yeah.
>> Scott Moss: What you could do, if you wanted to do that. I mean, to a certain extent, you don't wanna break the module pattern that you have. But if you wanna do that you can just have a helper file that you come in here and you'll be like, okay, I'm gonna call testTemplate and pass in the template and something like that, right?

[00:05:24] You can do that. So I guess you could do that but, actually, I don't know. I don't know if that'll even work. Something like that, but I mean that kinda breaks like.
>> Off Camera 3: But I mean like you were saying, don't have nested ng-repeats, that's probably true across all-

[00:05:41]
>> Scott Moss: I see what you mean, so the actual assertion.
>> Off Camera 3: Yeah.
>> Scott Moss: Yeah, if you could just break out that assertion as some-
>> Off Camera 3: Common file.
>> Scott Moss: Yeah, some common file. Yeah, you can tell, usually what you do is you have some test set up or some helper set up before your tests anyway that you bring in, especially with like Chai.

[00:05:56] Chai has the type of library to do like mocks and stuff so you can you do stuff like that. Yeah, for sure. I thought you meant something else. Yeah, cool, any questions on writing the tests? So feeling it, right? Now you're gonna write tests?
>> Off Camera 1: [LAUGH]
>> Scott Moss: All right, so there's no more questions on the test.

[00:06:21] This is all I planned on getting through today. I have something else, but we definitely won't get through it today if we start it. So the rest will be for tomorrow. So now I just wanna open it up for anybody who's got questions about anything so far?
>> Scott Moss: Yes.

[00:06:38]
>> Off Camera 3: I mean, this isn't directly pertaining to what we talked about on this but you seem like you're pretty good with preprocessors. Can you tell us why you use Stylus and what do you like about it?
>> Scott Moss: I think Stylus is the best one out there. Stylus to me is like the markdown of HTML.

[00:06:58] Whereas, HTML is like LESS or Sass, in my opinion. LESS and Sass are great compared to CSS, but look at that. [LAUGH] That's like markdown to me. It's just a lot more simpler for me. And the fact that it's being executed by JavaScript. It's a lot easier for me to get through.

[00:07:17] I mean I know Ruby, and I don't mind using Ruby. But the fact that it's just running through Node makes it a little bit easier for me, I can customize it if I want to. And I like the fact that I don't have to use brackets and stuff like LESS, and it feels more like JavaScript.

[00:07:32] I've asked somebody to write bubble sort in Stylus before and they were able to do it.
>> Off Camera 3: That's cool.
>> Off Camera 1: What about, I mean that basically just looks like Traditional Sass.
>> Scott Moss: I've never used traditional Sass, so I don't know.
>> Off Camera 1: I mean cuz there's Sass and SCSS.

[00:07:51]
>> Scott Moss: SCSS, yeah.
>> Off Camera 1: Yeah, and SCSS is the later adaptation to try and duplicate basically what LESS is doing. And therefore, any CSS document could be a valid SCSS document. So it's easy for you to just take a CSS document, switch it over to a Sass.
>> Scott Moss: Right.

[00:08:13]
>> Off Camera 1: And then make your markup as needed.
>> Scott Moss: Yeah, that sounds like that'd be a win if you decided to do that. I've never used the classic Sass. But, yeah, it's kind of like Coffee script because it relies on indentation like Python and Coffee scripts so you've gotta be wary about that.

[00:08:29] But I like the helper functions that it comes built in with. So if you look at some of these helper functions that Stylus comes built in with, there's just tons of them. As far as like, this are all functions that Stylus ships with. It's like a JavaScript library of functions, things like color manipulation and all types of stuff.

[00:08:50] So that's another reason why I like it. Yes.
>> Off Camera 3: There was a question from Horatio H, what your opinions are on PostCSS. I'm not familiar with that.
>> Scott Moss: Yeah, PostCSS is like the future of CSS. It actually brings CSS 4 to you right now. And if I could use anything I would choose that, it's just that the configuration is a little hard cuz you have to set up your own rules first.

[00:09:15] Like for instance, I think Stylus even uses PostCSS internally. So it's one of those tools you would use to make a preprocessor, or if you had the team and the manpower then you can use it internally to preprocess your CSS. But, yeah, PostCSS allows you to define different syntaxes in your CSS.

[00:09:33] It is kind of like, have you ever heard of sweet.js?
>> Off Camera 1: Yeah, for macro.
>> Scott Moss: For macros?
>> Off Camera 1: Yeah.
>> Scott Moss: Yeah, it's like that for CSS. It allows you to define different macros and stuff like that. So-
>> Off Camera 1: It's nice.
>> Scott Moss: It's pretty cool, yeah, I really like it.

[00:09:45] But the configuration is it just like, eh, I don't know, I'm not there yet.
>> Off Camera 3: There's another question, if we can go over doing a simple template test, like for example, checking that every double bracket is followed by bm or something.
>> Scott Moss: Okay, let's check that out.
>> Off Camera 2: I don't know if we would really want that test, right?

[00:10:05] Because like in our ng-repeats, that's gonna break, isn't it?
>> Scott Moss: Well, not everything in the bracket. In ng-repeat, I see what you're saying. Yeah, in ng-repeat that would break. But what you could test is maybe not every single one? But you could test to see that you should at least have this one.

[00:10:21] I mean if you go in the template, you should be like, you should at least have this vm.message in here, right? Or you should have vm.post in there somewhere. So you could test for that.
>> Off Camera 2: Sure, yeah, right.
>> Scott Moss: But testing for all of them would be ridiculous.

[00:10:37] So I mean an easy way for that would just be, I mean it's just a stream. So if you come in here, you have the template stream right here. I mean whatever flavor you wanna do, you wanna use .contains and Chai or if you wanna do a regex on it, it's however you wanna do, however you wanna do it.

[00:10:54]
>> Off Camera 2: Maybe we can write one here. Would it take like four or five minutes?
>> Scott Moss: Yeah, let's do it. So if we say expect-
>> Off Camera 4: [INAUDIBLE]
>> Off Camera 4: Insert an it.
>> Scott Moss: Yeah, thank you.
>> Off Camera 3: I forget that all the time.
>> Scott Moss: Yeah, me too. it('should have vm') I don't know what the test is gonna be yet so we might change that.

[00:11:17] So we'll do that. And we can say expect(template), do I have that? Yes I do, template. And in fact, you know what? I have a regex for this already, somewhere else. I'm gonna grab it.
>> Scott Moss: cat ./angularclass/
>> Scott Moss: Give me one second.
>> Scott Moss: Boom, where is it? There it is, aha.

[00:12:16]
>> Scott Moss: Got it, okay, so you can test like, wait, how did it go? Yeah, .match.
>> Off Camera 1: Is it to.match?
>> Scott Moss: Yeah, thanks. So you can do something like this and then test for the property. In this case I think it was what, message, yeah. This is a regex that I created a while ago.

[00:12:40] Let's see if this runs or not. So this will test to see if there's something in this template that passes this regex.
>> Scott Moss: [SOUND] See if that runs. If not, you can also do contains or something like that. I think, yeah, that one worked. Yeah, so that one worked, should have vm.

[00:13:07] So that's like an advanced more one. There's different ways to find values inside of a stream. It's up to you.
>> Off Camera 1: Interesting.
>> Scott Moss: Any other questions on anything we covered today?
>> Off Camera 3: There was another question from Danielle M, your opinion on using TypeScript in place of Babel here.

[00:13:31]
>> Scott Moss: Mm-hm-hm.
>> Off Camera 1: [LAUGH]
>> Scott Moss: I'm not a fan of TypeScript, I'll be honest. I use it all the time cuz I'm writing Angular 2 a lot these days, but I'm not a fan of it. I like the Wild Wild West of JavaScript. I like that it's just unpredictable sometimes and it's fun, TypeScript feels like Java to me.

[00:13:53] I don't like to write Java all the time so I don't really wanna write TypeScript all the time. But if I were going to use TypeScript, would I use Babel compiler, or would I use TypeScript compiler? I would definitely use a TypeScript compiler for TypeScript. Especially since 1.5 just came out, TypeScript 1.5 compiler, which introduces ES6 support, or ES2015 support, so imports and stuff like that, whereas, a couple of months ago that wasn't the case.

[00:14:18] I think it just left beta or it might still be in beta. I think it just left beta, so yeah, I would definitely use TypeScript 1.5. Especially if you're using something like VM or the Visual Studio code or like WebStorm, you get that nice intellisense. Yeah, that's really awesome.

[00:14:37] So for that I would use it, but I'm not a fan of TypeScript.
>> Scott Moss: Yes.
>> Off Camera 2: When do you think Angular 2 is gonna come out of alpha?
>> Scott Moss: I don't think it's gonna be ready until, I think at the earliest, probably late winter. At the latest, end of next spring.

[00:14:59]
>> Off Camera 2: Yeah.
>> Scott Moss: I think right now Google is internally building things with it, they're replacing some of their products. But it's still got some time, it's still got some time. So they're trying to make it the best and it's gonna take some time, but I don't think you'll see it in production any time soon, yeah, yeah.