Larcohex

Cypress mousemove event inconsistency

Wed, 07 Sep 2022 00:00:00 GMT

Cypress is a great testing tool, but as always testing comes with some behaviors that you cannot predict. I have stumbled upon one recently and wanted to share.

If your feature uses mouse events, to test their behavior properly, do not use methods provided by Cypress like trigger. Instead find the native element and dispatch event natively.

For example, if I have logic on mousemove event, Cypress documentation suggests doing something like this.

cy.get("...").trigger("mousemove", x, y);

Visually in Cypress runner it looks fine, but under the hood mouse is immediately moved to the position with an empty event. So, if my logic uses fields movementX and movementY for let’s say positioning, we have a problem here - fields that are used from native event are undefined, so it would not move elements to proper places. This behavior is consistent with other Cypress commands like click.

So to fix that, we can do something like this.

cy.get("...").then((element) => {
  const mouseEvent = new MouseEvent("mousemove", {
    movementX: x,
    movementY: y,
  });

  element.get(0).dispatchEvent(mouseEvent);
});

Bonus

if your code checks which button is pressed on mouse, you should explicitly mention the button when dispatching events like mousedown and mouseup via trigger, else they are also undefined. Or just use proper functions like click.

The (al)most complete dynamic form with VeeValidate and Composition API

Mon, 20 Sep 2021 00:00:00 GMT

If you tried to incorporate validation to your forms, you’ve probably stumbled upon libraries like Vuelidate and VeeValidate - both very powerful libraries, but currently only VeeValidate supports 3rd version of Vue in stable version. Recently I have tried to make a dynamic form with validation, and I have encountered a number of problems that are tricky to solve.

Before diving in, let me list things that were required for my dynamic form:

field validation
nested fields support
field array support
schema update support
custom input support

Real-world example

We are going to implement a survey for frontend developers. In the survey we’re going to ask what frameworks a user has experience with and ask some questions for selected items including experience details.

The workflow will be as follows:

user selects frameworks
for each selected framework appropriate inputs appear
for each selected framework button appears that create inputs for new job experience item

Here is form’s image.

NOTE: for this example I’m going to use vite and Tailwind UI (hence the looks), but it is applicable for other toolings like vue-cli and nuxt, so don’t mind the presence of Vue SFC file extensions in imports - vite requires that they are present. Also I’m going to use lodash functions, but you can use native functions or copy from lodash if you can’t use it.

Schema format

Each field (NOT field array) in a schema should have:

id - this will be used for recursive field component
name - for vee-validate to initialize schema
component - which component to render
label - to show label for input (you can use it for placeholders or have separate field for it)
rules - validation rules (going to use yup here)
initialValue - initial value for input
options - options for select component

For field array schema should have:

name
label
fields - list of fields for new items each having the same schema listed above

So, in case of our example, the schema will be as following:

import { array } from "yup";

const schema = {
  frameworks: {
    id: 1,
    label: "Which frameworks do you have experience with?",
    component: "CheckboxGroup",
    name: "frameworks",
    value: [],
    rules: array().of(string()).min(1, "Please, select one of frameworks"),
    options: frameworks,
  },
  data: {},
};

data is going to contain generated schema for each selected framework similar to following:

schema.data = {
  vue: {
    opinion: {
      id: 2,
      label: `What is your opinion on Vue?`,
      component: "Textarea",
      name: `data.vue.opinion`,
      value: "",
      rules: string().required("Field is required"),
    },
    experience: {
      name: "data.experience",
      label: "Past experience",
      addLabel: "Add past experience",
      fields: [
        {
          id: 3,
          label: "Framework",
          component: "Select",
          name: "framework",
          value: "vue",
          options: pick(frameworks, values.frameworks),
        },
        {
          id: 4,
          label: "Title",
          component: "TextInput",
          name: "title",
          value: "",
          rules: string().required("Field is required"),
        },
        {
          id: 5,
          label: "Company",
          component: "TextInput",
          name: "company",
          value: "",
          rules: string().required("Field is required"),
        },
        {
          id: 6,
          label: "Start date (year)",
          component: "TextInput",
          name: "start",
          value: "",
          rules: string().required("Field is required"),
        },
        {
          id: 7,
          label: "End date (year)",
          component: "TextInput",
          name: "end",
          value: "",
          rules: string().required("Field is required"),
        },
      ],
    },
  },
};

You can also add any fields you want.

Main page component

The main page should contain the schema mentioned above and listen to changes in form values. If the value of frameworks field changes, it should add or remove fields based on value.

<Form @change="updateSchema" />

...

import { ref } from 'vue';
import { string } from 'yup';
import isEqual from 'lodash-es/isEqual';
import cloneDeep from 'lodash-es/cloneDeep';
import forEach from 'lodash-es/forEach';
import has from 'lodash-es/has';

const updateSchema = (values) => {
    if (!isEqual(values.frameworks, selectedFrameworks)) {
        selectedFrameworks = values.frameworks;
        const newSchema = cloneDeep(schema);
        forEach(values.frameworks, (framework) => {
            newSchema.data[framework] = {
                opinion: {
                    id: 2,
                    label: `What is your opinion on ${frameworks[framework].label}?`,
                    component: "Textarea",
                    name: `data.${framework}.opinion`,
                    value: "",
                    rules: string().required("Field is required"),
                },
            };
        });
        if (values.frameworks.length) {
            newSchema.data.experience = {
                name: "data.experience",
                label: "Past experience",
                addLabel: "Add past experience",
                fields: [
                    {
                        id: 3,
                        label: "Framework",
                        component: "Select",
                        name: "framework",
                        value: values.frameworks[0],
                        options: pick(frameworks, values.frameworks),
                    },
                    {
                        id: 4,
                        label: "Title",
                        component: "TextInput",
                        name: "title",
                        value: "",
                        rules: string().required("Field is required"),
                    },
                    {
                        id: 5,
                        label: "Company",
                        component: "TextInput",
                        name: "company",
                        value: "",
                        rules: string().required("Field is required"),
                    },
                    {
                        id: 6,
                        label: "Start date (year)",
                        component: "TextInput",
                        name: "start",
                        value: "",
                        rules: string().required("Field is required"),
                    },
                    {
                        id: 7,
                        label: "End date (year)",
                        component: "TextInput",
                        name: "end",
                        value: "",
                        rules: string().required("Field is required"),
                    },
                ],
            };
        }
        reactiveSchema.value = newSchema;
    }
};

Form component

We are going to use useForm in this component just for accumulating values and checking if the whole form is valid. Validation is going to be initiated in each form field instead.

We are going to watch changes to form values and emit change event to update schema.

Since one of the requirements for form is support of schema with any nesting depth, we are going to create a separate field component that is going to be recursive.

<Field :field="schema" />

...

import { useForm } from 'vee-validate';

export default {
    props: {
        schema: {
            type: Object,
            required: true,
        },
    },
    setup() {
        const { values, handleSubmit, meta } = useForm();

        watch(values, (newValues) => {
            emit('change', newValues);
        });
    }
}

Field component

These are the conditions for component recursion:

If current node contains id - render field component
If current node contains addLabel - create array field and add recursion for each added item
Else add recursion for each field child

<template>
    <div v-if="hasId()" class="sm:col-span-6">
        <component
            :is="field.component"
            v-bind="field"
            v-model="value"
            :error="errorMessage"
            @blur="handleBlur"
        ></component>
    </div>
    <template v-else-if="isArray()">
        <h4 v-show="fields.length" class="font-medium sm:col-span-6">
            {{ field.label }}
        </h4>
        <div class="sm:col-span-6 space-y-6 divide-y">
            <div
                v-for="(childField, index) in fields"
                :key="childField.key"
                class="space-y-6"
            >
            <Field
                v-for="formField in field.fields"
                :key="formField.id"
                :field="{
                    ...formField,
                    name: `${field.name}[${index}].${formField.name}`,
                }"
            />
            <button
                type="button"
                class="
                    inline-flex
                    items-center
                    px-4
                    py-2
                    border border-transparent
                    text-sm
                    font-medium
                    rounded-md
                    text-indigo-700
                    bg-indigo-100
                    hover:bg-indigo-200
                    focus:outline-none
                    focus:ring-2
                    focus:ring-offset-2
                    focus:ring-indigo-500
                "
                @click="remove(index)"
            >
                <XIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
                Remove
            </button>
        </div>
    </div>
    <div class="sm:col-span-6">
        <button
            type="button"
            class="
                inline-flex
                items-center
                px-4
                py-2
                border border-transparent
                shadow-sm
                text-sm
                font-medium
                rounded-md
                text-white
                bg-indigo-600
                hover:bg-indigo-700
                focus:outline-none
                focus:ring-2
                focus:ring-offset-2
                focus:ring-indigo-500
            "
            @click="push"
        >
            <PlusIcon class="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
            Add
        </button>
    </div>
    </template>
    <template
        v-for="(childField, index) in field"
        v-else
        :key="childField.id || index"
    >
        <Field :field="childField" />
    </template>
</template>

<script>
import { useField, useFieldArray } from "vee-validate";
import has from "lodash-es/has";
import fromPairs from "lodash-es/fromPairs";
import map from "lodash-es/map";
import { PlusIcon, XIcon } from "@heroicons/vue/solid";
// Don't forget to import your custom components

export default {
    name: "Field",
    // Don't forget to declare your custom components
    components: { PlusIcon, XIcon, },
    props: {
        field: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        const hasId = () => has(props.field, "id");
        const isArray = () => has(props.field, "addLabel");
        const result = { hasId, isArray };
        if (hasId()) {
            const { value, handleBlur, errorMessage } = useField(
                props.field.name,
                props.field.validation
            );
            result.value = value;
            result.handleBlur = handleBlur;
            result.errorMessage = errorMessage;
        }
        if (isArray()) {
            const { remove, push, fields } = useFieldArray(props.field.name);
            const getInitialValues = () =>
            fromPairs(
                map(props.field.fields, (field) => [field.name, field.value])
            );
            result.remove = (index) => {
                remove(index);
            };
            result.push = () => {
                push(getInitialValues());
            };
            result.fields = fields;
        }
        return result;
    },
};
</script>

Demo

Here are the demo and source code

Grouping lazy loaded routes in Vite

Wed, 13 Oct 2021 00:00:00 GMT

If you use vite long enough, you quickly realize that vue-router shows how to group lazy routes into chunks for webpack only. Googling this problem might lead you to this Github issue which vaguely explains how to do it. Evan You, creator of vue.js, decided that only link to the latest glob import feature is enough, but it took me a bit of time to understand, how to apply this feature to vue-router. so to save you some time here is how to do it.

Glob Import

From the page linked in the issue, we can see that vite is able to group imports using the following syntax

const modules = import.meta.glob("./dir/*.js");

which returns an object with path to file as key and function that imports component as a value.

// code produced by vite
const modules = {
  "./dir/foo.js": () => import("./dir/foo.js"),
  "./dir/bar.js": () => import("./dir/bar.js"),
};

This will make sure that chunks are imported in parallel (basically the same as grouping in webpack). So, using this, we can group import routes like this (using glob matching supported by fast-glob)

const auth = import.meta.glob("/src/views/auth/**/{Login,Signup}.vue");

which will produce something like this depending on your project folder structure.

// code produced by vite
const auth = {
  "/src/views/auth/login/Login.vue": () =>
    import("/src/views/auth/login/Login.vue"),
  "/src/views/auth/signup/Signup.vue": () =>
    import("/src/views/auth/login/Login.vue"),
};

To assign component to route we can do:

const routes = [
  {
    path: "/login",
    component: auth["/src/views/auth/login/Login.vue"],
  },
  {
    path: "/signup",
    component: auth["/src/views/auth/signup/Signup.vue"],
  },
];