@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,268 @@
+import { mount } from '@vue/test-utils'
+import { waitNT, waitRAF } from '../../../tests/utils'
+import { BNavItemDropdown } from './nav-item-dropdown'
+
+describe('nav-item-dropdown', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNavItemDropdown)
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.element.hasAttribute('id')).toBe(true)
+    expect(wrapper.classes()).toContain('nav-item')
+    expect(wrapper.classes()).toContain('b-nav-dropdown')
+    expect(wrapper.classes()).toContain('dropdown')
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.element.tagName).toBe('A')
+    expect($toggle.element.hasAttribute('id')).toBe(true)
+    expect($toggle.attributes('role')).toEqual('button')
+    expect($toggle.attributes('aria-haspopup')).toEqual('true')
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+    expect($toggle.attributes('href')).toEqual('#')
+    expect($toggle.classes()).toContain('dropdown-toggle')
+    expect($toggle.classes()).toContain('nav-link')
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.element.tagName).toBe('UL')
+    expect($menu.attributes('tabindex')).toEqual('-1')
+    expect($menu.attributes('aria-labelledby')).toEqual($toggle.attributes('id'))
+    expect($menu.classes()).toContain('dropdown-menu')
+
+    wrapper.destroy()
+  })
+
+  it('should have custom toggle class when "toggle-class" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        toggleClass: 'nav-link-custom'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.classes()).toContain('nav-link-custom')
+
+    wrapper.destroy()
+  })
+
+  it('should be disabled when "disabled" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        disabled: true
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.classes()).toContain('disabled')
+    expect($toggle.attributes('aria-disabled')).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('should have href with ID when "id" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        id: 'foo'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.element.hasAttribute('id')).toBe(true)
+    expect(wrapper.attributes('id')).toEqual('foo')
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.attributes('href')).toEqual('#foo')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content when "text" prop set [DEPRECATED]', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.text()).toEqual('foo')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content when "html" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('span').exists()).toBe(true)
+    expect($toggle.text()).toEqual('bar')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content from "text" slot', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      },
+      slots: {
+        text: '<strong>baz</strong>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('strong').exists()).toBe(true)
+    expect($toggle.text()).toEqual('baz')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct toggle content from "button-content" slot', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'foo',
+        html: '<span>bar</span>'
+      },
+      slots: {
+        'button-content': '<article>foobar</article>',
+        text: '<strong>baz</strong>'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect($toggle.find('article').exists()).toBe(true)
+    expect($toggle.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('should have correct menu content for "default" slot', async () => {
+    let slotScope = null
+    const wrapper = mount(BNavItemDropdown, {
+      scopedSlots: {
+        default(scope) {
+          slotScope = scope
+          return this.$createElement('div', 'foo')
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.find('div').exists()).toBe(true)
+    expect($menu.text()).toEqual('foo')
+
+    expect(slotScope).toBeDefined()
+    expect(slotScope.hide).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('should only render menu content when visible when "lazy" prop set', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        lazy: true
+      },
+      scopedSlots: {
+        default() {
+          return this.$createElement('div', 'bar')
+        }
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.vm.visible).toBe(false)
+    await waitNT(wrapper.vm)
+
+    const $menu = wrapper.find('.dropdown-menu')
+    expect($menu.find('div').exists()).toBe(false)
+
+    wrapper.vm.show()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(true)
+    expect($menu.find('div').exists()).toBe(true)
+    expect($menu.text()).toEqual('bar')
+
+    wrapper.vm.hide()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(false)
+    expect($menu.find('div').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('should open/close on toggle click', async () => {
+    const wrapper = mount(BNavItemDropdown)
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+    expect(wrapper.vm.visible).toBe(false)
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+
+    await $toggle.trigger('click')
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(true)
+    expect($toggle.attributes('aria-expanded')).toEqual('true')
+
+    await $toggle.trigger('click')
+    await waitRAF()
+    expect(wrapper.vm.visible).toBe(false)
+    expect($toggle.attributes('aria-expanded')).toEqual('false')
+
+    wrapper.destroy()
+  })
+
+  it('should prevent toggle click', async () => {
+    const wrapper = mount(BNavItemDropdown, {
+      propsData: {
+        text: 'toggle'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    const $toggle = wrapper.find('.dropdown-toggle')
+
+    await $toggle.trigger('click')
+    expect(wrapper.emitted('toggle')).toBeDefined()
+    expect(wrapper.emitted('toggle').length).toBe(1)
+    expect(wrapper.emitted('toggle')[0]).toBeDefined()
+    expect(wrapper.emitted('toggle')[0][0].defaultPrevented).toBe(true)
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils'
+import { BLink } from '../link/link'
+import { BNavItem } from './nav-item'
+
+describe('nav-item', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNavItem)
+
+    expect(wrapper.element.tagName).toBe('LI')
+    expect(wrapper.classes()).toContain('nav-item')
+    expect(wrapper.classes().length).toBe(1)
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('nav-link')
+    expect(link.classes().length).toBe(1)
+    expect(link.attributes('href')).toBeDefined()
+    expect(link.attributes('href')).toBe('#')
+    expect(link.attributes('role')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('has attrs on link when link-attrs set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: {
+          linkAttrs: { role: 'tab' }
+        }
+      }
+    })
+
+    expect(wrapper.attributes('role')).toBeUndefined()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.attributes('role')).toBeDefined()
+    expect(link.attributes('role')).toBe('tab')
+
+    wrapper.destroy()
+  })
+
+  it('has custom classes on link when link-classes set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: {
+          linkClasses: ['foo', { bar: true }]
+        }
+      }
+    })
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('foo')
+    expect(link.classes()).toContain('bar')
+    expect(link.classes()).toContain('nav-link')
+
+    wrapper.destroy()
+  })
+
+  it('has class "disabled" on link when disabled set', async () => {
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: { disabled: true }
+      }
+    })
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    expect(link.classes()).toContain('disabled')
+
+    wrapper.destroy()
+  })
+
+  it('emits click event when clicked', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(BNavItem, {
+      context: {
+        on: { click: spy }
+      }
+    })
+
+    expect(spy).not.toHaveBeenCalled()
+    await wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    await link.trigger('click')
+    expect(spy).toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
+
+  it('does not emit a click event when clicked and disabled', async () => {
+    const spy = jest.fn()
+    const wrapper = mount(BNavItem, {
+      context: {
+        props: { disabled: true },
+        on: { click: spy }
+      }
+    })
+
+    expect(spy).not.toHaveBeenCalled()
+    await wrapper.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    const link = wrapper.find('a')
+    expect(link).toBeDefined()
+    expect(link.findComponent(BLink).exists()).toBe(true)
+    expect(link.element.tagName).toBe('A')
+    await link.trigger('click')
+    expect(spy).not.toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js

@@ -0,0 +1,244 @@
+import { mount } from '@vue/test-utils'
+import { BNav } from './nav'
+
+describe('nav', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BNav)
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('renders custom root element when prop tag set', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        tag: 'ol'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('OL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(BNav, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('applies pill style', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        pills: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-pills')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies tab style', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        tabs: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-tabs')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies vertical style', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        vertical: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies justify style when justified', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        justified: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-justified')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it("doesn't apply justify style when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        justified: true,
+        vertical: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies fill style style when fill set', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        fill: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-fill')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it("doesn't apply fill style when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        fill: true,
+        vertical: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies alignment correctly', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        align: 'center'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('justify-content-center')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it("doesn't apply alignment when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        align: 'center',
+        vertical: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies small style', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        small: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('small')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies card-header-tabs class when tabs and card-header props set', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        tabs: true,
+        cardHeader: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-tabs')
+    expect(wrapper.classes()).toContain('card-header-tabs')
+    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('applies card-header-pills class when pills and card-header props set', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        pills: true,
+        cardHeader: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('UL')
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-pills')
+    expect(wrapper.classes()).toContain('card-header-pills')
+    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.text()).toBe('')
+
+    wrapper.destroy()
+  })
+})