diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 06:08:23 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 06:08:23 +0000 |
commit | be81c1578d65f25edfde8aa550f190b8d3e6d976 (patch) | |
tree | 0695fcaec3739d0ba486985bae2ebd85a3f49ee5 /spec/frontend/clusters_list | |
parent | bb19d18713d1b3da7d564826f5e21e8d9f9f36cd (diff) | |
download | gitlab-ce-be81c1578d65f25edfde8aa550f190b8d3e6d976.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/clusters_list')
-rw-r--r-- | spec/frontend/clusters_list/components/clusters_spec.js | 55 | ||||
-rw-r--r-- | spec/frontend/clusters_list/store/actions_spec.js | 50 |
2 files changed, 105 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js new file mode 100644 index 00000000000..825bc7813a5 --- /dev/null +++ b/spec/frontend/clusters_list/components/clusters_spec.js @@ -0,0 +1,55 @@ +import { createLocalVue, mount } from '@vue/test-utils'; +import { GlTable, GlLoadingIcon } from '@gitlab/ui'; +import Clusters from '~/clusters_list/components/clusters.vue'; +import Vuex from 'vuex'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Clusters', () => { + let wrapper; + + const findTable = () => wrapper.find(GlTable); + const findLoader = () => wrapper.find(GlLoadingIcon); + + const mountComponent = _state => { + const state = { clusters: [], endpoint: 'some/endpoint', ..._state }; + const store = new Vuex.Store({ + state, + }); + + wrapper = mount(Clusters, { localVue, store }); + }; + + beforeEach(() => { + mountComponent({ loading: false }); + }); + + describe('clusters table', () => { + it('displays a loader instead of the table while loading', () => { + mountComponent({ loading: true }); + expect(findLoader().exists()).toBe(true); + expect(findTable().exists()).toBe(false); + }); + + it('displays a table component', () => { + expect(findTable().exists()).toBe(true); + expect(findTable().exists()).toBe(true); + }); + + it('renders the correct table headers', () => { + const tableHeaders = wrapper.vm.$options.fields; + const headers = findTable().findAll('th'); + + expect(headers.length).toBe(tableHeaders.length); + + tableHeaders.forEach((headerText, i) => + expect(headers.at(i).text()).toEqual(headerText.label), + ); + }); + + it('should stack on smaller devices', () => { + expect(findTable().classes()).toContain('b-table-stacked-md'); + }); + }); +}); diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js new file mode 100644 index 00000000000..e903200bf1d --- /dev/null +++ b/spec/frontend/clusters_list/store/actions_spec.js @@ -0,0 +1,50 @@ +import MockAdapter from 'axios-mock-adapter'; +import flashError from '~/flash'; +import testAction from 'helpers/vuex_action_helper'; +import axios from '~/lib/utils/axios_utils'; +import * as types from '~/clusters_list/store/mutation_types'; +import * as actions from '~/clusters_list/store/actions'; + +jest.mock('~/flash.js'); + +describe('Clusters store actions', () => { + describe('fetchClusters', () => { + let mock; + const endpoint = '/clusters'; + const clusters = [{ name: 'test' }]; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => mock.restore()); + + it('should commit SET_CLUSTERS_DATA with received response', done => { + mock.onGet().reply(200, clusters); + + testAction( + actions.fetchClusters, + { endpoint }, + {}, + [ + { type: types.SET_CLUSTERS_DATA, payload: clusters }, + { type: types.SET_LOADING_STATE, payload: false }, + ], + [], + () => done(), + ); + }); + + it('should show flash on API error', done => { + mock.onGet().reply(400, 'Not Found'); + + testAction(actions.fetchClusters, { endpoint }, {}, [], [], () => { + expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error')); + done(); + }); + }); + }); +}); + +// prevent babel-plugin-rewire from generating an invalid default during karma tests +export default () => {}; |