I've reused the mouse tracker composable here: https://vuejs.org/guide/reusability/composables, adding a twist by binding the event to an element in order to track the mouse position relative to it. It works a treat on the components calling it, but I'm struggling with testing.
mouse.js:
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse(element) { //<- element is a ref passed from the calling component, thus the .value
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => element.value.addEventListener('mousemove', update))
onUnmounted(() => element.value.removeEventListener('mousemove', update))
return { x, y }
}
mouse.test.js:
import { useMouse } from "@/composables/mouse";
import { beforeEach, describe, expect, it } from "vitest";
import { ref } from "vue";
describe('useMouse Composable', () => {
let element;
beforeEach(() => {
element = ref(document.createElement('div'));
});
it('should initialize x and y as 0', () => {
const { x, y } = useMouse(element);
expect(x.value).toBe(0);
expect(y.value).toBe(0);
});
it('should update x and y on mousemove event', async () => {
const { x, y } = useMouse(element);
const event = new MouseEvent('mousemove', { screenX: 50, screenY: 100 });
element.value.dispatchEvent(event);
expect(x.value).toBe(50);
expect(y.value).toBe(100);
});
});
"should initialize x and y as 0" is fine but the next one expects x and y to be 0. I'm finding it hard to get a starting point to debug this mess, so if someone has some tips in testing I'm all ears. (I've got jsdom environment set btw)
I ran this with npm run test (vitest) using visual studio code. Some AI mentionned that the mouse event may fire before the onMounted, so the events wouldn't catch the movement. I then tried the "mount" of @vue/test-utils but same result.