Creating an Open Source JavaScript Library on Github

Writing Unit Tests Solution

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Creating an Open Source JavaScript Library on Github

Check out a free preview of the full Creating an Open Source JavaScript Library on Github course

The "Writing Unit Tests Solution" Lesson is part of the full, Creating an Open Source JavaScript Library on Github course featured in this preview video. Here's what you'd learn in this lesson:

Kent walks through the solution to the Writing Unit Tests exercise. The code for the solution is located on the FEM/05.1-write-tests branch.

Preview
Close

Transcript from the "Writing Unit Tests Solution" Lesson

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

[00:00:03]
>> Kent C Dodds: I'm gonna go ahead and work through this solution now. So I'm gonna leave that open. So for the starWarsNames.all API, like I said, all that I really care about is that every item in this is a string. So I'm actually going to create a utility function down here called isArrayOfStrings where I'll pass an array.

[00:00:34]
And I'm going to use return array.every. This is just a method that's available on all arrays. And it'll take a function that takes the item and it returns the item or say the type of item is equal to a string. So then I can use that function in my test up here where I say expect.

[00:01:02]
IsArrayOfStrings, of yeah and I totally forgot I need to require the StarWars names all. So var, starWarsNames is require Star Wars, whoops actually it's index.js. Actually fun fact in node version four I think, you can actually just say require('.') and it will give you the index inside of your current directory.

[00:01:27]
So fun fact. So we're going to use starWarsNames.all, and we'll just say to.be.true. So an expect isArrayOfStrings. I'll pass this array. Where it validates that every item is type of string, and if that returns true then this test will pass. So we'll save that and my test will run, so fast you couldn't even see.

[00:01:57]
That's why I love about Mocha, it's so fast. Cool, so and actually if, here's a little protip with Mocha's watch mode. If it is running too fast for you to see then you can just hit the enter key a bunch and then like add a new line somewhere and it'll rerun your tests and you can see, yeah.

[00:02:14]
Okay. It did run and it did pass. Or you could force it to fail and then pass again. That's also, sometimes it's just so fast, like zero milliseconds. Whoosh. Yeah, I just love that. Okay cool, so that's the first one, that is a way to solve the first one.

[00:02:34]
I imagine that each of you solved it maybe a little bit differently. I really like using functions for stuff like this. And so, for the next one, all I want to verify is that starWarsNames.random, returns me an item that is contained in starWarsNames.all. And so yeah, like
>> Kent C Dodds: Hold on, yeah, okay.

[00:03:00]
So I'm gonna create a function here that is called isIncludedIn and that will take an array. And here I'm going to return a function that takes an item and that will return array.include(item). So array.include comes from node six. You need to polyfill it if you want to run it in, or sorry it comes from ES, actually will it?

[00:03:29]
Array.include, fairly certain that comes from ES 2016, what am I doing here? Array.include.
>> Student: Supposed to have s.
>> Kent C Dodds: Includes, yeah you're right.
>> Kent C Dodds: I could have swore that came from ES 2016, 2017, or 2016, yeah, ES 2016, so I'm actually not sure how I got this to ever work, because I'm not, we're not polyfilling anything yet.

[00:04:02]
So that's fun, we'll just do, just in case, indexOf. Item is not equal to negative one. So that's why we'd like to use includes. But, yeah. So now, actually, yeah I'm gonna do things a little bit differently. So here I, just expected it to be true. This one I'm going to do something, yeah just a little bit different.

[00:04:28]
So I'm gonna say expect, starWarsNames.random, .to.satisfy, this is built into Chai. And again, I should say, like this little bit right here is a little bit tangential, it's very like, this is Chai focused learning that you're experiencing right now. Just sort of to expose you to a really solid assertion library.

[00:04:55]
If you don't like this or you don't get it or something, that's okay, that's not critical to your learning of how to build a library. And you can look at this bit a little bit later. But yeah, we want expect this whatever random Star Wars name .to.satisfy, isIncludedIn, starWarsNames.all.

[00:05:19]
So what this, to satisfy, is going to do, is you pass to satisfy a function, which when it called with this item, will return true. Maybe that's a little bit too abstract, so I'm gonna make it a little bit more concrete here. So we're gonna say randomItem = starWarsNames.random and then I'm going to say, expect(randomItem).to.satisfy(function) that takes the item and then basically does this exact same thing.

[00:06:00]
So we'll copy that, but our array will be starWarsNames.all.indexOf. So these two, whoops. I'm just too used to using ES6 these days. But yeah, these two thing, these two bits are equivalent. It's just one is more functional than the other or like functional programming paradigm. Yeah, if this like blue by you don't worry about it, if it didn't then that's awesome.

[00:06:38]
But now we have our library tested and that's awesome. Any questions about testing or unit testing or integration testing or doing anything with testing with your library? We're gonna cover code coverage next.
>> Kent C Dodds: So is asking about the lesson branches. So if you are clever and say git branch, actually you're not seeing those on here but if you sorry.

[00:07:14]
>> Student3: If you do dash R it'll show there more right?
>> Kent C Dodds: There we go thank you. So yeah if you show all of the branches then you'll see all these lesson branches. I actually use the same repo to teach a acad course on this same topic. So if you wanted to go look that up, it's kind of fun.

[00:07:34]
But yeah, that's what those are for. This one is a little bit more recent. So fun stuff.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now