diff options
Diffstat (limited to 'spec/frontend/ide/components/activity_bar_spec.js')
-rw-r--r-- | spec/frontend/ide/components/activity_bar_spec.js | 72 |
1 files changed, 34 insertions, 38 deletions
diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js index 39fe2c7e723..a97e883a8bf 100644 --- a/spec/frontend/ide/components/activity_bar_spec.js +++ b/spec/frontend/ide/components/activity_bar_spec.js @@ -1,86 +1,82 @@ -import Vue, { nextTick } from 'vue'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { GlBadge } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import ActivityBar from '~/ide/components/activity_bar.vue'; import { leftSidebarViews } from '~/ide/constants'; import { createStore } from '~/ide/stores'; -describe('IDE activity bar', () => { - const Component = Vue.extend(ActivityBar); - let vm; +describe('IDE ActivityBar component', () => { + let wrapper; let store; - const findChangesBadge = () => vm.$el.querySelector('.badge'); + const findChangesBadge = () => wrapper.findComponent(GlBadge); - beforeEach(() => { + const mountComponent = (state) => { store = createStore(); - - Vue.set(store.state.projects, 'abcproject', { - web_url: 'testing', + store.replaceState({ + ...store.state, + projects: { abcproject: { web_url: 'testing' } }, + currentProjectId: 'abcproject', + ...state, }); - Vue.set(store.state, 'currentProjectId', 'abcproject'); - vm = createComponentWithStore(Component, store); - }); + wrapper = shallowMount(ActivityBar, { store }); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('updateActivityBarView', () => { beforeEach(() => { - jest.spyOn(vm, 'updateActivityBarView').mockImplementation(() => {}); - - vm.$mount(); + mountComponent(); + jest.spyOn(wrapper.vm, 'updateActivityBarView').mockImplementation(() => {}); }); it('calls updateActivityBarView with edit value on click', () => { - vm.$el.querySelector('.js-ide-edit-mode').click(); + wrapper.find('.js-ide-edit-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name); }); it('calls updateActivityBarView with commit value on click', () => { - vm.$el.querySelector('.js-ide-commit-mode').click(); + wrapper.find('.js-ide-commit-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name); }); it('calls updateActivityBarView with review value on click', () => { - vm.$el.querySelector('.js-ide-review-mode').click(); + wrapper.find('.js-ide-review-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name); }); }); describe('active item', () => { - beforeEach(() => { - vm.$mount(); - }); - it('sets edit item active', () => { - expect(vm.$el.querySelector('.js-ide-edit-mode').classList).toContain('active'); + mountComponent(); + + expect(wrapper.find('.js-ide-edit-mode').classes()).toContain('active'); }); - it('sets commit item active', async () => { - vm.$store.state.currentActivityView = leftSidebarViews.commit.name; + it('sets commit item active', () => { + mountComponent({ currentActivityView: leftSidebarViews.commit.name }); - await nextTick(); - expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active'); + expect(wrapper.find('.js-ide-commit-mode').classes()).toContain('active'); }); }); describe('changes badge', () => { it('is rendered when files are staged', () => { - store.state.stagedFiles = [{ path: '/path/to/file' }]; - vm.$mount(); + mountComponent({ stagedFiles: [{ path: '/path/to/file' }] }); - expect(findChangesBadge()).toBeTruthy(); - expect(findChangesBadge().textContent.trim()).toBe('1'); + expect(findChangesBadge().exists()).toBe(true); + expect(findChangesBadge().text()).toBe('1'); }); it('is not rendered when no changes are present', () => { - vm.$mount(); - expect(findChangesBadge()).toBeFalsy(); + mountComponent(); + + expect(findChangesBadge().exists()).toBe(false); }); }); }); |