diff options
Diffstat (limited to 'spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js')
-rw-r--r-- | spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js | 50 |
1 files changed, 28 insertions, 22 deletions
diff --git a/spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js b/spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js index 1401308f7f0..2e1e21299b3 100644 --- a/spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js +++ b/spec/frontend/vue_mr_widget/components/artifacts_list_app_spec.js @@ -1,19 +1,20 @@ -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import Vuex from 'vuex'; +import Vue, { nextTick } from 'vue'; import MockAdapter from 'axios-mock-adapter'; import { GlLoadingIcon } from '@gitlab/ui'; -import { TEST_HOST } from 'helpers/test_constants'; +import { TEST_HOST as FAKE_ENDPOINT } from 'helpers/test_constants'; import axios from '~/lib/utils/axios_utils'; import ArtifactsListApp from '~/vue_merge_request_widget/components/artifacts_list_app.vue'; -import createStore from '~/vue_merge_request_widget/stores/artifacts_list'; -import { artifactsList } from './mock_data'; +import { getStoreConfig } from '~/vue_merge_request_widget/stores/artifacts_list'; +import { artifacts } from '../mock_data'; + +Vue.use(Vuex); describe('Merge Requests Artifacts list app', () => { let wrapper; + let store; let mock; - const store = createStore(); - const localVue = createLocalVue(); - localVue.use(Vuex); const actionSpies = { fetchArtifacts: jest.fn(), @@ -29,15 +30,20 @@ describe('Merge Requests Artifacts list app', () => { }); const createComponent = () => { + const storeConfig = getStoreConfig(); + store = new Vuex.Store({ + ...storeConfig, + actions: { + ...storeConfig.actions, + ...actionSpies, + }, + }); + wrapper = mount(ArtifactsListApp, { propsData: { - endpoint: TEST_HOST, + endpoint: FAKE_ENDPOINT, }, store, - methods: { - ...actionSpies, - }, - localVue, }); }; @@ -50,7 +56,7 @@ describe('Merge Requests Artifacts list app', () => { beforeEach(() => { createComponent(); store.dispatch('requestArtifacts'); - return wrapper.vm.$nextTick(); + return nextTick(); }); it('renders a loading icon', () => { @@ -72,12 +78,12 @@ describe('Merge Requests Artifacts list app', () => { describe('with results', () => { beforeEach(() => { createComponent(); - mock.onGet(wrapper.vm.$store.state.endpoint).reply(200, artifactsList, {}); + mock.onGet(FAKE_ENDPOINT).reply(200, artifacts, {}); store.dispatch('receiveArtifactsSuccess', { - data: artifactsList, + data: artifacts, status: 200, }); - return wrapper.vm.$nextTick(); + return nextTick(); }); it('renders a title with the number of artifacts', () => { @@ -91,11 +97,11 @@ describe('Merge Requests Artifacts list app', () => { }); describe('on click', () => { - it('renders the list of artifacts', () => { + it('renders the list of artifacts', async () => { findTitle().trigger('click'); - wrapper.vm.$nextTick(() => { - expect(findTableRows().length).toEqual(2); - }); + await nextTick(); + + expect(findTableRows().length).toEqual(2); }); }); }); @@ -103,9 +109,9 @@ describe('Merge Requests Artifacts list app', () => { describe('with error', () => { beforeEach(() => { createComponent(); - mock.onGet(wrapper.vm.$store.state.endpoint).reply(500, {}, {}); + mock.onGet(FAKE_ENDPOINT).reply(500, {}, {}); store.dispatch('receiveArtifactsError'); - return wrapper.vm.$nextTick(); + return nextTick(); }); it('renders the error state', () => { |