Skip to content

G
gitlab-ce
Commit 4b366f51 authored by Paul Gascou-Vaillancourt's avatar Paul Gascou-Vaillancourt
Browse files
Options

Migrate table_pagination specs to Jest & VTU 

table_pagination specs have been migrated from Karma to
Jest and Vue Test Utils
parent fae81201
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 96 deletions
spec/javascripts/vue_shared/components/table_pagination_spec.js → spec/frontend/vue_shared/components/table_pagination_spec.js
View file @ 4b366f51
import Vue from 'vue';
import paginationComp from '~/vue_shared/components/pagination/table_pagination.vue';
import { shallowMount } from '@vue/test-utils';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
describe('Pagination component', () => {
let component;
let PaginationComponent;
let wrapper;
let spy;
let mountComponent;
beforeEach(() => {
spy = jasmine.createSpy('spy');
PaginationComponent = Vue.extend(paginationComp);
mountComponent = function(props) {
return new PaginationComponent({
const mountComponent = props => {
wrapper = shallowMount(TablePagination, {
propsData: props,
}).$mount();
});
};
beforeEach(() => {
spy = jest.fn();
});
afterEach(() => {
wrapper.destroy();
});
describe('render', () => {
it('should not render anything', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: NaN,
page: 1,
......@@ -32,12 +33,12 @@ describe('Pagination component', () => {
change: spy,
});
expect(component.$el.childNodes.length).toEqual(0);
expect(wrapper.isEmpty()).toBe(true);
});
describe('prev button', () => {
it('should be disabled and non clickable', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 2,
page: 1,
......@@ -49,17 +50,13 @@ describe('Pagination component', () => {
change: spy,
});
expect(
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
).toEqual(true);
component.$el.querySelector('.js-previous-button .page-link').click();
expect(wrapper.find('.js-previous-button').classes()).toContain('disabled');
wrapper.find('.js-previous-button .page-link').trigger('click');
expect(spy).not.toHaveBeenCalled();
});
it('should be disabled and non clickable when total and totalPages are NaN', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 2,
page: 1,
......@@ -70,18 +67,13 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
).toEqual(true);
component.$el.querySelector('.js-previous-button .page-link').click();
expect(wrapper.find('.js-previous-button').classes()).toContain('disabled');
wrapper.find('.js-previous-button .page-link').trigger('click');
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -92,14 +84,12 @@ describe('Pagination component', () => {
},
change: spy,
});
component.$el.querySelector('.js-previous-button .page-link').click();
wrapper.find('.js-previous-button .page-link').trigger('click');
expect(spy).toHaveBeenCalledWith(1);
});
it('should be enabled and clickable when total and totalPages are NaN', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -110,16 +100,14 @@ describe('Pagination component', () => {
},
change: spy,
});
component.$el.querySelector('.js-previous-button .page-link').click();
wrapper.find('.js-previous-button .page-link').trigger('click');
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('first button', () => {
it('should call the change callback with the first page', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -130,18 +118,14 @@ describe('Pagination component', () => {
},
change: spy,
});
const button = component.$el.querySelector('.js-first-button .page-link');
expect(button.textContent.trim()).toEqual('« First');
button.click();
const button = wrapper.find('.js-first-button .page-link');
expect(button.text().trim()).toEqual('« First');
button.trigger('click');
expect(spy).toHaveBeenCalledWith(1);
});
it('should call the change callback with the first page when total and totalPages are NaN', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -152,20 +136,16 @@ describe('Pagination component', () => {
},
change: spy,
});
const button = component.$el.querySelector('.js-first-button .page-link');
expect(button.textContent.trim()).toEqual('« First');
button.click();
const button = wrapper.find('.js-first-button .page-link');
expect(button.text().trim()).toEqual('« First');
button.trigger('click');
expect(spy).toHaveBeenCalledWith(1);
});
});
describe('last button', () => {
it('should call the change callback with the last page', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -176,18 +156,14 @@ describe('Pagination component', () => {
},
change: spy,
});
const button = component.$el.querySelector('.js-last-button .page-link');
expect(button.textContent.trim()).toEqual('Last »');
button.click();
const button = wrapper.find('.js-last-button .page-link');
expect(button.text().trim()).toEqual('Last »');
button.trigger('click');
expect(spy).toHaveBeenCalledWith(5);
});
it('should not render', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 3,
page: 2,
......@@ -198,14 +174,13 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelector('.js-last-button .page-link')).toBeNull();
expect(wrapper.find('.js-last-button .page-link').exists()).toBe(false);
});
});
describe('next button', () => {
it('should be disabled and non clickable', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: NaN,
page: 5,
......@@ -216,16 +191,18 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next ›');
component.$el.querySelector('.js-next-button .page-link').click();
expect(
wrapper
.find('.js-next-button')
.text()
.trim(),
).toEqual('Next ›');
wrapper.find('.js-next-button .page-link').trigger('click');
expect(spy).not.toHaveBeenCalled();
});
it('should be disabled and non clickable when total and totalPages are NaN', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: NaN,
page: 5,
......@@ -236,16 +213,18 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next ›');
component.$el.querySelector('.js-next-button .page-link').click();
expect(
wrapper
.find('.js-next-button')
.text()
.trim(),
).toEqual('Next ›');
wrapper.find('.js-next-button .page-link').trigger('click');
expect(spy).not.toHaveBeenCalled();
});
it('should be enabled and clickable', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -256,14 +235,12 @@ describe('Pagination component', () => {
},
change: spy,
});
component.$el.querySelector('.js-next-button .page-link').click();
wrapper.find('.js-next-button .page-link').trigger('click');
expect(spy).toHaveBeenCalledWith(4);
});
it('should be enabled and clickable when total and totalPages are NaN', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -274,16 +251,14 @@ describe('Pagination component', () => {
},
change: spy,
});
component.$el.querySelector('.js-next-button .page-link').click();
wrapper.find('.js-next-button .page-link').trigger('click');
expect(spy).toHaveBeenCalledWith(4);
});
});
describe('numbered buttons', () => {
it('should render 5 pages', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -294,12 +269,11 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelectorAll('.page').length).toEqual(5);
expect(wrapper.vm.$el.querySelectorAll('.page').length).toEqual(5);
});
it('should not render any page', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -310,14 +284,13 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelectorAll('.page').length).toEqual(0);
expect(wrapper.vm.$el.querySelectorAll('.page').length).toEqual(0);
});
});
describe('spread operator', () => {
it('should render', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -328,12 +301,16 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
expect(
wrapper
.find('.separator')
.text()
.trim(),
).toEqual('...');
});
it('should not render', () => {
component = mountComponent({
mountComponent({
pageInfo: {
nextPage: 4,
page: 3,
......@@ -344,8 +321,7 @@ describe('Pagination component', () => {
},
change: spy,
});
expect(component.$el.querySelector('.separator')).toBeNull();
expect(wrapper.find('.separator').exists()).toBe(false);
});
});
});
......
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