Skip to content

G
gitlab-ce
Commit b2b527a6 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Update tests to test what the component renders and what the clicks calls

parent e354b6d3
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 161 deletions
app/assets/javascripts/vue_shared/components/table_pagination.vue
View file @ b2b527a6
......@@ -84,7 +84,9 @@ export default {
const page = this.pageInfo.page;
const items = [];
if (page > 1) items.push({ title: FIRST });
if (page > 1) {
items.push({ title: FIRST, first: true });
}
if (page > 1) {
items.push({ title: PREV, prev: true });
......@@ -112,7 +114,9 @@ export default {
items.push({ title: NEXT, next: true });
}
if (total - page >= 1) items.push({ title: LAST, last: true });
if (total - page >= 1) {
items.push({ title: LAST, last: true });
}
return items;
},
......@@ -126,8 +130,10 @@ export default {
v-for="item in getItems"
:class="{
page: item.page,
prev: item.prev,
next: item.next,
'js-previous-button': item.prev,
'js-next-button': item.next,
'js-last-button': item.last,
'js-first-button': item.first,
separator: item.separator,
active: item.active,
disabled: item.disabled
......
spec/javascripts/lib/utils/common_utils_spec.js
View file @ b2b527a6
......@@ -143,6 +143,7 @@ import '~/lib/utils/common_utils';
it('should return valid parameter', () => {
const value = gl.utils.getParameterByName('scope');
expect(gl.utils.getParameterByName('p')).toEqual('2');
expect(value).toBe('all');
});
......
spec/javascripts/vue_shared/components/table_pagination_spec.js
View file @ b2b527a6
import Vue from 'vue';
import paginationComp from '~/vue_shared/components/table_pagination.vue';
import '~/lib/utils/common_utils';
describe('Pagination component', () => {
let component;
let PaginationComponent;
const changeChanges = {
one: '',
};
const change = (one) => {
changeChanges.one = one;
};
let spy;
let mountComponet;
beforeEach(() => {
spy = jasmine.createSpy('spy');
PaginationComponent = Vue.extend(paginationComp);
});
it('should render and start at page 1', () => {
component = new PaginationComponent({
propsData: {
pageInfo: {
totalPages: 10,
nextPage: 2,
previousPage: '',
},
change,
},
}).$mount();
expect(component.$el.classList).toContain('gl-pagination');
component.changePage({ target: { innerText: '1' } });
expect(changeChanges.one).toEqual(1);
});
it('should go to the previous page', () => {
component = new PaginationComponent({
propsData: {
pageInfo: {
totalPages: 10,
nextPage: 3,
previousPage: 1,
},
change,
},
}).$mount();
component.changePage({ target: { innerText: 'Prev' } });
expect(changeChanges.one).toEqual(1);
mountComponet = function (props) {
return new PaginationComponent({
propsData: props,
}).$mount();
};
});
it('should go to the next page', () => {
component = new PaginationComponent({
propsData: {
describe('render', () => {
describe('prev button', () => {
it('should be disabled and non clickable', () => {
component = mountComponet({
pageInfo: {
nextPage: 2,
page: 1,
perPage: 20,
previousPage: NaN,
total: 84,
totalPages: 5,
},
change: spy,
});
expect(
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
).toEqual(true);
component.$el.querySelector('.js-previous-button a').click();
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
component = mountComponet({
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
component.$el.querySelector('.js-previous-button a').click();
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('first button', () => {
it('should call the change callback with the first page', () => {
component = mountComponet({
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
const button = component.$el.querySelector('.js-first-button a');
expect(button.textContent.trim()).toEqual('« First');
button.click();
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('last button', () => {
it('should call the change callback with the last page', () => {
component = mountComponet({
pageInfo: {
nextPage: 3,
page: 2,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
const button = component.$el.querySelector('.js-last-button a');
expect(button.textContent.trim()).toEqual('Last »');
button.click();
expect(spy).toHaveBeenCalledWith(5);
});
});
describe('next button', () => {
it('should be disabled and non clickable', () => {
component = mountComponet({
pageInfo: {
nextPage: 5,
page: 5,
perPage: 20,
previousPage: 1,
total: 84,
totalPages: 5,
},
change: spy,
});
expect(
component.$el.querySelector('.js-next-button').textContent.trim(),
).toEqual('Next');
component.$el.querySelector('.js-next-button a').click();
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
component = mountComponet({
pageInfo: {
nextPage: 4,
page: 3,
perPage: 20,
previousPage: 2,
total: 84,
totalPages: 5,
},
change: spy,
});
component.$el.querySelector('.js-next-button a').click();
expect(spy).toHaveBeenCalledWith(4);
});
});
describe('numbered buttons', () => {
it('should render 5 pages', () => {
component = mountComponet({
pageInfo: {
nextPage: 4,
page: 3,
perPage: 20,
previousPage: 2,
total: 84,
totalPages: 5,
},
change: spy,
});
expect(component.$el.querySelectorAll('.page').length).toEqual(5);
});
});
it('should render the spread operator', () => {
component = mountComponet({
pageInfo: {
totalPages: 10,
nextPage: 5,
previousPage: 3,
},
change,
},
}).$mount();
component.changePage({ target: { innerText: 'Next' } });
expect(changeChanges.one).toEqual(5);
});
it('should go to the last page', () => {
component = new PaginationComponent({
propsData: {
pageInfo: {
totalPages: 10,
nextPage: 5,
previousPage: 3,
},
change,
},
}).$mount();
component.changePage({ target: { innerText: 'Last »' } });
expect(changeChanges.one).toEqual(10);
});
it('should go to the first page', () => {
component = new PaginationComponent({
propsData: {
pageInfo: {
totalPages: 10,
nextPage: 5,
previousPage: 3,
},
change,
},
}).$mount();
component.changePage({ target: { innerText: '« First' } });
expect(changeChanges.one).toEqual(1);
});
it('should not call change callback if clicked link is disabled', () => {
const spy = jasmine.createSpy('spy');
component = new PaginationComponent({
propsData: {
pageInfo: {
nextPage: 2,
page: 1,
perPage: 20,
previousPage: NaN,
total: 84,
totalPages: 5,
},
change: spy,
},
}).$mount();
component.$el.querySelector('a').click();
expect(spy).not.toHaveBeenCalled();
});
it('should call change callback when link is clicked', () => {
const spy = jasmine.createSpy('spy');
component = new PaginationComponent({
propsData: {
pageInfo: {
nextPage: 3,
page: 2,
nextPage: 4,
page: 3,
perPage: 20,
previousPage: 1,
previousPage: 2,
total: 84,
totalPages: 5,
totalPages: 10,
},
change: spy,
},
}).$mount();
component.$el.querySelector('a').click();
expect(spy).toHaveBeenCalled();
});
});
describe('paramHelper', () => {
afterEach(() => {
window.history.pushState({}, null, '');
});
it('can parse url parameters correctly', () => {
window.history.pushState({}, null, '?scope=all&p=2');
const scope = gl.utils.getParameterByName('scope');
const p = gl.utils.getParameterByName('p');
expect(scope).toEqual('all');
expect(p).toEqual('2');
});
it('returns null if param not in url', () => {
window.history.pushState({}, null, '?p=2');
const scope = gl.utils.getParameterByName('scope');
const p = gl.utils.getParameterByName('p');
});
expect(scope).toEqual(null);
expect(p).toEqual('2');
expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
});
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7