#3 Test Driven Development & Refactoring - JS Testing 101 with Jest

In this video, I start a new mini-series on testing basics with JavaScript & Jest. In this series, we'll cover the skills needed to understand the how and why of JavaScript testing
Video Links
Starting Code: github.com/lev...
Solutions: github.com/lev...
Buy VueJS For Everyone: goo.gl/7uft3X
Become a Pro: www.leveluptut...
Affiliate Links
Please use these links when signing up for services to help support Level Up.
Easy Hosting with Netlify: goo.gl/pychVP
Shared Web Hosting: goo.gl/pfC6uc
Level Up Links
Syntax Podcast ft Scott Tolinski & Wes Bos: goo.gl/7jDDxX
Subscribe to the Level Up Newsletter
eepurl.com/AWjGz

[@rediansec]

Great stuff, just a few observations: 1- Baby steps, 1 test at a time Red - Green - Refactor. You started with 3 tests straight away. 2- On the first iteration, of the function implementation, forEach(fn(element, index)) already gives you the index of the item, hence the `indexOf` can be skipped. 3- Rather than lowercasing the whole name you could have lowercased only the first letter `name.charAt(0).toLowerCase()`, prob just a micro optimisation. 4- You are missing base cases or boundary testing, lower and upper bounds. I would say a few additional test cases for validating the function handles properly an empty list, or a list of only S names etc. Having said the above, i think this a great resource for people considering in embracing tdd. It will change your life :)

[@jasmeetsingh7499]

I know this is not the concept being explained but just wondering, wouldn't names.charAt(0).toLowerCase() be more logical and performant than names.toLowerCase().charAt(0)

[@perrym8048]

Yes, that’s correct. Browser might optimize it though

[@JoshSaintJacque]

Thank you for talking about TDD and refactoring. These skills are so important, and I'm really glad to see so many developers interested in them.

[@alexreyne]

Better explanation of `.filter()` than MDN.

[@zucklongshorman6504]

what's the name of the theme you are using?

[@sreid70]

Great explanation for why to use TDD. Simply not having to manually run a function should be motivation enough. Being able to mock passed data in your tests and run them whenever you want is a time saver I think.

[@okbrown]

Not sure if this is correct, but I've always been taught that your meant to write your test first before you write any code, but you seem to write the empty function then start writing the test. It will fail if you write the test without the function body as its meant to, then you can start writing the empty function to make it past that it exists then build functionality from there.

[@mza1409]

That is what I heard from people who recommend and practice TDD.

[@CircuitSavants]

The goal of TDD is to make your test fail first. You can't even make the test run unless you've stubbed out the method first.

[@R3ynco]

at the end of the video, what are the symbols for !== and => ? how did he do that?

[@williamrobertmyers]

I want more! what are some good functions to practice tests with?

[@eczeeofficial]

what's the name of the theme you are using? It's gorgeous

[@dasten123]

It's called "OopsIAccidentallyMadeEverythingTurquoise"

[@DimoDimov1]

It's fantastic to see some testing material coming out :). Please keep them coming Scott, there's a huge gap in content about testing.

[@ZhDinerstein]

Great video! Love the simple explanation.

[@happylittlesynth]

Anyone know which vscode theme this is?

[@AbhishekKumar-mq1tt]

Thank u for this awesome series

[@rikilamadrid]

Thank you for this series. I'm really enjoying it.

[@BrunoConfortin]

Thank you, kind sir. I was looking for this piece of knowledge.

[@tonyaltamura]

which IDE replace arrows and not equal signs like that?

[@jeserodriguez120]

This is achieved by using a font with ligatures in your code editor. Take a look at this one: github.com/tonsky/FiraCode

[@subvind]

Tests should be treated like fat in the body. Too much of it and it will slow you down... too little and you wont be able to stay warm.

[@CGPCreativity]

I agree. You also have to take into account the Testing Pyramid. Tests need to be written at the correct layer of the pyramid.

[@Akshatgiri]

Nice video 👍👍👍

[@OjoOluwasetemi]

Please how did you enable the scope lines with your vscode. They look awesome. Nice tutorial on TDD.

[@ndbe]

I think it's marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer. What I would like to know is how to change => and !==.

[@yeayeaof87]

@@ndbe Fira Code font

[@jskndeol]

Thank you so much for the videos.

[@syntaxfm]

More coming. I'm pretty confident that this month's pro series will be on testing

[@ja31ya]

I just want to point out that you not only demonstrated very well how to start testing your code, but also how to write tests that still allow errors through... In your first version of the function without the filter function, you improperly passed the Array REFERENCE, rather than making a copy of the array (names.slice()), to your newNames variable. Your tests passed because you setup your test array like: ['sname', 'nonsname', 'sname'] If you had setup your test with: ['sname', 'sname', 'nonsname'], it would have failed The 2nd value is skipped within the forEach function because you've spliced the reference, rather than a copy of the original array. This is the perfect example of not writing thorough tests.

[@mohammadkermani2987]

Is it this code mutating the input?! As variables of non-primitive types in JavaScript is a reference, any change to the input, effects on the referenced variable. He could simply use `filter` but maybe at the time that he was recording this video, `filter` was not as popular as it is today!

[@ShethBhavik]

Regular Expressions would be a better solution. return names.filter(name => !/^s/i.test(name));

[@syntaxfm]

Better in what regard? More performant, more compact? I'd argue that it's way less readable.

[@NeemiasJunior1]

For me is more flexible and robust. See my comment with my solution

[@bramg1988]

This starts with a constant with a unclear name. Why not just let the name describe what is holds? Is this is a type? Did he mean removesNames? Is it removing all the names? Remove S names? What? I've read Robert C Martins clean code, where he explains this. Us devs being lazy is no excuse for using these unclear function or variable names. Otherwise, awesome vid!

[@syntaxfm]

What would you have preferred to name this function based on its use? Does the name of this function matter for the utility of this video? I've read clean code myself and don't personally see this as an issue of lazyness.