Unit testing in JavaScript Part 3 - Test runners

good Monday morning today we are continuing our journey on learning about unit testing in Johnson's I am mgj and you are watching function [Music] [Music] in the last episode we wrote our very first tests and they looked a little bit like this well they looked exactly like this these are the tests we wrote today we're going to introduce a test runner to our unit testing suite a tool that runs the unit tests for us up until this point we have just been using straight plain old JavaScript this is just the function and then we have use this these if statements where they a check in them and if if they fail we have have thrown errors directly all right why use a test runner I mean why can't you just continue running running tests directly in JavaScript I'm not saying against it but I think it's important that we we understand why we're doing this I am glad you asked because I have shite loads of benefits first of all a test runner means that your your code becomes a bit more dry it removes a lot of duplication let me otherwise arise it's no let me save that then you've got pretty test results the test the test Runner will just give you nice or output than the then just vanilla having having it run in a vanilla JavaScript you get pretty test results they are beautiful they are they display nicely and also they have the added benefit of running all your tests which they won't if test number one breaks you will still get all the tests running and not just it won't stop for the first one that's pretty nice the having a test runner that with a syntax that your team is likely to be familiar with means that it's more predictable for the team I mean if you use the test Runner like mocha or or just that will look in a certain way and the your teammates will be able to quickly discern like okay this feels like a test that I'm amused to having a test runner also makes it easier to do integration with your continuous integration system if you are familiar with what continuous integration is you can check out my episode series on that here it's very cool but most importantly I think that our test runners give you the benefit of have an infrastructure to run the tests and like and the biggest one is they having your test run automatically on each change every time you hit save the test will run immediately checking your code kind of like a linter but for the actual logic of your code it's very very powerful alright so what we're gonna do first is I think that we we're gonna install a test runner first and what I want to do we need a package.json first let's create an integrated terminal and I mean the correct directory let's do NPM in it whoops in it sorry about that right package name test runners that's fine version fine description I'm gonna just gonna press ENTER it's it's not we just want their package yes cool so that we can install mmm packages and I'm going to do NPM I save Deb I think that's it and so that this gets installed as a development dependency instead of a and all the dependencies know that it matters exactly for this case but sure we're gonna install just so why jest of all test runners why are we using just why not mocha or jasmine or a balloon test runners choice is not super important but uh the reasons why I pick just for these these these episodes is that first that just is it's very established it's it's the framework so it's a testing tool that comes bundled where the Cree I create react up the boilerplate that Facebook provides for react which means that it has a it has quite a bit of weight and a lot of usage due to that and facebook also dog foods and bells this internally so they have people hired working on this thing it's it's been around its battle-tested and that is a very nice straight for the for software development to I think but it's also nice because it's ready to use which makes it a bit more that makes it truly unique because you get can get started right out of the box using just it's it includes a both an assertion library and a Ana mocking library which is which is fantastic so there's like you don't have to start picking tools together in order to get going you you can but it it comes to me batteries included that is nice alright let's check out the package Jason so you see here that now Wow sorry just it's now a deaf dependency or so now we have just installed next up I would like to break this code and test file which has our code or function that we are building and our tests like these are all bundled in one big file because in previous episode we were just running the JavaScript straight up because I didn't want to distract you with the test run I want to show you the principle of unit testing first what we gonna do is break this up let's do that let's first create a file called order total dot yes and I'm going to go into this file cut this out and paste that in into order total and we're going to export it module or the exports order total hello and then we are doing to take all of this stuff here all the tests I'm going to cut that out and then I'm going to create a new file called order total dot test yes hello I think that's it and we need to also we don't have an order total in this file yet so we need to Const order total require blue order total total from table to table or a drop cool and then I will delete this file hello bye cool now I'm going to go to package Jason and we're going to define our test script here there's a script part of the package or Jason and there is one predefined test here which just says echo no tests or no test specified and this is what happens when we run NPM and VM tests then we'll see here that hey echo no test specified not specified because that's what it tries to run so we're going to do just right just here I think that's gonna be fine let's do NPM test does that work that worked cool cannot find module order total from order total test of Jas hmm that was oh that's expected I suppose I am not specified specifying the relative path that's how you have to do it let's try to run that again I'm running NPM test sure and cool your test suite must contain at least one test okay cool that's progress this these are the tests that we wrote in the last and again these are just playing jobs but we're going to use just now and the way you do that we're gonna just gonna write an empty steadily test that does nothing it works so I just want to do this because I want to see that our test chain works fine and Lala let's open up the terminal create an integrated terminal and then run npm tests see what happens Beppo okay cool it works and one test has passed fine so the way a test runner works an almost old test Runner works Chester Andaluz works yes that if nothing explodes in the test that means it's rigged so the way a test normally works is that we have assertions such as expectations so expect one to be one running that and it's the works but if our changes expect one to be two that's a very unreasonable expectation and then we get something pretty like this which has an expected value to be using triple equals to receive one so let's rewrite this test here in our new format we'll take it and then I go up this string here copy that in you know what this is a dumb way of saying we can just call that quantity actually let's say that yeah this is not the best test naming we might figure something out better out later but right now we're not we're not overly concerned with test naming we are concerned with how learning how just works so let's see here we're gonna do expect right we'll grab this here this cool app s on it and we're going to say to be sexy and I think I'm missing a parent perhaps what I'm gonna be saying what am I missing I'm missing a parents there that's it let's run that mm-hmm oh yeah there are this one as you see now one past which is this one it was green but are all my broken tests here was remaining so I'll delete that run that again and PM tests cool all right so I keep typing NPM test here again again again again again it's not too much work but it would be cool if it was work that we didn't have to do and we don't I will go into package Jason and I'm going to create a new script script called watch and that is going to be just just - - watch and now oh hang on I think I need to also specify what what files to watch and I'm gonna run NPM watch - oh no no no that's I can't just type NPM watch that's a special thing for NPM test and so test the special watch in order to run that I need to do NPM run watch that should work yes cool and if I not close this and I yes I can delete that because we have already implemented that so every time I save now the test reruns so let's say that I change this to seven and save BAM it will fail and if I change it back to six BAM it will succeed this creates a really really nice feedback loop of immediacy like red green red green red green very nice oh by the way let me go back I mentioned before that a test run helps with keeping the code a little bit dry now so I'm bringing back to this old oh sorry sorry Oh had had food or the total here if I if I select this and I drag up here a little bit you'll see that it's 141 characters selected but with this thing here it's only one 136 characters like this so it's it's a bit more terse we can actually we actually don't need these characters here either those are unnecessary sis we just have one assertion and now it's even smaller it's also a bit nicer easier to read because the assertion is it's at the prompt we could probably wiggle this with the manual I don't know but I don't it's just short and it's easy to read this syntax becomes very nice so let me delete that and let's start go through implementing the the other test as well so we have checked out no quantity specified so yeah dude nope si no quantity specified oh sorry and oh my god I'm having a hard time typing it today that's a lie I always always have a hard time typing and I'm pissing this in here oops sorry about that sir about that oh paste and then I expect this to be what was it three kaboom and now two tests are passing what and look how nice and pretty this is with these mmm green checkmarks that feel really good and I proceed let me actually go down here and have this a little bit smaller I'm going to take this one it says check fail oh happy part example one it about example one and we do it exactly the same thing we grab this here and I'm going to expect this coal to be now to be a time right copying this yeah and we now have three passed expand that up a bit see ya pretty and let's grab the final test as well grabbing the happy path example 2 boom and I'm grabbing the or a total expecting that to be 60 and the syntax is this is just crap code deleting it indentation is Lynch arias angry about it and we now have our test running in the just test runner on every save save save save BAM and that is just you can find the code in the episode description for the next episode what would you like to see I there are many many steps that we can take from this but I would like this to be audience driven so if you have any questions about anything please write them down below and I will either answer it or I will use it your question has a basis for the the next episode you have just watched an episode of fun fun function I release these every Monday morning or 800 GMT if you are watching from the future you can check out next week's episode here otherwise you can subscribe here so that you don't miss it if you are forgetful you can also turn on notifications in the YouTube app I am mpj until next Sunday morning stay curious

Channel: Fun Fun Function

Views: 45,609

Keywords: programming, coding, javascript, computer science, software engineering, software, functional programming

Id: pdx2HjFRaJY

Length: 17min 41sec (1061 seconds)

Published: Mon Nov 27 2017