add tabs UT & lodash.merge, update tab UT

Author: ofrankowska

_src /molecules/tabs/Tabs.spec.js

@@ -53,6 +53,7 @@
     "glob": "^7.1.4",
     "jest": "^24.9.0",
     "jest-vue-preprocessor": "^1.5.0",
+    "lodash.merge": "^4.6.2",
     "storybook-addon-vue-info": "1.4.2",
     "storybook-vue-router": "^1.0.7",
     "stylelint": "^11.0.0",

package.json

@@ -1,34 +1,38 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import ATab from './Tab.vue'
 
 const factory = () => {
-  const defaultData = {
+  return mount(ATab, {
     slots: {
-      default: '<span>Tab default text</span>'
+      default: `
+        <span>
+          Tab text
+        </span>
+      `
     },
     propsData: {
       name: 'Tab'
     }
-  }
-
-  return shallowMount(ATab, defaultData)
+  })
 }
 
 describe('Tab', () => {
-  it('has default structure', () => {
+  it('has default structure', async () => {
     const wrapper = factory()
 
-    expect(wrapper).toBe('DIV')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.attributes().role).toBeDefined()
-    expect(wrapper.attributes().role).toEqual('tab')
+    expect(wrapper.attributes().role).toEqual('tabpanel')
     expect(wrapper.attributes('data-tab')).toBeDefined()
   })
 
   it('renders slot text when passed', () => {
     const wrapper = factory()
 
     expect(wrapper.find('div > span').exists()).toBe(true)
-    expect(wrapper.find('div > span').text()).toEqual('Tab default text')
+    expect(wrapper.find('div > span').text()).toEqual('Tab text')
   })
 
   it('has correct id attribute', () => {

src/atoms/tab/Tab.spec.js

@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils'
+import merge from 'lodash.merge'
+import ATab from '@atoms/tab/Tab.vue'
+import ATabs from './Tabs.vue'
+
+const factory = (customData = {}) => {
+  const defaultData = {
+    slots: {
+      default: `
+        <a-tab
+          name="test tab1"
+          :selected="true"
+        >
+          Tab text 1
+        </a-tab>
+        <a-tab name="test tab2">
+          Tab text 2
+        </a-tab>
+      `
+    },
+    stubs: {
+      'a-tab': ATab
+    }
+  }
+
+  return shallowMount(ATabs, merge(defaultData, customData))
+}
+
+describe('Tabs', () => {
+  it('has default structure', async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('has default structure when content rendered', async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('#test-tab1-tab-trigger').exists()).toBe(true)
+    expect(wrapper.find('#test-tab1-tab').exists()).toBe(true)
+    expect(wrapper.find('#test-tab2-tab-trigger').exists()).toBe(true)
+    expect(wrapper.find('#test-tab2-tab').exists()).toBe(true)
+  })
+
+  it('renders slot content when passed', async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('#test-tab1-tab-trigger').exists()).toBe(true)
+    expect(wrapper.find('#test-tab1-tab-trigger').text()).toEqual('test tab1')
+    expect(wrapper.find('#test-tab1-tab').exists()).toBe(true)
+    expect(wrapper.find('#test-tab1-tab').text()).toEqual('Tab text 1')
+    expect(wrapper.find('#test-tab2-tab-trigger').exists()).toBe(true)
+    expect(wrapper.find('#test-tab2-tab-trigger').text()).toEqual('test tab2')
+    expect(wrapper.find('#test-tab2-tab').exists()).toBe(true)
+    expect(wrapper.find('#test-tab2-tab').text()).toEqual('Tab text 2')
+  })
+
+  it('renders custom button', async () => {
+    const wrapper = factory({
+      slots: {
+        button: `
+          <div data-test="button-slot">
+            Test slot
+          </div>
+        `
+      }
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('[data-test="button-slot"]').exists()).toBe(true)
+  })
+
+  it('switches between tabs', async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    const firstTrigger = wrapper.find('#test-tab1-tab-trigger')
+    const secondTrigger = wrapper.find('#test-tab2-tab-trigger')
+    const firstContent = wrapper.find('#test-tab1-tab')
+    const secondContent = wrapper.find('#test-tab2-tab')
+
+    await firstTrigger.trigger('click')
+
+    expect(firstTrigger.attributes('aria-selected')).toEqual('true')
+    expect(firstTrigger.attributes('aria-expanded')).toEqual('true')
+    expect(firstContent.isVisible()).toBe(true)
+    expect(secondTrigger.attributes('aria-selected')).toEqual('false')
+    expect(secondTrigger.attributes('aria-expanded')).toEqual('false')
+    expect(secondContent.isVisible()).toBe(false)
+
+    await secondTrigger.trigger('click')
+
+    expect(firstTrigger.attributes('aria-selected')).toEqual('false')
+    expect(firstTrigger.attributes('aria-expanded')).toEqual('false')
+    expect(firstContent.isVisible()).toBe(false)
+    expect(secondTrigger.attributes('aria-selected')).toEqual('true')
+    expect(secondTrigger.attributes('aria-expanded')).toEqual('true')
+    expect(secondContent.isVisible()).toBe(true)
+  })
+})

src/molecules/tabs/Tabs.spec.js

@@ -9932,6 +9932,11 @@ lodash.kebabcase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"