Fix blur in CI not triggered

ecamp · Jun 16, 2024 · aae8e88 · aae8e88
1 parent 26ecabb
commit aae8e88
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/frontend/src/components/form/base/__tests__/EColorPicker.spec.js b/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
@@ -1,6 +1,5 @@
 import { fireEvent, screen, waitFor } from '@testing-library/vue'
 import { render, setTestLocale, snapshotOf } from '@/test/renderWithVuetify.js'
-import user from '@testing-library/user-event'
 import EColorPicker from '../EColorPicker.vue'
 
 import { regex } from 'vee-validate/dist/rules'
@@ -42,7 +41,7 @@ describe('An EColorPicker', () => {
     // given
 
     // when
-    const { container } = render(EColorPicker, {
+    const { container, user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
 
@@ -59,7 +58,7 @@ describe('An EColorPicker', () => {
 
   it('opens the picker when the text field is clicked', async () => {
     // given
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const inputField = await screen.findByDisplayValue(COLOR1)
@@ -75,7 +74,7 @@ describe('An EColorPicker', () => {
 
   it('opens the picker when the icon button is clicked', async () => {
     // given
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const button = await screen.getByLabelText(PICKER_BUTTON_LABEL_TEXT)
@@ -91,7 +90,7 @@ describe('An EColorPicker', () => {
 
   it('closes the picker when clicking outside', async () => {
     // given
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const button = await screen.getByLabelText(PICKER_BUTTON_LABEL_TEXT)
@@ -111,7 +110,7 @@ describe('An EColorPicker', () => {
 
   it('closes the picker when pressing escape', async () => {
     // given
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const button = await screen.getByLabelText(PICKER_BUTTON_LABEL_TEXT)
@@ -131,7 +130,7 @@ describe('An EColorPicker', () => {
 
   it('does not close the picker when selecting a color', async () => {
     // given
-    const { container } = render(EColorPicker, {
+    const { container, user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const button = await screen.getByLabelText(PICKER_BUTTON_LABEL_TEXT)
@@ -156,7 +155,7 @@ describe('An EColorPicker', () => {
 
   it('updates v-model when the value changes', async () => {
     // given
-    const { emitted } = render(EColorPicker, {
+    const { user, emitted } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const inputField = await screen.findByDisplayValue(COLOR1)
@@ -185,7 +184,7 @@ describe('An EColorPicker', () => {
 
   it('updates v-model when a new color is selected in the picker', async () => {
     // given
-    const { emitted, container } = render(EColorPicker, {
+    const { user, emitted, container } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     await screen.findByDisplayValue(COLOR1)
@@ -220,7 +219,7 @@ describe('An EColorPicker', () => {
 
   it('validates the input', async () => {
     // given
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, path: 'test', validationLabelOverride: 'test' },
     })
     const inputField = await screen.findByDisplayValue(COLOR1)
@@ -235,7 +234,7 @@ describe('An EColorPicker', () => {
   })
 
   it('accepts 3-digit hex color codes, after picker has been shown', async () => {
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR1, label: 'test' },
     })
     const inputField = await screen.findByDisplayValue(COLOR1)
@@ -246,7 +245,7 @@ describe('An EColorPicker', () => {
     // when
     await user.clear(inputField)
     await user.type(inputField, '#abc')
-    await user.click(document.body)
+    await user.click(button)
 
     // then
     await waitFor(() => {
@@ -255,7 +254,7 @@ describe('An EColorPicker', () => {
   })
 
   it('accepts null', async () => {
-    render(EColorPicker, {
+    const { user } = render(EColorPicker, {
       props: { value: COLOR2, label: 'test' },
     })
     const inputField = await screen.findByDisplayValue(COLOR2)

diff --git a/frontend/src/test/renderWithVuetify.js b/frontend/src/test/renderWithVuetify.js
@@ -1,4 +1,5 @@
 import { render as testingLibraryRender } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import i18n from '@/plugins/i18n/index.js'
 import dayjs from '@/plugins/dayjs.js'
 import Vue from 'vue'
@@ -8,26 +9,32 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 import { Wrapper } from '@vue/test-utils'
 import { localize } from 'vee-validate'
 import Vuex from 'vuex'
+import { ClickOutside } from 'vuetify/lib/directives'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
 Vue.use(dayjs)
 Vue.use(Vuex)
+// manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
+Vue.directive('click-outside', ClickOutside)
 
 export const render = (component, options, callback) => {
   const root = document.createElement('div')
   root.setAttribute('data-app', 'true')
 
-  return testingLibraryRender(
-    component,
-    {
-      container: document.body.appendChild(root),
-      vuetify: new Vuetify(),
-      i18n,
-      ...options,
-    },
-    callback
-  )
+  return {
+    user: userEvent.setup({ delay: 0 }),
+    ...testingLibraryRender(
+      component,
+      {
+        vuetify: new Vuetify(),
+        container: document.body.appendChild(root),
+        i18n,
+        ...options,
+      },
+      callback
+    ),
+  }
 }
 
 /**