From b2b527a6906613fbdab693a897de4a4681fab3bf Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 7 Jul 2017 22:23:13 +0100 Subject: [PATCH] Update tests to test what the component renders and what the clicks calls --- .../components/table_pagination.vue | 14 +- .../lib/utils/common_utils_spec.js | 1 + .../components/table_pagination_spec.js | 327 +++++++++--------- 3 files changed, 180 insertions(+), 162 deletions(-) diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue index 6effa7a8b71..c9dbc048345 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.vue +++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue @@ -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 diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js index 52cf217c25f..55037bbbf73 100644 --- a/spec/javascripts/lib/utils/common_utils_spec.js +++ b/spec/javascripts/lib/utils/common_utils_spec.js @@ -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'); }); diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js index ec5161ef966..b0b78e34e0f 100644 --- a/spec/javascripts/vue_shared/components/table_pagination_spec.js +++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js @@ -1,177 +1,188 @@ 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); + + mountComponet = function (props) { + return new PaginationComponent({ + propsData: props, + }).$mount(); + }; }); - it('should render and start at page 1', () => { - 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: 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); - }); - - it('should go to the next page', () => { - component = new PaginationComponent({ - propsData: { - 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, + nextPage: 4, + page: 3, perPage: 20, - previousPage: NaN, + previousPage: 2, total: 84, - totalPages: 5, + totalPages: 10, }, 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, - perPage: 20, - previousPage: 1, - total: 84, - totalPages: 5, - }, - 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('...'); + }); }); });