Build a Fullstack Music App with Next.js Testing & CI

Transcript from the "Testing & CI" Lesson

[00:00:00]
>> I did at least want to talk about testing I said I was gonna do that and then I wanna talk about the CI. So I'll talk about those things don't have time to actually do them but I'll talk about them for testing we all know the different types of testing.

[00:00:13] There's unit testing, nothing changes here with next JS and unit testing. So you could use just to do your unit testing with your components on a small level that still works. It literally has nothing to do with RxJS. And if you want to in testing, there's so many different solutions out there.

[00:00:29] I've actually just been using Cypress, Cypress is so good. So I've just been using them, really legit. If you just want to test out the API endpoints as well, you can do the same thing. You can unit test these things. I mean, you can mark out these objects quite I mean, there's only two arguments.

[00:00:49] In this case three, you can mark those out so easily. Prisma works just like any other ORM give it a test database to connect to. You're good to go. You don't have to do anything else. That also works in jest. And then if you want to do like, you actually want to test out the endpoints.

[00:01:06] Just like you would test any other API. You can use something like super test or super agent things. That's another one that will just test out the API endpoints for you. That also works It basically the end of the day, there's nothing unique about testing a next as app versus testing any other react app, or any other Express app.

[00:01:25] It's basically the same thing. I don't think there's even like a custom next JS testing suite because it's the same thing. Not that I heard of, if it is it's new and we both want to find out, like right now. I'll update and say use your Cypress and then use jest.

[00:01:41] So yeah it's exactly what I recommend it there's really nothing to it if you've already tested react before you already know how to test this. It's pretty simple so and then as far as CI goes there's so many things to come that goes with CI. I recommend using GitHub actions for the CI, and that's crazy that I'm saying that, coz I'm here, when this came out like two years ago, I was like, I'm never gonna use this.

[00:02:09] It's never gonna happen. I'm just gonna use Travis CI, but it's actually really cool, just have all your stuff built in the GitHub. And the community and the projects around it are also really nice. So, if you wanted to get started, you can go to your repo. Some of them are repositories, we're gonna click on my repo.

[00:02:28] And you can see right here it says actions, you can click on Actions. And you can go through here. And you can find a workflow that you want, I'm gonna type in. They have a search here, I don't think they have a search here. If I want to find one for like testing Express or no it used to be at the top now it's not not like you're not gonna do it, alright.

[00:02:54] Okay, here we go. We got some more. There's a no JS when we start here and acid test scripts ourself. So you could like click here, set this workflow up, and basically you'll get this file. You're gonna have to read their docs on how to actually navigate this Yamo file to understand how to use like their whole jobs architecture and things like that like what steps to take.

[00:03:17] But he's ever seen Docker before, a Docker compose is very much like that. You check out some action, you set some very binary variables, and then you can run some commands, so you can see where this thing actually Test it runs NPM test, right? And then you can you can set this up into your your project, what it'll do is it'll commit a file into a dot GitHub folder slash workflows and put that there.

[00:03:43] Then on every pull request it'll pick that up. All you got to do is in your settings for your repo as you can go down to, where is it, that's branches. You go to branches you can select a branch. You click add a rule. And then you can do is you can set up a rule for like requiring status status checks to pass In this will, if your GitHub action exits with an error.

[00:04:08] That's a failing status code, so then it won't pass. So you would say, yeah, I require all those to pass and then therefore, yeah, it won't do anything until that passes. And that's how you can set up CI so you can write whatever script that you want in there to do whatever you want.

[00:04:22] It's pretty powerful just like any other car. I think the only thing that's different about this is if you wanna set environment variables. That one's a little weird. You have to do it inside of your own personal settings. You got to go to settings and you got to go to where's that?

[00:04:39] Developer settings and now it's not here. There's somewhere you got to add environment variables that's kind of weird. Typically you'll do it on your your organization's settings, so he's not attached to your personal thing. And that's it the other way is just to use something like Travis CI or circle CI Or Jenkins or even slack now I guess.

[00:05:06] This one's pretty simple, It's kind of like Verso. You just sign in with GitHub. You point it to a repo and you tell it what script to run. That's it, and you just got to make sure you set up the script that says, I'm using node I need you to do an NPM install, I need to do to do an NPM test.

[00:05:21] Here's my database URL. It's literally like deploying is the same thing. It's gonna need environment variables. It's gonna need a repo, and then it'll run and it will report back to GIThub for you whether the test failed or not. It's free for open source, it costs money for private repos.

[00:05:37] GitHub actions are free for up until a certain point but for what you mostly need will be free so that's why he's gonna have actions cool. Any questions on any of that stuff that I just talked about deployment, CI, testing, yes.
>> When we did the deployment and it builds out a project it built looks like a built set of pages for sign in and sign out.

[00:06:00]
>> Yes.
>> Like a configuration in next door. It's figuring that out because like if you're just using create reactive by default, it just creates like an index page, right?
>> Yeah, so by default, next JS will do a static build for all your pages unless you put a Git server side props on it.

[00:06:20] So that playlist page had to Git server side props so it did not do a static build of that because it just wouldn't have worked. But it realized like you don't have a good server side props on here this needs to be static. And then when that renders is now client will use client side information to submit the form and everything but yeah, by default everything will be static unless you opt out of it with Git server side props.

[00:06:41] Next year's runs in three modes, right? It runs in client side mode, it runs in server side mode. And then foremost or runs in a fully static mode and then it runs in a hybrid mode of either fully static, plus client or server side plus client. So and it'll do that depending on the functions you write in your pages.

[00:07:03] That's it. Yeah, it's very cool. Highly recommend, if you go look up. They have a very specific thing in their docs that talk about that. I wanna say it's here on pages. Let's see pages. Pre rendering, here we go. So they talked about that they pre made are two different ways static generation or server side rendering, yeah.

[00:07:27] So server side rendering is with each request with a server side prop static generation is what we did at the build time. It'll just generate a page and it'll cache it on a CDN. But then you also own both of those can opt into client side rendering as well, so it gets pretty crazy.

[00:07:41] They have a lot of examples here mostly what CMS is a use case. But yeah, you can of course you're in front of masters because there's a lot of nuances about these. And how they'll more about next day is just take those courses and yeah if you need help obviously just tweet me let me know 10 questions.

[00:08:04]
>> Did you use react testing library for integration testing?
>> I personally never used React testing library I know Kent C DODDS made that live and it's pretty legit But I'm like it's funny saying that but I'm like so old school now. [LAUGH] I just got used to like my own testing situation so I've never used React testing library but I heard people talk good things about it so it looks legit.

[00:08:28] I think if I were to pick something up new today I will use it. But I literally have like my own testing suite that I built myself that I like never published and I just use that. But yeah, looks cool.
>> Can we use user details or can we make user details server side rendered with SWR?

[00:08:49] It is client only now.
>> How can we make user details with STVR? His client only, I think they're talking about the use me hook that we're calling on the homepage. So STVR only works client side. So you can't use STVR on the server side props. But you could make a database query with get server side props in the homepage to get the user data and pass that in.

[00:09:11] Yes, you could totally do that. You don't have to do that client side. I think when we wrote that code I mentioned I was like, there's no wrong way to do this. You can do it either way that you want. I decided to do a client side just to show how STVR works.

[00:09:23] Now custom hooks work. But yeah, you could totally get the user information server side and do it there. I think the benefit of doing it client side there, if you look at the design, I think intentionally, or initially there was this hovers getting my nerves, but there's a dropdown up here with the user.

[00:09:46] Okay, so that's why I did a client side because eventually you'd be able to edit the user and there'll be a lot of client side things happening. So it's this is get the user client side that way, cuz that's gonna change. But we didn't do that so yeah you could totally render that server side just like we rented the artists server side it's fine.