diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-20 14:34:42 +0000 |
commit | 9f46488805e86b1bc341ea1620b866016c2ce5ed (patch) | |
tree | f9748c7e287041e37d6da49e0a29c9511dc34768 /spec/frontend/clusters_list | |
parent | dfc92d081ea0332d69c8aca2f0e745cb48ae5e6d (diff) | |
download | gitlab-ce-9f46488805e86b1bc341ea1620b866016c2ce5ed.tar.gz |
Add latest changes from gitlab-org/gitlab@13-0-stable-ee
Diffstat (limited to 'spec/frontend/clusters_list')
-rw-r--r-- | spec/frontend/clusters_list/components/clusters_spec.js | 110 | ||||
-rw-r--r-- | spec/frontend/clusters_list/mock_data.js | 18 | ||||
-rw-r--r-- | spec/frontend/clusters_list/store/actions_spec.js | 29 |
3 files changed, 124 insertions, 33 deletions
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js index 85c86b2c0a9..e2d2e4b73b3 100644 --- a/spec/frontend/clusters_list/components/clusters_spec.js +++ b/spec/frontend/clusters_list/components/clusters_spec.js @@ -1,46 +1,68 @@ -import Vuex from 'vuex'; -import { createLocalVue, mount } from '@vue/test-utils'; -import { GlTable, GlLoadingIcon } from '@gitlab/ui'; +import axios from '~/lib/utils/axios_utils'; import Clusters from '~/clusters_list/components/clusters.vue'; -import mockData from '../mock_data'; - -const localVue = createLocalVue(); -localVue.use(Vuex); +import ClusterStore from '~/clusters_list/store'; +import MockAdapter from 'axios-mock-adapter'; +import { apiData } from '../mock_data'; +import { mount } from '@vue/test-utils'; +import { GlLoadingIcon, GlTable, GlPagination } from '@gitlab/ui'; describe('Clusters', () => { + let mock; + let store; let wrapper; - const findTable = () => wrapper.find(GlTable); + const endpoint = 'some/endpoint'; + const findLoader = () => wrapper.find(GlLoadingIcon); + const findPaginatedButtons = () => wrapper.find(GlPagination); + const findTable = () => wrapper.find(GlTable); const findStatuses = () => findTable().findAll('.js-status'); - const mountComponent = _state => { - const state = { clusters: mockData, endpoint: 'some/endpoint', ..._state }; - const store = new Vuex.Store({ - state, - }); + const mockPollingApi = (response, body, header) => { + mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header); + }; - wrapper = mount(Clusters, { localVue, store }); + const mountWrapper = () => { + store = ClusterStore({ endpoint }); + wrapper = mount(Clusters, { store }); + return axios.waitForAll(); }; beforeEach(() => { - mountComponent({ loading: false }); + mock = new MockAdapter(axios); + mockPollingApi(200, apiData, { + 'x-total': apiData.clusters.length, + 'x-per-page': 20, + 'x-page': 1, + }); + + return mountWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + mock.restore(); }); 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); + describe('when data is loading', () => { + beforeEach(() => { + wrapper.vm.$store.state.loading = true; + return wrapper.vm.$nextTick(); + }); + + it('displays a loader instead of the table while loading', () => { + 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 tableHeaders = wrapper.vm.fields; const headers = findTable().findAll('th'); expect(headers.length).toBe(tableHeaders.length); @@ -62,7 +84,8 @@ describe('Clusters', () => { ${'unreachable'} | ${'bg-danger'} | ${1} ${'authentication_failure'} | ${'bg-warning'} | ${2} ${'deleting'} | ${null} | ${3} - ${'connected'} | ${'bg-success'} | ${4} + ${'created'} | ${'bg-success'} | ${4} + ${'default'} | ${'bg-white'} | ${5} `('renders a status for each cluster', ({ statusName, className, lineNumber }) => { const statuses = findStatuses(); const status = statuses.at(lineNumber); @@ -75,4 +98,47 @@ describe('Clusters', () => { } }); }); + + describe('pagination', () => { + const perPage = apiData.clusters.length; + const totalFirstPage = 100; + const totalSecondPage = 500; + + beforeEach(() => { + mockPollingApi(200, apiData, { + 'x-total': totalFirstPage, + 'x-per-page': perPage, + 'x-page': 1, + }); + return mountWrapper(); + }); + + it('should load to page 1 with header values', () => { + const buttons = findPaginatedButtons(); + + expect(buttons.props('perPage')).toBe(perPage); + expect(buttons.props('totalItems')).toBe(totalFirstPage); + expect(buttons.props('value')).toBe(1); + }); + + describe('when updating currentPage', () => { + beforeEach(() => { + mockPollingApi(200, apiData, { + 'x-total': totalSecondPage, + 'x-per-page': perPage, + 'x-page': 2, + }); + wrapper.setData({ currentPage: 2 }); + return axios.waitForAll(); + }); + + it('should change pagination when currentPage changes', () => { + const buttons = findPaginatedButtons(); + + expect(buttons.props('perPage')).toBe(perPage); + expect(buttons.props('totalItems')).toBe(totalSecondPage); + expect(buttons.props('value')).toBe(2); + }); + }); + }); }); diff --git a/spec/frontend/clusters_list/mock_data.js b/spec/frontend/clusters_list/mock_data.js index 5398975d81c..9a90a378f31 100644 --- a/spec/frontend/clusters_list/mock_data.js +++ b/spec/frontend/clusters_list/mock_data.js @@ -1,4 +1,4 @@ -export default [ +export const clusterList = [ { name: 'My Cluster 1', environmentScope: '*', @@ -40,8 +40,22 @@ export default [ environmentScope: 'development', size: '12', clusterType: 'project_type', - status: 'connected', + status: 'created', + cpu: '6 (100% free)', + memory: '20.12 (35% free)', + }, + { + name: 'My Cluster 6', + environmentScope: '*', + size: '1', + clusterType: 'project_type', + status: 'cleanup_ongoing', cpu: '6 (100% free)', memory: '20.12 (35% free)', }, ]; + +export const apiData = { + clusters: clusterList, + has_ancestor_clusters: false, +}; diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js index e903200bf1d..70766af3ec4 100644 --- a/spec/frontend/clusters_list/store/actions_spec.js +++ b/spec/frontend/clusters_list/store/actions_spec.js @@ -2,6 +2,7 @@ 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 { apiData } from '../mock_data'; import * as types from '~/clusters_list/store/mutation_types'; import * as actions from '~/clusters_list/store/actions'; @@ -10,8 +11,6 @@ jest.mock('~/flash.js'); describe('Clusters store actions', () => { describe('fetchClusters', () => { let mock; - const endpoint = '/clusters'; - const clusters = [{ name: 'test' }]; beforeEach(() => { mock = new MockAdapter(axios); @@ -20,14 +19,29 @@ describe('Clusters store actions', () => { afterEach(() => mock.restore()); it('should commit SET_CLUSTERS_DATA with received response', done => { - mock.onGet().reply(200, clusters); + const headers = { + 'x-total': apiData.clusters.length, + 'x-per-page': 20, + 'x-page': 1, + }; + + const paginationInformation = { + nextPage: NaN, + page: 1, + perPage: 20, + previousPage: NaN, + total: apiData.clusters.length, + totalPages: NaN, + }; + + mock.onGet().reply(200, apiData, headers); testAction( actions.fetchClusters, - { endpoint }, + { endpoint: apiData.endpoint }, {}, [ - { type: types.SET_CLUSTERS_DATA, payload: clusters }, + { type: types.SET_CLUSTERS_DATA, payload: { data: apiData, paginationInformation } }, { type: types.SET_LOADING_STATE, payload: false }, ], [], @@ -38,13 +52,10 @@ describe('Clusters store actions', () => { it('should show flash on API error', done => { mock.onGet().reply(400, 'Not Found'); - testAction(actions.fetchClusters, { endpoint }, {}, [], [], () => { + testAction(actions.fetchClusters, { endpoint: apiData.endpoint }, {}, [], [], () => { expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error')); done(); }); }); }); }); - -// prevent babel-plugin-rewire from generating an invalid default during karma tests -export default () => {}; |