diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-26 14:02:03 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-26 14:02:03 +0300 |
commit | c34a47c39a687b2284f43fdf827d6fd2bf90e11d (patch) | |
tree | 80edaaafcfb3ef60dba96943a3030e5a9d64bec0 | |
parent | 485cb91c2f1a092504fe0b9540308424e76c5c42 (diff) |
Adds tests for new table component
Fixes eslint problems
-rw-r--r-- | app/assets/javascripts/registry/components/app.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/collapsible_container.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/registry/components/table_registry.vue | 9 | ||||
-rw-r--r-- | spec/javascripts/registry/components/app_spec.js | 4 | ||||
-rw-r--r-- | spec/javascripts/registry/components/collapsible_container_spec.js | 87 | ||||
-rw-r--r-- | spec/javascripts/registry/components/table_registry_spec.js | 49 | ||||
-rw-r--r-- | spec/javascripts/registry/getters_spec.js (renamed from spec/javascripts/registry/stores/getters_spec.js) | 0 | ||||
-rw-r--r-- | spec/javascripts/registry/mock_data.js (renamed from spec/javascripts/registry/stores/mock_data.js) | 31 | ||||
-rw-r--r-- | spec/javascripts/registry/stores/actions_spec.js | 2 | ||||
-rw-r--r-- | spec/javascripts/registry/stores/mutations_spec.js | 2 |
10 files changed, 101 insertions, 89 deletions
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index f1ca77a2694..2d8ca443ea7 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -37,7 +37,7 @@ }, mounted() { this.fetchRepos() - .catch(() => Flash(errorMessagesTypes.FETCH_REPOS)); + .catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS])); }, }; </script> diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 7c341b0e91b..170070ff92c 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -1,6 +1,7 @@ <script> + /* globals Flash */ import { mapActions } from 'vuex'; - import { n__, s__ } from '../../locale'; + import '../../flash'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -37,6 +38,7 @@ toggleRepo() { this.isOpen = !this.isOpen; + if (this.isOpen) { this.fetchList({ repo: this.repo }) .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index 491a90363db..ba2dd856e0c 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -1,6 +1,8 @@ <script> + /* globals Flash */ import { mapActions } from 'vuex'; - import { n__, s__ } from '../../locale'; + import { n__ } from '../../locale'; + import '../../flash'; import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -39,14 +41,15 @@ const pluralize = n__('layer', 'layers', item.layers); return `${item.layers} ${pluralize}`; }, - handleDeleteRegistry(registry) { + + handleDeleteRegistry(registry) { this.deleteRegistry(registry) .then(() => this.fetchList({ repo: this.repo })) .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); }, onPageChange(pageNumber) { - this.fetchList({ repo: this.repo, page }) + this.fetchList({ repo: this.repo, page: pageNumber }) .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY)); }, diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 2d4bc010a00..43e7d9e1224 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import registry from '~/registry/components/app.vue'; import mountComponent from '../../helpers/vue_mount_component_helper'; -import { reposServerResponse } from '../stores/mock_data'; +import { reposServerResponse } from '../mock_data'; describe('Registry List', () => { let vm; @@ -59,7 +59,7 @@ describe('Registry List', () => { it('should open the container', (done) => { setTimeout(() => { Vue.nextTick(() => { - vm.$el.querySelector('.container-image a').click(); + vm.$el.querySelector('.js-toggle-repo').click(); Vue.nextTick(() => { expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual('fa fa-chevron-up'); done(); diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js index a659f08e250..5891921318a 100644 --- a/spec/javascripts/registry/components/collapsible_container_spec.js +++ b/spec/javascripts/registry/components/collapsible_container_spec.js @@ -1,45 +1,20 @@ import Vue from 'vue'; import collapsibleComponent from '~/registry/components/collapsible_container.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import store from '~/registry/stores'; +import { repoPropsData } from '../mock_data'; describe('collapsible registry container', () => { let vm; let Component; - let mockData; beforeEach(() => { Component = Vue.extend(collapsibleComponent); - mockData = { - canDelete: true, - destroyPath: 'path', - id: '123', - isLoading: false, - list: [ - { - tag: 'centos6', - revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', - shortRevision: 'b118ab5b0', - size: 19, - layers: 10, - location: 'location', - createdAt: 1505828744434, - destroyPath: 'path', - canDelete: true, - }, - ], - location: 'location', - name: 'foo', - tagsPath: 'path', - pagination: { - perPage: 5, - page: 1, - total: 13, - totalPages: 1, - nextPage: null, - previousPage: null, + vm = new Component({ + store, + propsData: { + repo: repoPropsData, }, - }; - vm = mountComponent(Component, { repo: mockData }); + }).$mount(); }); afterEach(() => { @@ -80,52 +55,4 @@ describe('collapsible registry container', () => { expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined(); }); }); - - describe('registry list', () => { - it('should render a table with the registry list', (done) => { - vm.$el.querySelector('.js-toggle-repo').click(); - - Vue.nextTick(() => { - expect( - vm.$el.querySelectorAll('table tbody tr').length, - ).toEqual(mockData.list.length); - done(); - }); - }); - - it('should render registry tag', (done) => { - vm.$el.querySelector('.js-toggle-repo').click(); - - Vue.nextTick(() => { - const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' '); - expect(textRendered).toContain(mockData.list[0].tag); - expect(textRendered).toContain(mockData.list[0].shortRevision); - expect(textRendered).toContain(mockData.list[0].layers); - expect(textRendered).toContain(mockData.list[0].size); - done(); - }); - }); - - it('should be possible to delete a registry', (done) => { - vm.$el.querySelector('.js-toggle-repo').click(); - - Vue.nextTick(() => { - expect( - vm.$el.querySelector('.table tbody tr .js-delete-registry'), - ).toBeDefined(); - done(); - }); - }); - - describe('pagination', () => { - it('should be possible to change the page', (done) => { - vm.$el.querySelector('.js-toggle-repo').click(); - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.gl-pagination')).toBeDefined(); - done(); - }); - }); - }); - }); }); diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js new file mode 100644 index 00000000000..6aa61afc445 --- /dev/null +++ b/spec/javascripts/registry/components/table_registry_spec.js @@ -0,0 +1,49 @@ +import Vue from 'vue'; +import tableRegistry from '~/registry/components/table_registry.vue'; +import store from '~/registry/stores'; +import { repoPropsData } from '../mock_data'; + +describe('table registry', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(tableRegistry); + vm = new Component({ + store, + propsData: { + repo: repoPropsData, + }, + }).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render a table with the registry list', () => { + expect( + vm.$el.querySelectorAll('table tbody tr').length, + ).toEqual(repoPropsData.list.length); + }); + + it('should render registry tag', () => { + const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' '); + expect(textRendered).toContain(repoPropsData.list[0].tag); + expect(textRendered).toContain(repoPropsData.list[0].shortRevision); + expect(textRendered).toContain(repoPropsData.list[0].layers); + expect(textRendered).toContain(repoPropsData.list[0].size); + }); + + it('should be possible to delete a registry', () => { + expect( + vm.$el.querySelector('.table tbody tr .js-delete-registry'), + ).toBeDefined(); + }); + + describe('pagination', () => { + it('should be possible to change the page', () => { + expect(vm.$el.querySelector('.gl-pagination')).toBeDefined(); + }); + }); +}); diff --git a/spec/javascripts/registry/stores/getters_spec.js b/spec/javascripts/registry/getters_spec.js index 3d989541881..3d989541881 100644 --- a/spec/javascripts/registry/stores/getters_spec.js +++ b/spec/javascripts/registry/getters_spec.js diff --git a/spec/javascripts/registry/stores/mock_data.js b/spec/javascripts/registry/mock_data.js index 07c51503b7f..18600d00bff 100644 --- a/spec/javascripts/registry/stores/mock_data.js +++ b/spec/javascripts/registry/mock_data.js @@ -89,3 +89,34 @@ export const parsedRegistryServerResponse = [ canDelete: false, }, ]; + +export const repoPropsData = { + canDelete: true, + destroyPath: 'path', + id: '123', + isLoading: false, + list: [ + { + tag: 'centos6', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + shortRevision: 'b118ab5b0', + size: 19, + layers: 10, + location: 'location', + createdAt: 1505828744434, + destroyPath: 'path', + canDelete: true, + }, + ], + location: 'location', + name: 'foo', + tagsPath: 'path', + pagination: { + perPage: 5, + page: 1, + total: 13, + totalPages: 1, + nextPage: null, + previousPage: null, + }, +}; diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js index 3c53956510d..3c9da4f107b 100644 --- a/spec/javascripts/registry/stores/actions_spec.js +++ b/spec/javascripts/registry/stores/actions_spec.js @@ -9,7 +9,7 @@ import { reposServerResponse, registryServerResponse, parsedReposServerResponse, -} from './mock_data'; +} from '../mock_data'; Vue.use(VueResource); diff --git a/spec/javascripts/registry/stores/mutations_spec.js b/spec/javascripts/registry/stores/mutations_spec.js index 82c0d8c7f07..2e4c0659daa 100644 --- a/spec/javascripts/registry/stores/mutations_spec.js +++ b/spec/javascripts/registry/stores/mutations_spec.js @@ -6,7 +6,7 @@ import { registryServerResponse, parsedReposServerResponse, parsedRegistryServerResponse, -} from './mock_data'; +} from '../mock_data'; describe('Mutations Registry Store', () => { let mockState; |