TDD, TypeScript Tricks and Sorting (Advent of Vue #9)

My solution to the ninth Advent of Vue challenge! An easier challenge, but this gave me some room to share my favorite TS trick, and do some TDD.
🎄 Advent of Vue: adventofvue.com/
💻 Code: github.com/lmi...
🐦 Keep up with me on Twitter! / lachlan19900
If you like my teaching style, I have a book and two courses!
👀 (Book) Design Patterns for Vue.js: lachlan-miller... (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: www.udemy.com/...
🖖 (Course) Complete Vue.js 3: www.udemy.com/...

[@JohnPombo]

That typescript trick is really great! Thanks for sharing!

[@LachlanMiller]

I can't even find it in the docs, but it's so neat -- you'll find yourself using it all the time :D

[@MuratKeremOzcan]

Wow import json schema as a type, where has it been all my life

[@luisfrocha1]

That was my same thought!! 🤦🏻‍♂️🤦🏻‍♂️🤣🤣

[@michaelm8044]

Awesome video.

[@LachlanMiller]

Thanks!!

[@ubuntu1960]

I have an issue with your TDD approach. If you change the area function to only check height or width instead of multiplying them, the tests still pass but the implementation is wrong.
When you're TDDing your code you should always try to make the simplest implementation when you're in the red phase. That's a lot more important in a TH-cam video as juniors that never used TDD will follow the way you did things : so you need to apply strict TDD for them imo.
Also you didn't TDD your component which is something that a lot of people in the community don't know how to do (from the feedback I got).
TDDing my components allows to develop without using my browser to check things : I only use it for styling at the end when everything already works in my daily work.
To finish on a positive note, I really like the rythme of your video: you made a live coding dynamic which is really hard to do and needs a lot of practice

[@LachlanMiller]

Thanks for the feedback. I agree this is not exactly the most thorough TDD approach; I agree we'd want to scrutinize the edge cases more carefully in a production system.
> TDDing my components allows to develop without using my browser to check things
Curious on your workflow to TDD a component - just with Jest? I usually use Cypress Component Testing to develop the UI for my components in isolation. You can (kind of) TDD components, although I don't often do this - I usually TDD the logic, and use Storybook/Cypress/ to iterate on the UI.