From 737bdf89e51b3ae572f6f5ea68c22d8cc6c5da39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Sun, 4 Feb 2024 08:24:26 +0100
Subject: [PATCH 1/7] feat(BFormFile) add properties placement and browser as
 in BootstrapVue

---
 .../docs/src/data/components/formFile.data.ts | 44 +++++++++-
 .../src/components/BFormFile/BFormFile.vue    | 80 +++++++++++++------
 2 files changed, 98 insertions(+), 26 deletions(-)

diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts
index c75d5972c..9d27a62c4 100644
--- a/apps/docs/src/data/components/formFile.data.ts
+++ b/apps/docs/src/data/components/formFile.data.ts
@@ -9,103 +9,141 @@ export default {
           prop: 'accept',
           type: 'string | string[]',
           default: '',
+          description: "Value to set on the file input's `accept` attribute",
         },
         {
           prop: 'autofocus',
           type: 'Booleanish',
           default: false,
+          description:
+            'When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control',
         },
         {
           prop: 'capture',
           type: "'Booleanish' | 'user' | 'environment'",
           default: false,
+          description:
+            'When set, will instruction the browser to use the devices camera (if supported)',
         },
         {
           prop: 'directory',
           type: 'Booleanish',
           default: false,
+          description: 'Enable `directory` mode (on browsers that support it)',
         },
         {
           prop: 'disabled',
           type: 'Booleanish',
           default: false,
+          description:
+            "When set to `true`, disables the component's functionality and places it in a disabled state",
         },
         {
           prop: 'form',
           type: 'string',
           default: undefined,
+          description:
+            'ID of the form that the form control belongs to. Sets the `form` attribute on the control',
         },
         {
           prop: 'id',
           type: 'string',
           default: undefined,
+          description:
+            'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
         },
         {
           prop: 'multiple',
           type: 'Booleanish',
           default: false,
+          description:
+            'When set, will allow multiple files to be selected. `v-model` will be an array',
         },
         {
           prop: 'name',
           type: 'string',
           default: undefined,
+          description: 'Sets the value of the `name` attribute on the form control',
         },
         {
           prop: 'noDrop',
           type: 'Booleanish',
           default: false,
+          description: 'Disable drag and drop mode',
         },
         {
           prop: 'noTraverse',
           type: 'Booleanish',
           default: false,
+          description: 'Wether to returns files as a flat array when in `directory` mode',
         },
         {
           prop: 'required',
           type: 'Booleanish',
           default: false,
+          description: 'Adds the `required` attribute to the form control',
         },
         {
           prop: 'size',
           type: 'Size',
           default: undefined,
+          description: "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'",
         },
         {
           prop: 'state',
           type: 'Booleanish | null',
           default: undefined,
+          description:
+            'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
         },
         {
           prop: 'modelValue',
           type: 'File[] | File | null',
           default: undefined,
+          description:
+            'The current value of the file input. Will be a single `File` object or an array of `File` objects (if `multiple` or `directory` is set). Can be set to `null`, or an empty array to reset the file input',
         },
         {
           prop: 'label',
           type: 'string',
           default: '',
+          description: 'Sets the label for the form group which the file input is rendered',
         },
         {
           prop: 'labelClass',
           type: 'ClassValue',
           default: undefined,
+          description: 'Sets the styling for the label',
+        },
+        {
+          prop: 'placement',
+          type: `'start' | 'end'`,
+          default: `'start'`,
+          description: 'Sets the placement for the file button',
+        },
+        {
+          prop: 'browser',
+          type: 'String',
+          default: 'Browse',
+          description: 'Text content for the file browse button',
         },
       ],
       emits: [
         {
           event: 'update:modelValue',
-          description: '',
+          description: 'Updates the `v-model` value (see docs for more details)',
           args: [
             {
               arg: 'value',
               type: 'File | File[] | null',
-              description: '',
+              description:
+                'Will be a single File object in single mode or an array of File objects in multiple mode',
             },
           ],
         },
         {
           event: 'change',
-          description: '',
+          description: 'Original change event of the input',
           args: [
             {
               arg: 'value',
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 2b9bf43f5..36bc02e25 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -1,36 +1,44 @@
 <template>
-  <label v-if="hasLabelSlot || label" :for="computedId" class="form-label" :class="labelClass">
+  <label v-if="hasLabelSlot || label" class="form-label" :class="labelClass">
     <slot name="label">
       {{ label }}
     </slot>
   </label>
-  <input
-    :id="computedId"
-    v-bind="$attrs"
-    ref="input"
-    type="file"
-    class="form-control"
-    :class="computedClasses"
-    :form="form"
-    :name="name"
-    :multiple="multipleBoolean"
-    :disabled="disabledBoolean"
-    :capture="computedCapture"
-    :accept="computedAccept || undefined"
-    :required="requiredBoolean || undefined"
-    :aria-required="requiredBoolean || undefined"
-    :directory="directoryBoolean"
-    :webkitdirectory="directoryBoolean"
-    @change="onChange"
-    @drop="onDrop"
-  />
+  <div class="input-group file-button">
+    <label v-if="placement === 'start'" class="input-group-text" :for="computedId">{{
+      browserText
+    }}</label>
+    <input
+      :id="computedId"
+      v-bind="$attrs"
+      ref="input"
+      type="file"
+      class="form-control"
+      :class="computedClasses"
+      :form="form"
+      :name="name"
+      :multiple="multipleBoolean"
+      :disabled="disabledBoolean"
+      :capture="computedCapture"
+      :accept="computedAccept || undefined"
+      :required="requiredBoolean || undefined"
+      :aria-required="requiredBoolean || undefined"
+      :directory="directoryBoolean"
+      :webkitdirectory="directoryBoolean"
+      @change="onChange"
+      @drop="onDrop"
+    />
+    <label v-if="placement === 'end'" class="input-group-text" :for="computedId">{{
+      browserText
+    }}</label>
+  </div>
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRef, watch} from 'vue'
 import {useFocus, useVModel} from '@vueuse/core'
-import type {Booleanish, ClassValue, Size} from '../../types'
+import {computed, ref, toRef, watch} from 'vue'
 import {useBooleanish, useId, useStateClass} from '../../composables'
+import type {Booleanish, ClassValue, Size} from '../../types'
 import {isEmptySlot} from '../../utils'
 
 defineOptions({
@@ -46,6 +54,7 @@ const props = withDefaults(
   defineProps<{
     accept?: string | readonly string[]
     autofocus?: Booleanish
+    browserText?: string
     capture?: Booleanish | 'user' | 'environment'
     directory?: Booleanish
     disabled?: Booleanish
@@ -58,6 +67,7 @@ const props = withDefaults(
     name?: string
     noDrop?: Booleanish
     noTraverse?: Booleanish
+    placement: 'start' | 'end'
     required?: Booleanish
     size?: Size
     state?: Booleanish | null
@@ -65,6 +75,7 @@ const props = withDefaults(
   {
     accept: '',
     autofocus: false,
+    browserText: 'Browse',
     // eslint-disable-next-line vue/require-valid-default-prop
     capture: false,
     directory: false,
@@ -78,6 +89,7 @@ const props = withDefaults(
     name: undefined,
     noDrop: false,
     noTraverse: false,
+    placement: 'start',
     required: false,
     size: undefined,
     state: null,
@@ -157,3 +169,25 @@ defineExpose({
   reset,
 })
 </script>
+
+<style scoped>
+.file-button {
+  input[type='file'] {
+    margin-left: -2px !important;
+
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+    &::file-selector-button {
+      display: none;
+    }
+  }
+
+  &:hover {
+    label {
+      background-color: #dde0e3;
+      cursor: pointer;
+    }
+  }
+}
+</style>

From 6502bf606334e6f56b2462753a60e66c5ced79f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Fri, 23 Feb 2024 22:08:43 +0100
Subject: [PATCH 2/7] fix(BFormFile) add missing properties from bootstrap-vue
 add unit tests

---
 .../docs/src/data/components/formFile.data.ts |  15 +-
 .../src/components/BFormFile/BFormFile.vue    |  31 +-
 .../components/BFormFile/form-file.spec.ts    | 655 ++++++++++++++++++
 3 files changed, 689 insertions(+), 12 deletions(-)
 create mode 100644 packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts

diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts
index 9d27a62c4..fde923b0c 100644
--- a/apps/docs/src/data/components/formFile.data.ts
+++ b/apps/docs/src/data/components/formFile.data.ts
@@ -1,10 +1,23 @@
-import type {ComponentReference} from './ComponentReference'
+import type { ComponentReference } from './ComponentReference'
 
 export default {
   load: (): ComponentReference[] => [
     {
       component: 'BFormFile',
       props: [
+        {
+          prop: 'ariaLabel',
+          type: 'string',
+          default: undefined,
+          description: 'Sets the value of `aria-label` attribute on the rendered element',
+        },
+        {
+          prop: 'ariaLabelledBy',
+          type: 'string',
+          default: undefined,
+          description:
+            'The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute',
+        },
         {
           prop: 'accept',
           type: 'string | string[]',
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 36bc02e25..afaba503a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -4,10 +4,11 @@
       {{ label }}
     </slot>
   </label>
-  <div class="input-group file-button">
-    <label v-if="placement === 'start'" class="input-group-text" :for="computedId">{{
-      browserText
-    }}</label>
+
+  <div class="input-group form-input-file">
+    <label v-if="placement === 'start'" class="input-group-text" :for="computedId">
+      {{ browserText }}
+    </label>
     <input
       :id="computedId"
       v-bind="$attrs"
@@ -22,6 +23,8 @@
       :capture="computedCapture"
       :accept="computedAccept || undefined"
       :required="requiredBoolean || undefined"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
       :aria-required="requiredBoolean || undefined"
       :directory="directoryBoolean"
       :webkitdirectory="directoryBoolean"
@@ -35,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import {useFocus, useVModel} from '@vueuse/core'
-import {computed, ref, toRef, watch} from 'vue'
-import {useBooleanish, useId, useStateClass} from '../../composables'
-import type {Booleanish, ClassValue, Size} from '../../types'
-import {isEmptySlot} from '../../utils'
+import { useFocus, useVModel } from '@vueuse/core'
+import { computed, ref, toRef, watch } from 'vue'
+import { useBooleanish, useId, useStateClass } from '../../composables'
+import type { Booleanish, ClassValue, Size } from '../../types'
+import { isEmptySlot } from '../../utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -52,6 +55,8 @@ const slots = defineSlots<{
 
 const props = withDefaults(
   defineProps<{
+    ariaLabel?: string
+    ariaLabelledby?: string
     accept?: string | readonly string[]
     autofocus?: Booleanish
     browserText?: string
@@ -67,12 +72,14 @@ const props = withDefaults(
     name?: string
     noDrop?: Booleanish
     noTraverse?: Booleanish
-    placement: 'start' | 'end'
+    placement?: 'start' | 'end'
     required?: Booleanish
     size?: Size
     state?: Booleanish | null
   }>(),
   {
+    ariaLabel: undefined,
+    ariaLabelledby: undefined,
     accept: '',
     autofocus: false,
     browserText: 'Browse',
@@ -122,6 +129,7 @@ const input = ref<HTMLInputElement | null>(null)
 const {focused} = useFocus(input, {initialValue: autofocusBoolean.value})
 
 const hasLabelSlot = toRef(() => !isEmptySlot(slots['label']))
+
 const computedAccept = toRef(() =>
   typeof props.accept === 'string' ? props.accept : props.accept.join(',')
 )
@@ -171,13 +179,14 @@ defineExpose({
 </script>
 
 <style scoped>
-.file-button {
+.form-input-file {
   input[type='file'] {
     margin-left: -2px !important;
 
     &::-webkit-file-upload-button {
       display: none;
     }
+
     &::file-selector-button {
       display: none;
     }
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
new file mode 100644
index 000000000..23dcb834b
--- /dev/null
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
@@ -0,0 +1,655 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import BFormFile from './BFormFile.vue'
+
+describe('form-file', () => {
+  enableAutoUnmount(afterEach)
+
+  it('tag is default div', () => {
+    const wrapper = mount(BFormFile)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('has class form-control-{type} when prop size', () => {
+    const wrapper = mount(BFormFile, {
+      props: {size: 'lg'},
+    })
+
+    const $input = wrapper.find('input')
+    expect($input.classes()).toContain('form-control-lg')
+  })
+
+  it('does not have class form-control-{type} when prop size undefined', () => {
+    const wrapper = mount(BFormFile, {
+      props: {size: undefined},
+    })
+
+    const $input = wrapper.find('input')
+    expect($input.classes()).not.toContain('form-control-lg')
+  })
+
+  it('wrapper has class form-input-file', () => {
+    const wrapper = mount(BFormFile)
+    expect(wrapper.classes()).toContain('form-input-file')
+  })
+
+  describe('input attributes', () => {
+    it('has input element', () => {
+      const wrapper = mount(BFormFile)
+      const $input = wrapper.find('input')
+      expect($input.exists()).toBe(true)
+    })
+
+    it('input element has attr id', () => {
+      const wrapper = mount(BFormFile)
+      const $input = wrapper.get('input')
+      expect($input.attributes('id')).toBeDefined()
+    })
+
+    it('input element attr id contains content from prop id', () => {
+      const wrapper = mount(BFormFile, {
+        props: {id: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('id')).toBe('foobar')
+    })
+
+    it('input element has attr type to be file', () => {
+      const wrapper = mount(BFormFile)
+      const $input = wrapper.get('input')
+      expect($input.attributes('type')).toBe('file')
+    })
+
+    it('input element has attr disabled when prop disabled', () => {
+      const wrapper = mount(BFormFile, {
+        props: {disabled: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('disabled')).toBe('')
+    })
+
+    it('input element does not have attr disabled when prop disabled is false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {disabled: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('disabled')).toBeUndefined()
+    })
+
+    it('input element does not have attr disabled when prop disabled is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {disabled: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('disabled')).toBeUndefined()
+    })
+
+    it('input element has attr required when prop name and prop required', () => {
+      const wrapper = mount(BFormFile, {
+        props: {required: true, name: 'foo'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('required')).toBe('')
+    })
+
+    it('input element does not have attr required when prop name is empty string and prop required', () => {
+      const wrapper = mount(BFormFile, {
+        props: {required: true, name: ''},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('required')).toBeUndefined()
+    })
+
+    it('input element does not have attr required when prop name is undefined and prop required', () => {
+      const wrapper = mount(BFormFile, {
+        props: {required: true, name: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('required')).toBeUndefined()
+    })
+
+    it('input element does not have attr required when prop name and prop required false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {required: false, name: 'foo'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('required')).toBeUndefined()
+    })
+
+    it('input element does not have attr required when prop name and prop required undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {required: undefined, name: 'foo'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('required')).toBeUndefined()
+    })
+
+    it('input element has attr name to be prop name', () => {
+      const wrapper = mount(BFormFile, {
+        props: {name: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('name')).toBe('foobar')
+    })
+
+    it('input element has attr name is undefined when prop name undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {name: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('name')).toBeUndefined()
+    })
+
+    it('input element has attr form to be prop form', () => {
+      const wrapper = mount(BFormFile, {
+        props: {form: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('form')).toBe('foobar')
+    })
+
+    it('input element has attr form is undefined when prop form undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {form: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('form')).toBeUndefined()
+    })
+
+    it('input element has attr aria-label to be prop ariaLabel', () => {
+      const wrapper = mount(BFormFile, {
+        props: {ariaLabel: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-label')).toBe('foobar')
+    })
+
+    it('input element has attr aria-label is undefined when prop ariaLabel undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {ariaLabel: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-label')).toBeUndefined()
+    })
+
+    it('input element has attr aria-labelledby to be prop ariaLabelledby', () => {
+      const wrapper = mount(BFormFile, {
+        props: {ariaLabelledby: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-labelledby')).toBe('foobar')
+    })
+
+    it('input element has attr aria-labelledby is undefined when prop ariaLabelledby undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {ariaLabelledby: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-labelledby')).toBeUndefined()
+    })
+
+    it('input element has attr aria-labelledby is undefined when prop ariaLabelledby undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {ariaLabelledby: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-labelledby')).toBeUndefined()
+    })
+
+    it('input element has attr value to be prop value', () => {
+      const wrapper = mount(BFormFile, {
+        props: {value: 'foobar'},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('value')).toBe('foobar')
+    })
+
+    it('input element has attr value to be true when value is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {value: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('value')).toBe('true')
+    })
+
+    it('input element aria-required when prop name and prop required true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {name: 'foo', required: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-required')).toBe('true')
+    })
+
+    it('input element does not have aria-required when prop name is empty string and prop required true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {name: '', required: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-required')).toBeUndefined()
+    })
+
+    it('input element does not have aria-required when prop name and prop required false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {name: 'foo', required: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('aria-required')).toBeUndefined()
+    })
+
+    it('input element has set attr multiple to true when prop multiple is true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {multiple: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('multiple')).toBe('true')
+    })
+
+    it('input element has set attr multiple to false when prop multiple is false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {multiple: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('multiple')).toBe('false')
+    })
+
+    it('input element has set attr multiple to false when prop multiple is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {multiple: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('multiple')).toBe('false')
+    })
+
+    it('input element has set attr capture to true when prop capture is true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {capture: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('capture')).toBe('true')
+    })
+
+    it('input element has set attr capture to false when prop capture is false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {capture: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('capture')).toBe('false')
+    })
+
+    it('input element has set attr capture to false when prop disabled is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {capture: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('capture')).toBe('false')
+    })
+
+    it('input element has set attr accept to true when prop accept is true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('accept')).toBe('true')
+    })
+
+    it('input element has set attr accept to false when prop accept is false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('accept')).toBe('false')
+    })
+
+    it('input element does not have attr accept when prop accept is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {accept: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('accept')).toBeUndefined()
+    })
+
+    it('input element has set attr directory to true when prop directory is true', () => {
+      const wrapper = mount(BFormFile, {
+        props: {directory: true},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('directory')).toBe('true')
+    })
+
+    it('input element has set attr directory to false when prop directory is false', () => {
+      const wrapper = mount(BFormFile, {
+        props: {directory: false},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('directory')).toBe('false')
+    })
+
+    it('input element has set attr directory to false when prop directory is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {directory: undefined},
+      })
+      const $input = wrapper.get('input')
+      expect($input.attributes('directory')).toBe('false')
+    })
+
+    it('default has custom attributes transferred input element', async () => {
+      const wrapper = mount(BFormFile, {
+        propsData: {
+          id: 'foo',
+          foo: 'bar',
+        },
+      })
+
+      const $input = wrapper.find('input')
+      expect($input.attributes('foo')).toBeDefined()
+      expect($input.attributes('foo')).toEqual('bar')
+    })
+  })
+
+  describe('label attributes', () => {
+    it('has label by default', () => {
+      const wrapper = mount(BFormFile)
+      const $label = wrapper.find('label')
+      expect($label.exists()).toBe(true)
+    })
+
+    it('has label when has label slot defined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {labelClass: 'labelClass'},
+        slots: {label: 'foo'},
+      })
+      const $label = wrapper.findComponent('label')
+      expect($label.exists()).toBeTruthy()
+      expect($label.attributes('class')?.includes('labelClass'))
+    })
+    it('has label has attr for to be defined by default', () => {
+      const wrapper = mount(BFormFile, {
+        props: {id: 'fooFile'},
+        slots: {default: 'foo'},
+      })
+
+      const $input = wrapper.findComponent('input')
+      const $label = wrapper.findComponent('label')
+
+      const $labelFor = $label.attributes('for')
+      const $inputId = $input.attributes('id')
+
+      expect($labelFor).toBe($inputId)
+    })
+  })
+
+  describe('file button', () => {
+    it('the button is placed on the start when prop placement is start', () => {})
+    it('the button is placed on the end when prop placement is end', () => {})
+    it('the button is placed on the start when prop placement is undefined', () => {})
+
+    it('the button has value text when prop browser text is defined', () => {})
+    it('the button has `Choose` when prop browser text is undefined', () => {})
+  })
+
+  describe('model behavior', () => {
+    //   it('emits input event when file changed', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo'
+    //       }
+    //     })
+    //     const file = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles([file])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(file)
+    //     // Setting to same array of files should not emit event
+    //     wrapper.vm.setFiles([file])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     wrapper.destroy()
+    //   })
+    //   it('emits input event when files changed in multiple mode', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         multiple: true
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const file2 = new File(['foobar'], 'foobar.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now() - 1000
+    //     })
+    //     const files = [file1, file2]
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
+    //     // Setting to same array of files should not emit event
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     // Setting to new array of same files should not emit event
+    //     wrapper.vm.setFiles([file1, file2])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     // Setting to array of new files should emit event
+    //     wrapper.vm.setFiles(files.slice().reverse())
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual(files.slice().reverse())
+    //     wrapper.destroy()
+    //   })
+    //   it('emits input event when files changed in directory mode', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         multiple: true,
+    //         directory: true
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const file2 = new File(['bar'], 'bar.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now() - 1000
+    //     })
+    //     const file3 = new File(['baz'], 'baz.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now() - 2000
+    //     })
+    //     const files = [[file1, file2], file3]
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
+    //     // Setting to same array of files should not emit event
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     // Setting to new array of same files should not emit event
+    //     wrapper.vm.setFiles([[file1, file2], file3])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     // Setting to array of new files should emit event
+    //     wrapper.vm.setFiles(files.slice().reverse())
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual(files.slice().reverse())
+    //     wrapper.destroy()
+    //   })
+    //   it('reset() method works in single mode', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         multiple: false
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const files = [file1]
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
+    //     wrapper.vm.reset()
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual(null)
+    //     wrapper.destroy()
+    //   })
+    //   it('reset() method works in multiple mode', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         multiple: true
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const file2 = new File(['<html><body></body></html>'], 'bar.html', {
+    //       type: 'text/html',
+    //       lastModified: Date.now() - 500
+    //     })
+    //     const files = [file1, file2]
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
+    //     wrapper.vm.reset()
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual([])
+    //     wrapper.destroy()
+    //   })
+    //   it('reset works in single mode by setting value', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         value: null
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles([file1])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
+    //     await wrapper.setProps({ value: null })
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     wrapper.destroy()
+    //   })
+    //   it('reset works in multiple mode by setting value', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         value: [],
+    //         multiple: true
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const file2 = new File(['foo bar'], 'foobar.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     const files = [file1, file2]
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
+    //     await wrapper.setProps({ value: null })
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual([])
+    //     wrapper.vm.setFiles(files)
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input').length).toEqual(3)
+    //     expect(wrapper.emitted('input')[2][0]).toEqual(files)
+    //     await wrapper.setProps({ value: [] })
+    //     expect(wrapper.emitted('input').length).toEqual(4)
+    //     expect(wrapper.emitted('input')[3][0]).toEqual([])
+    //     wrapper.destroy()
+    //   })
+    //   it('native reset event works', async () => {
+    //     const wrapper = mount(BFormFile, {
+    //       propsData: {
+    //         id: 'foo',
+    //         value: null
+    //       }
+    //     })
+    //     const file1 = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     // Emulate the files array
+    //     wrapper.vm.setFiles([file1])
+    //     await waitNT(wrapper.vm)
+    //     expect(wrapper.emitted('input')).toBeDefined()
+    //     expect(wrapper.emitted('input').length).toEqual(1)
+    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
+    //     await wrapper.find('input').trigger('reset')
+    //     expect(wrapper.emitted('input').length).toEqual(2)
+    //     expect(wrapper.emitted('input')[1][0]).toEqual(null)
+    //     wrapper.destroy()
+    //   })
+    //   it('form native reset event triggers BFormFile reset', async () => {
+    //     const App = {
+    //       render(h) {
+    //         return h('form', {}, [h(BFormFile, { id: 'foo' })])
+    //       }
+    //     }
+    //     const wrapper = mount(App, {
+    //       attachTo: document.body
+    //     })
+    //     const file = new File(['foo'], 'foo.txt', {
+    //       type: 'text/plain',
+    //       lastModified: Date.now()
+    //     })
+    //     expect(wrapper.element.tagName).toBe('FORM')
+    //     const formFile = wrapper.findComponent(BFormFile)
+    //     expect(formFile.exists()).toBe(true)
+    //     // Emulate the files array
+    //     formFile.vm.setFiles([file])
+    //     await waitNT(wrapper.vm)
+    //     expect(formFile.emitted('input')).toBeDefined()
+    //     expect(formFile.emitted('input').length).toEqual(1)
+    //     expect(formFile.emitted('input')[0][0]).toEqual(file)
+    //     // Trigger form's native reset event
+    //     wrapper.find('form').trigger('reset')
+    //     await waitNT(wrapper.vm)
+    //     expect(formFile.emitted('input').length).toEqual(2)
+    //     expect(formFile.emitted('input')[1][0]).toEqual(null)
+    //     wrapper.destroy()
+    //   })
+  })
+})

From 599f13bb325012303aca8f33093cc45aa11c5cbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Fri, 23 Feb 2024 23:08:01 +0100
Subject: [PATCH 3/7] fix(BFormFile) add unit tests for input and label
 attributes

---
 .../components/BFormFile/form-file.spec.ts    | 76 +++++--------------
 1 file changed, 17 insertions(+), 59 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
index 23dcb834b..50558f515 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
@@ -30,7 +30,7 @@ describe('form-file', () => {
 
   it('wrapper has class form-input-file', () => {
     const wrapper = mount(BFormFile)
-    expect(wrapper.classes()).toContain('form-input-file')
+    expect(wrapper.find('div').classes()).toContain('form-input-file')
   })
 
   describe('input attributes', () => {
@@ -93,33 +93,7 @@ describe('form-file', () => {
     })
 
     it('input element does not have attr required when prop name is empty string and prop required', () => {
-      const wrapper = mount(BFormFile, {
-        props: {required: true, name: ''},
-      })
-      const $input = wrapper.get('input')
-      expect($input.attributes('required')).toBeUndefined()
-    })
-
-    it('input element does not have attr required when prop name is undefined and prop required', () => {
-      const wrapper = mount(BFormFile, {
-        props: {required: true, name: undefined},
-      })
-      const $input = wrapper.get('input')
-      expect($input.attributes('required')).toBeUndefined()
-    })
-
-    it('input element does not have attr required when prop name and prop required false', () => {
-      const wrapper = mount(BFormFile, {
-        props: {required: false, name: 'foo'},
-      })
-      const $input = wrapper.get('input')
-      expect($input.attributes('required')).toBeUndefined()
-    })
-
-    it('input element does not have attr required when prop name and prop required undefined', () => {
-      const wrapper = mount(BFormFile, {
-        props: {required: undefined, name: 'foo'},
-      })
+      const wrapper = mount(BFormFile)
       const $input = wrapper.get('input')
       expect($input.attributes('required')).toBeUndefined()
     })
@@ -196,20 +170,12 @@ describe('form-file', () => {
       expect($input.attributes('aria-labelledby')).toBeUndefined()
     })
 
-    it('input element has attr value to be prop value', () => {
-      const wrapper = mount(BFormFile, {
-        props: {value: 'foobar'},
-      })
-      const $input = wrapper.get('input')
-      expect($input.attributes('value')).toBe('foobar')
-    })
-
     it('input element has attr value to be true when value is undefined', () => {
       const wrapper = mount(BFormFile, {
         props: {value: undefined},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('value')).toBe('true')
+      expect($input.attributes('value')).toBeUndefined()
     })
 
     it('input element aria-required when prop name and prop required true', () => {
@@ -220,14 +186,6 @@ describe('form-file', () => {
       expect($input.attributes('aria-required')).toBe('true')
     })
 
-    it('input element does not have aria-required when prop name is empty string and prop required true', () => {
-      const wrapper = mount(BFormFile, {
-        props: {name: '', required: true},
-      })
-      const $input = wrapper.get('input')
-      expect($input.attributes('aria-required')).toBeUndefined()
-    })
-
     it('input element does not have aria-required when prop name and prop required false', () => {
       const wrapper = mount(BFormFile, {
         props: {name: 'foo', required: false},
@@ -238,10 +196,10 @@ describe('form-file', () => {
 
     it('input element has set attr multiple to true when prop multiple is true', () => {
       const wrapper = mount(BFormFile, {
-        props: {multiple: true},
+        props: {multiple: 'true'},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('multiple')).toBe('true')
+      expect($input.attributes('multiple')).toBeDefined()
     })
 
     it('input element has set attr multiple to false when prop multiple is false', () => {
@@ -249,7 +207,7 @@ describe('form-file', () => {
         props: {multiple: false},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('multiple')).toBe('false')
+      expect($input.attributes('multiple')).toBeUndefined()
     })
 
     it('input element has set attr multiple to false when prop multiple is undefined', () => {
@@ -257,7 +215,7 @@ describe('form-file', () => {
         props: {multiple: undefined},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('multiple')).toBe('false')
+      expect($input.attributes('multiple')).toBeUndefined()
     })
 
     it('input element has set attr capture to true when prop capture is true', () => {
@@ -284,20 +242,20 @@ describe('form-file', () => {
       expect($input.attributes('capture')).toBe('false')
     })
 
-    it('input element has set attr accept to true when prop accept is true', () => {
+    it('input element has set attr accept to empty when prop accept is true', () => {
       const wrapper = mount(BFormFile, {
-        props: {accept: true},
+        props: {accept: ''},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('accept')).toBe('true')
+      expect($input.attributes('accept')).toBeUndefined()
     })
 
-    it('input element has set attr accept to false when prop accept is false', () => {
+    it('input element has set attr accept to "foo" when prop accept is false', () => {
       const wrapper = mount(BFormFile, {
-        props: {accept: false},
+        props: {accept: 'foo'},
       })
       const $input = wrapper.get('input')
-      expect($input.attributes('accept')).toBe('false')
+      expect($input.attributes('accept')).toBe('foo')
     })
 
     it('input element does not have attr accept when prop accept is undefined', () => {
@@ -358,8 +316,8 @@ describe('form-file', () => {
         props: {labelClass: 'labelClass'},
         slots: {label: 'foo'},
       })
-      const $label = wrapper.findComponent('label')
-      expect($label.exists()).toBeTruthy()
+      const $label = wrapper.get('label')
+      expect($label).not.toBeUndefined()
       expect($label.attributes('class')?.includes('labelClass'))
     })
     it('has label has attr for to be defined by default', () => {
@@ -368,8 +326,8 @@ describe('form-file', () => {
         slots: {default: 'foo'},
       })
 
-      const $input = wrapper.findComponent('input')
-      const $label = wrapper.findComponent('label')
+      const $input = wrapper.get('input')
+      const $label = wrapper.get('label')
 
       const $labelFor = $label.attributes('for')
       const $inputId = $input.attributes('id')

From aa654f7884f362ee763416726bbe91ed423e0611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Sat, 24 Feb 2024 23:28:02 +0100
Subject: [PATCH 4/7] fix(BFormFile) add unit tests for input and label
 attributes

---
 .../src/components/BFormFile/BFormFile.vue    |   2 +-
 .../components/BFormFile/form-file.spec.ts    | 430 +++++++-----------
 2 files changed, 163 insertions(+), 269 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index afaba503a..a224f925b 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -82,7 +82,7 @@ const props = withDefaults(
     ariaLabelledby: undefined,
     accept: '',
     autofocus: false,
-    browserText: 'Browse',
+    browserText: 'Choose',
     // eslint-disable-next-line vue/require-valid-default-prop
     capture: false,
     directory: false,
diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
index 50558f515..6aa4f7b4b 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
@@ -337,277 +337,171 @@ describe('form-file', () => {
   })
 
   describe('file button', () => {
-    it('the button is placed on the start when prop placement is start', () => {})
-    it('the button is placed on the end when prop placement is end', () => {})
-    it('the button is placed on the start when prop placement is undefined', () => {})
+    it('the button is placed on the start when prop placement is start', () => {
+      const wrapper = mount(BFormFile, {
+        props: {id: 'fooFile', placement: 'start'},
+      })
+
+      const $label = wrapper.get('label')
+      expect($label.classes()).toContain('input-group-text')
+
+      const childElements = wrapper.get('div').findAll('*')
+
+      expect(childElements[0].exists())
+      expect(childElements[0].element.tagName).toBe('LABEL')
+
+      expect(childElements[1].exists())
+      expect(childElements[1].element.tagName).toBe('INPUT')
+    })
+    it('the button is placed on the end when prop placement is end', () => {
+      const wrapper = mount(BFormFile, {
+        props: {id: 'fooFile', placement: 'end'},
+      })
+
+      const $label = wrapper.get('label')
+      expect($label.classes()).not.toContain('form-label')
+      expect($label.classes()).toContain('input-group-text')
+
+      const childElements = wrapper.get('div').findAll('*')
+
+      expect(childElements[0].exists())
+      expect(childElements[0].element.tagName).toBe('INPUT')
+
+      expect(childElements[1].exists())
+      expect(childElements[1].element.tagName).toBe('LABEL')
+    })
+    it('the button is placed on the start when prop placement is undefined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {id: 'fooFile'},
+      })
+
+      const $label = wrapper.get('label')
+      expect($label.classes()).not.toContain('form-label')
+      expect($label.classes()).toContain('input-group-text')
+
+      const childElements = wrapper.get('div').findAll('*')
+
+      expect(childElements[0].exists())
+      expect(childElements[0].element.tagName).toBe('LABEL')
+
+      expect(childElements[1].exists())
+      expect(childElements[1].element.tagName).toBe('INPUT')
+    })
+
+    it('the button has value text when prop browser text is defined', () => {
+      const wrapper = mount(BFormFile, {
+        props: {browserText: 'Browse'},
+      })
+
+      const $label = wrapper.get('label')
+      expect($label.classes()).not.toContain('form-label')
+      expect($label.classes()).toContain('input-group-text')
+      expect($label.text()).toBe('Browse')
+    })
+    it('the button has `Choose` when prop browser text is undefined', () => {
+      const wrapper = mount(BFormFile)
 
-    it('the button has value text when prop browser text is defined', () => {})
-    it('the button has `Choose` when prop browser text is undefined', () => {})
+      const $label = wrapper.get('label')
+      expect($label.classes()).not.toContain('form-label')
+      expect($label.classes()).toContain('input-group-text')
+      expect($label.text()).toBe('Choose')
+    })
   })
 
   describe('model behavior', () => {
-    //   it('emits input event when file changed', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo'
-    //       }
-    //     })
-    //     const file = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles([file])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(file)
-    //     // Setting to same array of files should not emit event
-    //     wrapper.vm.setFiles([file])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     wrapper.destroy()
-    //   })
-    //   it('emits input event when files changed in multiple mode', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         multiple: true
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const file2 = new File(['foobar'], 'foobar.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now() - 1000
-    //     })
-    //     const files = [file1, file2]
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
-    //     // Setting to same array of files should not emit event
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     // Setting to new array of same files should not emit event
-    //     wrapper.vm.setFiles([file1, file2])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     // Setting to array of new files should emit event
-    //     wrapper.vm.setFiles(files.slice().reverse())
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual(files.slice().reverse())
-    //     wrapper.destroy()
-    //   })
-    //   it('emits input event when files changed in directory mode', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         multiple: true,
-    //         directory: true
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const file2 = new File(['bar'], 'bar.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now() - 1000
-    //     })
-    //     const file3 = new File(['baz'], 'baz.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now() - 2000
-    //     })
-    //     const files = [[file1, file2], file3]
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
-    //     // Setting to same array of files should not emit event
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     // Setting to new array of same files should not emit event
-    //     wrapper.vm.setFiles([[file1, file2], file3])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     // Setting to array of new files should emit event
-    //     wrapper.vm.setFiles(files.slice().reverse())
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual(files.slice().reverse())
-    //     wrapper.destroy()
-    //   })
-    //   it('reset() method works in single mode', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         multiple: false
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const files = [file1]
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
-    //     wrapper.vm.reset()
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual(null)
-    //     wrapper.destroy()
-    //   })
-    //   it('reset() method works in multiple mode', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         multiple: true
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const file2 = new File(['<html><body></body></html>'], 'bar.html', {
-    //       type: 'text/html',
-    //       lastModified: Date.now() - 500
-    //     })
-    //     const files = [file1, file2]
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
-    //     wrapper.vm.reset()
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual([])
-    //     wrapper.destroy()
-    //   })
-    //   it('reset works in single mode by setting value', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         value: null
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles([file1])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
-    //     await wrapper.setProps({ value: null })
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     wrapper.destroy()
-    //   })
-    //   it('reset works in multiple mode by setting value', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         value: [],
-    //         multiple: true
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const file2 = new File(['foo bar'], 'foobar.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     const files = [file1, file2]
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(files)
-    //     await wrapper.setProps({ value: null })
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual([])
-    //     wrapper.vm.setFiles(files)
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input').length).toEqual(3)
-    //     expect(wrapper.emitted('input')[2][0]).toEqual(files)
-    //     await wrapper.setProps({ value: [] })
-    //     expect(wrapper.emitted('input').length).toEqual(4)
-    //     expect(wrapper.emitted('input')[3][0]).toEqual([])
-    //     wrapper.destroy()
-    //   })
-    //   it('native reset event works', async () => {
-    //     const wrapper = mount(BFormFile, {
-    //       propsData: {
-    //         id: 'foo',
-    //         value: null
-    //       }
-    //     })
-    //     const file1 = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     // Emulate the files array
-    //     wrapper.vm.setFiles([file1])
-    //     await waitNT(wrapper.vm)
-    //     expect(wrapper.emitted('input')).toBeDefined()
-    //     expect(wrapper.emitted('input').length).toEqual(1)
-    //     expect(wrapper.emitted('input')[0][0]).toEqual(file1)
-    //     await wrapper.find('input').trigger('reset')
-    //     expect(wrapper.emitted('input').length).toEqual(2)
-    //     expect(wrapper.emitted('input')[1][0]).toEqual(null)
-    //     wrapper.destroy()
-    //   })
-    //   it('form native reset event triggers BFormFile reset', async () => {
-    //     const App = {
-    //       render(h) {
-    //         return h('form', {}, [h(BFormFile, { id: 'foo' })])
-    //       }
-    //     }
-    //     const wrapper = mount(App, {
-    //       attachTo: document.body
-    //     })
-    //     const file = new File(['foo'], 'foo.txt', {
-    //       type: 'text/plain',
-    //       lastModified: Date.now()
-    //     })
-    //     expect(wrapper.element.tagName).toBe('FORM')
-    //     const formFile = wrapper.findComponent(BFormFile)
-    //     expect(formFile.exists()).toBe(true)
-    //     // Emulate the files array
-    //     formFile.vm.setFiles([file])
-    //     await waitNT(wrapper.vm)
-    //     expect(formFile.emitted('input')).toBeDefined()
-    //     expect(formFile.emitted('input').length).toEqual(1)
-    //     expect(formFile.emitted('input')[0][0]).toEqual(file)
-    //     // Trigger form's native reset event
-    //     wrapper.find('form').trigger('reset')
-    //     await waitNT(wrapper.vm)
-    //     expect(formFile.emitted('input').length).toEqual(2)
-    //     expect(formFile.emitted('input')[1][0]).toEqual(null)
-    //     wrapper.destroy()
-    //   })
+    it('emits input even when file changed', async () => {
+      const file = new File(['foo'], 'foo.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const wrapper = mount(BFormFile, {props: {id: 'foo', modelValue: file}})
+
+      const $input = wrapper.get('input')
+      await $input.trigger('change')
+
+      expect(wrapper.emitted('change')).toBeDefined()
+      expect(wrapper.emitted('change')).toHaveLength(1)
+      expect(wrapper.emitted('change')?.[0][0]).toBeInstanceOf(Event)
+    })
+
+    it('emits update:modelValue===file event when file changed', async () => {
+      const file = new File(['foo'], 'foo.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const dataTransfer = new ClipboardEvent('').clipboardData ?? new DataTransfer()
+      dataTransfer.items.add(file)
+
+      const wrapper = mount(BFormFile, {props: {id: 'foo', modelValue: undefined}})
+
+      const $input = wrapper.get('input')
+      $input.element.files = dataTransfer.files
+      await $input.trigger('change')
+
+      expect(wrapper.emitted('update:modelValue')).toBeDefined()
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+      expect(wrapper.emitted('update:modelValue')?.[0][0]).toStrictEqual(file)
+    })
+
+    it('emits update:modelValue===file event when file changed in multiple mode', async () => {
+      const file1 = new File(['foo'], 'foo.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const file2 = new File(['foo2'], 'foo2.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const dataTransfer = new ClipboardEvent('').clipboardData ?? new DataTransfer()
+      dataTransfer.items.add(file1)
+      dataTransfer.items.add(file2)
+
+      const wrapper = mount(BFormFile, {props: {id: 'foo', modelValue: undefined, multiple: true}})
+
+      const $input = wrapper.get('input')
+      $input.element.files = dataTransfer.files
+      await $input.trigger('change')
+
+      expect(wrapper.emitted('update:modelValue')).toBeDefined()
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+      expect((wrapper.emitted('update:modelValue')?.[0][0] as File[])[0]).toStrictEqual(file1)
+      expect((wrapper.emitted('update:modelValue')?.[0][0] as File[])[1]).toStrictEqual(file2)
+    })
+
+    it('emits update:modelValue===file event when file changed in directory mode', async () => {
+      const file1 = new File(['foo'], 'foo.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const file2 = new File(['foo2'], 'foo2.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      })
+
+      const dataTransfer = new ClipboardEvent('').clipboardData ?? new DataTransfer()
+      dataTransfer.items.add(file1)
+      dataTransfer.items.add(file2)
+
+      const wrapper = mount(BFormFile, {
+        props: {id: 'foo', modelValue: undefined, multiple: true, directory: true},
+      })
+
+      const $input = wrapper.get('input')
+      $input.element.files = dataTransfer.files
+      await $input.trigger('change')
+
+      expect(wrapper.emitted('update:modelValue')).toBeDefined()
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+      expect((wrapper.emitted('update:modelValue')?.[0][0] as File[])[0]).toStrictEqual(file1)
+      expect((wrapper.emitted('update:modelValue')?.[0][0] as File[])[1]).toStrictEqual(file2)
+    })
+
+    it('reset() method works in single mode', async () => {})
+    it('reset() method works in multiple mode', async () => {})
   })
 })

From 9412e9cd3fa967e4e14efd10b6c0cb2376642a35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Sun, 25 Feb 2024 07:54:52 +0100
Subject: [PATCH 5/7] fix(BFormFile) add unit tests for input and label
 attributes

---
 .../src/components/BFormFile/BFormFile.vue       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index a224f925b..c7611ded9 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -31,18 +31,18 @@
       @change="onChange"
       @drop="onDrop"
     />
-    <label v-if="placement === 'end'" class="input-group-text" :for="computedId">{{
-      browserText
-    }}</label>
+    <label v-if="placement === 'end'" class="input-group-text" :for="computedId">
+      {{ browserText }}
+    </label>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFocus, useVModel } from '@vueuse/core'
-import { computed, ref, toRef, watch } from 'vue'
-import { useBooleanish, useId, useStateClass } from '../../composables'
-import type { Booleanish, ClassValue, Size } from '../../types'
-import { isEmptySlot } from '../../utils'
+import {useFocus, useVModel} from '@vueuse/core'
+import {computed, ref, toRef, watch} from 'vue'
+import {useBooleanish, useId, useStateClass} from '../../composables'
+import type {Booleanish, ClassValue, Size} from '../../types'
+import {isEmptySlot} from '../../utils'
 
 defineOptions({
   inheritAttrs: false,

From af1cd5ba5e9953e091a03413e9f38ef5d404061c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Sat, 16 Mar 2024 15:47:50 +0100
Subject: [PATCH 6/7] fix merge missing properties

---
 .../bootstrap-vue-next/src/components/BFormFile/BFormFile.vue  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 48034ed5d..8bf375c3a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -39,8 +39,9 @@
 
 <script setup lang="ts">
 import {useFocus, useVModel} from '@vueuse/core'
-import type {ClassValue, Size} from '../../types'
+import {computed, ref, toRef, watch} from 'vue'
 import {useId, useStateClass} from '../../composables'
+import type {ClassValue, Size} from '../../types'
 import {isEmptySlot} from '../../utils'
 
 defineOptions({

From 5888a3a931e74b7b485ccc2ed67b4f8761ab94b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?A=CC=81ngel=20Rolda=CC=81n=20Marti=CC=81nez?=
 <Angel.RoldanMartinez@Clarivate.com>
Date: Sun, 24 Mar 2024 18:58:46 +0100
Subject: [PATCH 7/7] feat(BFormFile) fix unit tests

---
 .../src/components/BFormFile/BFormFile.vue       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
index 17a90f735..1f4ae083a 100644
--- a/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
+++ b/packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
@@ -1,4 +1,10 @@
 <template>
+  <DefineTemplate>
+    <label class="input-group-text" :for="computedId">
+      {{ browserText }}
+    </label>
+  </DefineTemplate>
+
   <label v-if="hasLabelSlot || label" class="form-label" :class="labelClass" :for="computedId">
     <slot name="label">
       {{ label }}
@@ -6,11 +12,7 @@
   </label>
 
   <div class="input-group form-input-file">
-    <ReusablePlacementTemplate.define v-if="placement === 'start'">
-      <label class="input-group-text" :for="computedId">
-        {{ browserText }}
-      </label>
-    </ReusablePlacementTemplate.define>
+    <ReusableTemplate v-if="placement === 'start'" />
     <input
       :id="computedId"
       v-bind="$attrs"
@@ -33,7 +35,7 @@
       @change="onChange"
       @drop="onDrop"
     />
-    <ReusablePlacementTemplate.reuse v-if="placement === 'end'" />
+    <ReusableTemplate v-if="placement === 'end'" />
   </div>
 </template>
 
@@ -167,7 +169,7 @@ defineExpose({
   reset,
 })
 
-const ReusablePlacementTemplate = createReusableTemplate()
+const [DefineTemplate, ReusableTemplate] = createReusableTemplate()
 </script>
 
 <style scoped>