test: update

Author: woothu

src/components/carousel/test/CCarousel.spec.js

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import Component from '../CCarousel'
 import CCarouselItem from '../CCarouselItem'
 
-const props = Object.assign({}, CCarouselItem.props, { active: { default: true}})
-const item = Object.assign({}, CCarouselItem, { props })
+// const props = Object.assign({}, CCarouselItem.props, { active: { default: true}})
+// const item = Object.assign({}, CCarouselItem, { props })
 
 const ComponentName = 'CCarousel'
 const defaultWrapper = mount(Component)
@@ -19,7 +19,10 @@ const createWrapper = () => {
       height: '200'
     },
     slots: {
-      default: [item, CCarouselItem, CCarouselItem]
+      default: ['<CCarouselItem :active="true"/>', CCarouselItem, CCarouselItem]
+    },
+    stubs: {
+      CCarouselItem
     }
   })
 }
@@ -61,7 +64,7 @@ describe(ComponentName, () => {
     const nextArrowClick = () => nextButton.trigger('click')
 
     jest.useFakeTimers()
-    customWrapper.setData({ waitingItem: null, transitioning: false })
+    customWrapper.setData({ transitioning: false })
 
     nextArrowClick()
     expect(customWrapper.vm.transitioning).toBe(true)

src/components/dropdown/tests/CDropdown.spec.js

@@ -1,30 +1,68 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import Component from '../CDropdown'
-import CDropdownItem from '../CDropdownItem'
+import {
+  CDropdown,
+  CDropdownItem,
+  CDropdownHeader,
+  CDropdownDivider
+} from '../index'
+import VueRouter from 'vue-router'
+
 const ComponentName = 'CDropdown'
 
-const generateWrapper = () => mount(Component, {
-  attachToDocument: true,
-  propsData: {
-    togglerText: 'Dropdown button',
-    show: true,
-    addMenuClasses: 'additional-menu-class',
-    addTogglerClasses: 'additional-toggler-class',
-    inNav: false,
-    caret: false,
-    color: 'success',
-    size: 'lg',
-    split: true,
-    offset: [20, 0],
-    placement: 'right-end',
-    flip: false,
+const localVue = new createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+const dropdownProps = {
+  togglerText: 'Dropdown button',
+  show: true,
+  addMenuClasses: 'additional-menu-class',
+  addTogglerClasses: 'additional-toggler-class',
+  inNav: false,
+  caret: false,
+  color: 'success',
+  size: 'lg',
+  split: true,
+  offset: [20, 0],
+  placement: 'right-end',
+  flip: false
+}
+
+const App = localVue.extend({
+  router,
+  components: {
+    CDropdown,
+    CDropdownItem,
+    CDropdownHeader,
+    CDropdownDivider
   },
+  render (h) {
+    return h('CDropdown', { props: dropdownProps }, [
+      h('CDropdownHeader', ['header']),
+      h('CDropdownItem', { props: { to: '/buttons' } }, ['Router-link']),
+      h('CDropdownDivider'),
+      //router link item
+      h('CDropdownItem', { props: { to: '/dashboard' } }, ['Router-link'])
+    ])
+  }
+})
+
+const generateAppWrapper =  () => mount(App, { localVue })
+
+
+const generateWrapper = () => mount(CDropdown, {
+  attachToDocument: true,
+  propsData: dropdownProps,
   slots: {
-    default: [CDropdownItem, CDropdownItem]
+    default: [
+      CDropdownHeader,
+      CDropdownItem,
+      CDropdownDivider
+    ]
   }
 })
 
-const generateNavWrapper =  () => mount(Component, {
+const generateNavWrapper =  () => mount(CDropdown, {
   propsData: {
     addMenuClasses: 'additional-menu-class',
     addTogglerClasses: 'additional-toggler-class',
@@ -43,14 +81,17 @@ const generateNavWrapper =  () => mount(Component, {
 
 describe(ComponentName, () => {
   it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
+    expect(CDropdown.name).toMatch(ComponentName)
   })
   it('renders basic wrapper correctly', () => {
-    expect(mount(Component).element).toMatchSnapshot()
+    expect(mount(CDropdown).element).toMatchSnapshot()
   })
   it('renders custom wrapper correctly', () => {
     expect(generateWrapper().element).toMatchSnapshot()
   })
+  it('renders dropdown with router links correctly', () => {
+    expect(generateWrapper().element).toMatchSnapshot()
+  })
   it('renders correctly inNav', () => {
     expect(generateNavWrapper().element).toMatchSnapshot()
   })
@@ -66,6 +107,13 @@ describe(ComponentName, () => {
     wrapper.vm.$children[0].$el.click()
     expect(wrapper.vm.visible).toBe(false)
   })
+  it('hide when dropdown item - router link is clicked', () => {
+    const wrapper = generateAppWrapper()
+    const isVisible = () => wrapper.vm.$children[0].visible
+    expect(isVisible()).toBe(true)
+    wrapper.findAll('.dropdown-item').at(1).trigger('click')
+    expect(isVisible()).toBe(false)
+  })
   it('close, but does not open on click when dropdown is disabled', () => {
     const customWrapper = generateWrapper()
     const toggle = () => {

src/components/dropdown/tests/CDropdownDivider.spec.js

@@ -59,18 +59,56 @@ exports[`CDropdown renders custom wrapper correctly 1`] = `
   <div
     class="additional-menu-class dropdown-menu show"
   >
+    <div
+      class="dropdown-header"
+    />
     <a
       class="dropdown-item"
       href="#"
       role="menuitem"
       target="_self"
     />
+    <div
+      class="dropdown-divider"
+      role="separator"
+    />
+  </div>
+</div>
+`;
+
+exports[`CDropdown renders dropdown with router links correctly 1`] = `
+<div
+  class="dropright show btn-group"
+>
+  <button
+    class="additional-toggler-class btn btn-lg btn-success"
+  >
+    Dropdown button
+  </button>
+   
+  <button
+    aria-expanded="true"
+    aria-haspopup="true"
+    class="dropdown-toggle dropdown-toggle-split additional-toggler-class btn btn-lg btn-success"
+    type="button"
+  />
+   
+  <div
+    class="additional-menu-class dropdown-menu show"
+  >
+    <div
+      class="dropdown-header"
+    />
     <a
       class="dropdown-item"
       href="#"
       role="menuitem"
       target="_self"
     />
+    <div
+      class="dropdown-divider"
+      role="separator"
+    />
   </div>
 </div>
 `;

src/components/dropdown/tests/CDropdownHeader.spec.js

@@ -6,24 +6,25 @@ const wrapperPlaintext = mount(Component, {
   propsData: {
     id: 'some_id',
     plaintext: true,
-    options: ['Option 1', 'Option 2', { value: 'Option 3 '}],
+    options: ['Option 1', 'Option 2', { value: 'Option 3'}],
     placeholder: 'placeholder',
     size: 'lg'
   }
 })
 const customSimpleWrapper = mount(Component, {
   propsData: {
     id: 'some_id',
-    options: ['Option 1', 'Option 2', { value: 'Option 3 '}],
+    options: ['Option 1', 'Option 2', { value: 'Option 3'}],
     size: 'lg',
     custom: true
   }
 })
 const customWrapper = mount(Component, {
+  attachToDocument: true, 
   propsData: {
     label: 'label',
     id: 'some_id',
-    options: ['Option 1', 'Option 2', { value: 'Option 3 '}],
+    options: ['Option 1', 'Option 2', { value: 'Option 3'}],
     placeholder: 'placeholder',
     wasValidated: true,
     checked: true,
@@ -69,6 +70,10 @@ describe(ComponentName, () => {
     select.element.value = 'Option 2'
     select.trigger('input')
     expect(customWrapper.emitted()['update:value']).toBeTruthy()
+    const select2 = customSimpleWrapper.find('select')
+    select2.element.value = 'Option 3'
+    select2.trigger('input')
+    expect(customSimpleWrapper.emitted()['update:value']).toBeTruthy()
   })
   it('not emit update event on multiple select', () => {
     const select = wrapperMultiple.find('select')