Welcome to a live coating with Jesse.

I'm Jesse.

And today we're going to continue with some and and testing for react native web.

So if you're just joining for the first time, uh, this stream is just me, actually, coding don't rehearse anything.

I will make mistakes.

I'll try to do my best to explain what I'm doing.

Feel free to ask questions in the live chat or if you're watching this later on, you can put the questions in the comments, just shoot me.

Ah, message on Twitter.

Whatever other social media, uh, platform that you like, and I'll split this up.

I'll do a 25 minute period of coding and then I'll go answer some questions in the live shots.

If you put your question in, um, I'm not ignoring you.

I will get to it just after a bit of coding s.

So we are using react native.

But we're using something called React Native Web that will take all of our react native code and make it work in a browser.

Eso The benefits of doing that is that we can then take that same rag native code and run it in android or I'll s or whatever other platform that works with react Native.

Ah, It also, uh is a nicer development experience that we can develop right in the browser.

Um, and don't have to spend as much time in an emulator, which usually takes up a lot more.

Your CPU, Um and it's it's harder to debug.

All right, so I want to start out by going over this pool request that I received so you can check out there's a link in the description for the gift of Repo.

All the code is open source.

It's It's all in this repo.

If you want to add something to the code, please feel free.

Ah, have some issues already and you can check those out.

I'm gonna start my timer since we're getting into actual code stuff now.

Um, but we did get a, um, a pool request.

And I like the full request.

And everything that was done in ap Js is awesome.

So, basically, what it would have done is, um uh made sure that the focus went into the input.

So here's our game.

Uh, beautiful.

I know, right?

Eh?

So what would happen is you put in, Let's say four.

And then the inputs not focused anymore.

Right?

So I have to actually click back in here.

Okay?

So not a good experience, actually.

Had my kids play this game a few days ago.

And that's why where I got a lot of the issues that I put in over the weekend, it was just kind of observing what they were doing.

S So now, after this poor request, the focus will go back.

Um, so the thing I have a question about, though, and I'm not sure if you're watching So you did this poor request.

Uh, Sid Seduce.

Sorry.

Not sure to pronounce that, but anyway, if you're watching, you could just answer me right in the in the chat.

Um, so I didn't have an issue where the division this game is supposed to be for Children who are just starting to learn how to do basic math.

Right?

So the, uh, the issue that I had with the division was you would divide like, single digit numbers, and you could potentially get decimal numbers, and Children wouldn't be able to do that right.

They probably don't even have the concept of a decimal yet at that point, So I wanted it so that when you divide, you'd always get basically.

You'd always get a whole number.

Answer.

Okay, So I think maybe in the issue and explain it clearly because And correct me if I'm wrong.

It looks like what this is doing is it's just taking whatever the answer is from the division, and it's just rounding it, right, running it down.

Uh, so what I what I actually wanted and I put a little comment here, too, is what, actually one it is to make sure that the problem given to the user the division problem would have a whole number.

Answer.

So, for instance, nine divided by three is going to give you three, right?

Just 34 Divided by two is gonna give you two, but three divided by two is going to give you a fraction or a decimal.

Same way with, like, nine divided by four.

Right.

So the user would never be presented with three divided by two or nine divided by four.

Right?

So that's more of what I wanted.

Um, and I have a couple ideas for how to implement that, but if anybody else wants to implement that.

Please go ahead and to do.

If I guess so.

Like this part of the pool requests is great, and I'm ready to accept that.

But this part, like I said, I think it needs worked a little bit differently.

And that's that's probably my fault for not, um for not like explaining it.

Ah, well, enough in the issue.

So maybe Oh, um, copy.

This is well, and put it, add it to the issue.

Yeah, Yeah, I didn't Really?

Yeah.

I didn't really provide many ex much explanation or examples.

Okay?

So hopefully that made sense.

And we can go back to some of the code the testing code.

I do want to say what's up and just check and see who's here.

Who's watching eso.

Hey, everyone see a lot of you in the live chat?

Um, just scrolling to really click.

Okay, I already see some questions in there, and I will, um, I'll get to those questions as soon as the tire goes.

So hang in there if you can't hang in there right now, if you gotta go do something that's cool, you can always watch the recording of this later on, and you can hear my answer to your question there.

All right, so we did some testing, and briefly, I'll just go through this.

We're using puppets here to run a headless chrome browser, and then we are simulating what a user would go through and verifying that our app does what we wanted to do.

All right, so this is the end and test.

If you want to check up, check out like how we set this up this browser dot Js options dot Js and runner dot jazz Those air the files you want to check out for the set up, and then the actual test is just this one file for now at dot Spectra Js.

Uh, if you want to know more about the tests, check out the last stream.

So we started this in our last live stream that I'd done a week ago.

But let's let's jump into this.

So for now, we're just Our first test is we're checking to make sure we can actually see the title.

So, like, this basically verifies that the page loads and it has the text on it that we wanted to have um, we also verify that the hero character can be seen.

So when I say the hero, I mean this little purple square for now, uh, still need to work out some graphics and a better color scheme for this.

Although my kids did like the colors so well, these aren't really This doesn't look great to me.

It actually may not be bad for kids, so Oh, see, I think I need some more testing user testing before I make a final decision on the colors.

Um, let's see.

So we're testing that.

And what I'd like to test is also do we have the correct number of, uh, enemies Eso Right now we're testing addition, all right.

And it were saying we correct edition problems should reduce the enemies by one.

Right?

And we got pretty far along in this, but not quite.

So we have our value.

One our value twos, who are actually getting the numbers that are on the page for our problem.

Right?

So and we're getting the okay.

And then we're adding these numbers together, right?

So potentially we would do the same test for each mode of the game.

Right, which for right now is addition, subtraction, multiplication and division.

All right, but once we get this addition, one working, we could pretty much just copy and paste most of it to get it working for the other modes.

All right, so we have it all the way down to where the user would click.

Submit.

And what we need to do is just figure out okay?

Are there just too elements left with the class of enemy?

So I believe we already added that class.

I should verify because test definitely is gonna fail.

If we don't have anything with that class on, it s it's good.

Or abduct Js and check out our enemies on Where's our enemies?

Oops.

I went too far.

Yep.

So we do have a class name of enemy on all our enemies.

All right, so let's go back to the test.

So what we need to do then is just figure out in our tests how to do this.

So I was thinking that we could There's gonna be some way to check for the number of enemies.

So let's go over here to our documentation, which I thought I had some documentation open from the last time, but I guess not.

All right, so let's let's think What would this be?

You probably not puppet to your documentation.

Looking at.

Maybe just we'll see.

All right, let's check this out.

It looks like I've been here.

I've been to this article already, and All right, let's open up the documentation for both of these.

I was hoping I get lucky, and I'd see him An example of them doing the same thing instead of having to look at the documentation, but I don't think that's gonna have it.

Okay, uh, let's check out puppeteer.

A P I puppeteer is what actually runs wth e.

Um, interactive documentation.

This is it actually runs the headless browser.

We can see we have page a lot of options.

Should with the puppeteer.

A p i away page.

Uh, and I don't I don't actually think that puppeteer is gonna give us what we want, Which is why I opened Justus.

Well, um, see if they got a link directly to the docks.

Nope.

Not your dogs.

Oh, uh ah.

Ducks.

Here we go.

Mark functions.

I love her property here.

Uh, a p I That's what I want.

Okay.

Disc.

Uh, I hate to just look through docks when I'm doing the coding, but I really don't know what the, uh what's the correct way to do?

This is if anybody has an idea and nose, uh, good.

Throw it in the chat as well.

I'll keep trying to look over and, um see, if you have ah, answer are so let me make this bit bigger so you could see what I'm doing.

Okay, so And just to be clear, what I need to do is figure out I need to get the exact number off elements on the page that have the class name of enemy describe E.

Yeah.

These are not helping me.

Oh, you know what I had last last time.

Now I remember this.

I had my other computer open, and I think that's where I actually had all of the the documentation open.

And I kept checking my other computer.

That's why I didn't have any documentation open on my machine.

Um, maybe I still have it open.

Let's check this out.

And I, in fact, do have quite a bit of documentation open on my other screen right now.

Uh, Let's see the problem with what I'm doing right now in testing, at least for me is so I'm using several different testing like framework.

So potentially like on the same page, we could be using things from puppeteer, jest, mocha or chai.

Right?

So trying to find the right thing to say in the documentation has been difficult.

Um, there's a good time to remind everybody this is not a tutorial.

This is me trying to figure out how to do things.

It's supposed to be a realistic look at how a ah, a software engineer works.

Sometimes it works out well, and I get things done, and sometimes I don't.

All right, so let's just try something.

Um, So we have just copied and pasted this from appear with this comment.

So we have our Our result now would be after we've click submit, we're going to check for our inner HTML, and we should be able to expect the result to contain.

And instead of hero, we could say enemy.

But we want it you want to enemies at.

So that's the issue.

Expected, uh, number of all right.

And now is that c just testing fun number of S O.

If you couldn't see that, I just searched Jess.

Testing.

Find number of elements with class on page.

Fine selector enzyme.

We're not using enzyme, so it's not gonna work.

Yeah, let's see.

Jake Query.

Get out of here.

Um, just she is.

Cook your I switch it up, react on dhe too.

And testing.

All right, let's look at these for no door manipulations.

Don't Let's hear me test the phony.

Simply J Creek.

It was since uclick event user.

Just Yeah, not exactly what we want.