Write a Unit Test for JavaScript (super simple!)

hello everyone and welcome to this week's video in which we're going to talk a little bit about testing now i know that on my channel we usually just talk about building things you know building games building clones such as a tick tock clone or perhaps just general javascript lessons however we haven't really tested anything quite yet and this is a super important part of being a developer this is why i wanted to make a dedicated video into how we would write our first test in a super simple way thanks to mocha okay so we're going to be doing some mocha testing i swear it's super simple so don't be intimidated we are going to be writing some super simple functions and writing some tests for them okay so i hope you are ready please do like and subscribe to my channel or comment whatever you wish anything to help against the youtube algorithm so that i can keep creating more free content for you guys so yeah go ahead and do that now and let's do it let's get into writing some of those tests okay so let's get to it to help us out i've already gone ahead and done the boilerplate setup for us so as you can see here we have an index.html file with the necessary scripts a problem.js file we're going to put our functions and a test js file in which we're gonna write our tests to test those functions so please pause here and just take all of this it's yours okay like it's just boilerplate this is how you would style the test so if i was to open this up in the browser you will see that that one liner code is giving us styling and stuff for that so thank you and then we have some scripts that will essentially allow us to run the tests so take it down it's yours um it's just it's just standard boilerplate once you have that and you've linked your problem js file and your test js file making sure that it has the correct path so if you have these in different folders just just be aware of that and i think we're now ready to write our first function okay so you can either do it either way you can write your test first or you can write your problem first writing the test first is considered to be test driven programming a lot of developers like doing that but it's totally up to you i'm going to start with the problem first and then write my test to make sure that the function passes so let's do it let's think of a problem so let's write a function that converts fahrenheit to celsius okay so we're going to write this function and then we're going to write a test for it so i'm just going to make sure fahrenheit to celsius so i guess for example if we had an array of these if you did my coding bootcamp you will recognize this as part of the array work we have this array of fahrenheit values and we want to change it to celsius values so the celsius would be this okay so fahrenheit to celsius and we want a function that will convert them for us so let's go ahead and write function get celsius so i'm going to call my function you can call your function whatever you like so that's what i'm going to call it and in here well how would i do this well let's figure out how to fahrenheit to celsius okay so we use this formula i'm just going to put that here so we can use it okay now let's say we have just gonna use this for now const fahren height equals so that's our array of values let's actually get the array so i'm going to say fahrenheit and what i would do is essentially map onto each of these values the formula to change it onto celsius so i would use the javascript method of map and if you know map this is the syntax we would get a value and for each value in our array we want to do something to that value so that's what it is you can call this value you can call this whatever but i'm going to stick to calling it value for now or temperature you could say temperature anyway whatever that's by the way so for each value in my fahrenheit array well i would have to so there's fahrenheit minus 32 let's put that in parenthesis and then multiply by 5.9 so in javascript we'd write it this way okay and that should be it i'm just going to return this other function okay so that is the function however let's check it out let's see if we're correct let's see if any single array that we pass through into here will give us this so i'm going to delete that and what we are saying is that any array that we pass spell that right any array we pass into our function should convert to celsius and return that for us return that new array for us okay so now that we have that let's write a test for it let's make sure to save that now the first thing you need to do is actually get chai so chai you will see here here is the chai script we need to get it from our window and save it as chai so we can use it in this file same for expect so const expect chai expect now that we have that we will use these two in order to write our tests to write a test it takes this type of syntax we'd use describe just going to show you like generic syntax for writing a text test first describe let's say get celsius so this is a string i could actually put whatever i want here but just for readability i'm going to put describe get celsius and then we need to write an arrow function so describe get celsius and then function and in our function it should convert convert fahrenheit to cell see us for all values in an array so once again why does it say instance or that's meant to say it silly autocorrect it and i've just entered this string i could put in whatever i want okay it's just to help us know which function we're testing so it should convert fahrenheit to sizes for all values in an array and once again function okay cool once again this is just syntax it's just something you have to remember there's not much to it it's just remembering work on how to how to write a test so how would we test our function well expect and then once we have written expect so that's the thing that we have here that we saved as the variable expect expect get celsius so we're getting the function expect celsius and then whatever we pass into the function so we expect this to deep equal and we expect it to deep equal that ah oops expect get celsius so get celsius so that should all be encapsulated and then that should be encapsulated okay and that's it let's get to running this test now so i would literally just go back to here and refresh this page we've obviously written something wrong because the value that we are returning from the functions are these so let's go back to our problem so whatever we pass into here we are getting the value minusing 32 and then multiplying by five over nine ah thank god for a test ah so now there we go our test is now passing and that's it that's how we write a test so once again see that test actually helped me in real life like i didn't notice that error and thanks to our tests we fixed the problem we can also write more tests so just in case we think that that one was a fluke you can do it for loads so i can even go minus 58. obviously i'd have to actually do these i've already pre done these for us so minus 4 14 that should equal minus 15 minus 30 minus 20 minus 10. and this should let's put the let's put the fahrenheit 104 122 158 one seven six and so that should equal 40 50 70 80. don't worry if anything's wrong our test will tell us so this is why i love tests so much you know if you make a silly mistake you'll immediately get a little red x over it and it will tell you why the test has failed so once again that is right however once again let's change this to a plus for some reason i thought it was a plus refresh our page and wrong so the array now we're getting this returned from our function and that does not deeply equal this as we stated by the test so we know that something is wrong with our function let's put it back to that and there we go our test is passing so please have a go at this yourself one thing that i will say obviously this is just like a simple uh guide into letting you know how to do it however you can have different uh criteria here so this is to deep equal i'm literally saying that i'm expecting this so if i pass through this array to the function i literally expect this as a return you can have to deep equal you can have to be true to be false so if you're testing for boolean returns the choice is up to you please do do some research on exactly what is available to you this is just a super simple video just to show you how to write your first test now go forth and explore all your options that are available if you do like this video and you'd like me to make a more comprehensive more in-depth video on testing please do let me know in the comments otherwise please do like and subscribe and i'll see you again soon

Channel: Code with Ania Kubów

Views: 46,916

Keywords: unit testing, javascript testing, functional programming, mocha unit test, chai javascript, chai unit test, assertion library, web development tutorial, web developer career, web development, simple unit test, to.deep.equal, web development course, learn web development free, unit testing tutorial, mocha and chai, mocha vs chai, learn javascript for free, test driven development, tdd, coding for beginners, coding tutorial free, learn to code, coding bootcamp, unit test

Id: Rumf96j0cR0

Length: 13min 14sec (794 seconds)

Published: Wed Feb 03 2021