summaryrefslogtreecommitdiff
path: root/spec/frontend/vue_shared/components
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/vue_shared/components')
-rw-r--r--spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js55
-rw-r--r--spec/frontend/vue_shared/components/table_pagination_spec.js324
2 files changed, 95 insertions, 284 deletions
diff --git a/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js b/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js
new file mode 100644
index 00000000000..0d0e4ae4349
--- /dev/null
+++ b/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js
@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils';
+import DropdownSearchInputComponent from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
+
+describe('DropdownSearchInputComponent', () => {
+ let wrapper;
+
+ const defaultProps = {
+ placeholderText: 'Search something',
+ };
+ const buildVM = (propsData = defaultProps) => {
+ wrapper = mount(DropdownSearchInputComponent, {
+ propsData,
+ });
+ };
+ const findInputEl = () => wrapper.find('.dropdown-input-field');
+
+ beforeEach(() => {
+ buildVM();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('template', () => {
+ it('renders input element with type `search`', () => {
+ expect(findInputEl().exists()).toBe(true);
+ expect(findInputEl().attributes('type')).toBe('search');
+ });
+
+ it('renders search icon element', () => {
+ expect(wrapper.find('.fa-search.dropdown-input-search').exists()).toBe(true);
+ });
+
+ it('renders clear search icon element', () => {
+ expect(wrapper.find('.fa-times.dropdown-input-clear.js-dropdown-input-clear').exists()).toBe(
+ true,
+ );
+ });
+
+ it('displays custom placeholder text', () => {
+ expect(findInputEl().attributes('placeholder')).toBe(defaultProps.placeholderText);
+ });
+
+ it('focuses input element when focused property equals true', () => {
+ const inputEl = findInputEl().element;
+
+ jest.spyOn(inputEl, 'focus');
+
+ wrapper.setProps({ focused: true });
+
+ expect(inputEl.focus).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/spec/frontend/vue_shared/components/table_pagination_spec.js b/spec/frontend/vue_shared/components/table_pagination_spec.js
index 0a9ff36b2fb..8105d1fcef3 100644
--- a/spec/frontend/vue_shared/components/table_pagination_spec.js
+++ b/spec/frontend/vue_shared/components/table_pagination_spec.js
@@ -1,5 +1,6 @@
import { shallowMount } from '@vue/test-utils';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { GlPagination } from '@gitlab/ui';
describe('Pagination component', () => {
let wrapper;
@@ -12,15 +13,6 @@ describe('Pagination component', () => {
});
};
- const findFirstButtonLink = () => wrapper.find('.js-first-button .page-link');
- const findPreviousButton = () => wrapper.find('.js-previous-button');
- const findPreviousButtonLink = () => wrapper.find('.js-previous-button .page-link');
- const findNextButton = () => wrapper.find('.js-next-button');
- const findNextButtonLink = () => wrapper.find('.js-next-button .page-link');
- const findLastButtonLink = () => wrapper.find('.js-last-button .page-link');
- const findPages = () => wrapper.findAll('.page');
- const findSeparator = () => wrapper.find('.separator');
-
beforeEach(() => {
spy = jest.fn();
});
@@ -46,290 +38,54 @@ describe('Pagination component', () => {
expect(wrapper.isEmpty()).toBe(true);
});
- describe('prev button', () => {
- it('should be disabled and non clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 2,
- page: 1,
- perPage: 20,
- previousPage: NaN,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
-
- expect(findPreviousButton().classes()).toContain('disabled');
- findPreviousButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be disabled and non clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 2,
- page: 1,
- perPage: 20,
- previousPage: NaN,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findPreviousButton().classes()).toContain('disabled');
- findPreviousButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be enabled and clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- findPreviousButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
-
- it('should be enabled and clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- findPreviousButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(1);
- });
- });
-
- describe('first button', () => {
- it('should call the change callback with the first page', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- const button = findFirstButtonLink();
- 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', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- const button = findFirstButtonLink();
- 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', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- const button = findLastButtonLink();
- expect(button.text().trim()).toEqual('Last »');
- button.trigger('click');
- expect(spy).toHaveBeenCalledWith(5);
- });
-
- it('should not render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 3,
- page: 2,
- perPage: 20,
- previousPage: 1,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findLastButtonLink().exists()).toBe(false);
- });
- });
-
- describe('next button', () => {
- it('should be disabled and non clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: NaN,
- page: 5,
- perPage: 20,
- previousPage: 4,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- expect(
- findNextButton()
- .text()
- .trim(),
- ).toEqual('Next ›');
- findNextButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be disabled and non clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: NaN,
- page: 5,
- perPage: 20,
- previousPage: 4,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(
- findNextButton()
- .text()
- .trim(),
- ).toEqual('Next ›');
- findNextButtonLink().trigger('click');
- expect(spy).not.toHaveBeenCalled();
- });
-
- it('should be enabled and clickable', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- findNextButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(4);
+ it('renders if there is a next page', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: 2,
+ page: 1,
+ perPage: 20,
+ previousPage: NaN,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
- it('should be enabled and clickable when total and totalPages are NaN', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- findNextButtonLink().trigger('click');
- expect(spy).toHaveBeenCalledWith(4);
- });
+ expect(wrapper.isEmpty()).toBe(false);
});
- describe('numbered buttons', () => {
- it('should render 5 pages', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 5,
- },
- change: spy,
- });
- expect(findPages().length).toEqual(5);
+ it('renders if there is a prev page', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: NaN,
+ page: 2,
+ perPage: 20,
+ previousPage: 1,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
- it('should not render any page', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findPages().length).toEqual(0);
- });
+ expect(wrapper.isEmpty()).toBe(false);
});
+ });
- describe('spread operator', () => {
- it('should render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: 84,
- totalPages: 10,
- },
- change: spy,
- });
- expect(
- findSeparator()
- .text()
- .trim(),
- ).toEqual('...');
- });
-
- it('should not render', () => {
- mountComponent({
- pageInfo: {
- nextPage: 4,
- page: 3,
- perPage: 20,
- previousPage: 2,
- total: NaN,
- totalPages: NaN,
- },
- change: spy,
- });
- expect(findSeparator().exists()).toBe(false);
+ describe('events', () => {
+ it('calls change method when page changes', () => {
+ mountComponent({
+ pageInfo: {
+ nextPage: NaN,
+ page: 2,
+ perPage: 20,
+ previousPage: 1,
+ total: 15,
+ totalPages: 1,
+ },
+ change: spy,
});
+ wrapper.find(GlPagination).vm.$emit('input', 3);
+ expect(spy).toHaveBeenCalledWith(3);
});
});
});
View Lorry Controller Status