React Native Web Testing (P7D9) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and today we're going to do some testing so um got a few uh comments in the chat already uh so you just i think it's just everybody saying hi say everybody um if you're just joining us for the first time we are building a 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 turned into a web app this may seem a little bit strange why not just use react well if you do it like this then you could use the same code base for a web app and a mobile app uh so that's why we're doing it like this if you want more explanation check out some of the earlier streams like maybe like day one and two and then i go in 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 going to start a pomodoro timer so 25 minute timer during that 25 minutes i'm going to focus mostly on the code and just narrate when the timer goes off i'm going to go to the live chat and answer questions so if you have a question just hang in there i will get to it at 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 early on when i started streaming i tried to keep up with the chat as i was coding and really quickly it became apparent that i would get nothing done if i kept on interrupting my my train of thought uh for the chat okay um great we have some viewers there was 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 let's see our pull requests yeah so we have pull requests that have not been merged so i do want to merge these pull requests first before we get started so some of these like the add the license is awesome i can just auto merge this i'm not going to have to test it we can just check with files changed and we've added the license that's the only thing that changed uh it's always important to include a license with your open source work um that lets people know if if they can use it how they can use it right so always try to get that into your project as early as you can so i'm just going to merge that confirm that merge and write 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 request it's it's still you know they put in work so um car kartikey uh thank you so much not sure if you're watching right now or not but i really appreciate that let's check out uh the other full requests we had this is add submit on enter key press so this is awesome i kept mentioning that i wanted to implement this and then just never never got around to doing it so this looks good for this one too i'm just going to check the files because it should be a really um simple change so yeah so it's um on submit text inputs one text change on submit editing actually that's really interesting i don't know so uh who did this full request let's see uh ibrahim if you're watching let me know 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 going to go ahead and since this is such a simple change i'm going to merge it and we'll just test it like on the fly normally if these were more extensive change i would actually pull it down as a separate branch and then test it and then decide whether or not i'm going to 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 as well all right so now that should be in the code we still have some open issues uh so let me close these because these this one is closed now um let's close that and then this one is that on submit enter key press you can see that's that's been merged there let's just verify um that this is working so we'll do a get pool there we go i need that so you've done a git pool and we should have yep we have the changes and so now let's check our app and see what happens um let me do a hard refresh and just see okay cool great yeah so we um we do have a submit on enter key and that's really cool i i definitely want to look into how you did that because up until this point let's see our app.js so we 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 it says basically on submit editing will trigger an event provided when the go button is clicked from an 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 refactor to use this now because otherwise i actually just would track the key press and see like if it was the enter key that would press i would submit but that is excellent that's really awesome uh that's 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 going to have a cool effect and it's also going to enable functionality on mobile with the same code so web and mobile will share the same code which is pretty awesome so thank you so much for that um that was ibrahim that is yeah i think that one was abraham so awesome so let's go ahead and close that as well okay cool yeah so now we just have one open issue i'm sure we'll we'll add to that i already i talked with um with 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 right so in particular i'd like to set up uh some end-to-end 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 we'll think about the tests for for that but right now since we're only worried about web we're just going to go with with the web stuff um yeah so here's what what i'd like to use is um puppeteer okay to do a headless chrome browser and then so basically it'll it will mimic what the user is doing um so i'm going to open on another screen i'm going to open up a um json 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 going to go with for our installation we're going to do a yarn add and then we're going to give it this d flag which means it's going to be added as a dev dependency right a dev dependency is not going to be included like in your your build right so um things you don't need for the program to run to actually run you can put in your dev dependencies and then that will decrease the size of your 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 chai mocha um oh mocha um puppeteer and let's see i think that's it so we we don't we're gonna use jess but we don't need to bring in jess because [Music] jest is built in with create react app so since we use create react app we already have jess in fact if i would try to add jest create react app would give me a message in the console saying like hey we've detected different versions of jest and so we're just not going to adjust but and we're also going to add enzyme now enzyme is from airbnb i'm not sure what the status of that project is uh airbnb is moving away from react native so that may not be um kept up to date but for what we're gonna use it for it's gonna be fine but there just keep that in mind though that may be 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 i'll probably have to figure out how to do stuff without using enzyme so these are just gonna install the packages while that's happening we can add in um to our package json another um let's see so we're going to add in another script right so react scripts this this is what create react app comes with um already has its test okay so we're not going to use that i'm going to make another one that i'm just going to call e2e right because we're going to these are going to be our end to end test and then in our end to end test i'm going to um this is gonna be a lot so we're gonna run mocha and we're gonna give it a timeout let's see uh what's my time out here one two three four three all right so that'll be like 30 seconds so the timeout's in milliseconds um we'll give it 30 seconds right now that should be enough for what we're doing um depending on how many tests you have like it may you may want a greater timeout but for now i think this should just be this would be fine um and then we're going to set up some files but i'm going to call these files right now so we're going to end up having a folder called e2e and runner.js so we're going to split out some of our testing into separate files so we're going to start this up from our runner.js file and we're also going to do let me see oops e2 e and we're going to have a test folder and then anything in that test folder that has the suffix of dot spec dot js we're gonna we're gonna run those tests okay so this is basically the this is our command we're running mocha with a timeout of 30 seconds okay we're using our runner.js file which you'll you'll see that in a second and then we're going to have our anything in our test folder with this suffix is going to run as a test so let me save that oops failed to save uh okay let's um i'm going to 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 json so we could see we have our dev dependencies now so that's why it gave me that message so let's just add that back in and save now um if you didn't see that message it was just saying there were newer changes that were made um so there was it was like conflicting right all right so now we have our dev dependencies we have this set up our end and test now we need to actually um bring in our test so what i'm going to do is i'm going to go to a previous project that we did on on this show 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 github and let's go to a4 let's go here i believe i had it set up here yep so we have a test folder here and you can see oops no that's not it there's our unit test here's our end to end test so we're going to grab set up from this project and this will save us a lot of time since we already have it set up and then we're going to use that so i'm going to open these so we can just copy and paste very quickly and we'll just grab like one of these just to get some boilerplate all right so now let's see runner and you'll notice i don't know if uh harshit is watching right now this morning i haven't seen him in the chat but uh harshit set these up initially on this project so uh thanks again to harshit uh for doing the initial setup on these uh on these tests these nan tests okay so this will be our runner.js file so you can see um this is just basic setup right like we're requiring um browser and options which we'll see those files in a second and then we're just starting it up and closing it down right starting up our headless browser closing it down okay um and it 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 this 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 e2e inside e2e we want to add a file called runner runner dot js and we're going to copy that in okay um let's go back here and do oh yeah let's close this so i know i don't need it this is our browser.js okay so let's copy this we'll go over it in a second let me try i i found out about being able to do these multiple desktops 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 that's not it the window control all right maybe i don't have my hotkey set up if anybody knows about how to do these different desktops on windows let me know um but i definitely don't have it down so far i want it 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.js so let's create that browser.js and we're going to copy that in okay so in browser.js right we're we're requiring puppeteers this is where we're bringing in puppeteer right and then we're we're setting this up right so this is just like the boilerplate that you need to set things up we pull in our options which we we um uh we'll have an options file for that right so this stuff like once you have it set up you'll probably never change it so this is the only time we're ever really going to look at these files and our last one our last setup file will be oops did i forget to do i think i accidentally closed options options yep there we go okay the options is the the easiest file to figure out what's going on um options dot js okay so in our options.js we're setting our app url to localhost right which we're going to test locally we're running uh our project on locos 3000 so obviously you change this to whatever you need it to be and then we're going to run this in headless mode if you set this to false you'll 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 set it to um to true and leave it set to true i don't know we may do like one test run once we get some tests set up uh where we have it set to um false just to see also if you're having trouble with your test sometimes just looking at what's happening is a good way to debug i actually did that yesterday is um having some issues where the tests were hanging at one point and after i ran it not in headless mode i could see exactly what was happening uh and it helped me to debug the test so there are times when you would run a actually see what's happening so let's close these out now that we have them set up let's make our our actual tests folder oops that's not it i want to make it inside here so tess and then inside tess let's add our first test if you get some comments in the chat in about four minutes i'm gonna go back to the live chat and answer your questions so uh hang in there so we're gonna have to change this a bit i don't remember what's going on in this test from the last project so it may actually work um i think it may just be testing to make sure that something loads on the page oops so we're gonna make this what did we call this one um page.spec.js yeah let's just call this one app.spec.js and what was that yeah spec okay and now we'll paste this in here and let's look at what this test is actually doing okay so we're requiring we're pulling in this expect from chai okay so we see we use it down here and uh we'll we'll get to that in a second uh we're also pulling in tests from our browser file right um so what we're doing is so let's say i don't want page two let's say describe this is i'll just put some in there for now and for now it says page can be seen at slash page and i'm not going to say slash page i'm just going to see at slash right so just at our home and so we're going to start our test we're passing in our browser and our options okay so now we are loading a new page right so 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 jest so it's like it's very with mocha um so when i do this i usually have to have like four different documentation pages open but once you get like a few tests written you can usually just modify copy and paste and modify your tests as you go along so now we are actually going to let's get rid of this because we want to go to the home page right so this is going to be our url from our options which is localhost 3000 okay now we're creating um a constant to hold the value of body right so or it's just going to be the string body okay and we're going gonna wait till we find the selector body on the page right so html pages all have right like body let me check my timer all right one minute we'll go to the chat and then now we're creating a constant called inner text so what we're doing is we're evaluating the page okay and we're looking for all of the inner text that's inside of body right the body tag on the page right so this is not going to give you html it's just going to give you text that's on the page and in this case we want to make sure that 404 which would be a 404 error 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 right it's not saying much really not much at all 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 let's see what happens okay so our test is running home screen can be seen at slash and so we've passed our test it took one second uh total so they rounded up so it's kind of nice it shows you all the tests that you passed and it'll tell you how long each one took and then it'll give you a report of how many you passed and how many you failed so that's our first test 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 tests pass that our changes have not broken anything um we also if we have time we might set it up so that the tests will run automatically when you try to commit uh and you won't be able to commit unless the tests pass so i think that's kind of cool to set up um there 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 going to skip through all the the uh hellos but i'm just going to give one big hello to everybody that's saying hi okay uh we have a request ravi says please make a video on javascript and angularjs i am not i have very little knowledge of angularjs 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 camp channel here so check those out um let's see [Music] i'm not sure how to pronounce your name so please let me know how i should pronounce it but anyway they say thank you for merging the pr oh you're welcome thank you for submitting the pr that was super helpful i i definitely appreciate it i always get 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 what to add so um maybe i'll try to do that today and if you all think of some issue or some feature or see a bug or something feel free to put an issue in the the github repo as well um michael cruz said and now the wait for puppeteer to install it actually installed really fast so if i was trying to do this stream on my laptop it that would have been the end of the stream like it would have just the frames frame rate would have dropped like it would have taken forever but on this new machine like i'm i'm very impressed with my new uh my new pc so far and its performance while streaming all right michael lane says what is react used for react is used for creating sorry about the yawns uh react is used for creating web apps um like single page applications progressive web apps uh but react native which is what we're using can also be used to create mobile apps um basically that you you can create a wide variety of things with react because it has the ability to render to four different platforms so your uh javascript html type code can be transformed into something that can be run on a variety of devices and platforms uh so it's very very cool so i mean that's a very like short summary and leaves out a lot but i that's basically what reacts what i use react for uh then danjuma says fyi uh for your information react also builds vr apps i have seen that and i'm i really really want to build a vr app at some point so maybe that can be one of our next projects um maybe we could have battle math vr who knows uh but i i definitely want to try that out um otown says the screen is blurry okay let me know is anybody else having a blurry screen um on my end like all the analytics are saying the stream is fine on my end but let me know um it should be i should be putting out 1080p so if your connection can handle it um you should be getting a 1080p stream right now nikki says have you tried cypress for end-to-end testing i have not tried cypress but i'm interested in hearing more about it uh james lark says sir please tell me what should i choose uh software dev 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 uh or what you're where you're looking at to actually get a job but there are a ton of jobs either way web dev software dev and 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 apps 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 bottom left corner okay so we're saying alt tab yeah let me try this actually for a second while we have this up here so i can alt tab and see these screens okay what i want to try to do though is do um let's see what i 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 desktops 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 and trying to figure it out and i think he was able to do like windows key control and then arrow keys and it let him switch but it's not working for me right now let me see maybe windows alt windows shift yeah it's windows shift that's it okay awesome so window 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 so 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 to mess with maybe the settings or learn more about that but if you've ever used a mac it's very easy like to go between your desktops so i'm trying to like get that same ease of use on windows because i'm just so used to it from my mac all right but anyway let's write some tests so i'm gonna mark down here where i left off at in the chat so i can come right back to it um let's see 753 looks like a good place 753 okay so i'll come right back to there uh and continue on with the 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 like additional test written and then try it out 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 lot because the the page could not show anything really and this test would still pass right so let's add something that's going to give us a little like better indication of what's actually going to 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 math 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 if it says battle math we probably don't need that 404 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 uh there on all the pages right um let's see run this oops there we go 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 i think i'm i'm no expert in testing right but i think this is a little bit of a better it tells us more right it says hey we went to your homepage 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 app so i 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 app for a second and say what else let's restart it see what our basic um thing is like what else would we want to see on the page um and if we didn't see it on the page it would definitely be a problem right so um i guess 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 we'll keep it really basic right so what we'll do is in our app dot js we need to give our hero an id so that we can pick them out on the page right so we have our hero right now is just a view right eventually this will hopefully change and it won't just be a square but for now it's a square so normally we could just put an id here but in react native we want to use native id so actually with react native web if we just wrote id it would work okay but it it won't work um with web like it'll it'll give us at least i think it'll throw a warning at some point that we we can't use ids 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 id is with native id so let's just say hero right and usually you remember i mean this is like basic html stuff but you only want to have one id on the page so they they have to be unique so there should only be one hero on the page one hero id okay when we get down to enemies what we'll probably want to do is instead of an id we would want to use a class or we would want to give each a unique id by saying something like the id equals enemy and then like the iterator so the enemy like zero enemy one enemy two right uh so it's just whatever you the id can be whatever you want but it has to be unique uh let's see oops i meant to go back to our test all right so now that we have that what we can do is we can say [Music] let me grab let me go back to my other screen here and see some of the other tests that i've i've set up uh so what we can do is we can check for [Music] the html so let's do one where we actually check for the inner html okay so 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 [Music] so right now we're still getting our page all right we're still waiting like we're gonna go to that home page but now let's do a um let result uh we could probably make this a const really const res const result in general it's good to use const unless you really need to use something else um so we're going to just call this a result we're going to say await page dot evals we're going to do eval right page.eval and then we're going to evaluate body so remember last time we actually made a a const for body selector for body right now we're just going to skip that and just say body right and then inside here as our second argument that we passed to to eval right uh we're going to put a function right so we're going to say e i'm just going to do an arrow function so we're going to dot e dot inner and we're going to do html 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 html 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 we call his hero now normally the hero would not show up under text right because that doesn't actually display his text in the page it's it's an attribute of uh an html element right 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 oops and i forgot to change this so let's change this to um visible at slash and hero let's say hero can be seen at slash let's let's change it up so keep it keep it the same so title can be seen at slash hero can be seen as slash okay so now we'll just see like in our testing we'll get better messages see title hero so it's good to give these good names so describe you can give like the name to the the whole group of tests that you're doing and then under the each it 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 setup in our app.js so in order to get things from the page let's see where we're at okay so right now we have inside this text we have our value our operator and our value two but that's going to be hard for us to get access to in our tests what we really should have is um we should have ids 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 and let me verify that our styles won't get messed up by this styles.math text where are styles at up here 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 putting them up top that's just what i've been used to and 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 i'll actually see the markup and then the styles at the bottom because usually the styles tell you the least about what the component actually does it's just my experience so our math text all it has is 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 we 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 a input input input oops i thought i had the uh there we go what was that again padding right there we go okay so let's 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 going to have a margin left right which should take care of this so now we can actually copy and paste our text here without worrying about weird spacing happening okay so now we're going to have text oops totally messed that up i wanted to do is get rid of these and this and then for this one we'll get rid of that and then actually i guess we'll need another one for our equals there we go all right so first off let's see if this even displays properly hey it does we're missing some spaces but that actually looks okay i may like that better without the spaces now 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 what this will let us do is add native ids so we can have a native id for each one of these and uh our native id will be like well let's just say val about one and then for this one we'll make it about two for this one we don't need anything uh and for this one we'll just say operate error okay all right so we have that now our input needs a native id let's say native id equals um answer let's say answer input let's keep it the same answer input okay so normally like everything we're doing is like camel case but generally uh like within the dom you would usually use um your uh your hyphens for things like classes and ids 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 i native id on this as well native id equals um we'll say this is submit all right great now when we come back to our test this will all make a bit more sense when we actually write out our test right so let's say [Music] can submit and submit answer uh let's see and we need a way to check let's see not only can't submit let's just say like um correct answer reduces enemies by one okay so if we actually test this this is going to 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 going to be rough to get into seven minutes but we'll see what i can do so we're still going to go to the home page right and we are going to actually let's 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 name because in javascript class is a reserved word right so we're going to say class name and let's say enemy since there'll be multiple enemies we need to use a class instead of an id [Music] okay so now we need to have the user um have some type of action right uh so for that we can say we can use our our type right so we already have our page element right so we could say page dot type and this actu literally means we're going to type something into the page so the first uh parameter that we pass in here is going to be the id of our the place where we want to type so our input so this is going to be the answer input so we're going to type in our answer input and inside the answer input let's we're going to type answer right but i need to create that so let's create answer um answer is going to equal val 1 um how are we gonna do this about one plus let's just do it plus two about one plus vowel two 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 val it should be val one plus val2 right so let's do const um vowel one and const vowel one is going to be uh let's see how i can get this uh 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 eval the id val1 and then instead of inner html i get inner text this should give me that value and javascript should be able to handle the fact that it's getting this as a string but it can it'll know that like i want to add these as numbers at least i think that's that'll be the case um we'll know really quickly if that's not the case okay so now we're grabbing value one and value two and i'd like to actually see like 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 so we'll get the values we'll get the answer here and then we should input the answer right then after we input the answer we're going to why is my my indentation is so messed up um we input the answer now we need to click the um need to click the button uh so for this click let's say i think we can just do a page.click so we can do um do i need to do i need to do a weight sorry i forgot a weight here uh let's do await i i need to fix all this indentation page.click and then this is going to be our submit right we named it submit okay so after we do this click now we can see the result we can evaluate our html right and we want it to contain and here's where i may have to look this up let's see what time it is um okay only have one minute no okay we may have to we may not get finished with this but let's see uh expected to contain let's see um i think this would be in just um um there we go find selected uh find the number of render to child components children uh support for calling all child elements for support for counting all child elements all right let's just let's try the first ones you know that much time so find selector expect fine to have length of nice okay so we can do two halve length of excellent so we should expect it to have length of two right so let's just grab this whole thing uh no i don't want rapper i don't want to have to use wrapper um okay let's try it with contains uh my time is up wrapper contains all right i need to get out of this shallow wrapper because i'm not using the shallow shallow wrapper um selectors static rendering no i'm 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 enzyme 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 enzyme sorry i got confused at the beginning um i use enzyme for unit testing stuff not for end end testing yesterday i was doing the last two days i've been doing unit and end in tests so apologies for getting that mixed up what i need is cha or not let's see yeah let's see if i can do it with chai um find number of elements support for counting child elements um let's see yeah let's just find this there we go expect here's this wrapper again to have length of let's see if i could just use this without the wrapper thing okay so you want to expect our inner html to contain expect results look this up call children you know what we're gonna have to do a part two of our react testing so next time we're gonna do part two because i'm out of time here's what i need to happen though so let's leave a little comment in here so we know where we left off at so at this point i need to [Music] let's say there should only be two elements with the class e-n-e-m-y with the class enemy okay so that's what we need to check for uh let's get rid of i guess we'll leave it in for now but i mean that's not we know we have to change this right so what we have so far is uh our we're getting our values we're adding our values we're putting that answer into the input we're clicking submit then we should check to make sure that when we've clicked submit we've taken away the enemy so it starts by default with three enemies so now there should only be two enemies left so we should we need to figure out a way to check how many elements on the page have the class of enemy and that should be equal to two if it's equal to two our test passes if it's not equal to 2 our test fails so that's the next thing we need to do let me do a get status also i think we can do a yarn remove you want to remove enzyme did we add yeah so get rid of enzyme now that i've realized that i messed up and i don't actually even need it okay and now we can do a git add and we'll do a get commit m and we'll say add tests for home page do a git push okay so now all of this is available on the repo if you want to check it out submit a pool request whatever it's there um now i'm going to try to answer as many questions as i can and i will have to end i can't let this go too long because i gotta i gotta start work um so but i'll see how many i can get through and 753. okay so we left off at 753. yes all right so the question from talentscout77 is what program is that that he is running uh visual studio code i think that's probably what you're asking about uh says is the secret to coding practice yeah absolutely practice practice is like you got to do it you're not going to be good unless you practice right even more so than anything else like you should be actually coding more than you read tutorials uh online videos books like whatever the thing that will help you more than anything is practice when you get stuck then go to the tutorials and the books and everything and like as you get more confident you'll probably be spending more and more time coding and then just using the other things as a reference there's nothing wrong with doing the reading and stuff you can't be coding all the time but the thing that's going to level your skills up more than anything else is actually coding trying to figure things out working through problems uh michael creole says i'm thinking of doing a project with geolocation any recommendations for packages uh i don't know any packages offhand because because the uh the browser has um the geolocation stuff built in um assuming you're going with a browser if you're going with mobile i'm not sure uh so you may not even need a package you may be able to just directly call the the geolocation like from the window object uh so i would check that out first and see now i mean i don't know about backwards compatibility but with let's say older browsers but at least with newer browsers you should be able to get that geolocation straight from the the browser api um ohtown says i cannot see the letters at all on the screen very blurry oh man i'm sorry that if did anybody else have that same issue i mean it's if it's okay for everybody else then it's it may be your connection oh town which i'm i'm sorry if if that is the case um let's see i could try to make the fawn a little bit bigger let me know if you think if anybody would like the font to be bigger i'll try to do that next time let's see uh tech from fifth s how long can it be and is this a full tutorial uh usually i go for about an hour um and it's not really a full tutorial this is more just kind of a code along where like everybody kind of not only watches me code but helps code either through pull requests or through suggestions in the chat and we just kind of code a project together i do my best to explain things though but i wouldn't exactly call it a tutorial master says test the test and nikki replies who watches the watchers uh somebody says larvae with a question mark i've never used larval so i don't i don't know very much about it let's see um uh we have react or angular i mean i know reacts pretty well and i know very little about angular so i'm going to choose react obviously like objectively which one is better i don't really know i guess it depends on what you're trying to do and what skills your team already has master says what's the difference between web dev and software dev honestly there's very little difference now uh because of the fact that web dev is moving so much towards progressive web apps um that that act like web applications that you can actually use something like electron to make it a desktop application like the the line between uh software dev and web dev is is almost non-existent now so i would say there's very little difference but maybe there i'm sure there are other point of views that they probably you know would have some good arguments the other way um michelle says i want to know about c programming i don't know very much about c programming myself so i i probably can't help you there um let's see uh prakash says are you testing react web or native okay so the testing that we're using actually is works for react um on the web so like this would work for normal react right because we're we're starting up a browser and we're testing what's in the browser so uh this would not work then for a react native mobile app so once we go to deploy this on mobile then we'll have to add other tests like another testing solution for mobile so it is the case that when you do this you can share a large amount of code but there are certain things that you probably have to implement for each platform right so routing is one thing that you probably have to implement more than once um because of the way mobile handles routing versus uh the browser um and then uh obviously your testing is especially your end-to-end testing like if we were doing unit testing maybe you could keep the same ones um but and then tests are something that you're probably gonna have to implement twice so that's a good question though political world war news says help me code what do you need help with master says might ask what is the purpose of tests uh basically the tests are there so that you can be confident like that if you make it so if you write your tests well any change you make to the code if you change something and then you run the test and they all pass you can be sure that your change has not broken anything so it just gives confidence so for a little app like this you could say like oh i could just manually test it myself well you could but for a larger app and over like the long term you're going to spend a lot of time manually testing but if you automate your testing like we're doing here you don't have to actually do the tests yourself it's a good idea to still do them occasionally but you don't have to do them with every change instead you run the tests and we're actually going to make the test run automatically when we change stuff so it'll be even easier um and then you'll know automatically before you try to deploy or anything like that whether or not you've broken something let's see chris bennett says what game are we making um and he also said hey stop cheating off your other computer it's not cheating at some point i actually figured out how to do these tests i'm just not going to re-figure them out on the stream i'm gonna let it cheat so i'm actually i'm looking at my own code just on another screen um basically the game we're making is just a very basic math game for uh for young children learning how to do um uh like basic math uh and starting with addition did i say michael creole just said hero be seen at i think i messed it up title can be seen hero be seen at uh i messed that up all right there we go there's a good there's a good pull request right there to fix my my improper grammar here good catch on that chris bennett says that actually looks pretty decent not gonna lie um are you are you talking about the game or the code or the test i don't know um so which which should i use next js and react.js when should i get to use uh use use neck j next js if you need server side rendering uh let's say for like search engine optimization purposes if you need that server-side rendering i highly recommend next js it will handle so much of the stuff for you that's generally kind of complicated so definitely use it for that if you have no need whatsoever for server side rendering then you might be better off going with create react app the only other thing that that's really big that next gives you is a built-in routing system so it may be also good like if you don't need the server-side rendering but you just you also like don't want to mess with doing your own routing then maybe use next as well but i love next js definitely an awesome awesome tool chris bennett says is react.js similar to angular uh there are some similarities uh i would say um let's see chris bennett says i need to learn how to use linux only familiar with windows and mac um yeah i mean linux the the cool thing is uh if you know a lot of the commands for mac like in the terminal they're the same as they are on linux so um like if you're going to set up a linux server a lot of the commands to get around in the terminal will be the same oh actually what did this say all right i'm gonna have to finish i might not get to all the questions here i might have to finish up because i got to go to work but um how about this if i didn't get to your question put it in the comments to the video and i'll try to get to it or you can wait till the next stream which will probably be friday morning and i'll get to it then um but uh thanks all so much the next stream we'll finish up with this test and maybe add some more um yeah so be looking out for that hopefully friday morning uh right around the same time like 7 30 or 8 o'clock a.m eastern time so thanks so much um yeah until friday i guess have a great day for a couple of days and i'll see you then thanks again bye