diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index 552642665c..5cf73e12b8 100644 --- a/__tests__/components/Pagination.test.jsx +++ b/__tests__/components/Pagination.test.jsx @@ -117,6 +117,7 @@ describe('', () => { const pageSizeDropdownItems = pagination.find(pageSizeDropdownItemsSelector); expect(pageSizeDropdownItems.length).toBe(3); pageSizeDropdownItems.at(1).simulate('click'); + expect(onSetPage).toBeCalledWith(1, 25); }); test('itemCount displays correctly', () => { @@ -134,8 +135,23 @@ describe('', () => { /> ); - const itemCount = pagination.find('.awx-pagination__item-count'); + let itemCount = pagination.find('.awx-pagination__item-count'); expect(itemCount.text()).toEqual('Items 1 – 5 of 7'); + + pagination = mount( + + + + ); + itemCount = pagination.find('.awx-pagination__item-count'); + expect(itemCount.text()).toEqual('Items 6 – 7 of 7'); }); test('itemCount matching pageSize displays correctly', () => { @@ -176,7 +192,7 @@ describe('', () => { expect(itemCount.text()).toEqual('Items 1 – 3 of 3'); }); - test('submit a new page by typing in input works', () => { + test('submitting a new page by typing in input works', () => { const textInputSelector = '.awx-pagination__page-input.pf-c-form-control'; const submitFormSelector = '.awx-pagination__page-input-form'; const onSetPage = jest.fn(); @@ -193,22 +209,60 @@ describe('', () => { /> ); - + const paginationElem = pagination.find('Pagination'); + expect(paginationElem.state().value).toBe(1); const textInput = pagination.find(textInputSelector); expect(textInput.length).toBe(1); - textInput.simulate('change'); - pagination.setProps({ page: 2 }); - + expect(textInput.at(0).prop('value')).toBe(1); + const input = pagination.find('TextInput'); + expect(input.prop('value')).toBe(1); + input.prop('onChange')(2); + pagination.update(); const submitForm = pagination.find(submitFormSelector); expect(submitForm.length).toBe(1); submitForm.simulate('submit'); - pagination.find('Pagination').instance().setState({ value: 'invalid' }); - submitForm.simulate('submit'); + expect(pagination.find('TextInput').prop('value')).toBe(2); + // assert onPageChange was called + expect(paginationElem.state().value).toBe(2); }); - test('text input page change is disabled when only 1 page', () => { + test('submitting a new page by typing in input does not work when invalid', () => { + const textInputSelector = '.awx-pagination__page-input.pf-c-form-control'; + const submitFormSelector = '.awx-pagination__page-input-form'; const onSetPage = jest.fn(); + pagination = mount( + + + + ); + const paginationElem = pagination.find('Pagination'); + expect(paginationElem.state().value).toBe(1); + const textInput = pagination.find(textInputSelector); + expect(textInput.length).toBe(1); + expect(textInput.at(0).prop('value')).toBe(1); + const input = pagination.find('TextInput'); + expect(input.prop('value')).toBe(1); + input.prop('onChange')('!invalid'); + pagination.update(); + const submitForm = pagination.find(submitFormSelector); + expect(submitForm.length).toBe(1); + submitForm.simulate('submit'); + expect(pagination.find('TextInput').prop('value')).toBe(1); + // assert onPageChange was not called + expect(paginationElem.state().value).toBe(1); + }); + + test('text input page change is not displayed when only 1 page', () => { + const onSetPage = jest.fn(); + const pageNumber = 'input[aria-label="Page Number"]'; pagination = mount( ', () => { /> ); + let pageInput = pagination.find(pageNumber); + expect(pageInput.length).toBe(0); + + pagination = mount( + + + + ); + pageInput = pagination.find(pageNumber); + expect(pageInput.length).toBe(1); + }); + + test('make sure componentDidUpdate calls onPageChange', () => { + const onSetPage = jest.fn(); + + pagination = mount( + + + + ); + const paginationElem = pagination.find('Pagination'); + expect(paginationElem.state().value).toBe(1); + pagination.setProps({ + children: ( + + ) + }); + paginationElem.update(); + expect(paginationElem.state().value).toBe(2); + }); + + test('when showPageSizeOptions is passed as false there should not be a dropdown in the DOM', () => { + const pageSizeDropdownSelector = '.awx-pagination__page-size-selection'; + const onSetPage = jest.fn(); + + pagination = mount( + + + + ); + const pageSizeDropdown = pagination.find(pageSizeDropdownSelector); + expect(pageSizeDropdown.length).toBe(0); }); }); diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index 54be10b2d9..35cff54921 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -225,6 +225,7 @@ class Lookup extends React.Component { page_size={page_size} onSetPage={this.onSetPage} pageSizeOptions={null} + showPageSizeOptions={false} style={paginationStyling} /> diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index a3eba1ca3e..d27058dbe5 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -89,9 +89,8 @@ class Pagination extends Component { onSelectPageSize ({ target }) { const { onSetPage } = this.props; - const page = 1; - const page_size = parseInt(target.innerText, 10); + const page_size = parseInt(target.innerText || target.textContent, 10); this.setState({ isOpen: false }); @@ -106,6 +105,7 @@ class Pagination extends Component { pageCount, page_size, pageSizeOptions, + showPageSizeOptions, style } = this.props; const { value, isOpen } = this.state; @@ -129,7 +129,7 @@ class Pagination extends Component { {({ i18n }) => (
- {opts && ( + {showPageSizeOptions && (
Items Per Page