@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.spec.js

@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownDivider } from './dropdown-divider'
+
+describe('dropdown > dropdown-divider', () => {
+  it('works', async () => {
+    const wrapper = mount(BDropdownDivider)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const divider = wrapper.find('hr')
+    expect(divider.element.tagName).toBe('HR')
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders custom root element when prop tag set', async () => {
+    const wrapper = mount(BDropdownDivider, {
+      context: {
+        props: { tag: 'span' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const divider = wrapper.find('span')
+    expect(divider.element.tagName).toBe('SPAN')
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('does not render default slot content', async () => {
+    const wrapper = mount(BDropdownDivider, {
+      slots: { default: 'foobar' }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const divider = wrapper.find('hr')
+    expect(divider.element.tagName).toBe('HR')
+    expect(divider.classes()).toContain('dropdown-divider')
+    expect(divider.classes().length).toBe(1)
+    expect(divider.attributes('role')).toBeDefined()
+    expect(divider.attributes('role')).toEqual('separator')
+    expect(divider.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,110 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownForm } from './dropdown-form'
+
+describe('dropdown-form', () => {
+  it('renders with tag "form"', async () => {
+    const wrapper = mount(BDropdownForm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.element.tagName).toBe('FORM')
+
+    wrapper.destroy()
+  })
+
+  it('default has expected classes', async () => {
+    const wrapper = mount(BDropdownForm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.classes()).toContain('b-dropdown-form')
+    expect(form.classes()).not.toContain('was-validated')
+    expect(form.classes()).not.toContain('disabled')
+
+    wrapper.destroy()
+  })
+
+  it('should have custom form classes on form', async () => {
+    const wrapper = mount(BDropdownForm, {
+      propsData: {
+        formClass: ['form-class-custom', 'form-class-custom-2']
+      }
+    })
+
+    const form = wrapper.find('form')
+    expect(form.classes()).toEqual(['b-dropdown-form', 'form-class-custom', 'form-class-custom-2'])
+
+    wrapper.destroy()
+  })
+
+  it('has tabindex on form', async () => {
+    const wrapper = mount(BDropdownForm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.element.tagName).toBe('FORM')
+    expect(form.attributes('tabindex')).toBeDefined()
+    expect(form.attributes('tabindex')).toEqual('-1')
+
+    wrapper.destroy()
+  })
+
+  it('does not have tabindex on form when disabled', async () => {
+    const wrapper = mount(BDropdownForm, {
+      propsData: {
+        disabled: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.element.tagName).toBe('FORM')
+    expect(form.attributes('tabindex')).toBeUndefined()
+    expect(form.attributes('disabled')).toBeDefined()
+    expect(form.classes()).toContain('disabled')
+
+    wrapper.destroy()
+  })
+
+  it('has class "was-validated" when validated=true', async () => {
+    const wrapper = mount(BDropdownForm, {
+      propsData: { validated: true }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.classes()).toContain('was-validated')
+    expect(form.classes()).toContain('b-dropdown-form')
+
+    wrapper.destroy()
+  })
+
+  it('does not have attribute novalidate by default', async () => {
+    const wrapper = mount(BDropdownForm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.attributes('novalidate')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('has attribute novalidate when novalidate=true', async () => {
+    const wrapper = mount(BDropdownForm, {
+      propsData: { novalidate: true }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const form = wrapper.find('form')
+    expect(form.attributes('novalidate')).toBeDefined()
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.spec.js

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownGroup } from './dropdown-group'
+
+describe('dropdown > dropdown-header', () => {
+  it('works', async () => {
+    const wrapper = mount(BDropdownGroup)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.classes().length).toBe(0)
+
+    const header = wrapper.find('header')
+    expect(header.exists()).toBe(false)
+
+    const ul = wrapper.find('ul')
+    expect(ul).toBeDefined()
+    expect(ul.element.tagName).toBe('UL')
+    expect(ul.classes()).toContain('list-unstyled')
+    expect(ul.classes().length).toBe(1)
+    expect(ul.attributes('id')).toBeUndefined()
+
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders header element when prop header set', async () => {
+    const wrapper = mount(BDropdownGroup, {
+      context: {
+        props: { header: 'foobar' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('header')
+    expect(header.element.tagName).toBe('HEADER')
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).toBeUndefined()
+    expect(header.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('renders custom header element when prop header-tag set', async () => {
+    const wrapper = mount(BDropdownGroup, {
+      context: {
+        props: {
+          header: 'foobar',
+          headerTag: 'h6'
+        }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('.dropdown-header')
+    expect(header.element.tagName).toBe('H6')
+    expect(header.classes().length).toBe(1)
+    expect(header.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('user supplied id when prop id set', async () => {
+    const wrapper = mount(BDropdownGroup, {
+      context: {
+        props: { id: 'foo' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const ul = wrapper.find('ul')
+    expect(ul.attributes('id')).toBeDefined()
+    expect(ul.attributes('id')).toEqual('foo')
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(BDropdownGroup, {
+      slots: { default: '<li>foobar</li>' }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const ul = wrapper.find('ul')
+    expect(ul.element.tagName).toBe('UL')
+    expect(ul.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-header.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownHeader } from './dropdown-header'
+
+describe('dropdown > dropdown-header', () => {
+  it('works', async () => {
+    const wrapper = mount(BDropdownHeader)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('header')
+    expect(header.element.tagName).toBe('HEADER')
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).toBeUndefined()
+    expect(header.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders custom header element when prop tag set', async () => {
+    const wrapper = mount(BDropdownHeader, {
+      context: {
+        props: { tag: 'h2' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('h2')
+    expect(header.element.tagName).toBe('H2')
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).toBeUndefined()
+    expect(header.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('user supplied id when prop id set', async () => {
+    const wrapper = mount(BDropdownHeader, {
+      context: {
+        props: { id: 'foo' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('header')
+    expect(header.element.tagName).toBe('HEADER')
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.attributes('id')).toBeDefined()
+    expect(header.attributes('id')).toEqual('foo')
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(BDropdownHeader, {
+      slots: { default: 'foobar' }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const header = wrapper.find('header')
+    expect(header.element.tagName).toBe('HEADER')
+    expect(header.classes()).toContain('dropdown-header')
+    expect(header.classes().length).toBe(1)
+    expect(header.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.spec.js

@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownItemButton } from './dropdown-item-button'
+
+describe('dropdown-item-button', () => {
+  it('renders with tag "button" and type="button" by default', async () => {
+    const wrapper = mount(BDropdownItemButton)
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button.element.tagName).toBe('BUTTON')
+    expect(button.attributes('type')).toBe('button')
+
+    wrapper.destroy()
+  })
+
+  it('has class "dropdown-item"', async () => {
+    const wrapper = mount(BDropdownItemButton)
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button.classes()).toContain('dropdown-item')
+    expect(button.classes()).not.toContain('active')
+
+    wrapper.destroy()
+  })
+
+  it('has class "active" when active=true', async () => {
+    const wrapper = mount(BDropdownItemButton, {
+      propsData: { active: true }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button.classes()).toContain('active')
+    expect(button.classes()).toContain('dropdown-item')
+
+    wrapper.destroy()
+  })
+
+  it('has attribute "disabled" when disabled=true', async () => {
+    const wrapper = mount(BDropdownItemButton, {
+      propsData: { disabled: true }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button.attributes('disabled')).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('calls dropdown hide(true) method when clicked', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(BDropdownItemButton, {
+      provide: {
+        getBvDropdown: () => ({
+          hide(arg) {
+            called = true
+            refocus = arg
+          }
+        })
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button).toBeDefined()
+    await button.trigger('click')
+    expect(called).toBe(true)
+    expect(refocus).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('does not call dropdown hide(true) method when clicked and disabled', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(BDropdownItemButton, {
+      propsData: {
+        disabled: true
+      },
+      provide: {
+        getBvDropdown: () => ({
+          hide(arg) {
+            called = true
+            refocus = arg
+          }
+        })
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button).toBeDefined()
+    await button.trigger('click')
+    expect(called).toBe(false)
+    expect(refocus).toBe(null)
+
+    wrapper.destroy()
+  })
+
+  it('has buttonClass when prop is passed a value', () => {
+    const wrapper = mount(BDropdownItemButton, {
+      propsData: {
+        buttonClass: 'button-class'
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const button = wrapper.find('button')
+    expect(button.classes()).toContain('button-class')
+    expect(button.classes()).toContain('dropdown-item')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.spec.js

@@ -0,0 +1,147 @@
+import VueRouter from 'vue-router'
+import { mount } from '@vue/test-utils'
+import { waitRAF } from '../../../tests/utils'
+import { Vue } from '../../vue'
+import { BDropdownItem } from './dropdown-item'
+
+Vue.use(VueRouter)
+
+describe('dropdown-item', () => {
+  it('renders with tag "a" and href="#" by default', async () => {
+    const wrapper = mount(BDropdownItem)
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const item = wrapper.find('a')
+    expect(item.element.tagName).toBe('A')
+    expect(item.attributes('href')).toBe('#')
+
+    wrapper.destroy()
+  })
+
+  it('has class "dropdown-item"', async () => {
+    const wrapper = mount(BDropdownItem)
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const item = wrapper.find('a')
+    expect(item.classes()).toContain('dropdown-item')
+    expect(item.attributes('href')).toBe('#')
+
+    wrapper.destroy()
+  })
+
+  it('calls dropdown hide(true) method when clicked', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(BDropdownItem, {
+      provide: {
+        getBvDropdown: () => ({
+          hide(arg) {
+            called = true
+            refocus = arg
+          }
+        })
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const item = wrapper.find('a')
+    expect(item).toBeDefined()
+    await item.trigger('click')
+    await waitRAF()
+    expect(called).toBe(true)
+    expect(refocus).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('does not call dropdown hide(true) method when clicked and disabled', async () => {
+    let called = false
+    let refocus = null
+    const wrapper = mount(BDropdownItem, {
+      propsData: { disabled: true },
+      provide: {
+        getBvDropdown: () => ({
+          hide(arg) {
+            called = true
+            refocus = arg
+          }
+        })
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const item = wrapper.find('a')
+    expect(item).toBeDefined()
+    await item.trigger('click')
+    await waitRAF()
+    expect(called).toBe(false)
+    expect(refocus).toBe(null)
+
+    wrapper.destroy()
+  })
+
+  it('has linkClass when prop is passed a value', () => {
+    const wrapper = mount(BDropdownItem, {
+      propsData: {
+        linkClass: 'link-class'
+      }
+    })
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const item = wrapper.find('a')
+    expect(item.classes()).toContain('link-class')
+    expect(item.classes()).toContain('dropdown-item')
+
+    wrapper.destroy()
+  })
+
+  describe('router-link support', () => {
+    it('works', async () => {
+      const router = new VueRouter({
+        mode: 'abstract',
+        routes: [
+          { path: '/', component: { name: 'R', template: '<div class="r">ROOT</div>' } },
+          { path: '/a', component: { name: 'A', template: '<div class="a">A</div>' } },
+          { path: '/b', component: { name: 'B', template: '<div class="a">B</div>' } }
+        ]
+      })
+
+      const App = {
+        router,
+        render(h) {
+          return h('ul', [
+            // <router-link>
+            h(BDropdownItem, { props: { to: '/a' } }, ['to-a']),
+            // Regular link
+            h(BDropdownItem, { props: { href: '/a' } }, ['href-a']),
+            // <router-link>
+            h(BDropdownItem, { props: { to: { path: '/b' } } }, ['to-path-b']),
+            h('router-view')
+          ])
+        }
+      }
+
+      const wrapper = mount(App, {
+        attachTo: document.body
+      })
+
+      expect(wrapper.vm).toBeDefined()
+      expect(wrapper.element.tagName).toBe('UL')
+
+      expect(wrapper.findAll('li').length).toBe(3)
+      expect(wrapper.findAll('a').length).toBe(3)
+
+      const $links = wrapper.findAllComponents('a')
+
+      $links.wrappers.forEach($link => {
+        expect($link.vm).toBeDefined()
+        expect($links.at(0).vm.$options.name).toBe('BLink')
+      })
+      expect(
+        $links.wrappers.map($link => $link.findComponent({ name: 'RouterLink' }).exists())
+      ).toStrictEqual([true, false, true])
+
+      wrapper.destroy()
+    })
+  })
+})

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import { BDropdownText } from './dropdown-text'
+
+describe('dropdown-text', () => {
+  it('renders with tag "p" by default', async () => {
+    const wrapper = mount(BDropdownText)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const text = wrapper.find('p')
+    expect(text.element.tagName).toBe('P')
+
+    wrapper.destroy()
+  })
+
+  it('has custom class "b-dropdown-text"', async () => {
+    const wrapper = mount(BDropdownText)
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const text = wrapper.find('p')
+    expect(text.classes()).toContain('b-dropdown-text')
+
+    wrapper.destroy()
+  })
+
+  it('renders with tag "div" when tag=div', async () => {
+    const wrapper = mount(BDropdownText, {
+      context: {
+        props: { tag: 'div' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const text = wrapper.find('div')
+    expect(text.element.tagName).toBe('DIV')
+    expect(text.classes()).toContain('b-dropdown-text')
+
+    wrapper.destroy()
+  })
+
+  it('adds classes from `text-class` prop to child', async () => {
+    const wrapper = mount(BDropdownText, {
+      context: {
+        props: { textClass: 'some-custom-class' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('LI')
+
+    const text = wrapper.find('p')
+    expect(text.element.tagName).toBe('P')
+    expect(text.classes()).toContain('b-dropdown-text')
+    expect(text.classes()).toContain('some-custom-class')
+
+    wrapper.destroy()
+  })
+})