chore: add additional navbar tests (bootstrap-vue#2398)

tmorehouse · web-flow · commit c2a066b2fb43 · 2019-01-05T23:04:50.000-04:00
diff --git a/src/components/navbar/navbar-brand.spec.js b/src/components/navbar/navbar-brand.spec.js
@@ -0,0 +1,38 @@
+import NavbarBrand from './navbar-brand'
+import { mount } from '@vue/test-utils'
+
+describe('navbar-brand', async () => {
+  it('default has tag "div"', async () => {
+    const wrapper = mount(NavbarBrand)
+    expect(wrapper.is('div')).toBe(true)
+  })
+
+  it('default has class "navbar-brand"', async () => {
+    const wrapper = mount(NavbarBrand)
+    expect(wrapper.classes()).toContain('navbar-brand')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('accepts custom tag', async () => {
+    const wrapper = mount(NavbarBrand, {
+      context: {
+        props: { tag: 'span' }
+      }
+    })
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-brand')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('renders link when href set', async () => {
+    const wrapper = mount(NavbarBrand, {
+      context: {
+        props: { href: '#foo' }
+      }
+    })
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.attributes('href')).toBe('#foo')
+    expect(wrapper.classes()).toContain('navbar-brand')
+    expect(wrapper.classes().length).toBe(1)
+  })
+})
diff --git a/src/components/navbar/navbar-nav.spec.js b/src/components/navbar/navbar-nav.spec.js
@@ -0,0 +1,48 @@
+import NavbarNav from './navbar-nav'
+import { mount } from '@vue/test-utils'
+
+describe('navbar-nav', async () => {
+  it('default has tag "ul"', async () => {
+    const wrapper = mount(NavbarNav)
+    expect(wrapper.is('ul')).toBe(true)
+  })
+
+  it('default has class "navbar-nav"', async () => {
+    const wrapper = mount(NavbarNav)
+    expect(wrapper.classes()).toContain('navbar-nav')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('accepts custom tag', async () => {
+    const wrapper = mount(NavbarNav, {
+      context: {
+        props: { tag: 'div' }
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-nav')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('has class "nav-fill" when fill=true', async () => {
+    const wrapper = mount(NavbarNav, {
+      context: {
+        props: { fill: true }
+      }
+    })
+    expect(wrapper.classes()).toContain('nav-fill')
+    expect(wrapper.classes()).toContain('navbar-nav')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('has class "nav-justified" when justified=true', async () => {
+    const wrapper = mount(NavbarNav, {
+      context: {
+        props: { justified: true }
+      }
+    })
+    expect(wrapper.classes()).toContain('nav-justified')
+    expect(wrapper.classes()).toContain('navbar-nav')
+    expect(wrapper.classes().length).toBe(2)
+  })
+})
diff --git a/src/components/navbar/navbar-toggle.spec.js b/src/components/navbar/navbar-toggle.spec.js
@@ -0,0 +1,90 @@
+import NavbarToggle from './navbar-toggle'
+import { mount } from '@vue/test-utils'
+
+describe('navbar-toggle', async () => {
+  it('default has tag "button"', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    expect(wrapper.is('button')).toBe(true)
+  })
+
+  it('default has class "navbar-toggler"', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    expect(wrapper.classes()).toContain('navbar-toggler')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('default has default attributes', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    expect(wrapper.attributes('type')).toBe('button')
+    expect(wrapper.attributes('aria-controls')).toBe('target')
+    expect(wrapper.attributes('aria-expanded')).toBe('false')
+    expect(wrapper.attributes('aria-label')).toBe('Toggle navigation')
+  })
+
+  it('default has inner button-close', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    expect(wrapper.find('span.navbar-toggler-icon')).toBeDefined()
+  })
+
+  it('accepts custom label when label prop is set', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target',
+        label: 'foobar'
+      }
+    })
+    expect(wrapper.attributes('aria-label')).toBe('foobar')
+  })
+
+  it('emits click event', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    let rootClicked = false
+    function onRootClick () {
+      rootClicked = true
+    }
+    wrapper.vm.$root.$on('bv::toggle::collapse', onRootClick)
+
+    expect(wrapper.emitted('click')).not.toBeDefined()
+    expect(rootClicked).toBe(false)
+
+    wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeDefined()
+    expect(rootClicked).toBe(true)
+
+    wrapper.vm.$root.$off('bv::toggle::collapse', onRootClick)
+  })
+
+  it('sets areia-expanded when receives root emit for target', async () => {
+    const wrapper = mount(NavbarToggle, {
+      propsData: {
+        target: 'target'
+      }
+    })
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target', true)
+    expect(wrapper.attributes('aria-expanded')).toBe('true')
+    wrapper.vm.$root.$emit('bv::collapse::state', 'target', false)
+    expect(wrapper.attributes('aria-expanded')).toBe('false')
+    wrapper.vm.$root.$emit('bv::collapse::state', 'foo', true)
+    expect(wrapper.attributes('aria-expanded')).toBe('false')
+  })
+})
diff --git a/src/components/navbar/navbar.spec.js b/src/components/navbar/navbar.spec.js
@@ -0,0 +1,116 @@
+import Navbar from './navbar'
+import { mount } from '@vue/test-utils'
+
+describe('navbar', async () => {
+  it('default has tag "nav"', async () => {
+    const wrapper = mount(Navbar)
+    expect(wrapper.is('nav')).toBe(true)
+    // no role added if default tag is used
+    expect(wrapper.attributes('role')).not.toBeDefined()
+  })
+
+  it('default has class "navbar", "navbar-expand", "navbar-light"', async () => {
+    const wrapper = mount(Navbar)
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(3)
+  })
+
+  it('accepts custom tag', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { tag: 'div' }
+      }
+    })
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.attributes('role')).toBeDefined()
+    expect(wrapper.attributes('role')).toBe('navigation')
+  })
+
+  it('accepts breakpoint via toggleable prop', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { toggleable: 'lg' }
+      }
+    })
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand-lg')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(3)
+  })
+
+  it('toggleable=true has expected classes', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { toggleable: true }
+      }
+    })
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('toggleable=xs has expected classes', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { toggleable: 'xs' }
+      }
+    })
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(2)
+  })
+
+  it('has class "fixed-top" when fixed="top"', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { fixed: 'top' }
+      }
+    })
+    expect(wrapper.classes()).toContain('fixed-top')
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(4)
+  })
+
+  it('has class "fixed-top" when fixed="top"', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { fixed: 'top' }
+      }
+    })
+    expect(wrapper.classes()).toContain('fixed-top')
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(4)
+  })
+
+  it('has class "sticky-top" when sticky=true', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { sticky: true }
+      }
+    })
+    expect(wrapper.classes()).toContain('sticky-top')
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(4)
+  })
+
+  it('accepts variant prop', async () => {
+    const wrapper = mount(Navbar, {
+      context: {
+        props: { variant: 'primary' }
+      }
+    })
+    expect(wrapper.classes()).toContain('bg-primary')
+    expect(wrapper.classes()).toContain('navbar')
+    expect(wrapper.classes()).toContain('navbar-expand')
+    expect(wrapper.classes()).toContain('navbar-light')
+    expect(wrapper.classes().length).toBe(4)
+  })
+})
