Test Driven Development: The best way to code that I almost never use

so i just did a video on what i'm calling the senior developer workflow or really just iterative development and a lot of the questions that i got back were around how does this apply to tdd now i love tdd or test driven development so i'm happy to answer those questions and i kind of want to set it up by thinking about tdd as how you're going to write the best code of your life because it's actually going to get you there but it's kind of like those cooking videos where all the ingredients are just laid out just so and it's perfect and you're like well why don't i cook more often that way with all the ingredients laid out and just perfectly proportioned and all that and that's a really good question so what i'm going to do in this video is start off by introducing tdd and show you how it's going to help you write some just superb quality code and then i'm going to cover why i don't use it as often as i should so let's jump over into the office and check out what tdd is okay we're over in the office and i'm going to use my mpx create mf app to create a library so we're going to create a library called my library and i'm going to use the library setup and that's going to give us my library so let's jump on in there and i'm going to do vs code and so this is just a simple typescript library so to this we're going to go and set up our testing systems so to this i'm going to add just ts gest which is for typescript jest and then the types for jest which gets it talking to typescript now the next thing i need to do is configure jest for typescript so the way that i do that is to use mpx and then use that tsgs command and give it the config init and this is just going to go and automatically create a configuration for us so we're pretty much good to test at this point i'm going to go over to my source directory and currently i've got an index.ts that has some code in it we're going to get rid of that code don't need that anymore okay now into this directory i'm going to create a new file and i'm going to call that sumclamp.spec.ts so that's going to have our tests in it and i'm going to describe a new function we're going to call it sum and clamp and in there we're going to have a bunch of tests so we're going to say that it should sum up to zero and we're just gonna have it some array of numbers so we're gonna expect that some clamp if we give it an empty array and then start it off at 10. we're going to expect that to be zero we're going to expect the result of that to be the number zero and let's also say that uh we're going to expect that if we add negative one and one we can also get zero so what this is going to do is basically just sum up all of the numbers in the array and then if it exceeds this clamping number it'll clamp down the number to that and then let's see so jump material zero from some numbers so we've got enough to actually start out with right this is our api contract we want we want this sum clamp so let's go and build that out so i'm going to go back over here to our files and i'm going to create a new file called sumclamp.ts and in there i'm just going to export a function we'll call it sumclamp and we expect that it's going to take some numbers which is an array of numbers and a clamping value which is just a number and it's going to return a number and right now i'm just going to return zero you know because honestly that is what it expects so i've only given it some tests that return zero so just returning zero is enough and that's actually one of the principles here you actually want to write just enough code to get all of the tests to run and no more so how am i gonna get this to run well i'm going to use an extension called wallaby and what wallaby does is it actually runs all of the tests as you type so it's going to add a lot of stuff here around debugging and focus but basically what it's saying is okay this describe is cool we're getting a green box here and that basically says it everything's cool with that but these ones aren't working and why aren't they working what actually tells you some clamp is not defined okay great so let's go and define some clamp by importing it so i'm going to bring in some clamp from our sum clamp file and when you know it this is awesome so now these are actually starting to run so we got zero coming out of some clamp but let's actually give it some numbers and expect it to sum up so i'm going to say should sum some numbers and we're going to give it let's see one two three four and our clamp is gonna be 20 but if we sum up one two and three and four then we expect that value to be ten right because one plus two plus three plus four is ten last time i checked so see that now oh yep so if we scroll over here we expected the value to be 10 and we got zero so let's now go back over and implement some clamp and then i'm going to take the numbers and i'm going to reduce them to create a sum i'm going to take each number as i go and then add it to that sum and start off with zero so let's see does that work okay let's go back over our spec and yes it does that's awesome but let's see it probably doesn't clamp it so if i want to say should sum some numbers and then clamp and i'm going to clamp it to 5 and expect that the value coming out is 5. oh there you go so another broken test so we expected that we would get 5 but we got 10 back so now let's go over and write the code to make sure that that works so we are going to give a math.min and take the sum and take the clamp and whichever is the smaller we'll take that so let's see we'll just take a math.min of numbers and the clamp i think it should be working and cool and now we can see that all four of these tests pass now if you don't have wallaby so what would you do so i'm going to go over here to our package.json and i'm going to add a script for test and i'm going to set that to be jest and then i'll go back into our terminal and then i'm going to run that test on there and when you know it everything passes everything's great cool so now this is obviously pretty simple so the next thing i want to do is actually try out using this technique when it comes to building react hooks and see if we can do something that's a bit more complex at least in terms of how it works within the ecosystem but before you get there if you like this video be sure to hit that like button if you really like the video hit that subscribe button and ring that bell and you'll be notified the next time a new one of these comes out okay so let's close out some of these and what we need to do to get going on this is we actually need to add a few things to enable us to do react testing so of course number one would be we need to do react so let's go and add in react and react dom and then i'm going to add the testing library for react hooks so this is a testing library that's specific to react hooks that basically simulates the hook environment and makes it easy to test hooks add that and the last thing i need to do is change our just configuration so that instead of testing in node tests in js dom and the reason for that is that we are actually going to be simulating the dom here for these react hooks okay so we're going to create a hook called use sum and it's gonna be pretty simple it's basically just going to have some state in it that state's going to be probably an array of numbers we're going to add numbers to that array and then it's going to automatically sum it for us so i'll create a file here called use sum then we want to start with our spec right so we're going to do spec.ts and i'm going to bring in render hook and act from the react hooks starting library so render hook basically allows us to render a hook and act allows us to call any callbacks on that hook so i'm going to describe use sum as a set of tests here and i'm going to say it should start with 0. so currently it's fine right so the first thing we need to do is render the hook so i'm going to use render hook here and it's going to just take a function that then returns you sum which is not defined anywhere yet so that's okay but then we get back the result what's the result of calling that hook so we're gonna run some expectations on that and we expect the sure the result current sum to be zero so we have some summing and we expect that to be zero okay so now we've actually got to go and create our hook so let's go back over to our project and i'm going to create a new file called use sum dot ts i'm just going to create the simplest possible function i can so i'm going to say export a function call it use sum and then all it's going to do is return a sum that starts at zero because that's gonna make our test work that's all it's looking for so let's go back over to here and we'll say import use sum from u-sum and now our test is passing pretty cool okay great but of course that's not what we really want so what we want is we want to be able to add a number to it should sum up a number and so to do that we need to use this act function so once that hook has been created we need to act on it so i'm going to say act then i'm going to give it a callback and then i'm going to use the github cli suggestion here which is to say current add we'll add 10 and then we expect the sum to be 10. okay so currently it's telling us we have no add function right add is not a function because we didn't return one so it's not even getting to the point where it's actually going to test so let's go back over here and we're going to add our adder so what are we going to do with that well let's go and create some state so i'm going to go and bring in use date from react and i'll go and create a value here since that's all we need we just need a single value and i'm going to return that value it starts off at 0 that's fine and then i'm going to set that value right here i'm just going to call set value and let's see does that work yes that works just fine awesome because this ad is taking a value and then setting that value and then returning that value over here and of course we only have the one value so there you go but of course that's all we want we want it to have multiple ads and support multiple ads and then we get the number that's the sum of all those so we'll add now 20 at this point and we can see that we get an error we expected to see 10 and we got 20. well what we really want is 30 so that's not the good in either case so now we're expecting 30 and we got 20 because 20 is the last thing along the line so our code is not doing what we expected to do so let's go back over here and instead of a value we'll call this numbers and then set numbers and then we're going to have a an array of numbers as our state and so what do we do here well our sum we want to use a memo for that so let's see use memo and i'm going to use the github cli suggestion here which is to use that reducer with a b and then add a to b and we will change if numbers ever changes all right that looks pretty good but now we need to go and set the numbers so we'll use a callback for that so i'll call use callback here i'll drop that in there and that's going to take a value which is a number and then i'm going to set those numbers to be all the current numbers plus the new value and i'm going to recalculate this callback whenever numbers changes so that we don't have a stale closure put in numbers there and we should be good let's give it a try we're seeing green across the board over here that's real good let's go over here we're seeing green across the board excellent we have a pretty solid sense that we're actually going to pass our test if we run it but let's do that just in case so yarn test again and now everything's running just fine awesome cool so that worked well for hooks and i'm very confident now in our use some hook but does it work for ui components and that was a question that i got asked when it came to the comments in the last video and i think that's actually kind of interesting so let's let's try it out let's see if we like how this works when it comes to testing react components so i'm going to close out these files and down in the console i'm going to add the testing library for just dom and that's going to allow us to test out the results of dom manipulations from react like whether an item has a content or not and then bring in the react testing library which is a very popular testing library for react and then the only other tweak we need to make to this project is you need to go over that ts config file and make sure that it is outputting the correct jsx so we're going to say that's react and now we're going to start creating out our tests so i'm going to create a new file in source and we're going to call it mydialog spec.tsx we have to use tsx because in this case we're going to use jsx so we're going to bring in react and also render in screen from the testing library that's going to allow us to render that react component and then screen's going to allow us to go test it and then these testing extensions on expect allow us to go and do things like check for text content in our little dialogue we're just going to go and make sure that it allows us to put in children and get the text content out as it wraps the children in a dialogue it's pretty simple stuff so i'm going to say first off describe my dialog and then i'm going to say it should wrap child text so github copilot has actually given us some pretty cool stuff here so we're going to say my dialog we're going to put in hello and we're not going to get by text we're going to say get by role and we're going to see what roles we have we have text box so wrap the content in a text box and yeah we'll say to have text content and that text content is going to be that hello that we put in there so we're going to expect it to actually return that so now wallaby is reporting pretty much green across the board except that when we get down here to my dialog well my dialog isn't defined so of course we need to go define that so let's go and jump back here to source and then i'm going to add another file called mydialog dot tsx and into that i'm going to import react from react and then i'm going to create my dialogue and it's going to be a react function component and it's going to take children and then it's going to wrap those in a div okay so that works it's all type safe but of course i have to export that looking pretty good let's go back over to our spec and import that from my dialog and it should get a little bit further so now where does it get to what gets down here unable to find an accessible element with the role text box fair enough so let's go back over to my dialog and then do roll equals text box and now we've got greens across the board here that's looking pretty good got greens across the board pretty good there too and let's run our test and there we go everything's passing across the board including our new react component which we pretty much knew already because of wallaby giving us some hinting as we were typing so that's awesome now would i do this for my components yes actually i would but there is a caveat here i would use the testing library and i would test them exactly like i would components that i was testing later on which is to say i wouldn't be using snapshot testing i would be using the testing library to specifically call out the tests that i cared about in this case i really care that the text here hello is is wrapped and present in that dialog i don't care necessarily about any classes or anything like that and that would be the kind of stuff that we picked up by a snapshot that to me is insignificant so well at least in this case is insignificant i'm sure that in lots of cases you care about the classes passionately i'm not saying anything like that but of course in this case all i care about is whether hello is wrapped and so i'm going to be testing specifically for that so i say yes absolutely tdd your components but no don't tdd them with snapshotting because you basically have to write the snapshots which is pretty crazy all right well we've had a chance to look at tdd and now we get to ask ourselves why don't we use that as much as we should and i'm ask myself that a lot and i think it's because of the nature of the projects that i'm on and the type of code that i write a lot of the time i'm on poc projects where i'm just kind of throwing things together just to see if it's going to work in the first place and then it's a question of kind of cleaning up making it production worthy later and there's really just not a lot of time for testing in that model so i don't test much at all if any which is not great to admit but that's just the reality of things and then in other times i'm working on an existing code base and sometimes that has unit tests and sometimes that doesn't have any unit tests at all and so most of the unit testing is involved in upgrading the unit test so that there are unit tests and then as i code yeah there is an opportunity to do some tdd work there the one time that i can really dig in and use tdd the way that i like to do it is when i'm building a new library with a new api and we kind of negotiate it ahead of time exactly what that api is going to look like and so i can go and build out the tests that test that api and then go and build out the code that implements it and it just feels so good so i hope that this video encourages you to try that out for yourself go and build out an api that you think is interesting to you and use the tdd model to get there even if you don't use tdd on a daily basis it's going to help you learn exactly how to code just in the best possible way you can alright well i hope you enjoyed this video if you did hit that like button if you really did be sure to hit the subscribe button and click on that bell and you'll be notified the next time a new blue collar coder video comes out

Channel: Jack Herrington

Views: 7,487

Keywords: test driven development, test driven development typescript, test driven development javascript, tdd, tdd javascript, tdd typescript, tdd react testing library, react testing library, testing react hooks, testing react hooks with react-testing-library, what is test driven development, test driven development tutorial, what is tdd, jack herrington, test react componenets, TDD'ing React hooks, Testing without Wallaby, TDD'ing React components

Id: EH9Suo_J4Ks

Length: 19min 34sec (1174 seconds)

Published: Mon Nov 01 2021