Introduction to Test-Driven Development (TDD) with TypeScript | 2021

[Music] [Applause] [Music] so one of the best things you could do to get to the next level as a developer is to write tests now there are a bunch of different types of tests you can write regardless of the type the primary goal of testing is to give you the confidence that your code is working and will continue to work as you add features and make changes throughout your code base over time as projects grow larger and larger there's more surface area to account for so tests become this sort of saving grace and the main idea behind them is feedback tests act as this form of feedback to prevent regressions by letting us know when we've broken something in a separate part of our code base they ensure that we really understand the requirements before we write any code and they even act as something of a design tool helping us sniff out bad design generally speaking if a test is hard to write there's a good chance that it means the design needs work so if tests are so good why aren't we doing this more often well testing can be pretty challenging to grasp two of the main areas of complexity with testing comes from understanding what to test and understanding how to test it this is especially true when we're dealing with code that has dependencies ranging from front-end libraries and apis to external services databases and caches and other infrastructural concerns testing is a part of architecture architecture is about those expensive hard to change things like choosing a tech stack or choosing an architectural style or choosing a testing approach in in our case here the trouble with not thinking about this early on is that if we don't think about how we're going to automate the process of knowing what we've written is correct then we're leaving a lot of room for uncertainty down the road and the worst case to be in is deep in our project and realizing that none of it is testable it's about as bad as a situation to be in as starting a project working on it for weeks coming up to the final sprint and then trying to figure out how to deploy it to production right before the deadline this is bad because there's just way too much uncertainty here so again as developers we should value feedback exposing bad design and uncertainty as early as possible hopefully at this point you're sold on the idea that we want tests and we know that writing tests much later especially when everything is done and developed can be pretty challenging or borderline impossible to do so let's talk about tdd tdd or test driven development is a technique or a process for developing software the idea is we write a failing test we write the simplest possible solution then we look at our design and we make refactorings we call this process the red green refactor loop and it helps keep the feedback loops really tight tdd is one of the original agile technical practices from extreme programming which is a development methodology from the 90s that influenced much of what it means to be agile today now before i demonstrate the tdd flow i just want to say one last thing in this introduction and that's that tdd is a process tdd doesn't mean just writing unit tests there are other types of tests as well there's integration tests or acceptance tests essentially these are the tests that we write when we convert the user stories or functional requirements from the customer into sometimes also called functional tests and given these different types of tests we could and we should if we value feedback use tdd to write these types of tests as well double loop tdd means you work with two tdd loops the outer acceptance test loop and the inner unit test loop one of the loops catches regressions and the other loop measures progress towards implementing a feature if this sounds like a lot it is but thanks for sticking in there but we're just getting started with tdd so we should start with the baby steps let's move this video over to a demonstration what we're going to do here is create a simple palindrome checker so what i've got here is my simple typescript starter that i've downloaded from my github and i've got a basic test up here i'm going to go ahead and just remove all of this and let's take a look at the readme real quick so the palindrome checker has a couple of requirements it should also be able to tell that something's a palindrome even if the casing is off so that means that mom with an uppercase m is still a palindrome and it should also be able to detect when phrases are palindromes as well phrases that contain spaces so i'm going to start up our tests with a script npm run test dev and the one test we have here is running now that's not what we want to test so let's go ahead and get rid of this and let's write the first test so red is the first step so let's create a failing test and that's failing so we're in red so what we need to do is now go ahead and create this okay so now we're in green and at this moment there's not much to refactor so we'll go ahead and grab the next test so the next test we'll test against is if mom is a palindrome this is failing because of a compilation error so we're still in red and now this is also still failing because of a compilation error because it's palindrome doesn't exist so we'll go ahead and create that and we'll return the simplest possible thing that could work say true in the tests passing that's great now let's go ahead and add another test it should be able to tell that bill isn't a palindrome so we're currently in red right now and the reason why this is failing is because bill is in a palindrome and if we look here we're just returning true so now we're actually being forced to write a little bit of logic can go ahead and make this work and we're in the green which is good so now we're in the refactor mode and i'm looking at our tests and i'm seeing that we're repeating this creating the palindrome checker three times here so what i'm going to do is clean this up and we'll save and we're good for the next test we're going to test the casing so now we're in the red we have a failing test let's go ahead and make this green let's do the simplest possible thing that would work great and now we're in the refactor mode let's take a look at the design i think it's okay and let's pull the next test let's try this phrase here this was it a rat i saw let's make that into a test okay so that's failing let's see how we can make it green again the simplest possible thing that we could do that would make this work what we did there was stripped out the spaces and now we're in the refactor mode and i think we could do a little bit of refactoring here personally like to do clean one-liners with things like this and i think i could do another refactoring here as well i think i could take the logic that strips the spaces okay that's looking a little bit better let's go back to our tests we'll try another one of those and it looks like it works so that's pretty much tdd at least inside out tdd write the failing test write the simplest possible thing that could work look at the design contemplate and think if you can improve it and then take the next test we covered quite a bit in this video we talked about what tdd is how it helps you write testable code gives you feedback and helps improve your designs we discussed a couple of the types of tests you can write and we did a demonstration of the classic inside out tdd approach building a palindrome checker i think tdd is a really good tool to have as you start to learn more about software design i think that tdd is a fundamental tool to have in your toolbox my advice if you're just getting started with tdd is to try out more examples go and find some code catas try to master this technique try to get the technique down go and find some other codecados on the internet there's a bunch of them build tic-tac-toe you know build an elevator do the game of life tower of hanoi at this point you just kind of want to get the technique down because when we get into real applications we have to go and figure out how to mock things and deal with dependencies and it becomes a lot more interesting if you like this kind of content check out my blog at khalilstemler.com i write a lot about typescript and domain driven design my goal is to teach developers how to write testable flexible and maintainable code that's all for now thank you you

Channel: Khalil Stemmler

Views: 3,923

Keywords: tdd, test-driven development, test driven development, testing, typescript

Id: a1jdwlujdk0

Length: 13min 35sec (815 seconds)

Published: Wed Mar 31 2021