I'm Jesse.

And today we're going to do some testing.

So, uh, I got a few comments on the chat already.

Eso you think it's just Everybody's saying, Hi, everybody.

If you're just joining us for the first time, we are building a game just a really basic Children's game to help them learn math.

We're building it in react native web, which means we use react native syntax, and then it gets turn into a web.

This may seem a little bit strange.

Why not just use react?

Um, well, if you do it like this, then you could use the same code base for a Web app and a mobile lab s.

So that's why we're doing it like this.

If you want more explanation, check out some of the early years streams, like maybe like day one into on.

Then I go and a lot more detail about why we're doing it like this.

All right, so this is the way the stream will go.

I'm gonna start a Pomodoro timer.

25 minute timer.

During that 25 minutes, I'm gonna focus mostly on the code and just narrate when the timer goes off, I'm gonna go to the live chat and answer questions.

So if you have a question, uh, just hang in there, I will get to it.

A TTE some point.

I do read everything in the chat, so I'm not I'm not ignoring it.

Just trying to get some get as much done as I can.

Um, early on, when I started streaming, I tried to keep up with the chat, as I was coding and really quickly became apparent that I would get nothing done if I kept on interrupting my train of thought for the chat.

Okay, um, great.

We have some viewers.

There is a little lag on these statistics, and it looked like nobody was watching for a while.

All right, um, I do want to, um, point out CR pool requests.

Yes.

So we have full requests that have not been merged.

So I do want to merge these pull requests first before we get started.

Um, so some of these like the ad, the license?

Uh, awesome.

I could just auto emerge.

This, um not gonna have to test it.

We can just check what files changed, and we've added the license.

That's the only thing that changed.

It's always important to include a license with your open source work that lets people know if if they can use it, how they can use it.

Um, so he's trying to get that in your project as early as you can.

So I'm just gonna merge that, confirm that merge and right a little thank you note.

If you're maintaining open source project, I think it's really important to always thank people.

Um, even if you end up not accepting their their pull requests, it's it's still, you know, they put in work.

So, um, cart cart icky.

Thank you so much.

I'm not sure if you're watching right now or not, but I really appreciate that.

Let's check out the other full request we had.

This is add submit on Enter key Press.

So this is also my kept mentioning that I wanted to implement this and then just never, um, never got around to doing it.

Um, so this was good for this one, too.

I'm just going to check the files because it should be a really, um, simple change.

So, yes, it's, um, on Smith six and puts I want to exchange on Submit editing.

Actually, that's really interesting.

I don't know.

So, uh, who did this?

Fool requests, etc.

Ah, Ibrahim, if you're watching, let me.

No, I'm not familiar with this.

Like, um, the on submit editing.

I'm like, I'm not saying it doesn't work, but I'm just not familiar with it.

So I'm gonna go ahead.

And since this is such a simple change of an emergent and we'll just test it like on the fly, normally, if these were more extensive change, I would actually pull it down.

It's a separate branch and then test it and then decide whether or not I'm gonna merge it.

Um, but for very small changes like this, especially on a little side project like this, I don't really have a problem merging.

Merging these as is.

So let's merge.

This is well, all right, so now that should be in the code.

We still have some open issues.

Eso let me close these cause These this one is closed now, um, that's close.

That and then this one is that on submit Anarchy Press.

You could see that.

Ah, that's been merged there.

Let's just verify.

Um, that this is working, so we'll do a get pool that you're going to get pull, and we should have it.

We have the changes.

And so now let's check our app and see what happens.

Ah, let me do a hard refresh.

Just see.

Okay.

Cool.

Great.

Yes.

So we, um we do have a submit on Enter Key.

And that's really cool.

I definitely want to look into how you did that, because up until this point, cr ap dot Js So you have our press here.

So what I had done before was like, um, instead of this on submit editing.

That's wild.

Okay, that's cool.

That must be built into react.

Native.

Let me see.

Basically says, basically awesome it at an angle trigger an event provided when the go button is clicked from android soft keyboard.

Nice.

Okay, so this is intended to work with the android soft keyboard.

But when you're doing it on the web, it actually submits on enter.

That's awesome.

I have some other stuff I'm working on that I'll probably re factor to use this now, because otherwise I actually just would track the key press and see if it was the answer key, that would press that would submit.

But that is excellent.

That's really awesome.

Uh, that's what I love doing this the show because I learned so much, um, like, even little things like that, which, you know, when it comes to the code, it's going to reduce my code slightly.

But, you know, I use that a lot of places.

So, like, overall, it's gonna have a cool effect in.

It's also gonna enable functionality on mobile with the same coast.

So where Obama will share the same code, which is pretty awesome.

So thank you so much for that.

Um, that was Abraham.

That's Yeah.

I think that one knows everything so awesome.

So let's go ahead and close that as well.

Okay, cool.

Yes.

And now we just have one open issue.

I'm sure we'll add to that already.

I talked with, um, someone on Twitter about some other things that need done, and I need to make issues for those as well.

But today we want to focus on testing.

All right.

So in particular, I'd like to set up some end and tests.

These will definitely work with the web version.

I'm not exactly sure how the test would work with mobile.

So once we end up doing a mobile build, then will I think about the test for that.

But right now, since we're only worried about Webb, we're just gonna go with with the web stuff.

Um eso Here's what What I'd like to use is, um, puppeteer okay to do a headless chrome browser, and then so basically, you know, it will mimic what the user is doing.

Um, So I'm gonna open on another screen.

I'm gonna open up a, um, package Jason file that I have on another project and to remind me of everything that I need to install.

All right, so let's go with.

Here's what we're gonna go with for our installation.

We're gonna do a yard ad, and then we're gonna give it this d flag, which means it's gonna be added as a dev dependency.

All right, Deb, dependency is not gonna be included.

Like in your build, right?

So, um, things you don't need for the program to run tau actually run.

You can put in your dead dependencies, and then that will, um, decrease the size of your build, But people who clone your repo will still see like Okay, I need these for testing or whatever you need these for.

All right.

So I'm gonna do Chae Mocha.

Um oh, mocha, um puppeteer and e think that's it.

So we don't We're gonna use Jess, but we don't need to bring ingests because, um just is built in with create react app.

So since we use create react that we already have just in fact, if I would try to add, just create your act, applewood, give me a message in the console saying like, Hey, we've detected different versions of jest and so we're just not gonna digest.

But we're also gonna add, um, enzyme.

Now, Enzyme is from Airbnb.

I'm not sure what the status of that project is.

Airbnb is moving away from react native, so that may not be, um, kept up to date, but for what we're going to use it for, it's gonna be fine.

Um, but they're just keep that in mind, though, that, um maybe a good idea to find a replacement for enzyme, but I'm used to using enzymes.

So at this point, I'm just I'm gonna go with it.

And, um, I'm expecting that at some point, we'll probably have to figure out how did you stuff without using enzyme.

Um, so these are just gonna install the packages while that's happening?

We can add in to our package.

Jason Another, um, would see.

So we're gonna add in another script.

All right, so react scripts.

This this is what create racked up comes with, um, already has its tests.

Yes.

We're not gonna use that.

I'm gonna make another one that I'm just gonna call e to e.

All right, cause we gonna this is gonna be our end.

And Tess And then in our end end, Tess, I'm going to, um this is gonna be a lot.

So we're gonna run mocha, and we're gonna give it a time out of see, it was my time out here.

30.

All right, so that'll be, like, 36 to the timeouts in milliseconds.

Um, give it 30 seconds right now.

That should be enough for what we're doing.

Depending on how many tests you have, like it may, you may want a greater time out, but for now, I think this should just be this will be fine.

Um, and then we're going to set up some files, but I'm gonna call these files right now, So we're gonna end up having a folder called E Toohey and runner dot Js.

We're gonna split out some of our testing into separate files.

So we're gonna start this up from our runner dot Js file, and we're also going to do Let me see it, poopsie to you.

And we're gonna have a Tests folder, and then anything in that test folder that has the Suffolk ce of dot speck J s.

We're gonna We're gonna run those tests.

Yeah.

So this is basically that this is our command or running mocha with the time out of 30 seconds.

Okay.

We're using our runner Dodge as firewood.

You'll see that in a second.

Um, and then we're gonna have our anything in our test folder with this Suffolk CE is going to run as a test.

So let me save that poops failed to save.

Okay, Let's, um I'm gonna cut that for a second and just close this.

Don't save.

Let's reopen this.

So, um, as these were installing it made changes to package a song so we could see we have our dead dependencies now.

So that's why I gave me that message.

So let's just add that back in and save.

Now, Um, if you didn't see that message was just saying there were newer changes that were made.

Um, so there was, like, conflicting.

Right?

All right, so now we have our dead dependencies.

We have this set up or in then test.

Now we need to actually, um, bring in our test.

So what I'm gonna do is I'm gonna go to a previous project that we did on on this show.

Um, So I believe maybe this was like, Project five or something.

I can't remember for sure.

Um, but I'm gonna go to my get hub and let's go to a Ford.

What's good here?

I believe I had it set up here.

Yep.

So we have a test folder here, and you could see Oops.

No, that's not it.

There's a unit test user in and test.

So we're gonna grab are set up from this project, and this will save us a lot of time since we already have it set up.

Um, and then we're going to use that, Um, So I'm going to open these so we can just copy and paste very quickly.

And we just grabbed, like, one of these just to get some boilerplate.

All right, so, no, I could see run.

Ah, you notice?

I don't know if Ah, harsh.

It is watching right now.

This morning.

I haven't seen him in the chat, but ah, harsh.