diff options
Diffstat (limited to 'spec/frontend/error_tracking')
-rw-r--r-- | spec/frontend/error_tracking/components/error_tracking_list_spec.js | 101 |
1 files changed, 61 insertions, 40 deletions
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js index f00ba884a6c..66104724163 100644 --- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js +++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js @@ -1,15 +1,7 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { createLocalVue, mount } from '@vue/test-utils'; import Vuex from 'vuex'; -import { - GlEmptyState, - GlLoadingIcon, - GlTable, - GlLink, - GlFormInput, - GlDropdown, - GlDropdownItem, - GlPagination, -} from '@gitlab/ui'; +import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination } from '@gitlab/ui'; +import stubChildren from 'helpers/stub_children'; import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue'; import errorsList from './list_mock.json'; @@ -32,19 +24,12 @@ describe('ErrorTrackingList', () => { function mountComponent({ errorTrackingEnabled = true, userCanEnableErrorTracking = true, - sync = true, - stubs = { - 'gl-link': GlLink, - 'gl-table': GlTable, - 'gl-pagination': GlPagination, - 'gl-dropdown': GlDropdown, - 'gl-dropdown-item': GlDropdownItem, - }, + stubs = {}, } = {}) { - wrapper = shallowMount(ErrorTrackingList, { + wrapper = mount(ErrorTrackingList, { localVue, store, - sync, + sync: false, propsData: { indexPath: '/path', enableErrorTrackingLink: '/link', @@ -52,7 +37,10 @@ describe('ErrorTrackingList', () => { errorTrackingEnabled, illustrationPath: 'illustration/path', }, - stubs, + stubs: { + ...stubChildren(ErrorTrackingList), + ...stubs, + }, data() { return { errorSearchQuery: 'search' }; }, @@ -122,7 +110,14 @@ describe('ErrorTrackingList', () => { beforeEach(() => { store.state.list.loading = false; store.state.list.errors = errorsList; - mountComponent(); + mountComponent({ + stubs: { + GlTable: false, + GlDropdown: false, + GlDropdownItem: false, + GlLink: false, + }, + }); }); it('shows table', () => { @@ -173,7 +168,13 @@ describe('ErrorTrackingList', () => { store.state.list.loading = false; store.state.list.errors = []; - mountComponent(); + mountComponent({ + stubs: { + GlTable: false, + GlDropdown: false, + GlDropdownItem: false, + }, + }); }); it('shows empty table', () => { @@ -187,7 +188,7 @@ describe('ErrorTrackingList', () => { }); it('restarts polling', () => { - findRefreshLink().trigger('click'); + findRefreshLink().vm.$emit('click'); expect(actions.restartPolling).toHaveBeenCalled(); }); }); @@ -211,8 +212,8 @@ describe('ErrorTrackingList', () => { errorTrackingEnabled: false, userCanEnableErrorTracking: false, stubs: { - 'gl-link': GlLink, - 'gl-empty-state': GlEmptyState, + GlLink: false, + GlEmptyState: false, }, }); }); @@ -226,7 +227,12 @@ describe('ErrorTrackingList', () => { describe('recent searches', () => { beforeEach(() => { - mountComponent(); + mountComponent({ + stubs: { + GlDropdown: false, + GlDropdownItem: false, + }, + }); }); it('shows empty message', () => { @@ -238,11 +244,12 @@ describe('ErrorTrackingList', () => { it('shows items', () => { store.state.list.recentSearches = ['great', 'search']; - const dropdownItems = wrapper.findAll('.filtered-search-box li'); - - expect(dropdownItems.length).toBe(3); - expect(dropdownItems.at(0).text()).toBe('great'); - expect(dropdownItems.at(1).text()).toBe('search'); + return wrapper.vm.$nextTick().then(() => { + const dropdownItems = wrapper.findAll('.filtered-search-box li'); + expect(dropdownItems.length).toBe(3); + expect(dropdownItems.at(0).text()).toBe('great'); + expect(dropdownItems.at(1).text()).toBe('search'); + }); }); describe('clear', () => { @@ -257,16 +264,20 @@ describe('ErrorTrackingList', () => { it('is visible when list has items', () => { store.state.list.recentSearches = ['some', 'searches']; - expect(clearRecentButton().exists()).toBe(true); - expect(clearRecentButton().text()).toBe('Clear recent searches'); + return wrapper.vm.$nextTick().then(() => { + expect(clearRecentButton().exists()).toBe(true); + expect(clearRecentButton().text()).toBe('Clear recent searches'); + }); }); it('clears items on click', () => { store.state.list.recentSearches = ['some', 'searches']; - clearRecentButton().vm.$emit('click'); + return wrapper.vm.$nextTick().then(() => { + clearRecentButton().vm.$emit('click'); - expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1); + expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1); + }); }); }); }); @@ -287,7 +298,11 @@ describe('ErrorTrackingList', () => { describe('and the user is on the first page', () => { beforeEach(() => { store.state.list.loading = false; - mountComponent({ sync: false }); + mountComponent({ + stubs: { + GlPagination: false, + }, + }); }); it('shows a disabled Prev button', () => { @@ -299,8 +314,14 @@ describe('ErrorTrackingList', () => { describe('and the previous button is clicked', () => { beforeEach(() => { store.state.list.loading = false; - mountComponent({ sync: false }); + mountComponent({ + stubs: { + GlTable: false, + GlPagination: false, + }, + }); wrapper.setData({ pageValue: 2 }); + return wrapper.vm.$nextTick(); }); it('fetches the previous page of results', () => { @@ -318,7 +339,7 @@ describe('ErrorTrackingList', () => { describe('and the next page button is clicked', () => { beforeEach(() => { store.state.list.loading = false; - mountComponent({ sync: false }); + mountComponent(); }); it('fetches the next page of results', () => { |