What is Bonello Rodello?
- Kudos to Justin
- Let's try this again!
Composition API
-
Similar to React Hooks
-
Makes isolating logic and reusing it in multiple components easier and safer than mixins
-
Tests for composables are just regular javascript tests
A discussion on TDD
- Tests that aren't great can still be useful. See RNG.spec.ts
- Another note to Composables being great to work with
- Using components libraries add some headaches to writing feature vue tests
PrimeVue?
- Loads of free themes available
- Easy to load only the parts that you need
- More fine-tuned customization of the components often can't be done with tailwind classes alone.
Installing Tailwind can be made simple using Vue UI.
To setup breakpoints that follow in accordance to the Tailwind sizes, there is a helpful @screen directive, that among other things allow you to use the Tailwind Breakpoints as values.
@screen md {
section {
grid-template-areas:
"input input input"
"errors errors errors"
"names pairs history"
"names pairs history"
"names pairs history"
}
}
Justify Evenly
CSS Flexbox has a way to justify content called "space-evenly".
<Fieldset :legend="person" :toggleable="true">
<div class="flex items-center justify-evenly max-w-xl flex-wrap gap-2">
<span v-for="pair in previousPairs" :key="`${person}-${pair}`" class="chip">
{{ pair }}
</span>
</div>
</Fieldset>A downside of using Component Libraries
Interacting with a "Select dropdown"
Before (using native DOM elements)
await wrapper.find("select[name=right-hand-side]").setValue("Alice");After (using PrimeVue Dropdown component)
async function selectNameInDropdown(wrapper: VueWrapper, name: string) {
wrapper.findComponent(Dropdown).vm.$emit("update:modelValue", name);
await wrapper.vm.$nextTick();
}Before (using native DOM elements)
const allSelectOptions = wrapper.findAll('option')After (using PrimeVue Dropdown component)
await selectNameInDropdown(wrapper, "Alice");
expect(wrapper.find(`[toggle-name=Bob]`).exists()).toBe(true)
await selectNameInDropdown(wrapper, "Bob");
expect(wrapper.find(`[toggle-name=Alice]`).exists()).toBe(true)