Placeholder Image

Subtitles section Play video

  • everybody welcome a live coating with Jesse.

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

  • It set these up initially on this project.

  • So, uh, thanks again to harsh it for doing the initial set up on these on these tests he's in and test.

  • Okay, so this will be our runner dot Js file.

  • So you could see, um, this is just basic.

  • Set it right.

  • Like we're requiring, um, browser and options, which will see those files in a second.

  • Uh, and then we're just starting it up and closing it down.

  • All right.

  • Starting up our head, This browser closing it down, innit?

  • It's nice to have it in this file.

  • Otherwise we would have to do this, like, before and after all of our tests.

  • So this just the saves us some work.

  • All right, So let's go back to here and let's set up our our folders.

  • Right?

  • So we want a folder called E to E inside E T.

  • We want to add a file called Runner.

  • Not her.

  • Hadn't run there dot Js and we're gonna copy that in.

  • Okay, um, let's go back here and do Oh, yeah, close this.

  • So No, I don't need it.

  • This is our browser dot Js.

  • Okay, so let's copy.

  • This will go over in a second.

  • Uh, I found out about being able to do these multiple deaths ops on windows, so I need to get used to the, um, the shorthand keys for that.

  • So I think it's like Windows control.

  • Is that it?

  • No, it's not.

  • It the window control.

  • All right, Maybe I don't have my heart key setup.

  • If anybody knows about how to do these different desktops on ah, Windows, let me know.

  • Um, but I definitely don't have it down so far.

  • I wanted to just work just like it does in Mac, but I haven't got that down.

  • All right, so let's verify this was browser dot Js.

  • So let's create that browser Dodge s and we're gonna copy that in eso in browser dot Js.

  • All right, we're requiring puppeteers.

  • That's where we're bringing in puppeteer, right?

  • And then we're setting this up, right?

  • So this is just like the boiler plate that you need to set things up.

  • We pull in our options, which we we Ah, well, having options file for that, right?

  • So this stuff, like, once you have it set up, you probably never change it.

  • So this is the only time we're ever really gonna look at these files.

  • And our last one, our last set up file, will be Oops.

  • Did I forget to do?

  • I think I accidentally closed options options yet There we go.

  • Okay.

  • The options is the the easiest filed figure out what's going on?

  • Um, options.

  • J s okay.

  • So in our options, that J ass Rick, we're setting our trap.

  • You r Oto local host.

  • Right?

  • Which we're gonna test locally.

  • We're running.

  • Ah, our project on local 3000.

  • So obviously you change this to whatever you need it to be, and then we're gonna run this in headless mode.

  • If you sent this to false, you actually see a browser pop up and you'll see stuff happening in the browser, which is kind of cool to look at, but if you're doing these tests, like constantly, uh, it gets annoying after a while, So I usually just said it thio to true and leave.

  • It sets a true Oh, no.

  • We may do, like, one test run once we get some test set up.

  • Ah, well, we have it set too.

  • Um, false.

  • Used to see.

  • Also, if you're having trouble with your test, sometimes just looking at what's happening is a good way to debug.

  • Actually did that yesterday is, um, having some issues Where the test for hanging at one point and after I ran it, not in headless Modi could see exactly what was happening.

  • Ah, and it helped me to debug the test.

  • So, um, there are times when you would run a actually see what's happening.

  • So let's close these out.

  • Now that we haven't set up, let's make our actual tests folder.

  • Oops, that's not it.

  • I want to make it inside here.

  • So tests.

  • And then inside Tess, let's at our first test.

  • If you got some comments in the chat in about four minutes, I'm gonna go back to the live chat and answer your questions.

  • So hang in there.

  • So we're gonna have to change this.

  • Abed, I don't remember what's going on in this test from the last project.

  • It may actually work.

  • Um, I think it may just be testing to make sure that something loads on the page groups.

  • So we're gonna make this.

  • What do you recall this one?

  • Um, paged out.

  • Spectra Js Yeah.

  • Let's just call this one app dot spect dot Js?

  • It was that Yeah, a suspect.

  • And that will paste this in here.

  • And let's look at what this test is actually doing.

  • Eso were required.

  • We're pulling in this.

  • Expect from Chae.

  • Okay, so we see we use it down here and we'll get that in the second.

  • We're also pulling in tests from our browser foul.

  • Right.

  • Um, So what we're doing is so let's say I don't want Paige to.

  • It's a describe.

  • This is, um just put some in there for now.

  • And for NASA's page can be seen at slash page, and I'm not gonna say slash Paige, I'm just going to see at slash, right?

  • So just that our home.

  • And so we're gonna start.

  • Our tests were passing in our browser, in our options, they So now we are loading a new page, right?

  • It's a new page and that this everything going on in here is kind of a mix of stuff you can do with puppeteer with Chai with Jess.

  • So it's like it's very with mocha.

  • Um, so when I do this, I usually have to have, like, four different documentation.

  • Page is open, but once you get like a few tests written, you can usually just modify a copy and paste and modify your tests as you go along.

  • Um, so now we're actually going to let's get rid of this because we want to go to the home page.

  • Right?

  • So this is gonna be our girl from our options, which is local host 3000.

  • Okay, now we're creating ah, constant toe hold the value of body, right.

  • So or it's just gonna be the string body, okay?

  • And we're gonna wait till we find the selector body on the page.

  • Right.

  • So html pages all have right, like body.

  • Let me check my time.

  • All right.

  • One minute we'll go to the chat.

  • And then now we're creating a constant called inter text.

  • So we're doing is we're evaluating the page and we're looking for, um, all of the inner text that's inside of body, right?

  • The body tag on the page.

  • Right.

  • So this is not gonna give you html just gonna give you text that's on the page.

  • And in this case, we want to make sure that 404 which would be a 44 air, does not show up anywhere on the page.

  • So all this test is doing is saying that something loaded when we went there like something other than a 404 error happened when we went to this page.

  • So this is a very basic test.

  • It's not saying much.

  • Um, really.

  • Not much of Oh, um, but this test should run.

  • It should work.

  • So let's let's test out the test here.

  • And let's say yarn e to e and see what happens.

  • Okay, so test is running.

  • Home screen can be seen at slash.

  • So we've passed our tests.

  • It took one second total, so they rounded up.

  • So it's kind of nice if it shows you all the tests that you pass, and it'll tell you how long each one took, and then it will give you a report of how many you pass and how many films.

  • So that's our first test.

  • Um, it has limited usefulness as it is now, but we will add on some more tests that will be a little bit more useful.

  • And hopefully that'll give us confidence to be able to make changes.

  • And we'll run our tests and be sure if our test passed that are changes have not broken anything.

  • Um, we also, if we have time, we might set it up so that the test will run automatically when you try to commit.

  • Ah, and you won't be able to commit unless the test pass s So I think that's kind of cool to set up.

  • Um, here we go.

  • Here's my timer.

  • All right.

  • So I'm gonna take a short break.

  • I'm gonna go to the chat, and I'm gonna start way up at the top and try to get through as many questions as I can.

  • And I also need a drink.

  • Okay.

  • Um all right.

  • So I'm gonna skip through all the hellos, but I'm just going to give one big hello to everybody.

  • That's saying Hi.

  • Okay, we have a request.

  • Robbie says please make a video on JavaScript and angular jazz.

  • I am not.

  • I have very little knowledge of angular Js.

  • So I'm probably not the best person to make that video, But we do.

  • I think we do have some angular videos on the free code.

  • Can't channel here, so check those out.

  • Um, let's see, um, cat car cart icky.

  • Um, I'm not sure to pronounce your name, so please let me know how it should pronounce it.

  • But anyway, they say thank you for merchant.

  • E p r o.

  • You're welcome.

  • Thank you for submitting the PR.

  • That was super helpful.

  • I definitely appreciate it always gets so excited when I see that pull requests are being merged.

  • I need to put more issues in so that anybody that wants to work on the project will know what with ads.

  • So, um, maybe I'll try to do that today.

  • And if you all think of some issue or some feature see a bug or something, feel free to put an issue in the get every pose.

  • Well, um, Michael career said And now the wait for puppeteer to install it actually installed really fast.

  • So if I was trying to do the stream on my laptop, that would have been the end of the stream like it would have just the frame's frame rate would have dropped like it was taken forever.

  • But on this new machine, like I'm I'm very impressed with my new ah, my new PC so far, and it's performance while streaming All right, Michael lenses What is react?

  • Use for react is used for creating Mmm, sorry about the owns reactors used for creating Web APS.

  • Um, like single page applications, Progressive Web abs but react native, which is what we're using, can also be used to create mobile APS.

  • Um, basically, that you can create a wide variety of things with react because it has the ability to render to four different platforms.

  • So you were, uh, javascript.

  • HTML type code can be transformed into something that can be run on a variety of devices and platforms.

  • Eso it's very, very cool.

  • I mean, that's a very like short summary and leaves out a lot.

  • But that's basically what react what I use react for.

  • Ah, then Danjuma says, F Y I for your information.

  • React also builds V.

  • R.

  • EPPS.

  • I have seen that and I'm really, really want to build a V r.

  • Rap it some point.

  • So maybe that could be one of our next projects.

  • Uh, maybe we could have battle my V r.

  • Who knows?

  • But I definitely want to try that out.

  • Uh, Motown says the screen is blurry.

  • OK, let me knows.

  • Anybody else having a blurry screen?

  • Um, on my end, like all the analytics air saying the stream is fine on my end, but let me know.

  • Um, it should be.

  • I should be putting out 10.

  • 80 p.

  • So if your connection can handle it, um, you should be getting a 10 80 pee stream right now.

  • Uh, Nikki says, Have you tried Cyprus for Indian testing?

  • I have not tried Cyprus, but I'm interested in hearing more about it.

  • Uh, James Locke says, Sir, please tell me what should I choose Software Deb or Web Dev for better job opportunities?

  • Um, it kind of depends on your area and what's in more demand.

  • So I guess it really does depend.

  • Like I don't know where you're at our which you where you're looking at two.

  • You actually get a job.

  • But there are a ton of jobs either way.

  • Webb have software.

  • Deb, I really like the line between a Web.

  • Dev and a software developer are so blurred now with things like like, a web developer could create a desktop app or a mobile app using the same tools they used to do.

  • Web apse.

  • Right.

  • So it's the line is very blurred.

  • So, um, you probably could learn the same skill set essentially and get a job doing either one.

  • Um uh, bottom left corner.

  • Okay, so we're saying all time.

  • Yeah.

  • Let me try this.

  • Actually, first, Like when we have this up here so I can all tab and see these screens.

  • Okay.

  • What I want to try to do, though, is do, um let's see, what I want to do is be able to do a shortcut to just automatically switch to another desktop.

  • So, like, I can tab and I can see like, there's two death stops here, but I don't want to even see it.

  • Like I want to get to the point where I can just do like, wait a second.

  • Did that?

  • No, that's not it.

  • That's what I did last time.

  • And I, um the guy that sits next to me at work yesterday was we were messing with it, trying to figure it out.

  • And I think he was able to do like Windows Key Control and then Arrow keys, and it led him switch.

  • But it's not working for me right now.

  • Let me see.

  • Maybe Windows bolt when the shift.

  • Yeah, it's Windows shift.

  • That's it.

  • Okay, awesome.

  • So Windows shift lets me go back and forth.

  • This is actually weird.

  • It's It's changing both of my screens, though.

  • That's weird.

  • All right, so I don't want that.

  • I need to look into this more.

  • So, uh, what it was doing was when I'd switch to, like, right now on the screen, and you all can see that I'm in the code.

  • But when I press window shift arrow key, it shows this screen.

  • But on my other screen, it's now covered up my, um, my streaming software, and it's added the code over there, so I need to mess with.

  • Maybe the settings learn more about that, But if you've ever used a Mac, it's very easy.

  • Like to go between your desktops s.

  • So I'm trying to, like, get that same ease of use on Windows because I'm just so used to it for my Mac.

  • All right, but anyway, let's write some tests.

  • So I'm gonna marked down here where I left off at in the chat so I can come right back to it.

  • Um C 7 53 Looks like a good place of a 53.

  • Okay, So come right back to their Ah, and continue on with a live chat after we do, Um, Another Pomodoro session.

  • Yeah.

  • So I may not do this entire session.

  • I just would like to get one additional test written and then try it out.

  • Um, so let's see.

  • Let's go.

  • Let's go back here and let's think about like what we would want to test.

  • So right now this is basically saying, um can we see?

  • We expect it not to contain a 404 All right, but that's not really, like, potentially.

  • That's not telling us.

  • A look at the page could not show anything.

  • Really.

  • Um, and this test was still pass right?

  • Eso Let's add something that's going to give us a little, like, better indication of what's actually gonna happen on the page.

  • So let's expect inner page to contain.

  • And I believe we have the word battle math here, so let's expect it to contain battle mouth.

  • Right.

  • Um, and let's see if that if that passes right, so not only do we not want a 404 error, but we we wanted to say battle math.

  • Okay.

  • Um, really, if it says battle math, we probably don't need that for for So let's just get rid of that.

  • Right.

  • Um, so I want to know, like, not only like, is there something there, but is there this title there, which should be there on all the pages?

  • Um, let's see.

  • Run this.

  • Oops.

  • Okay, so that passes now.

  • Still took about the same amount of time, actually, a few milliseconds less than the last time.

  • Um, so now I think I'm no expert intestine, right.

  • But I think this is a little bit of a better.

  • It tells us more, right.

  • It says, Hey, we went to your home page, and the title of your app is actually visible at your home page, right?

  • So if this test were to fail.

  • I know something is definitely wrong with my abs.

  • So I broke something for sure.

  • Okay, let's try to make another test so we can copy and paste this it right.

  • And we can make a completely new test here.

  • So we could say, um, let's look at our act for a second and say what else?

  • Let's re started.

  • See what our basic, um, thing is like, what else would we want to see on the page?

  • If we didn't see it on the page, it would definitely be a problem.

  • All right.

  • So, um, I guess, uh, it's I mean, we would want to be able to see on the very first page like a hero and three enemies.

  • Um, let's just Let's do one for now.

  • Let's let's say we can definitely see a hero character on the page will keep it really basic.

  • Right.

  • Um So what would do is in our app dot Js We need to give our hero and I d so that we can picking them out on the page.

  • Right.

  • So we have our hero right now is just a view.

  • Alright.

  • Eventually this will hopefully changed and it won't just be a square.

  • Ah, but for now, it's a square.

  • So normally we could just put an i d here but in react native, we want to use native I d.

  • And eso actually with react native web.

  • If we just wrote idea, it would work.

  • Okay, but it it won't work.

  • Um, with well, you know, it'll give us At least I think it will throw a warning at some point that we we can't use I d.

  • S or something like that.

  • So it's been a while since I did that, but I do remember getting some sort of warning about that.

  • So anyway, the react native way to add an i d is with native i d.

  • So let's just say hero, right?

  • And usually you remember.

  • I mean, this is like, basic HTML stuff, but you only wanna have one.

  • I d on the page, so they have to be unique.

  • So there should only be one hero on the page one hero.

  • I d Okay.

  • When we get down to enemies, will probably want to do is instead of an I d.

  • We would want to use a class or we would want to give each unique i d but saying something like the i d equals enemy and then like the generator.

  • So the enemy, like zero enemy, one enemy too.

  • Right s.

  • So it's just whatever you get, the idea can be whatever you want, but it has to be unique.

  • Ah, let's see.

  • Looks I meant to go back to our test.

  • All right, so now that we have that, um, what we can do is we can say, um, honey, grab.

  • Let me go back to my other screen here and see some of the other tests that I've I've set up s.

  • So what we can do is we can check for the HTML.

  • So let's do one where we actually check for the inner H T m o eso.

  • Um, let's get rid of this for a second.

  • And can we get rid of this too?

  • I believe we can.

  • Yeah.

  • So let's get rid of all this and just show kind of a different way, um, to do this.

  • So right now we're still getting our page.

  • All right, we're still awaiting, like, we're gonna go to that home page.

  • But now let's do a, um, let results, uh we could probably make this a constant Really.

  • Const const.

  • Result in general, it's good to use Const.

  • Unless you really need to use something else.

  • Um, so we're gonna just call this a result we're gonna say, Oh, wait, okay dot Evils.

  • We're gonna dio e v a l all right.

  • He's not even though.

  • And then we're gonna evaluate body.

  • So remember last time we actually made a constant for body selected for body.

  • Right now, we're just gonna skip that and just say body.

  • All right, um, and then inside here as our second argument that we pass to eve out right, we're gonna put ah, function.

  • Right.

  • So we're going to say e just gonna do an arrow function.

  • So we're gonna dot ee dot inner We're gonna do each TML this time instead of text.

  • So what this will do now is before we just had the text, right?

  • So we couldn't, for instance, like, verify that there was an input on the page with this or anything.

  • This is just giving us the text.

  • Now we'll actually be able to see things that are in the H e mail in the markup of the page.

  • So we'll be able to do something like we expect the result to contain.

  • And we could say, um, what do you call this hero now?

  • Normally, the hero would not show up under text, right, cause that doesn't actually display his text on the page.

  • It's It's in attributes of, uh, H T M O Element, but now we should be able to see that.

  • So let's save that and run our end and test.

  • See if we've done it correctly.

  • Yep, so we can see that title battle math, hoops and I forgot to change this.

  • So let's change this, too.

  • Um, visible at slash and hero, I say hero can be seen it slash let's change it up.

  • So keep it, keep it the same.

  • So title give me seen at slash here can be seen.

  • Okay, so now would you see, like in our testing will get better messages.

  • So you title hero.

  • And so it's good that to give these good names so describe, you could give, like the name to the whole group of tests that you're doing and then under the that each it's you can give a name to each one of these.

  • A descriptive name to what you're testing.

  • Then when you see like a test will fail, it'll be a lot easier to figure out what you need to look for to fix it if you give nice descriptive names here.

  • All right.

  • Uh, let's see how much time I have.

  • I'd like to do at least one test where we actually, um, like, do something on the page.

  • So let's see, we need to do a little bit of set up in our app dot Js.

  • So, in order to get things from the page, that's Sue over at.

  • Okay, so right now we have inside this text, we have our value, our operator and our value, too.

  • But that's gonna be hard for us to get access to in our tests.

  • What we really should have is, um, we should have ideas for each one of these, right?

  • So let's let's do that.

  • Let's switch this up and let's put let's separate these out so that we have three text.

  • Um, let me verify their styles won't get messed up by their styles.

  • That math tax, where our style that appear?

  • Okay, You know what?

  • I'm actually, I'm gonna move these styles down below, because I just I like moving them down below.

  • So that, um, this first stuff that you see is more like the actual, like, logic of the component.

  • So I'm just used to that, uh, if so, that's what I'm going to use for my projects.

  • There's nothing wrong with Put him up top.

  • That's just what I've been used to.

  • Like I said, I just like to see as soon as I see the component.

  • First thing I'll see is like the functions, the logic I'll scroll down, actually see the mark up, and then the styles at the bottom is usually the styles tell you the least about what the component actually does is just my experience.

  • Um, so our mass texts Oh, it has a font size and a padding.

  • Right?

  • So we're going to get rid of that padding, right?

  • Because we don't want that everywhere.

  • Right?

  • So let's get rid of that padding.

  • Right?

  • And let's make sure you put that on the view itself.

  • Uh, where's the math row?

  • Actually, you know what?

  • We can put that on the text input.

  • So we have styles.

  • Input.

  • So we had ah, important for him.

  • Oops.

  • I thought I had the, uh, Erica.

  • What was that again?

  • Patting.

  • Right.

  • There we go.

  • Okay, So where to Move this and make it a padding left.

  • Or better yet, let's make it a margin left.

  • Okay.

  • All right.

  • So now the input is gonna have a margin left.

  • Right?

  • Which should take care of this.

  • And now we can actually copy and paste our text here without worrying about weird spacing happening.

  • Okay, so now we're gonna have text hoops.

  • Totally mess it up.

  • I wanted to do is get it.

  • If these and this is for this one, we rid of that.

  • And then, actually, I guess we need another one for equals.

  • Um, there we go.

  • All right, so first off, let's see if this even displays properly.

  • Aye, it does.

  • Missing from spaces, but that actually looks okay.

  • I may like that better without the space is not.

  • I think about it.

  • I get I Yeah, I kind of like that.

  • I'm gonna leave it without spaces for now.

  • Um, but now with this will let us do is add native I d s so we can have a native i d For each one of these and our native I d will be like, Well, let's just say vow about one, and then for this one, we'll make it about two for this one.

  • We don't need anything.

  • Ah, and for this one will just say operator.

  • Hey.

  • All right, so we have that.

  • Now.

  • Our input needs a native I d.

  • That's a native I d equals, Um, answer.

  • Let's say answer input.

  • Keep the same answer in foot.

  • Yes, Normally, like everything we're doing, it's like Camel case, but generally, ah, within the dom you would usually use, um, you're ah, you're hyphens for things like classes and I d.

  • So that's why I'm kind of keeping this because this is gonna end up being in the in the dom, right?

  • Okay.

  • I think that's all we need.

  • You know what?

  • Let's put this, uh, native idea on this as well.

  • Native, I d equals.

  • Um, We'll say this is submit.

  • All right, Great.

  • Now when we come back to our test, this will make a bit more sense when we actually write out our test.

  • Right?

  • So let's say um can submits and submit.

  • Answer.

  • Uh, let's see.

  • Then we need a way to check.

  • I see.

  • Not only can't submit, let's just say like, um, correct answer reduces enemies by one s.

  • So if we were actually test this, this is gonna tell us a lot about our application.

  • So this is an ambitious test, right?

  • Um, it's going to take a couple of steps, but that's what I want to try to do.

  • Let me see.

  • All right.

  • Seven minutes.

  • It's gonna be rough to get into seven minutes, but we'll see what I can do.

  • So we're still gonna go to the home page, right?

  • And we are going to actually let's do one more thing.

  • If we're gonna see where the enemies are, we need to give the enemies, um, some at least classes.

  • Right.

  • So let's say class name, Right.

  • So in react, we need to use class and name because in javascript classes a reserved word.

  • Right.

  • Um, so we're gonna say class name, and let's say enemy.

  • Since there'll be multiple enemies, we need to use a class instead of an I D.

  • Yeah.

  • Um, okay.

  • So now we need to have the user, um, have some type of action, right?

  • S o for that, we can say we can use our type.

  • Right?

  • So we already have our page element, right?

  • So we could say Paige dots type, and this act literally means we're going to type something into the page.

  • So the first, uh, parameter that we pass in here is gonna be the i d of are the place where we wanna types are in foot.

  • So this is gonna be the answer input.

  • So we're gonna type in our answer input and inside the answer input.

  • Let's we're gonna type answer right.

  • But I need to create that.

  • So let's create answer.

  • Um, answer is gonna equal vow one.

  • Um, how are we going to do this One?

  • Plus, let's just do it for us, uh, to that one.

  • Plus fell to correct addition.

  • So for this one, I'm just gonna test addition.

  • Okay, so, correct addition.

  • That'll make it just a little bit easier since we're running out of time.

  • Correct addition.

  • Answer.

  • Um, should give us vow.

  • It should be vow one plus fell to you.

  • Right.

  • So let's do const.

  • Um, about one.

  • And constant one is going to be, uh, see, I can get I think I can get Let's see, I might be able to do it like this.

  • Um, this might be overkill.

  • I may not need all of this, but let's see.

  • So instead of body, if I ive ao the, um, I de vow one, and then instead of inner h t m o, I get in, er text.

  • This should give me that value.

  • And Java script should be ableto handle the fact that it's getting this as a string, but it can.

  • It'll know that, like, I want to add these numbers.

  • At least I think that's that'll be the case.

  • Um, well, no, really quickly, if that's not the case.

  • Okay, so now we're grabbing, um, value one and value, too.

  • And I'd like to actually see that.

  • Is there some way I could do this without, like, faster?

  • Or maybe in only one line?

  • But for now, this I think this will work.

  • Um, so we'll get the values.

  • We'll get the answer here, and then we should input the answer.

  • All right, then, after we input the answer, we're going to Why's my the invitation is so messed up.

  • Um, the input.

  • The answer.

  • Now we need to click the, um, need to click the button eso for this click.

  • Let's say I think we could just do a page dot click so we can do, um I don't need to do I need to do a weight.

  • So for gotta wait here.

  • Let's do a wait.

  • I need to fix all this indentation page dot clicks, and then this is gonna be our submit, right?

  • We named it submit.

  • Okay, So after we do this click No, we can see the, uh, result, we can evaluate our HTML right, and we wanted to contain.

  • And here's where I may have to look this up with see what time it is.

  • Um, Okay, I only have one minute.

  • No.

  • Okay, um, we may have to mean I get finished with this, but let's see, uh, expected to contain.

  • See, um, I think this would be in just a MME.

  • Um, kid.

  • Here you go.

  • Fine.

  • Select.

  • Ah ah.

  • Find the number of rendered a child confirmed as Children.

  • No, for a legal challenge.

  • Support for counting all child Elevens.

  • All right, let's just let's try the 1st 1 to know them's time.

  • So fine selector fun to have length of nice.

  • Okay, so we cannot do to have length of excellent, so we should expect it.

  • Toe have length of two.

  • Right?

  • So let's just grab this whole thing.

  • Uh, no, I don't want rapper.

  • I don't wanna have to use Rapper.

  • Um, okay, try it with Contains, uh, my time is up, Rapper.

  • All right.

  • I need to get out of this shallow rapper cause I'm not using the shallow shell.

  • A rapper.

  • Um, selectors, static render not using render I'm using.

  • We're only using one thing from enzyme.

  • What is it?

  • Expect that's it or no, it's not even from end zone.

  • We're requiring that from Chai.

  • What the heck am I using from enzyme?

  • Nothing.

  • I'm not using anything.

  • I don't even need end.

  • I'm sorry.

  • I got confused the beginning.

  • Um, I use enzyme for unit testing stuff, not friend and testing.

  • Yesterday I was doing the last two days I've been doing unit and and then test.

  • So apologies for getting that mixed up.

  • What I need is, uh or not.

  • Let's see.

  • Yeah, let's see if I could do it.

  • Which, uh um fine number of elements.

  • Support for counting child alone is, um see.

  • Yeah, this is fine.

  • This expects Here's this rapper again to have length of Let's see if I could just use this without the wrapper thing.

  • Okay, So you want to expect are inter ht m O to contain expect results with this up call Children.

  • I mean, you know what? 01:03:04.050 --> 0

everybody welcome a live coating with Jesse.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it