diff options
Diffstat (limited to 'spec/frontend')
3 files changed, 106 insertions, 284 deletions
diff --git a/spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js b/spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js index 7ba35358442..c9cdd728509 100644 --- a/spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js +++ b/spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import $ from 'jquery'; import { GlIcon } from '@gitlab/ui'; import ClusterFormDropdown from '~/create_cluster/eks_cluster/components/cluster_form_dropdown.vue'; @@ -169,4 +170,14 @@ describe('ClusterFormDropdown', () => { expect(vm.findAll('.js-dropdown-item').length).toEqual(1); expect(vm.find('.js-dropdown-item').text()).toEqual(secondItem.name); }); + + it('focuses dropdown search input when dropdown is displayed', () => { + const dropdownEl = vm.find('.dropdown').element; + + expect(vm.find(DropdownSearchInput).props('focused')).toBe(false); + + $(dropdownEl).trigger('shown.bs.dropdown'); + + expect(vm.find(DropdownSearchInput).props('focused')).toBe(true); + }); }); 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); }); }); }); |