diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 03:10:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 03:10:35 +0300 |
commit | e7cc427bc63dccac50cc3ccda2976befcea1ecf5 (patch) | |
tree | 975f48cc89009a9877c305ddf4dbea2a3e89d233 /spec/frontend/vue_shared/components/navigation_tabs_spec.js | |
parent | acba9e99b4f8bfeaaed143b72b07170a8506f893 (diff) |
Add latest changes from gitlab-org/gitlab@master
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']]); }); }); |