import { nextTick } from 'vue' import { mount } from '@vue/test-utils' import { EVENT_CODE } from '@element-plus/constants' import Tabs from '../src/tabs' import TabPane from '../src/tab-pane.vue' import TabNav from '../src/tab-nav' describe('Tabs.vue', () => { test('create', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const tabsWrapper = wrapper.findComponent(Tabs) const navWrapper = wrapper.findComponent(TabNav) const panesWrapper = wrapper.findAllComponents(TabPane) await nextTick() const navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper[0].classes('is-active')).toBe(true) expect(panesWrapper[0].classes('el-tab-pane')).toBe(true) expect(panesWrapper[0].attributes('id')).toBe('pane-0') expect(panesWrapper[0].attributes('aria-hidden')).toEqual('false') expect(tabsWrapper.vm.$.exposed.currentName.value).toEqual('0') await navItemsWrapper[2].trigger('click') expect(navItemsWrapper[0].classes('is-active')).toBe(false) expect(panesWrapper[0].attributes('aria-hidden')).toEqual('true') expect(navItemsWrapper[2].classes('is-active')).toBe(true) expect(panesWrapper[2].attributes('aria-hidden')).toEqual('false') expect(tabsWrapper.vm.$.exposed.currentName.value).toEqual('2') }) test('active-name', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, data() { return { activeName: 'b', } }, methods: { handleClick(tab) { this.activeName = tab.paneName }, }, template: ` A B C D `, }) const tabsWrapper = wrapper.findComponent(Tabs) const navWrapper = wrapper.findComponent(TabNav) const panesWrapper = wrapper.findAllComponents(TabPane) await nextTick() const navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper[1].classes('is-active')).toBe(true) expect(panesWrapper[1].classes('el-tab-pane')).toBe(true) expect(panesWrapper[1].attributes('id')).toBe('pane-b') expect(panesWrapper[1].attributes('aria-hidden')).toEqual('false') expect(tabsWrapper.vm.$.exposed.currentName.value).toEqual('b') await navItemsWrapper[2].trigger('click') expect(navItemsWrapper[1].classes('is-active')).toBe(false) expect(panesWrapper[1].attributes('aria-hidden')).toEqual('true') expect(navItemsWrapper[2].classes('is-active')).toBe(true) expect(panesWrapper[2].attributes('aria-hidden')).toEqual('false') expect(tabsWrapper.vm.$.exposed.currentName.value).toEqual('c') }) test('card', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const tabsWrapper = wrapper.findComponent(Tabs) expect(tabsWrapper.classes('el-tabs--card')).toBe(true) }) test('border card', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const tabsWrapper = wrapper.findComponent(Tabs) expect(tabsWrapper.classes('el-tabs--border-card')).toBe(true) }) test('dynamic', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` Test Content `, data() { return { tabs: [ { label: 'tab1', name: 'tab1', }, { label: 'tab2', name: 'tab2', }, { label: 'tab3', name: 'tab3', }, { label: 'tab4', name: 'tab4', }, ], } }, }) let navWrapper = wrapper.findComponent(TabNav) let panesWrapper = wrapper.findAllComponents(TabPane) await nextTick() let navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(4) expect(panesWrapper.length).toEqual(4) wrapper.vm.tabs.push({ label: 'tab5', name: 'tab5' }) await nextTick() navWrapper = wrapper.findComponent(TabNav) panesWrapper = wrapper.findAllComponents(TabPane) navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(5) expect(panesWrapper.length).toEqual(5) }) test('editable', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` {{item.content}} `, data() { return { editableTabsValue: '2', editableTabs: [ { title: 'Tab 1', name: '1', content: 'Tab 1 content', }, { title: 'Tab 2', name: '2', content: 'Tab 2 content', }, { title: 'Tab 3', name: '3', content: 'Tab 3 content', }, ], tabIndex: 3, } }, methods: { handleTabsEdit(targetName, action) { if (action === 'add') { const newTabName = `${++this.tabIndex}` this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content', }) this.editableTabsValue = newTabName } if (action === 'remove') { const tabs = this.editableTabs let activeName = this.editableTabsValue if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { const nextTab = tabs[index + 1] || tabs[index - 1] if (nextTab) { activeName = nextTab.name } } }) } this.editableTabsValue = activeName this.editableTabs = tabs.filter((tab) => tab.name !== targetName) } }, }, }) const navWrapper = wrapper.findComponent(TabNav) let panesWrapper = wrapper.findAllComponents(TabPane) await nextTick() let navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(3) expect(panesWrapper.length).toEqual(3) expect(navItemsWrapper[1].classes('is-active')).toBe(true) // remove one tab, check panes length await navItemsWrapper[1].find('.is-icon-close').trigger('click') panesWrapper = wrapper.findAllComponents(TabPane) navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(2) expect(panesWrapper.length).toEqual(2) // add one tab, check panes length and current tab await wrapper.find('.el-tabs__new-tab').trigger('click') panesWrapper = wrapper.findAllComponents(TabPane) navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(3) expect(panesWrapper.length).toEqual(3) expect(navItemsWrapper[2].classes('is-active')).toBe(true) }) test('addable & closable', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` {{item.content}} `, data() { return { editableTabsValue: '2', editableTabs: [ { title: 'Tab 1', name: '1', content: 'Tab 1 content', }, { title: 'Tab 2', name: '2', content: 'Tab 2 content', }, ], tabIndex: 2, } }, methods: { addTab() { const newTabName = `${++this.tabIndex}` this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content', }) this.editableTabsValue = newTabName }, removeTab(targetName) { const tabs = this.editableTabs let activeName = this.editableTabsValue if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { const nextTab = tabs[index + 1] || tabs[index - 1] if (nextTab) { activeName = nextTab.name } } }) } this.editableTabsValue = activeName this.editableTabs = tabs.filter((tab) => tab.name !== targetName) }, }, }) const navWrapper = wrapper.findComponent(TabNav) await nextTick() await wrapper.find('.el-tabs__new-tab').trigger('click') let navItemsWrapper = navWrapper.findAll('.el-tabs__item') let panesWrapper = wrapper.findAllComponents(TabPane) expect(navItemsWrapper.length).toEqual(3) expect(panesWrapper.length).toEqual(3) expect(navItemsWrapper[2].classes('is-active')).toBe(true) await navItemsWrapper[2].find('.is-icon-close').trigger('click') panesWrapper = wrapper.findAllComponents(TabPane) navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper.length).toEqual(2) expect(panesWrapper.length).toEqual(2) }) test('closable in tab-pane', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const navWrapper = wrapper.findComponent(TabNav) await nextTick() expect(navWrapper.findAll('.is-icon-close').length).toBe(2) }) test('disabled', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const navWrapper = wrapper.findComponent(TabNav) await nextTick() const navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper[1].classes('is-active')).toBe(false) await navItemsWrapper[1].trigger('click') expect(navItemsWrapper[1].classes('is-active')).toBe(false) }) test('tab-position', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const tabsWrapper = wrapper.findComponent(Tabs) await nextTick() expect(tabsWrapper.classes('el-tabs--left')).toBe(true) expect(tabsWrapper.find('.el-tabs__header').classes('is-left')).toBe(true) expect(tabsWrapper.find('.el-tabs__nav-wrap').classes('is-left')).toBe(true) expect(tabsWrapper.find('.el-tabs__nav').classes('is-left')).toBe(true) expect(tabsWrapper.find('.el-tabs__active-bar').classes('is-left')).toBe( true ) expect(tabsWrapper.find('.el-tabs__item').classes('is-left')).toBe(true) }) test('stretch', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, data() { return { tabPosition: 'bottom', } }, }) const tabsWrapper = wrapper.findComponent(Tabs) await nextTick() expect(tabsWrapper.find('.el-tabs__nav').classes('is-stretch')).toBe(true) wrapper.vm.tabPosition = 'left' await nextTick() expect(tabsWrapper.find('.el-tabs__nav').classes('is-stretch')).toBe(false) }) test('tab active bar offset', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, data() { return { tabPosition: 'bottom', } }, }) const tabsWrapper = wrapper.findComponent(Tabs) await nextTick() const mockCRect = jest .spyOn(wrapper.find('#tab-C').element, 'getBoundingClientRect') .mockReturnValue({ left: 300 } as DOMRect) const mockComputedStyle = jest .spyOn(window, 'getComputedStyle') .mockReturnValue({ paddingLeft: '0px' } as CSSStyleDeclaration) await wrapper.find('#tab-C').trigger('click') expect(tabsWrapper.find('.el-tabs__active-bar').attributes().style).toMatch( 'translateX(300px)' ) wrapper.vm.tabPosition = 'left' await nextTick() const mockCYRect = jest .spyOn(wrapper.find('#tab-C').element, 'getBoundingClientRect') .mockReturnValue({ top: 200 } as DOMRect) await wrapper.find('#tab-A').trigger('click') await wrapper.find('#tab-C').trigger('click') expect(tabsWrapper.find('.el-tabs__active-bar').attributes().style).toMatch( 'translateY(200px)' ) mockCRect.mockRestore() mockCYRect.mockRestore() mockComputedStyle.mockRestore() wrapper.unmount() }) test('horizonal-scrollable', async () => { // TODO: jsdom not support `clientWidth`. }) test('vertical-scrollable', async () => { // TODO: jsdom not support `clientWidth`. }) test('should work with lazy', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, }) const navWrapper = wrapper.findComponent(TabNav) await nextTick() const navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(wrapper.findAll('.el-tab-pane').length).toBe(3) await navItemsWrapper[3].trigger('click') expect(wrapper.findAll('.el-tab-pane').length).toBe(4) }) test('before leave', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, data() { return { activeName: 'tab-B', } }, methods: { beforeLeave() { return new window.Promise((resolve, reject) => { reject() }) }, }, }) const navWrapper = wrapper.findComponent(TabNav) const panesWrapper = wrapper.findAllComponents(TabPane) await nextTick() const navItemsWrapper = navWrapper.findAll('.el-tabs__item') expect(navItemsWrapper[1].classes('is-active')).toBe(true) expect(panesWrapper[1].attributes('style')).toBeFalsy() await navItemsWrapper[3].trigger('click') expect(navItemsWrapper[1].classes('is-active')).toBe(true) expect(panesWrapper[1].attributes('style')).toBeFalsy() }) test('keyboard event', async () => { const wrapper = mount({ components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane, }, template: ` A B C D `, data() { return { activeName: 'second', } }, }) const vm = wrapper.vm await nextTick() await wrapper .find('#tab-second') .trigger('keydown', { code: EVENT_CODE.right }) expect(vm.activeName).toEqual('third') await wrapper .find('#tab-third') .trigger('keydown', { code: EVENT_CODE.right }) expect(vm.activeName).toEqual('fourth') await wrapper .find('#tab-fourth') .trigger('keydown', { code: EVENT_CODE.right }) expect(vm.activeName).toEqual('first') await wrapper .find('#tab-first') .trigger('keydown', { code: EVENT_CODE.left }) expect(vm.activeName).toEqual('fourth') await wrapper .find('#tab-fourth') .trigger('keydown', { code: EVENT_CODE.left }) expect(vm.activeName).toEqual('third') }) test('resize', async () => { // TODO: jsdom not support `clientWidth`. }) })