From c34a47c39a687b2284f43fdf827d6fd2bf90e11d Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 26 Sep 2017 12:02:03 +0100 Subject: Adds tests for new table component Fixes eslint problems --- spec/javascripts/registry/components/app_spec.js | 4 +- .../components/collapsible_container_spec.js | 87 ++------------- .../registry/components/table_registry_spec.js | 49 +++++++++ spec/javascripts/registry/getters_spec.js | 43 ++++++++ spec/javascripts/registry/mock_data.js | 122 +++++++++++++++++++++ spec/javascripts/registry/stores/actions_spec.js | 2 +- spec/javascripts/registry/stores/getters_spec.js | 43 -------- spec/javascripts/registry/stores/mock_data.js | 91 --------------- spec/javascripts/registry/stores/mutations_spec.js | 2 +- 9 files changed, 225 insertions(+), 218 deletions(-) create mode 100644 spec/javascripts/registry/components/table_registry_spec.js create mode 100644 spec/javascripts/registry/getters_spec.js create mode 100644 spec/javascripts/registry/mock_data.js delete mode 100644 spec/javascripts/registry/stores/getters_spec.js delete mode 100644 spec/javascripts/registry/stores/mock_data.js (limited to 'spec/javascripts/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/getters_spec.js b/spec/javascripts/registry/getters_spec.js new file mode 100644 index 00000000000..3d989541881 --- /dev/null +++ b/spec/javascripts/registry/getters_spec.js @@ -0,0 +1,43 @@ +import * as getters from '~/registry/stores/getters'; + +describe('Getters Registry Store', () => { + let state; + + beforeEach(() => { + state = { + isLoading: false, + endpoint: '/root/empty-project/container_registry.json', + repos: [{ + canDelete: true, + destroyPath: 'bar', + id: '134', + isLoading: false, + list: [], + location: 'foo', + name: 'gitlab-org/omnibus-gitlab/foo', + tagsPath: 'foo', + }, { + canDelete: true, + destroyPath: 'bar', + id: '123', + isLoading: false, + list: [], + location: 'foo', + name: 'gitlab-org/omnibus-gitlab', + tagsPath: 'foo', + }], + }; + }); + + describe('isLoading', () => { + it('should return the isLoading property', () => { + expect(getters.isLoading(state)).toEqual(state.isLoading); + }); + }); + + describe('repos', () => { + it('should return the repos', () => { + expect(getters.repos(state)).toEqual(state.repos); + }); + }); +}); diff --git a/spec/javascripts/registry/mock_data.js b/spec/javascripts/registry/mock_data.js new file mode 100644 index 00000000000..18600d00bff --- /dev/null +++ b/spec/javascripts/registry/mock_data.js @@ -0,0 +1,122 @@ +export const defaultState = { + isLoading: false, + endpoint: '', + repos: [], +}; + +export const reposServerResponse = [ + { + destroy_path: 'path', + id: '123', + location: 'location', + path: 'foo', + tags_path: 'tags_path', + }, + { + destroy_path: 'path_', + id: '456', + location: 'location_', + path: 'bar', + tags_path: 'tags_path_', + }, +]; + +export const registryServerResponse = [ + { + name: 'centos7', + short_revision: 'b118ab5b0', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + size: 679, + layers: 19, + location: 'location', + created_at: 1505828744434, + destroy_path: 'path_', + }, + { + name: 'centos6', + short_revision: 'b118ab5b0', + revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', + size: 679, + layers: 19, + location: 'location', + created_at: 1505828744434, + }]; + +export const parsedReposServerResponse = [ + { + canDelete: true, + destroyPath: reposServerResponse[0].destroy_path, + id: reposServerResponse[0].id, + isLoading: false, + list: [], + location: reposServerResponse[0].location, + name: reposServerResponse[0].path, + tagsPath: reposServerResponse[0].tags_path, + }, + { + canDelete: true, + destroyPath: reposServerResponse[1].destroy_path, + id: reposServerResponse[1].id, + isLoading: false, + list: [], + location: reposServerResponse[1].location, + name: reposServerResponse[1].path, + tagsPath: reposServerResponse[1].tags_path, + }, +]; + +export const parsedRegistryServerResponse = [ + { + tag: registryServerResponse[0].name, + revision: registryServerResponse[0].revision, + shortRevision: registryServerResponse[0].short_revision, + size: registryServerResponse[0].size, + layers: registryServerResponse[0].layers, + location: registryServerResponse[0].location, + createdAt: registryServerResponse[0].created_at, + destroyPath: registryServerResponse[0].destroy_path, + canDelete: true, + }, + { + tag: registryServerResponse[1].name, + revision: registryServerResponse[1].revision, + shortRevision: registryServerResponse[1].short_revision, + size: registryServerResponse[1].size, + layers: registryServerResponse[1].layers, + location: registryServerResponse[1].location, + createdAt: registryServerResponse[1].created_at, + destroyPath: registryServerResponse[1].destroy_path, + 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/getters_spec.js b/spec/javascripts/registry/stores/getters_spec.js deleted file mode 100644 index 3d989541881..00000000000 --- a/spec/javascripts/registry/stores/getters_spec.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as getters from '~/registry/stores/getters'; - -describe('Getters Registry Store', () => { - let state; - - beforeEach(() => { - state = { - isLoading: false, - endpoint: '/root/empty-project/container_registry.json', - repos: [{ - canDelete: true, - destroyPath: 'bar', - id: '134', - isLoading: false, - list: [], - location: 'foo', - name: 'gitlab-org/omnibus-gitlab/foo', - tagsPath: 'foo', - }, { - canDelete: true, - destroyPath: 'bar', - id: '123', - isLoading: false, - list: [], - location: 'foo', - name: 'gitlab-org/omnibus-gitlab', - tagsPath: 'foo', - }], - }; - }); - - describe('isLoading', () => { - it('should return the isLoading property', () => { - expect(getters.isLoading(state)).toEqual(state.isLoading); - }); - }); - - describe('repos', () => { - it('should return the repos', () => { - expect(getters.repos(state)).toEqual(state.repos); - }); - }); -}); diff --git a/spec/javascripts/registry/stores/mock_data.js b/spec/javascripts/registry/stores/mock_data.js deleted file mode 100644 index 07c51503b7f..00000000000 --- a/spec/javascripts/registry/stores/mock_data.js +++ /dev/null @@ -1,91 +0,0 @@ -export const defaultState = { - isLoading: false, - endpoint: '', - repos: [], -}; - -export const reposServerResponse = [ - { - destroy_path: 'path', - id: '123', - location: 'location', - path: 'foo', - tags_path: 'tags_path', - }, - { - destroy_path: 'path_', - id: '456', - location: 'location_', - path: 'bar', - tags_path: 'tags_path_', - }, -]; - -export const registryServerResponse = [ - { - name: 'centos7', - short_revision: 'b118ab5b0', - revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', - size: 679, - layers: 19, - location: 'location', - created_at: 1505828744434, - destroy_path: 'path_', - }, - { - name: 'centos6', - short_revision: 'b118ab5b0', - revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', - size: 679, - layers: 19, - location: 'location', - created_at: 1505828744434, - }]; - -export const parsedReposServerResponse = [ - { - canDelete: true, - destroyPath: reposServerResponse[0].destroy_path, - id: reposServerResponse[0].id, - isLoading: false, - list: [], - location: reposServerResponse[0].location, - name: reposServerResponse[0].path, - tagsPath: reposServerResponse[0].tags_path, - }, - { - canDelete: true, - destroyPath: reposServerResponse[1].destroy_path, - id: reposServerResponse[1].id, - isLoading: false, - list: [], - location: reposServerResponse[1].location, - name: reposServerResponse[1].path, - tagsPath: reposServerResponse[1].tags_path, - }, -]; - -export const parsedRegistryServerResponse = [ - { - tag: registryServerResponse[0].name, - revision: registryServerResponse[0].revision, - shortRevision: registryServerResponse[0].short_revision, - size: registryServerResponse[0].size, - layers: registryServerResponse[0].layers, - location: registryServerResponse[0].location, - createdAt: registryServerResponse[0].created_at, - destroyPath: registryServerResponse[0].destroy_path, - canDelete: true, - }, - { - tag: registryServerResponse[1].name, - revision: registryServerResponse[1].revision, - shortRevision: registryServerResponse[1].short_revision, - size: registryServerResponse[1].size, - layers: registryServerResponse[1].layers, - location: registryServerResponse[1].location, - createdAt: registryServerResponse[1].created_at, - destroyPath: registryServerResponse[1].destroy_path, - canDelete: false, - }, -]; 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; -- cgit v1.2.3