@gitlab/ui 114.0.1 → 114.1.1

package/src/vendor/bootstrap-vue/src/components/form-select/form-select.spec.js

@@ -1,723 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT, waitRAF } from '../../../tests/utils'
-import { BFormSelect } from './form-select'
-
-describe('form-select', () => {
-  afterAll(() => {
-    console.warn.mockClear()
-  })
-
-  it('has select as root element', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.element.tagName).toBe('SELECT')
-
-    wrapper.destroy()
-  })
-
-  it('has class custom-select', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('does not have attr multiple by default', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.attributes('multiple')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('does not have attr required by default', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.attributes('required')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('has attr required when required=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        required: true
-      }
-    })
-    expect(wrapper.attributes('required')).toBeDefined()
-
-    wrapper.destroy()
-  })
-
-  it('does not have attr form by default', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.attributes('form')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('has attr form when form is set', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        form: 'foobar'
-      }
-    })
-    expect(wrapper.attributes('form')).toBeDefined()
-    expect(wrapper.attributes('form')).toBe('foobar')
-
-    wrapper.destroy()
-  })
-
-  it('has attr multiple when multiple=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        multiple: true,
-        value: []
-      }
-    })
-    expect(wrapper.attributes('multiple')).toBeDefined()
-
-    wrapper.destroy()
-  })
-
-  it('has attr size when select-size is set', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        selectSize: 4
-      }
-    })
-    expect(wrapper.attributes('size')).toBeDefined()
-    expect(wrapper.attributes('size')).toBe('4')
-    expect(wrapper.attributes('multiple')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('has auto ID attr by default', async () => {
-    const wrapper = mount(BFormSelect)
-    await waitNT(wrapper.vm) // Auto-ID assigned after mount
-    expect(wrapper.attributes('id')).toBeDefined()
-
-    wrapper.destroy()
-  })
-
-  it('has user supplied ID attr when id is set', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        id: 'foobar'
-      }
-    })
-    expect(wrapper.attributes('id')).toBeDefined()
-    expect(wrapper.attributes('id')).toBe('foobar')
-
-    wrapper.destroy()
-  })
-
-  it('does not have attr size by default', async () => {
-    const wrapper = mount(BFormSelect)
-    expect(wrapper.attributes('size')).toBeUndefined()
-
-    wrapper.destroy()
-  })
-
-  it('does have attr size when plain=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        plain: true
-      }
-    })
-    expect(wrapper.attributes('size')).toBeDefined()
-    expect(wrapper.attributes('size')).toBe('0')
-
-    wrapper.destroy()
-  })
-
-  it('has class custom-select-sm when size=sm and plain=false', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'sm'
-      }
-    })
-    expect(wrapper.classes()).toContain('custom-select-sm')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class custom-select-lg when size=lg and plain=false', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'lg'
-      }
-    })
-    expect(wrapper.classes()).toContain('custom-select-lg')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class custom-select-foo when size=foo and plain=false', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'foo'
-      }
-    })
-    expect(wrapper.classes()).toContain('custom-select-foo')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class is-invalid and attr aria-invalid="true" when state=false', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        state: false
-      }
-    })
-    expect(wrapper.attributes('aria-invalid')).toBe('true')
-    expect(wrapper.classes()).toContain('is-invalid')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class is-valid when state=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        state: true
-      }
-    })
-    expect(wrapper.attributes('aria-invalid')).toBeUndefined()
-    expect(wrapper.classes()).toContain('is-valid')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has attr aria-invalid="true" when aria-invalid="true"', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        ariaInvalid: 'true'
-      }
-    })
-    expect(wrapper.attributes('aria-invalid')).toBe('true')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('has attr aria-invalid="true" when aria-invalid=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        ariaInvalid: true
-      }
-    })
-    expect(wrapper.attributes('aria-invalid')).toBe('true')
-    expect(wrapper.classes()).toContain('custom-select')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('has class form-control when plain=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        plain: true
-      }
-    })
-    expect(wrapper.classes()).toContain('form-control')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.element.tagName).toBe('SELECT')
-
-    wrapper.destroy()
-  })
-
-  it('has class form-control-lg when size=lg and plain=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'lg',
-        plain: true
-      }
-    })
-    expect(wrapper.classes()).toContain('form-control-lg')
-    expect(wrapper.classes()).toContain('form-control')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class form-control-sm when size=sm and plain=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'sm',
-        plain: true
-      }
-    })
-    expect(wrapper.classes()).toContain('form-control-sm')
-    expect(wrapper.classes()).toContain('form-control')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has class form-control-foo when size=foo and plain=true', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        size: 'foo',
-        plain: true
-      }
-    })
-    expect(wrapper.classes()).toContain('form-control-foo')
-    expect(wrapper.classes()).toContain('form-control')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('focus() and blur() methods work', async () => {
-    const wrapper = mount(BFormSelect, {
-      attachTo: document.body
-    })
-
-    expect(document.activeElement).not.toBe(wrapper.element)
-
-    wrapper.vm.focus()
-    await waitNT(wrapper.vm)
-
-    expect(document.activeElement).toBe(wrapper.element)
-
-    wrapper.vm.blur()
-    await waitNT(wrapper.vm)
-
-    expect(document.activeElement).not.toBe(wrapper.element)
-
-    wrapper.destroy()
-  })
-
-  it('has option elements from simple options array', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: ['one', 'two', 'three']
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-    expect($options.at(0).text()).toBe('one')
-    expect($options.at(1).text()).toBe('two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(0).attributes('value')).toBe('one')
-    expect($options.at(1).attributes('value')).toBe('two')
-    expect($options.at(2).attributes('value')).toBe('three')
-    expect($options.wrappers.every(o => o.find('[disabled]').exists())).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('has option elements from options array of objects', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: [
-          { text: 'one', value: 1 },
-          { text: 'two', value: 2, disabled: true },
-          { text: 'three', value: 3 }
-        ]
-      }
-    })
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-    expect($options.at(0).text()).toBe('one')
-    expect($options.at(1).text()).toBe('two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(0).attributes('value')).toBe('1')
-    expect($options.at(1).attributes('value')).toBe('2')
-    expect($options.at(2).attributes('value')).toBe('3')
-    expect($options.at(0).element.matches('[disabled]')).toBe(false)
-    expect($options.at(1).element.matches('[disabled]')).toBe(true)
-    expect($options.at(2).element.matches('[disabled]')).toBe(false)
-
-    wrapper.destroy()
-  })
-
-  it('has option elements from options array of objects with custom field names', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: [
-          { price: 1.5, display: { text: '1,50 €' } },
-          {
-            price: 5,
-            display: { text: '5,00 €', html: '<span class="lowest-price">5,00 €</span>' }
-          },
-          { price: 50.75, display: { text: '50,75 €' }, notAvailable: true }
-        ],
-        valueField: 'price',
-        textField: 'display.text',
-        htmlField: 'display.html',
-        disabledField: 'notAvailable'
-      }
-    })
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-    expect($options.at(0).text()).toBe('1,50 €')
-    expect($options.at(1).text()).toBe('5,00 €')
-    expect($options.at(2).text()).toBe('50,75 €')
-    expect(
-      $options
-        .at(0)
-        .find('span')
-        .exists()
-    ).toBe(false)
-    expect(
-      $options
-        .at(1)
-        .find('span')
-        .exists()
-    ).toBe(true)
-    expect(
-      $options
-        .at(2)
-        .find('span')
-        .exists()
-    ).toBe(false)
-    expect($options.at(0).attributes('value')).toBe('1.5')
-    expect($options.at(1).attributes('value')).toBe('5')
-    expect($options.at(2).attributes('value')).toBe('50.75')
-    expect($options.at(0).element.matches('[disabled]')).toBe(false)
-    expect($options.at(1).element.matches('[disabled]')).toBe(false)
-    expect($options.at(2).element.matches('[disabled]')).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('has option group elements with options from options array of objects', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: [
-          {
-            label: 'group one',
-            options: [{ text: 'one', value: 1 }, { text: 'two', value: 2 }]
-          },
-          {
-            label: 'group two',
-            options: [{ text: 'three', value: 3 }, { text: 'four', value: 4, disabled: true }]
-          }
-        ]
-      }
-    })
-
-    const $groups = wrapper.findAll('optgroup')
-    expect($groups.length).toBe(2)
-    expect($groups.at(0).attributes('label')).toBe('group one')
-    expect($groups.at(1).attributes('label')).toBe('group two')
-    expect($groups.at(0).findAll('option').length).toBe(2)
-    expect($groups.at(1).findAll('option').length).toBe(2)
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(4)
-    expect($options.at(0).text()).toBe('one')
-    expect($options.at(1).text()).toBe('two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(3).text()).toBe('four')
-    expect($options.at(0).attributes('value')).toBe('1')
-    expect($options.at(1).attributes('value')).toBe('2')
-    expect($options.at(2).attributes('value')).toBe('3')
-    expect($options.at(3).attributes('value')).toBe('4')
-    expect($options.at(0).element.matches('[disabled]')).toBe(false)
-    expect($options.at(1).element.matches('[disabled]')).toBe(false)
-    expect($options.at(2).element.matches('[disabled]')).toBe(false)
-    expect($options.at(3).element.matches('[disabled]')).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('has option group and option elements from options array of objects', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: [
-          { text: 'one', value: 1 },
-          {
-            label: 'group',
-            options: [{ text: 'two', value: 2 }, { text: 'three', value: 3 }]
-          },
-          { text: 'four', value: 4, disabled: true }
-        ]
-      }
-    })
-
-    const $groups = wrapper.findAll('optgroup')
-    expect($groups.length).toBe(1)
-    expect($groups.at(0).attributes('label')).toBe('group')
-    expect($groups.at(0).findAll('option').length).toBe(2)
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(4)
-    expect($options.at(0).text()).toBe('one')
-    expect($options.at(1).text()).toBe('two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(3).text()).toBe('four')
-    expect($options.at(0).attributes('value')).toBe('1')
-    expect($options.at(1).attributes('value')).toBe('2')
-    expect($options.at(2).attributes('value')).toBe('3')
-    expect($options.at(3).attributes('value')).toBe('4')
-    expect($options.at(0).element.matches('[disabled]')).toBe(false)
-    expect($options.at(1).element.matches('[disabled]')).toBe(false)
-    expect($options.at(2).element.matches('[disabled]')).toBe(false)
-    expect($options.at(3).element.matches('[disabled]')).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('has option elements from options legacy object format', async () => {
-    const spyWarn = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: { one: 1, two: { value: 2, text: 'Two' }, three: 'three' }
-      }
-    })
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-    expect($options.at(0).text()).toBe('1')
-    expect($options.at(1).text()).toBe('Two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(0).attributes('value')).toBe('one')
-    expect($options.at(1).attributes('value')).toBe('2')
-    expect($options.at(2).attributes('value')).toBe('three')
-
-    expect(spyWarn).toHaveBeenCalledWith(
-      '[BootstrapVue warn]: BFormSelect - Setting prop "options" to an object is deprecated. Use the array format instead.'
-    )
-
-    wrapper.destroy()
-  })
-
-  it('has option elements from default slot', async () => {
-    const wrapper = mount(BFormSelect, {
-      slots: {
-        default: [
-          '<option value="1">one</option>',
-          '<option value="2">two</option>',
-          '<option value="3">three</option>'
-        ]
-      }
-    })
-
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-    expect($options.at(0).text()).toBe('one')
-    expect($options.at(1).text()).toBe('two')
-    expect($options.at(2).text()).toBe('three')
-    expect($options.at(0).attributes('value')).toBe('1')
-    expect($options.at(1).attributes('value')).toBe('2')
-    expect($options.at(2).attributes('value')).toBe('3')
-
-    wrapper.destroy()
-  })
-
-  it('updates v-model when option selected in single mode', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: ['one', 'two', 'three']
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-
-    expect(wrapper.emitted('input')).toBeUndefined()
-    expect(wrapper.emitted('change')).toBeUndefined()
-
-    // select 3rd option
-    $options.at(2).setSelected()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.emitted('input')).toBeDefined()
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('input')[0][0]).toBe('three')
-    expect(wrapper.emitted('change')[0][0]).toBe('three')
-
-    wrapper.destroy()
-  })
-
-  it('updating v-model (value) when selects correct option', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: ['one', 'two', { text: 'three', value: { three: 3 } }],
-        value: 'one'
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-
-    expect($options.at(0).element.selected).toBe(true)
-
-    // Select 2nd option
-    await wrapper.setProps({
-      value: 'two'
-    })
-
-    expect($options.at(1).element.selected).toBe(true)
-
-    // Select 3rd option
-    await wrapper.setProps({
-      value: { three: 3 }
-    })
-
-    expect($options.at(2).element.selected).toBe(true)
-
-    wrapper.destroy()
-  })
-
-  it('updates v-model when option selected in single mode with complex values', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        options: [
-          { text: 'one', value: { a: 1 } },
-          { text: 'two', value: { b: 2 } },
-          { text: 'three', value: { c: 3 } }
-        ]
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-
-    expect(wrapper.emitted('input')).toBeUndefined()
-    expect(wrapper.emitted('change')).toBeUndefined()
-
-    // Select 3rd option
-    $options.at(2).setSelected()
-    await waitNT(wrapper.vm)
-
-    expect(wrapper.emitted('input')).toBeDefined()
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('input')[0][0]).toEqual({ c: 3 })
-    expect(wrapper.emitted('change')[0][0]).toEqual({ c: 3 })
-
-    wrapper.destroy()
-  })
-
-  it('updates v-model when option selected in multiple mode', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        multiple: true,
-        selectSize: 3,
-        options: ['one', 'two', 'three'],
-        value: []
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-
-    expect(wrapper.emitted('input')).toBeUndefined()
-    expect(wrapper.emitted('change')).toBeUndefined()
-
-    // Select 2nd and 3rd option
-    $options.at(1).element.selected = true
-    $options.at(2).element.selected = true
-    await wrapper.trigger('change')
-    expect(wrapper.emitted('input')).toBeDefined()
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('input')[0][0]).toEqual(['two', 'three'])
-    expect(wrapper.emitted('change')[0][0]).toEqual(['two', 'three'])
-
-    wrapper.destroy()
-  })
-
-  it('updates v-model when option selected in multiple mode with complex values', async () => {
-    const wrapper = mount(BFormSelect, {
-      propsData: {
-        multiple: true,
-        selectSize: 3,
-        value: [],
-        options: [
-          { text: 'one', value: { a: 1 } },
-          { text: 'two', value: { b: 2 } },
-          { text: 'three', value: { c: 3 } }
-        ]
-      }
-    })
-    const $options = wrapper.findAll('option')
-    expect($options.length).toBe(3)
-
-    expect(wrapper.emitted('input')).toBeUndefined()
-    expect(wrapper.emitted('change')).toBeUndefined()
-
-    // Select 2nd and 3rd option
-    $options.at(1).element.selected = true
-    $options.at(2).element.selected = true
-    await wrapper.trigger('change')
-    expect(wrapper.emitted('input')).toBeDefined()
-    expect(wrapper.emitted('change')).toBeDefined()
-    expect(wrapper.emitted('input')[0][0]).toEqual([{ b: 2 }, { c: 3 }])
-    expect(wrapper.emitted('change')[0][0]).toEqual([{ b: 2 }, { c: 3 }])
-
-    wrapper.destroy()
-  })
-
-  // These tests are wrapped in a new describe to limit the scope of the getBCR Mock
-  describe('prop `autofocus`', () => {
-    const origGetBCR = Element.prototype.getBoundingClientRect
-
-    beforeEach(() => {
-      // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
-      // In our test below, all pagination buttons would normally be visible
-      Element.prototype.getBoundingClientRect = jest.fn(() => ({
-        width: 24,
-        height: 24,
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0
-      }))
-    })
-
-    afterEach(() => {
-      // Restore prototype
-      Element.prototype.getBoundingClientRect = origGetBCR
-    })
-
-    it('works when true', async () => {
-      const wrapper = mount(BFormSelect, {
-        attachTo: document.body,
-        propsData: {
-          autofocus: true,
-          options: ['a', 'b', 'c']
-        }
-      })
-      expect(wrapper.vm).toBeDefined()
-      await waitNT(wrapper.vm)
-      await waitRAF()
-
-      const input = wrapper.find('select')
-      expect(input.exists()).toBe(true)
-      expect(document).toBeDefined()
-      expect(document.activeElement).toBe(input.element)
-
-      wrapper.destroy()
-    })
-
-    it('does not autofocus when false', async () => {
-      const wrapper = mount(BFormSelect, {
-        attachTo: document.body,
-        propsData: {
-          autofocus: false,
-          options: ['a', 'b', 'c']
-        }
-      })
-      expect(wrapper.vm).toBeDefined()
-      await waitNT(wrapper.vm)
-      await waitRAF()
-
-      const input = wrapper.find('select')
-      expect(input.exists()).toBe(true)
-      expect(document).toBeDefined()
-      expect(document.activeElement).not.toBe(input.element)
-
-      wrapper.destroy()
-    })
-  })
-})