🔥 (#137) Restricting props, detecting clicks, and writing better tests

Hey there!

It's November, and I'm prepping for my workshop and talk next week at VueConf Toronto!

There is still time to grab tickets for either (or both!): VueConf Toronto

I'm also continuing to work on Clean Components Toolkit. I'm slowly getting back into things now — it's quite incredible how many things in life and work pile up when you're out of commission for nearly a month!

Have a great week!

— Michael

Vue Tips Collection

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 115 awesome tips, as well as a daily email to get your creative juices flowing.

​Check out Vue Tips Collection​

🔥 Restrict a prop to a list of types

With the Composition API we get fantastic TypeScript support, so this is quite straightforward:

defineProps<{    src: string;    style: 'square' | 'rounded';  }>();

Doing this in the Options API is more complicated, and not as powerful as TypeScript.

Using the validator option in a prop definition you can restrict a prop to a specific set of values:

export default {    name: 'Image',    props: {      src: {        type: String,      },      style: {        type: String,        validator: s => ['square', 'rounded'].includes(s)      }    }  };

This validator function takes in a prop and returns either true or false — if the prop is valid or not.

I often restrict props like this when I need more options than a boolean will allow but still want to restrict what can be set.

Button types or alert types (info, success, danger, warning) are some of the most common uses — at least in what I work on. Colours, too, are a really great use case for this.

🔥 Detect Clicks Outside an Element

Sometimes I need to detect whether a click happens inside or outside of a particular element. This is the approach I typically use:

window.addEventListener('mousedown', e => {    // Get the element that was clicked    const clickedEl = e.target;      // `el` is the element you're detecting clicks outside of    if (el.contains(clickedEl)) {      // Clicked inside of `el`    } else {      // Clicked outside of `el`    }  });

🔥 Make Test Cases Super Specific

Thanks to Markus Oberlehner for this tip.

Write tests for specific scenarios:

I often see tests with very short descriptions. I can imagine that they probably were obvious to the author when writing them.

But they are not so clear anymore if one of them breaks in a test suite of 200+ test cases:

Imagine we have a test with a nebulous description that breaks, and you have to figure out what's wrong and how to fix it:

test('show an error message', ...)

It would be much easier if the test case description was more precise:

test('It should show an error message when user tries to save incomplete data', ...)

Now we know precisely in which circumstances the app should show an error message. There is no mystery about what we need to fix when the test fails.

📜 The Extract Conditional Pattern in Vue

An extremely common question I get asked all the time is, "how do you know when to split up a component?"

I want to share a simple pattern with you that is basically fool-proof, and can be applied to lots of components with almost no thought.

Check it out here: The Extract Conditional Pattern in Vue

💬 Writing Love Letters

"Documentation is a love letter that you write to your future self." — Damian Conway

🧠 Spaced-repetition: Looping Over a Range in Vue

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

The v-for directive allows us to loop over an Array, but it also let's us loop over a range:

<template>    <ul>      <li v-for="n in 5">Item #{{ n }}</li>    </ul>  </template>

This will render out:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

When we use v-for with a range, it will start at 1 and end on the specified number.

p.s. I also have four courses: Vue Tips Collection, Mastering Nuxt 3, Reusable Components and Clean Components

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8