🔥 Vue Tips #21: A better way to write tests

This newsletter was sent out to my list on August 11, 2021. Sign up here to get emails like this each week!

Hey there!

If you're liking these tips and want to go even deeper into Vue, I have two different courses based on your experience level:

Beginner to Intermediate

Clean Components is perfect for all experience levels, and gives you the tools to be a more productive developer.

"The course is very well thought out and executed. It opened my eyes to certain things and changed the way I think about my components." — Edyta

"It has brought me a lot of new insights and new perspectives. I just wanted to thank you for that. Totally worth the money." — Filip

Check out Clean Components here.

Advanced

If you're more experienced with Vue and want to dive deep into reusability and abstractions, Reusable Components is what you need.

I give you tools, techniques, and patterns for creating highly reusable components, and for thinking about your code in totally new ways.

"This course is very informative, exceptionally well structured, and with excellent examples. Now I have a lot of ideas for refactoring some of my old code." — Ramona

"Michael is an excellent teacher. He clearly explains each step in building reusable Vue components, and when those concepts should be implemented. Anyone who is interested in a more maintainable Vue codebase would benefit from this course." — Lindsay Wardell, host of Views on Vue

Check out Reusable Components here.

— Michael

🔥 Vue Testing Library

One of my favourite tools for testing is Vue Testing Library:

test('displays correct text', () => {
  const { getByText } = render(MyComponent);
  getByText(/Fail the test if this text doesn't exist/);
})

It builds on top of vue-test-utils, making it easier to write tests that are closer to how users actually interact with your app.

Users look for specific text, or look for a button to click. They don't look for the nth child of a div with the class .booking-card-container.

Writing tests this way makes them easier to understand, simpler to write, and more robust against changes to your code. Nothing about this test is concerned with the implementation, so it's unlikely to break even under a heavy refactor.

If this idea is new to you, I highly encourage you to read more about the Testing Library guiding principles.

🔥 Creating Grids Without Holes

If you're using CSS grid with different sized items, you'll find that you end up with gaps here and there. You can force the browser to fill those holes:

grid-auto-flow: dense;

Keep in mind, this will break the ordering of your elements, which also breaks the tab order.

The grid-auto-flow property also takes two other interesting values: row and column. By default it will fill each row one by one, but you can set it to fill by column instead.

You can also combine the two and get a dense column-based ordering!

More details and a good example illustrating how this works on MDN.

📜 25 Vue Tips You Need to Know

I collected 25 of the tips from this newsletter and compiled them into one (long) article. Great for reference or for reading through some tips you may have missed (or forgotten about!).

Surprisingly, it's already become the 9th most popular Vue article on DEV of all time!

25 Vue Tips You Need to Know

🗞 News: Vue 3.2 Released

The latest version of Vue, Quintessential Quintuplets, was just released this week!

It comes with a ton of performance improvements, pushing Vue towards the top of fastest frameworks. The new v-memo directive helps a lot with that — it's like a computed prop but in your template, and only re-computes when its dependencies change.

This release also includes the stable versions of script setup and reactive style blocks (example borrowed from the article):

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<style scoped>
button {
  color: v-bind(color);
}
</style>

There's a lot more in the release announcement.

💬 "Users"

"There are only two industries that refer to their customers as 'users'." — Edward Tufte

🧠 Spaced-repetition: Defining your own utility classes in Tailwind

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.

One of the best parts of using Tailwind is defining your own utility functions.

I recently needed a negative z-index, but Tailwind doesn't have one, so I created my own:

@layer utilities {
  .-z-1 {
    z-index: -1;
  }
}

Anything wrapped with @layer utilities { ... } will be picked by Tailwind as a utility class.

If you need to use a custom utility class responsively, you can wrap it in a @variants responsive { ... } block:

@layer utilities {
  @variants responsive {
    .-z-1 {
      z-index: -1;
    }
  }
}

This lets you write md:-z-1 lg:z-0 and have the utility class respond to screen size.

Exclusive tips and insights every week

Join 8135 other Vue devs and get exclusive tips and insights like these delivered straight to your inbox, every week.

You have great content in your emails. I seriously learn something from every one of them. — Titus Decali

Thanks for another beautiful tip 🙏 — Victor Onuoha

Loving these, and the spaced repetition — Mark Goldstein

Sign up here