Unit testing in JavaScript Part 6 - Red, Green, Refactor and Jest mocks

good Monday morning today we are continuing our journey of unit testing in JavaScript you can check out the full episode series playlist here let's get going I am mpj and you are watching fun fun function [Music] [Music] [Music] today we're going to do two things we're going to start by removing some duplication that we have have created in in our previous episodes and then we are going to continue by refactoring in our code to instead of using our custom-made mock functions we're going to use the mock function library that is built into just let's begin by jumping into order total here the duplication that I'm referring to is this here this this here is exactly the same code as this here one great thing with unit testing or TDD here's the the cycle the methodology that you get from it I talked a little bit before about the nice red green red green red green cycle that we get where we just our test is red mmm that's nasty that's unbreak it comes green and it gives you this constant sense of progression but what I've neglected is that it's not actually two steps in the red green cycle it's actually red green refactor so you write a test that is R and it's broken because the code that you want doesn't even exist yet right the code gets green and then now only then you you factor it because now when you have a test or test suite that is green you can safely safely refactor things knowing that tests all the tests are running an or verifying that your code works as expected even though you refactor it by the way if you're not familiar with the term refactoring it means changing stuff around so perhaps we just make some kind of cons some order items and we just copy this thing here make this a function that takes an order and then um paces in here to call that order I said okay it still works then I just do this some order items paste the ordering there oh okay that was easy that was too easy just I have to break this and see if yeah that's it's actually that actually was that easy okay that was actually so easy that I hope to dwell on it for a bit because something amazing happened there IIST randomly shoved things around in a function and I had five tests for test cases that just checked that everything worked while I was refactoring it and we are now safe it's that this is why you do unit testing so that you can do refactoring safely and easily next up we are going to start playing around well the mock functions that are built into just and as you see here we built our own fake fetch here and we also created our own fake process I think that we the fake process is so simple that we're probably gonna leave that be but the fake fetch might benefit a little bit from using the mock functions in ingest or at least it won't hurt them and we will learn how the muck function just works let's go to Google and go just mock functions to find the documentation mock functions just Facebook code blue this is how you do it you do just start filling or fraction so let's actually try to start this and go to grab this down woman you come strike fetch - and just do just dot dot dot dot but the dogs how does this work Blee Blee Blee Blee Bloo okay it's mark return value and we wanted to return this thing here I'm gonna copy that pasted it and I'm going to paste in the fake fetch here and see what happens okay it seems like it's it it's still green that's good realize this and here we're going to instead of checking this as the fake fish is cold we're going to with with Jess we're going to inspect afterwards that function call them with the with the correct are means all arguments and did it at the bit to do hi on so it's expect moxa to be cold it's not quite to be called width to be called width so let's actually then need to expand this a little bit we're gonna expect fake fetch to to be cold where is that it now it's like that expect fake 52 to be cold with I guess the Earl here first of all hop there we go like that did that work no expected mob function to have been called with undefined as argument to what it was called with Heather's API okay so it actually wants the exact signature that's fine so you know what I'm actually just gonna copy that because we know that this is correct because we were refactoring a working test so I'm just gonna paste that in here like that and we have a passive test let me just fix some bit of invitation here a little bit spacing I'll leave it like that I'm cool that and we can now remove the actually we can now remove the entire fake fetch here cuz it's no longer being used and I can rename the fake fetch to to fake fetch flip and it's still working one really cool thing here is that we when we have this when we were factoring tests and we know that code is working we can we can actually use the working code as a test for our test refactoring it's kind of like this funky dual relationship that is why we thought it was really cool when we just could copy this from the failing failing test message because we knew that what what the code was doing was correct that is cool but I'm skeptical about another thing which is this entire the just mock functions like why are we why are we using these are they actually giving us much benefit I would say not so much in this case I would I would say that this this didn't really turn out shorter than our previous example it just it is pretty much the same however it still has the benefit of being a standard way of doing more functions because what we just did there that was just our personal style and if we were just a team of developers that were inventing these things as we went along then every every test of every model module would probably look a little bit different big advantage with using something that just is that someone familiar with just will see that okay the mocks looked like this and they don't need to relearn the implementation every time that's pretty much and there's also we we made use here of mock return value which is the most basic basic mock thingy-thingy but there are more complicated mocking cases for instance we can use mock implementation once to have the function return something just on the first call and then you call more complementary ones and it will return another value on the second call and these things are like a little bit more verbose to implement yourself it's not super complicated you have to like create an int and then increment that so that it returns that on other calls it's not rocket surgery but this will be a lot shorter still than that implementation so whenever you make a mocking that is slightly more slightly more complicated then you you you could get some benefit by by using just as well like from probably just terseness it standpoint let me commit to that boom and we're gonna call that mmm what are we gonna call that what did we even do let me check the death we oh yeah we reflected this to use the just mock functions we factored to use yes mock functions and there we go and that is it for today if you have any question or confusions or like what is this or suggestions on what you want to see next in this series post a comment down below or if your patron you can check out the dedicated discussion topic for this episode on the fun front forum there's a link in the episode description do not be a stranger and that is it you have just watched an episode of fun fun function I release these every Monday morning o 800 GMT if you are watching from the future you can check out next week's episode here or if you're watching from the present you can subscribe here so that you don't miss that episode you can also turn on notifications in the YouTube app I am mpj until next Monday morning stay curious

Channel: Fun Fun Function

Views: 20,111

Rating: 4.9237437 out of 5

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

Id: yIcpju9O4ZQ

Length: 12min 27sec (747 seconds)

Published: Mon Dec 18 2017