Commit c34a47c3 authored by Filipa Lacerda's avatar Filipa Lacerda

Adds tests for new table component

Fixes eslint problems
parent 485cb91c
......@@ -37,7 +37,7 @@
},
mounted() {
this.fetchRepos()
.catch(() => Flash(errorMessagesTypes.FETCH_REPOS));
.catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
},
};
</script>
......
<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));
......
<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,6 +41,7 @@
const pluralize = n__('layer', 'layers', item.layers);
return `${item.layers} ${pluralize}`;
},
handleDeleteRegistry(registry) {
this.deleteRegistry(registry)
.then(() => this.fetchList({ repo: this.repo }))
......@@ -46,7 +49,7 @@
},
onPageChange(pageNumber) {
this.fetchList({ repo: this.repo, page })
this.fetchList({ repo: this.repo, page: pageNumber })
.catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
},
......
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();
......
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,
vm = new Component({
store,
propsData: {
repo: repoPropsData,
},
],
location: 'location',
name: 'foo',
tagsPath: 'path',
pagination: {
perPage: 5,
page: 1,
total: 13,
totalPages: 1,
nextPage: null,
previousPage: null,
},
};
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();
});
});
});
});
});
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();
});
});
});
......@@ -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,
},
};
......@@ -9,7 +9,7 @@ import {
reposServerResponse,
registryServerResponse,
parsedReposServerResponse,
} from './mock_data';
} from '../mock_data';
Vue.use(VueResource);
......
......@@ -6,7 +6,7 @@ import {
registryServerResponse,
parsedReposServerResponse,
parsedRegistryServerResponse,
} from './mock_data';
} from '../mock_data';
describe('Mutations Registry Store', () => {
let mockState;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment