frontend: add tests for slot forwarding

That we have tests when we turn the following rules on: "vue/no-deprecated-dollar-scopedslots-api": "off", "vue/no-deprecated-slot-attribute": "off", "vue/no-deprecated-slot-scope-attribute": "off", Issue: ecamp#5121 Related to: ecamp#5170, ecamp#5122
BacLuc · May 12, 2024 · 1ce7844 · 1ce7844
1 parent 730ac3a
commit 1ce7844
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 11 deletions.
diff --git a/frontend/src/components/form/base/__tests__/ECheckbox.spec.js b/frontend/src/components/form/base/__tests__/ECheckbox.spec.js
@@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 
 import { mount as mountComponent } from '@vue/test-utils'
 import ECheckbox from '../ECheckbox.vue'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -22,7 +23,9 @@ describe('An ECheckbox', () => {
       },
       template: `
         <div data-app>
-          <e-checkbox label="test" v-model="data"/>
+          <e-checkbox label="test" v-model="data">
+            ${options?.children}
+          </e-checkbox>
         </div>
       `,
     })
@@ -82,4 +85,16 @@ describe('An ECheckbox', () => {
     await input.trigger('click')
     expect(wrapper.vm.data).toBe(false)
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/ENumberField.spec.js b/frontend/src/components/form/base/__tests__/ENumberField.spec.js
@@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 
 import { mount as mountComponent } from '@vue/test-utils'
 import ENumberField from '../ENumberField.vue'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -21,9 +22,11 @@ describe('An ENumberField', () => {
         }
       },
       template: `
-      <div data-app>
-        <e-number-field label="test" v-model="data"/>
-      </div>
+        <div data-app>
+          <e-number-field label="test" v-model="data">
+            ${options?.children}
+          </e-number-field>
+        </div>
       `,
     })
     return mountComponent(app, { vuetify, attachTo: document.body, ...options })
@@ -114,4 +117,16 @@ describe('An ENumberField', () => {
 
     expect(wrapper.vm.data).toBe(expected)
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/EParseField.spec.js b/frontend/src/components/form/base/__tests__/EParseField.spec.js
@@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 
 import EParseField from '@/components/form/base/EParseField.vue'
 import { mount as mountComponent } from '@vue/test-utils'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -30,7 +31,9 @@ describe('An EParseField', () => {
       },
       template: `
         <div data-app>
-          <e-parse-field label="test" :parse="parse" :format="format" v-model="data" :value="data"/>
+          <e-parse-field label="test" :parse="parse" :format="format" v-model="data" :value="data">
+            ${options?.children}
+          </e-parse-field>
         </div>
       `,
     })
@@ -90,4 +93,16 @@ describe('An EParseField', () => {
 
     expect(wrapper.vm.data).toBe(expected)
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/ESelect.spec.js b/frontend/src/components/form/base/__tests__/ESelect.spec.js
@@ -5,6 +5,7 @@ import { formBaseComponents } from '@/plugins'
 
 import { mount as mountComponent } from '@vue/test-utils'
 import ESelect from '../ESelect.vue'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -36,10 +37,12 @@ describe('An ESelect', () => {
         }
       },
       template: `
-          <div data-app>
-            <e-select label='test' :items="selectValues" v-model="data"/>
-          </div>
-        `,
+        <div data-app>
+          <e-select label="test" :items="selectValues" v-model="data">
+            ${options?.children}
+          </e-select>
+        </div>
+      `,
     })
     return mountComponent(app, { vuetify, attachTo: document.body, ...options })
   }
@@ -101,4 +104,36 @@ describe('An ESelect', () => {
       wrapper.findAll('[role="option"]').at(0).element.getAttribute('aria-selected')
     ).not.toBe('true')
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
+
+  test('allows to use the append slot with scope', async () => {
+    const textText = 'myTestText'
+    const wrapper = mount({
+      children: `
+        <template #item="{ item, on, attrs }">
+          <v-list-item-title :key="item.text" v-bind="attrs" v-on="on">
+            {{ item }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            ${textText}
+          </v-list-item-subtitle>
+      </template>
+      `,
+    })
+
+    await wrapper.find('.v-input__slot').trigger('click')
+
+    expect(await screen.findAllByText(textText)).toHaveLength(3)
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/ESwitch.spec.js b/frontend/src/components/form/base/__tests__/ESwitch.spec.js
@@ -6,6 +6,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 import { mount as mountComponent } from '@vue/test-utils'
 import ESwitch from '@/components/form/base/ESwitch.vue'
 import { touch } from '@/test/util'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -23,7 +24,9 @@ describe('An ESwitch', () => {
       },
       template: `
         <div data-app>
-          <e-switch label="test" v-model="data"/>
+          <e-switch label="test" v-model="data">
+            ${options?.children}
+          </e-switch>
         </div>
       `,
     })
@@ -107,4 +110,16 @@ describe('An ESwitch', () => {
     input.trigger('keydown.left')
     expect(wrapper.vm.data).toBe(false)
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/ETextField.spec.js b/frontend/src/components/form/base/__tests__/ETextField.spec.js
@@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'
 
 import { mount as mountComponent } from '@vue/test-utils'
 import ETextField from '../ETextField.vue'
+import { screen } from '@testing-library/vue'
 
 Vue.use(Vuetify)
 Vue.use(formBaseComponents)
@@ -22,7 +23,9 @@ describe('An ETextField', () => {
       },
       template: `
         <div data-app>
-          <e-text-field label="test" v-model="data"/>
+          <e-text-field label="test" v-model="data">
+            ${options?.children}
+          </e-text-field>
         </div>
       `,
     })
@@ -68,4 +71,16 @@ describe('An ETextField', () => {
 
     expect(wrapper.vm.data).toBe(text)
   })
+
+  test('allows to use the append slot', async () => {
+    mount({
+      children: `
+        <template #append>
+          <span>append</span>
+        </template>
+      `,
+    })
+
+    expect(await screen.findByText('append')).toBeVisible()
+  })
 })