I’m writing this post to make sure that a recipe on mounting (with the Cypress Component Testing Tool) a Vue component requiring the Vuetify framework is documented somewhere on the web. Thus, with the help of Google search, those who will have the same goal in the future will find the right answer easily.
Cypress is a front-end test automation framework built for the modern web. It is a very powerful tool that enables developers to write End-to-End as well as Rest APIs tests entirely in JavaScript, directly accessing everything within the browser. At To-Do Studio, we use Cypress with success.
In the last year, Cypress added the ability to automate testing of Vue or React components. Besides the automation, what is very interesting is that with a little ingenuity we can also use Cypress to obtain a playground to visualize the rendering of the components. I saw not only the ability to automate but also an opportunity to replace Storybook for component visualization.
However, the challenge when you want to use the Cypress component testing tool with Vue is that some frameworks such as Vuetify require a global vuetify object on the Vue instance as well as all components to be wrapped in the VApp component, otherwise it triggers warnings in the simplest cases and doesn’t work at all in more complex situations.
Unfortunately, the documented way on mounting a Vue component does not work with Vuetify.
While waiting for a more elegant solution from Cypress and Vuetify here is what we use as a workaround:
// Spec File with VBtn as component: xxx.spec.ts
import { mount } from '@cypress/vue';
import { VApp, VBtn } from 'vuetify/lib';
import vuetify from '../plugins/vuetify';
import i18n from '../plugins/i18n';
describe('Cypress CT with Vuetify', () => {
it('playground', { viewportWidth: 360, viewportHeight: 667 }, () => {
mount({
vuetify,
render: h => h(VApp,
[
h(VBtn, { props: { color: 'primary', height: '40', width: '250' } },
[
'Button Title',
]),
],
),
}, { extensions: { plugins: [vuetify, i18n] } });
});
});
and here is the Vuetify plugin:
// Vuetify plugin: ../plugins/vuetify.ts
import Vue from 'vue';
import Vuetify, {
VApp, VBtn,
} from 'vuetify/lib';
import 'roboto-fontface/css/roboto/roboto-fontface.css';
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
},
});
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
},
customProperties: true,
// add theme...
// add breakpoint...
});
To give you a glimpse of how we use it in real life scenario at To-Do Studio, here is a sample of a real spec file:
import { mount } from '@cypress/vue';
import { VApp } from 'vuetify/lib';
import vuetify from '../plugins/vuetify';
import i18n from '../plugins/i18n';
import THeader from './THeader.vue';
describe('THeader', () => {
it('playground', { viewportWidth: 360, viewportHeight: 667 }, () => {
const user = null;
const studioId = '00000000-0000-0000-0000-000000000000';
const activeStudios = [ ];
mount({
vuetify,
render: h => h(VApp,
[h(THeader, {
props: { routeName: 'studio-tips', studioId: studioId, activeStudios: activeStudios, user: user },
})]),
}, { extensions: { plugins: [vuetify, i18n] } });
});
});
The 80-20 rule is known as the Pareto principle. Pareto principle is an adage which asserts that 80% of outcomes (or outputs) result from 20% of all causes (or inputs) for any given event. In general, a goal of the 80-20 rule is to identify inputs that are potentially the most productive and make them the priority (80% of results come from 20% of effort).
For example, recently, the programming of multiple identity support (OAuth 2.0 authentication) was much more complex than we had planned. Since it is very common for an individual to have multiple e-mail addresses, whether for personal needs or work, our service had to provide the ability for users to associate multiple identities to their unique account. This support allows a user to find all the workspaces to which he collaborates, regardless of the identity with which he is known by teammates (personal email or email from the employer). This is important because To-Do Studio wants to provide a global view that includes all facets of your life. We want to avoid multiple ‘sign in’ and ‘sign out’ repeatedly between different accounts. Multiple identities within a single account is a feature not much found in competing products such as email, calendar, to-do list, kanban board, or Excel spreadsheet. One of the reasons for this absence is surely the fact that it is not easy to implement.
Mario Cardinal 