diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/navigation_tabs_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/navigation_tabs_spec.js | 82 |
1 files changed, 43 insertions, 39 deletions
diff --git a/spec/frontend/vue_shared/components/navigation_tabs_spec.js b/spec/frontend/vue_shared/components/navigation_tabs_spec.js index 561456d614e..b1119bfb150 100644 --- a/spec/frontend/vue_shared/components/navigation_tabs_spec.js +++ b/spec/frontend/vue_shared/components/navigation_tabs_spec.js @@ -1,64 +1,68 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import navigationTabs from '~/vue_shared/components/navigation_tabs.vue'; +import { mount } from '@vue/test-utils'; +import { GlTab } from '@gitlab/ui'; +import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; describe('navigation tabs component', () => { - let vm; - let Component; - let data; + let wrapper; - beforeEach(() => { - data = [ - { - name: 'All', - scope: 'all', - count: 1, - isActive: true, - }, - { - name: 'Pending', - scope: 'pending', - count: 0, - isActive: false, - }, - { - name: 'Running', - scope: 'running', - isActive: false, + const data = [ + { + name: 'All', + scope: 'all', + count: 1, + isActive: true, + }, + { + name: 'Pending', + scope: 'pending', + count: 0, + isActive: false, + }, + { + name: 'Running', + scope: 'running', + isActive: false, + }, + ]; + + const createComponent = () => { + wrapper = mount(NavigationTabs, { + propsData: { + tabs: data, + scope: 'pipelines', }, - ]; + }); + }; - Component = Vue.extend(navigationTabs); - vm = mountComponent(Component, { tabs: data, scope: 'pipelines' }); + beforeEach(() => { + createComponent(); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); it('should render tabs', () => { - expect(vm.$el.querySelectorAll('li').length).toEqual(data.length); + expect(wrapper.findAll(GlTab)).toHaveLength(data.length); }); it('should render active tab', () => { - expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined(); + expect(wrapper.find('.js-pipelines-tab-all').classes('active')).toBe(true); }); it('should render badge', () => { - expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1'); - expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual( - '0', - ); + expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('1'); + expect(wrapper.find('.js-pipelines-tab-pending').text()).toContain('0'); }); it('should not render badge', () => { - expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null); + expect(wrapper.find('.js-pipelines-tab-running .badge').exists()).toBe(false); }); - it('should trigger onTabClick', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - vm.$el.querySelector('.js-pipelines-tab-pending').click(); + it('should trigger onTabClick', async () => { + await wrapper.find('.js-pipelines-tab-pending').trigger('click'); - expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending'); + expect(wrapper.emitted('onChangeTab')).toEqual([['pending']]); }); }); |