Create a Calculator with HTML, CSS, and Vanilla JavaScript | Testing JavaScript

Key Takeaways

there we go be good if we unmuted ourselves hi everybody and welcome to means third installment of working on our calculator app here where uh zelle's going to walk us through on some javascript testing this time which should be really cool and interesting so i'm really looking forward to this one do make sure you hang out in the chat ask questions as we're going i'll be moderating the chat and keeping up with what you guys are are chatting about and talking about so if ever you want to revisit something or something's not clear just make sure you let us know in the chat and i'll try and get the question over to zell when we have a chance and yeah i think that's it all right cool um today we are going to talk about testing the calculator and um our tests are going to be written in vanilla javascript but we are not going to try and create a what's it called uh a testing framework like jazz or moca or something similar to that we're just gonna use uh something that we already have in javascript and that is the console so we're gonna use a console assert to test the javascript uh then let me open up my vs code and my i think it's this one so you see that uh in in uh the repository right now we already uh kevin and i had created the source code for the these three sessions sessions one is for the html and css that kevin was running section 2 was for last friday at least for me for last friday when we built the javascript and this is section 3 where we continue off from session 2 where i talk about the testing parts all right and then my right is the calculator i'm going to do oh here's a dog again so what i'm going to do is to use console.assert to test the calculator and it has the syntax like for some reason like i remember the syntax right now okay so um go to mdn look for the syntax and here it is assertion and then followed by message so there's something similar to that this is a syntax so basically it's kind of like console dot assert uh if it's one equals to one it should be through like one s1 so if you if you do this and you refresh and you see nothing in the console if it's if your assertion is false so this basically it's kind of like a condition no if you do a statement if if um say 20 equals to it is greater or equal to 25 like this is false and you don't fall into the if condition right it's kind of the same thing except yeah we're just getting the true or false value at this in the console so if one is not equals to one this is false if you refresh you will say social fail followed by the whatever message you put in here so one is one it's yeah that's kind of how it goes right well yeah you don't want to say something no no it's all good sorry okay cool uh so when we do testing we kind of want to start by testing you know the buttons you want to know that hey if we press one does this thing show up as one so i'm going to put a big section on testing here and then we're gonna continue um first thing is if you press one doesn't show up so one so we need to we need a way to find this this key for one so simplest way will be uh one yes document.queryselector if you go back to the html we look for how we define one so it'll be button class one data type number one okay i don't think we need dot one all right again i just like to make sure that i have the right elements when i begin especially when i'm groggy like today so i was just telling kevin i just woke up and had a few long days okay so it's working and my hair is not feeling really clear right now so this is a state where i'm i'm coding when i'm when i'm slightly groggy and it it's helpful to add a few more intermediate checkpoints just to make sure that everything is correct which is what i'm doing right now just kind of hit this thing where the the connection keeps getting lost for my trackpad i'm going to disconnect it for a while okay now after we have one we want to make sure when you click this it actually turns into um what's that called uh into one so we have to display and we can um in javascript we can trigger a click with the i think it's called trigger oh no i think it's called click if you do this one dot click and we refresh you see you see one straight away because we clicked one the one button all right and if we continue moving on one uh we want to make sure the test is actually saying the display so barely text content is display value yes this with text content we're going to console all the display value and it's one so in this case when the calculator you know when we click one when we click one so many things so you see i actually have two keyboards here right now i'm trying to do like a split keyboard with with this thing but it's not working out and that's a funny thing then that's a story for another day but let's continue with this uh display value so essentially we want to do a console dot assert so after after we do a click we're on the console assert the display value is one okay click one kind of something similar to this um approach now if we refresh it oh association field click one let me go back to this oh oh the one it comes from text content so it should be a string instead of a number so if we do this why is it still failing [Music] let's do a check oh display value display value is zero why is this the case when this clearly says one let's give it a try one more time oh oh i have to do this because text content doesn't update automatically okay all right then it passes display text content is one we click one then after every if after every test we want to clear the calculator we don't want to add c into this uh so we want to clear the calculator away to clear the calculator we need to create something here so when you create clear key right i like to put the clear earlier but later is fine as well clear all right clear key now the clear key is this key over here we have a class of clear and type of let's not do number because we don't want to show up between type of clip type clear refresh now you see the css is a little bit messed up so we go back to the styles.css and change it up number so anything with number we have to add a clear so okay now it's working type equals to clear when we press the clear key we want to clear the display value uh the purpose of this clearly is to make sure that we clear so when it comes to clear there are two levels the the reason if you remember kevin actually put like hce over here in the first in the first video until someone said hey the the the different there's this different spaces well if you look at the iphone calculator let's just bring up the iphone calculator there's this ac button over here i'm not too sure if you see it and then if you press something it becomes c so there's a difference between a c and c so when you press c the display gets cleared and then you can continue the calculation as per normal so your first number and your operator actually gets saved but when you press uh when you press ac the calculator gets reset so all your memory gets gets cleared but in this case let's keep things simple and just do like a c in my javascript course i actually teach you the difference between the ce and the the normal clear and the all clear which is the ac thing uh but let's keep things simple in this live stream and we're just gonna do c all right when we do see when you clear things uh we want to clear away the display value the first number and the operator when i say everything so display value let's display dot text content should be zero we're going to reset it let's put it as a string we want to delete the data set first number one delete calculator data set operator because these are the two values we save now if we go back to the elements section and we take a look at the calculator we see that as a previous data type uh okay previously number so i just refresh this when i press clear okay what happens on the on this all right previous data type is clear but we still have a we have a previous there are key oh wait we haven't added the number okay nevermind we should we let let's put this one and several times so when we press clear so now it's one we press clear it changes back to zero we do like eight plus nine equals you can see that there's this data first number dialog operator if you press clear that removes the data somewhere data operator so bear in mind that we need to do a clear thing so after every test we need to run a clear function clear calculator so let's just do it like this this is one test for example uh but we need to build this clear calculator function which we will write here clear calculator to clear the calculator we'll press the clear key and that's kind of what it does you know press the clear key so the clear key is document.queryselector um i think it's called data type equals to clear type and clear key dot click so we do this and uh refresh the number should be zero because we clicked one clicked once we us we did the assertion and then we cleared the calculator so yeah it's back to zero do remember that we want to sometimes we want we want to test whether the clear key is actually working also so we can have a function called testclear and the whole purpose is to run uh clear calculator and make sure that you know there is no the this value is zero and there's no data previous key type uh i mean there's no data first value and data operator so that's we don't have these three things okay assert s0 console.assert that should not be this and console.assert should not be an operator and when when it comes to writing the text messages i kind of like to put a generic name so i know where to find it rather than just the message itself uh in in some test frameworks like mocha you can have like describe and then something i think it's like this and then you have it which is the actual test this is kind of like the wrapper that describes the group of tests so in in the console assert thing we don't have that luxury so what we're just gonna do is to say our test clearly display should be zero we're just going to do i mean i'm just going to use a period to do split the this is the descriptor and this is the actual test clerky no no um dataset remains and this will be the same uh it's inappropriate to say no they'll say remains because we still have a previous key type so let's just say no first number and no operator and we can drop the test clear key anytime so you can do this and it should work now if you change this to 5 for example it wouldn't work anymore clearly display should be 0 and for this 2 it will only work after we press the calculator all right the equal button oh see there's another each case here when you press equal first um the display goes missing that's something we we have to fix if we are building the full version and i teach you how to do that in the course but let's come back into the testing all right so now we tested one button when we press one what if we pressed the second number like one five we expect to see 15 and we continue to test the right clear the rest of the stuff right so what we do here is okay one plus five one five as a test so we need the number one we already have it so we can click it but we need the five the number five oh and to get number five we need to do this query selector five and then we need we need to do an assertion to say that this is 15 click one and five and then we do a clear a calculator cause we need to clear it and then we test the clicky again just to make sure if you refresh it's correct but let's just try breaking things let's do zero yeah click assertion fail should be 15. yep and then let's let's move on like one five nine no no we need to add a nine this is going to be a little bit repetitive repetitive is good because that's when we see a pattern so we have nine click and there should be one five nine okay at this point we can start to see a bit of a a code issue where if we want to do like eight seven six zero all the different kinds of numbers we have to create like a 10 different numbers for it so it's going to be a bit of a pain to write one two three four five seven at night is there a better way uh yes there is actually a better way and we can do it by changing the classes from one to three or five seven nine because we just need the number right we just need to be able to reference the the key by their text content or by their i wouldn't recommend doing a text content thing most of the time because text content can change and it seems like this is a changeable thing to people so what i do is to use a data key like like what we did with times and all the other numbers here so i'm just going to change this to data [Music] key and instead of the the value one to nine i'm going to use the number because these are all strings we can do that with classes when we write classes we cannot begin classes with a number uh no idea why but that that's the case then now we need to go back to the styles and change the ones to uh i think this would be data p equals to one okay and i'm going to copy this this is two three while i'm doing this any questions i'm just looking through now um one uh chukka asked if it if we're setting up a test like that just and it's like you're just getting into the testing could you use a set timeout to actually see the clicks happening before it gets cleared um like is the way of it set up now it's doing all the clicks and clearing it right away well the the key is if you when you set it up earlier and you want to make sure that it's actually happening you can do it so let's just do this all right uh timeout and let's say uh we're gonna do this for like one second all right then we clear the calculator wait unclick property a3 [Music] oh oh you changed it i just changed this okay uh let me just do since we have one it will be simple so let me just do this key equals to one okay yeah one zero but mainly you don't really have an indication of why does it change from one to zero right and then of course you can do a console log of uh testing timer and then you would like okay testing timer one zero then you imagine if you do it multiple times it is going to be like before you can even begin the code you'll be like waiting for the calculator to play right so not exactly the the best approach to to uh testing because we're gonna run all the tests as soon as possible uh and with as little timeless as possible but if when you're setting up you you just want to make sure that okay this is actually no click you can do the timer that's the security thing yeah so we have five and now five is dela key hanaki get our key is five and nine will be delayed hp nine okay we're doing one five and nine right so yep now you can see that we already have done just this sequence three times which means that we can create a function to repeat it because we already have a very clear format let's create a function called test key or rather uh okay yeah my keyboard decided not to work for for a while earlier um test keys or run tests let's just go ahead run this run test uh run keys uh test key sequence all right that sounds nice and in that sequence we probably want to add a few numbers into it like maybe say one five or five nine this will be the arguments that we pass in so we can pass an array of arguments that we pressed and then we'll just get the keys back into our array here packed it back into our array so this is this will be a comma separated list of arguments and then we pack it back into an array i think i i have to test this it's been a while since i called it something like this so let's say if we do test key sequence test key sequence one five nine zero all right i'm just going to check the console all right so we have the one five nine zero i'm gonna call this a sequence and then this would be please now let's just leave it as keys and this will be an array so i've complete as i know which was which now when we press the keys uh what we want to do is to click so if the key is a number we're going to click the number and right now we have number keys but if we press the operator key can we can we check with this if you look at we have a plus minus times divide as well so we can actually do uh operator key click we can do an equal key click because we have data key oh wait we need to change data key equals to equal to do the equal click but we can do it later so let's just do with numbers for now um so uh for each key array there's a key what we want to do is to click document.query selector data key equals to key so we're using the variable here and we're going to convert it into a template lateral i'll click what this means is for if let's say we have our test key sequence one five nine what we're gonna do is click one click five click nine of course it's better to use strings because uh our entire calculator relies on string so far all right uh we can comment out this code for now and see whether we have one five nine here okay something is wrong see the correct query selector on document data key equals to one is not a valid selector and okay looks like my my square brackets went out should be here it should be inside the template little all right we see one five nine so actually that's correct if you test one and five that there we see it one and five and then if we press one then we have one all right so yes we have uh keys and we can press the key this is pressing key pressing one t and then this loop is to press many many keys actually this is what we we have uh and then we need the next thing we need to do so so we will set up the the clicking part the next thing we need to do is the part for the assertion what we need is to pass in the value there's two things we need value to assert and then the message test message okay and this is going to be a little bit hard to pass in into this one a common separated argument which is just the keys so what we can do is to pass in instead of uh this comma separator argument thingy we can pass in an object that kind of looks like this so let's say we have a object that looks like this and we say keys to press will be an array that says one five nine and okay cool it's like this and then we have a value to assert that this will be one five nine uh in strings and then we have a message to to to uh for the test so we click 159 now if we decide to use this object which is much clearer since we have the value to assert and the message we can put this inside as the parameter so i think let's let's call this object uh the test okay we're gonna use the test as the object and in that case we don't need do not need array.keys because the test.key system object itself press many keys and then when you do the assertion which is console.assert display.value [Music] display.textcontent s test.value and then we have a message test.message then we run the test sequence by running this test that we created over here refresh and it says 159 uh remember we haven't clicked the calculator yet there's no error in the console but let's just create an error and see take a look at the test value and the test message all right assertion fail click 159. so we know that this test value is wrong uh but we don't know what's the what's the real value because we can we can do a another console. also when we do a debug right but this is what we can do and essentially we have created a repeatable test structure that we can use to test many different key combinations right and the last thing to do is uh let me just remove the comments here press keys so we press keys we do the assertion and we clear calculator after each test so this will be our test structure and at this point all we can do is to create an array of tests and run this test inside so they'll be testing say one test let's do an array of tests test and the first test will be this is actually the third test but we'll just use it if you click one five it will be one five fifteen if you click one you'll be one and then what we do is to we run all the tests in this array so test dot for each test we're gonna test each key that's the key sequence and when we have this constant text right uh because this this is only one uh what's that called this is this test key sequence only takes in one argument we can skip the syntax and simply pass the first element uh the first argument inside it kind of looks like this and then there'll be no errors but of course let's just make an error to make sure that everything is there so we have three hours which means that we actually ran all three assertions and since there are no errors that means that nothing is wrong of course we can also check the errors by where do i go what's this oh yeah we we have no use for this variables anymore we can check the the errors by changing the values say one is two that fails or this one and the 15 one fails okay cool so this is how we run tests um any questions before we continue i think this is we jumped a lot in the last 30 minutes or so because it's like no it it looks pretty good uh we're on track i just want to say a thank you to zero eight eight forty for the super chat as well as uh waffy mohammed thank you guys so very much it's super generous of you and i have a couple of my former students hanging out in the chat too so hi guys nice yeah i do not know if any of my students are hanging out in the chat but let me just leave the chat for now and continue otherwise everything looks like it's going good so this is cool yeah okay cool so right now we have the test now let's do a multiplication test so one five times nine for example uh the result we was expecting the c is one three five uh if you if you are a little bit if you have if you're not sure about the calculation you can do like a normal calculator like me and make sure that the result is one one three five before we continue writing the test right so keys will be one five and times so this is this is the reason why you know uh before that and i think in the last session i said i mentioned that we can actually use the text content but i prefer not to i actually like to use text because this is when i will start writing text otherwise i'll be scrolling up and down finding the times operator and then trying to write that in it's not very nice okay value would be 135. and the message can be calculation with times for example the message can be anything okay again uh oh assertion fail why one five times nine oh let's see so the good thing about normal test runners is you can skip uh like like with chest is you can skip all the tests that actually passes and you test the one that fails but in this rudimentary version we have to comment out the test we do on the test and then we figure out what's wrong with the current one okay assertion field calculation with times and then we go back here all right display dot text content test value let's just try oh okay so the display.text content is actually showing nine let's not do a clear calculator so we see it it shows nine oh i forgot the ego key and we need to change this to the dash key is equal and i think that's this killing me all right now now it works can't believe i forgot the eco key yeah all right and this is how we test that calculator let's just fix everything now if we're a little bit um i don't know what's the proper english word for it but in singapore we have this term it's called that's the kia su which kind of means that you are anxious and panicky and you want to make sure everything is correct and so you test everything twice or three times kind of something like that so what we can do is we can test every operator with the times operator now we can try pressing the plus operator okay one five let's let's change numbers so we know other numbers work as well 2 24 plus 7 that would be 31. so if the if this works that's fine and then this fails so we know that this is actually working fine with a num we have a minus so just uh let's start creating making things difficult for ourselves a little bit more so let's try um three so we want to get a negative number three minus seventy uh that's true nana's with what's that value that will be minus sixty-seven all right okay cool oh okay there's no seventy because that's seven and zero and that's that's where we have it and we have times let's do a divide as well all right and in this case we can uh i remember there's this this is divided by zero thing previously i remember the last session so we can do a normal device say 9 divided by 9 divide three should be three right oh notice this there's this there's this operator that's still staying here that didn't get cleared away notice that you see it yeah yeah so it means our clear uh our clear operation should clear away the the whatever operators are being depressed right now so clear calculator should also uh let's just call it key uh do we add a selected class or something oh wait we did a state ah that's the can't remember yeah they all said not steeped operator keys is not defined because we only define it here so we can do is to bring it up and it should be defined right click and then this goes away there we go right yeah let's do a let's do a divide by zero i just wanna i really i just wanna remember this one yeah it should be infinity all right and that's that's it for a very simple version of the clearing ryan just mentions that you don't want to forget to change your search and messages my associate oh yeah [Laughter] plus minus times divide and let's call this divide by zero calculation yeah that's that's it um going forward if we want to be a bit more fancy what we can do is a piece say nine nine plus nine uh nine equals equal for example and then you remember um if you do nine plus nine equals it'll be 18 if you do if you press equals again you'll continue the calculation and there'll be 27 but there is a difficult age case that i explained in learn javascript so i'm not going to explain it here it's going to take at least two more hours just to explain all the different cases it's really tough all right i've been through that it's really tough so let's just stop here and i hope that um you know unless we have a uh a rudimentary version of testing that you can you can you can use but it's again it's about finding the patterns of what you want to test in this case for calculator it's pretty simple because we have a very fixed pattern so we can create this test key sequence function but if you do not have it then just just put the test slap the test together and find the whatever elements you want to click which this this click would be nice and do the do the test from that that's actually what um test runners do for you by making the searching a little bit simpler that's all and of course they test it without you having to open up the console but i without having you opening up the server manually but that's about what uh that's that's what they offer over console. and yeah that's it i guess i can't stop my screen share at this point i don't think there's anything else i want to share yeah uh move on back to you kevin yeah i think i mean there's nothing too much going on in the chat right now um [Music] maxwell says that it's awesome what you managed to get done there so that's great happy to see that and there wasn't too many questions that rolled in end went a little bit too far sorry oh wait i lost you the connection was unstable oh no are you back now yeah i'm back now yeah so yeah no i was just saying that maxwell would appreciate it he said it was really awesome but we didn't there was no not too many questions rolling in there so i hope everybody was enjoying it uh what was going on this whole time i thought it was really good how far would like at what point would you say if you're doing testing like this like when do you decide okay maybe i should be using a um you know a testing framework or something like at what point does it get too much that you're bothering to you know write all of this um like this like is there like at one point you just stop and go like this is getting ridiculous or uh you know hopefully you understand what i'm saying yeah uh i think we don't really have to worry about it as this at this point um you'll get to a point where you get frustrated with console. and that's the point where you want to switch to a real test framework or if you have already learned to use a test framework then by all means get started by using that test remote and skip the whole console console.thing all together so the real reason for using console.assert in my case at this point is to is to um help people get over the hurdle of testing right like testing this big overwhelming thing but we can actually start doing it with whatever we know that's what the purpose of this uh today's live stream and the purpose of me writing the test into my um my course but also the reason why i included tess was because uh when i tried doing the difficult age cases it was really bad i had to do it like five or six times and i spent like 40 hours just trying to debate what what the hell is going on and with the test i just write the lessons and i'm done so it's it's like those are the kind of things that you want to if the moment you start creating something a little bit more complicated like the calculator you need to write test doesn't matter whether right in console in the console or where right in the test remote yep uh let's take a look at the questions i think uh kush kushagra was asking whether we can get a console on ipad console is for browsers and for node so as long as you're running uh a browser or a node you should be able to get the console um asking is it possible to get the tutorials for learn javascript projects uh anything in there if it's everything in there then it's probably best to join the course i do release a few articles here and there but i can't remember often where they are at this point like the calculator one is right here right now i think i have a yeah sorry i can't remember the rest i don't think i released everything let's see all right nothing more yeah yeah it looks good that was good thank you guys for hanging out if you have any last minute questions throw them in quick quick and yeah this was uh really interesting thanks a lot zell for coming to hang out these three days to to put this together it was a lot of fun you did a lot more work than i did so it was pretty easy for me i have to do more of these collabs where i get to watch people do all the hard work [Laughter] well if we if we do the chess game like was mentioning he has to both do the hard work yeah yeah like we will be calling the css together we're recording the the javascript together they'll be oh i haven't done something like that before yeah a lot of thanks thank you guys all for coming to hang out with us from daniel tim who else has been here of course fatima and giancarlo thank you guys for coming to hang out ryan sapanda dayani yeah thank you all danielle thank you guys all for coming and hanging out with us it looks like a lot of positive feedback rolling in now so that's always good so yeah and if ever you have any other you know suggestions or anything like that for other collaborations you'd like to see with me and zell or if it's anybody else let me know i have a few other things planned they'll be a little bit different from what uh me and zell are working on now but i'll be trying to keep up with some collabs as time goes on uh and we keep working on stuff if you want links to any of zell's stuff all of the stuff is linked down below and i did see a few questions also um just as it rolled in and i mentioned my community so if ever you want to know about um you know if you ever have questions youtube comments can be really hard to ask questions so there is a link to my discord community in the the description as well it can be a little bit easier to ask questions have discussion and not have to wait on people because there's usually always somebody active no matter what time zone you're in so that always helps uh for live streams if you're subscribed i think they even send you an email i get emails from myself as soon as i go live um and then there's also the other ones what else can we do uh subscribe to our newsletters and then you'll get our you'll get notifications for everything we're up to so i know zelda's sending his out and i've been letting people know that i'm going live too so the best way to keep up with whatever we're doing is probably some form of newsletter for both of us any uh parting words though yeah yeah it's been fun hanging out thanks for having us um thanks for having me kevin to talk about this calculator thing it's been fun just to life code for a while it's been a while since i did that and i'll be happy to continue doing some collapse if we find a chance to i'm going forward i keep nodding and like giving you thumbs up and stuff and i'm like oh wait he can't see me i keep forgetting i'm not you don't have the camera on your end but yes definitely uh this is a lot of fun for me so i'd definitely be up for some some future stuff yeah so yeah i think the next time we do this i want to have my monitor ready weird not to be able to see you and plus the chat on the other screen or something yeah that's otherwise i'm good thanks for hanging out with us and yeah have a good evening everyone or morning depending where you are in the world bye bye whoops there we go