Check out a free preview of the full JavaScript Testing Practices and Principles course
The "Course Code Walkthrough" Lesson is part of the full, JavaScript Testing Practices and Principles course featured in this preview video. Here's what you'd learn in this lesson:
Kent reviews Jest and demonstrates watch mode on files in the repository.
Transcript from the "Course Code Walkthrough" Lesson
[00:00:00]
>> Kent C. Dodds: Okay, so, with that, this application is a combination of a client and a server. The server is just an API server, handles authentication as well. And then, the client is a create react app application. Run npm run dev. Sorry, we're developing, we're not actually running a production app.
[00:00:21]
There we go. That's why the thing didn't pop open for us. Full screen, there we go. Okay, so now it's loading us with our fake data. So you should have I think about ten posts from ten different users and now you should be able to log in with til and the password's til.
[00:00:38]
And then with that you should see the users, username at the top. You'll see this plus button at the bottom. You can click on that and actually add a post. So My Post, hey there! And stuff is cool. Whatever you wanna do there. And submit that and you'll see your post up here at the top.
[00:01:01]
And this is reminiscent of Twitter because you can't delete or edit any posts. So that is actually, I kind of intentionally left that, so you could add that if you wanted to and try to do some TBD with that. Actually we have an exercise to add delete to the API and then you could add that to the client if you want to.
[00:01:24]
So that's pretty much the entire app right there. So there's user management. There's post that can be created. And then we can logout. And see other people's posts and stuff.
>> Kent C. Dodds: So that's the app, and for our first test, we're gonna be working in the authentication piece of the app, so the authentication module.
[00:01:50]
So you can close down the server, you don't need to have this thing open anymore.
>> Kent C. Dodds: And to get started with this, we're gonna be in the server directory, src, utils, and auth.js.
>> Kent C. Dodds: And then the associated test with this file is in auth.todo. If you look at auth.js, that's the solution.
[00:02:22]
Feel free to do that and reference it, but we're gonna be working in auth.todo.
>> Kent C. Dodds: Okay, so I'm gonna be doing the first test, isPasswordAllowed, and then you'll be doing the userToJSON test. If we look at the source code and see what these things are doing. My is password allowed is checking the passwords length.
[00:02:51]
It's testing that the password has at least a number and a non number. And that's pretty much all the stipulation for our password validation. And then user to j.son takes a user object. And then removes all this unsafe properties from it, so we don't wanna send sort and hash and other properties too, to the client.
[00:03:14]
So we're turning that user into safety or something. So that's what you will be testing all that I'm gonna be showing you is task password alone. To learn this test you'll run npm test. And then let's explore this watch mode here really quick, cuz you'll be getting used to this a lot.
[00:03:36]
So watch mode is full of features, has some really cool stuff. My recommendation is actually read the stuff that it's saying, don't ignore it, because it's actually useful. Most of the time, things are useful, read stuff. It's a good thing to learn to do. So, yeah, during watch mode, the experience is entirely interactive.
[00:04:03]
You actually type it in the terminal, and it will change what's going on. So the most important lesson, any new vin user learns how to quit cuz its not straightforward. In just watch mode you just press q to quit. And then I'll start t up again. If you want to run us all of the tests available.
[00:04:26]
And you hit A and we've got clients in server tests all running in parallel just spawns them all off and they'll touch them all. So here once we're finished with a test run, or even during a test run you can interrupt a test run by hitting any character.
[00:04:43]
So if I hit Enter to run things again and I hit any other character like Q. It says test run was interrupted. They say press W to show more. And I can press o to only run the test related to changed files, which is a sweet feature that we can talk about later if you want to.
[00:05:02]
What we're mostly interested in is press P to filter by a file named regex pin. So you hit P, and the file name regex pattern we want, the test we wanna run, is auth.todo, auth.todo.js. And that is a regex, so you could do escapes and stuff. Looks like we actually have two of those.
[00:05:27]
So you could hit P again, utils.*auth.todo.js. And then just from the one you are interested in.
>> Kent C. Dodds: Okay, cool. So just to recap, again, this is where we are gonna want to be. So I am gonna start from scratch. You start MPM test, you hit P and then utils, whoop, utils.*auth.todo.
[00:05:58]
That should get you in this state.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops