Name: React Native Web Testing Part 2 (P7D10) - Live Coding with Jesse
Uploaded: 2020-03-28T17:27:50.000Z
Duration: 1 h 5 min 9 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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'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.

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.

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.

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 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 what would happen is you put in, Let's say four.

So I have to actually click back in here.

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.

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.

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.

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.

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.

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

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

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.

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

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

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.

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

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.

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.

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.

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.