From d96b88e495903a8f75f14642042ff7bed0fcb7a8 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Tue, 12 Mar 2019 12:28:42 -0400 Subject: [PATCH 1/3] add pagination test --- __tests__/components/Pagination.test.jsx | 134 +++++++++++++++++------ src/components/Pagination/Pagination.jsx | 3 +- 2 files changed, 102 insertions(+), 35 deletions(-) diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index 552642665c..f1a079acf2 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,37 @@ 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 1 – 7 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,39 +206,38 @@ describe('', () => { expect(itemCount.text()).toEqual('Items 1 – 3 of 3'); }); - test('submit 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'; + // test('submit 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(); + + // pagination = mount( + // + // + // + // ); + // pagination.instance().onPageChange = jest.fn(); + + // const textInput = pagination.find(textInputSelector); + // expect(textInput.length).toBe(1); + // textInput.simulate('change', { target: { value: '2' } }); + + // const submitForm = pagination.find(submitFormSelector); + // expect(submitForm.length).toBe(1); + // submitForm.simulate('submit'); + // expect(pagination.instance().onPageChange).toBeCalledWith(2) + // }); + + test('text input page change is not displayed when only 1 page', () => { const onSetPage = jest.fn(); - - pagination = mount( - - - - ); - - const textInput = pagination.find(textInputSelector); - expect(textInput.length).toBe(1); - textInput.simulate('change'); - pagination.setProps({ page: 2 }); - - const submitForm = pagination.find(submitFormSelector); - expect(submitForm.length).toBe(1); - submitForm.simulate('submit'); - pagination.find('Pagination').instance().setState({ value: 'invalid' }); - submitForm.simulate('submit'); - }); - - test('text input page change is disabled 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( + // + // + // + // ); + // pagination.instance().onPageChange = jest.fn(); + // pagination.setProps({ page: 2 }); + // pagination.update(); + // expect(pagination.instance().onPageChange).toHaveBeenCalledTimes(1); + // expect(pagination.instance().onPageChange).toBeCalledWith(2); + // }); }); diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx index a3eba1ca3e..2e972cecca 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 }); From bbb31eb4781e40e3e0cfcc4c6ae337e832f1fcbf Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 12 Mar 2019 15:03:21 -0400 Subject: [PATCH 2/3] fix pagination page input and componentDidUpdate tests --- __tests__/components/Pagination.test.jsx | 140 +++++++++++++++-------- 1 file changed, 95 insertions(+), 45 deletions(-) diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index f1a079acf2..fc51215651 100644 --- a/__tests__/components/Pagination.test.jsx +++ b/__tests__/components/Pagination.test.jsx @@ -206,34 +206,73 @@ describe('', () => { expect(itemCount.text()).toEqual('Items 1 – 3 of 3'); }); - // test('submit 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(); + 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(); - // pagination = mount( - // - // - // - // ); - // pagination.instance().onPageChange = 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')(2); + pagination.update(); + const submitForm = pagination.find(submitFormSelector); + expect(submitForm.length).toBe(1); + submitForm.simulate('submit'); + expect(pagination.find('TextInput').prop('value')).toBe(2); + // assert onPageChange was called + expect(paginationElem.state().value).toBe(2); + }); - // const textInput = pagination.find(textInputSelector); - // expect(textInput.length).toBe(1); - // textInput.simulate('change', { target: { value: '2' } }); + 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(); - // const submitForm = pagination.find(submitFormSelector); - // expect(submitForm.length).toBe(1); - // submitForm.simulate('submit'); - // expect(pagination.instance().onPageChange).toBeCalledWith(2) - // }); + 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(); @@ -269,25 +308,36 @@ describe('', () => { expect(pageInput.length).toBe(1); }); - // test('make sure componentDidUpdate calls onPageChange', () => { - // const onSetPage = jest.fn(); + test('make sure componentDidUpdate calls onPageChange', () => { + const onSetPage = jest.fn(); - // pagination = mount( - // - // - // - // ); - // pagination.instance().onPageChange = jest.fn(); - // pagination.setProps({ page: 2 }); - // pagination.update(); - // expect(pagination.instance().onPageChange).toHaveBeenCalledTimes(1); - // expect(pagination.instance().onPageChange).toBeCalledWith(2); - // }); + pagination = mount( + + + + ); + const paginationElem = pagination.find('Pagination'); + expect(paginationElem.state().value).toBe(1); + pagination.setProps({ + children: ( + + ) + }); + paginationElem.update(); + expect(paginationElem.state().value).toBe(2); + }); }); From 91e4679311f08de2e3c03e77c354df6f61edc42c Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Wed, 13 Mar 2019 11:30:35 -0400 Subject: [PATCH 3/3] adds test to ensure page size option dropdown is removed is no page size option is passed in. --- __tests__/components/Pagination.test.jsx | 34 ++++++++++++++---------- src/components/Lookup/Lookup.jsx | 1 + src/components/Pagination/Pagination.jsx | 5 +++- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index fc51215651..5cf73e12b8 100644 --- a/__tests__/components/Pagination.test.jsx +++ b/__tests__/components/Pagination.test.jsx @@ -137,20 +137,6 @@ describe('', () => { ); 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 1 – 7 of 7'); pagination = mount( @@ -340,4 +326,24 @@ describe('', () => { 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 2e972cecca..d27058dbe5 100644 --- a/src/components/Pagination/Pagination.jsx +++ b/src/components/Pagination/Pagination.jsx @@ -105,6 +105,7 @@ class Pagination extends Component { pageCount, page_size, pageSizeOptions, + showPageSizeOptions, style } = this.props; const { value, isOpen } = this.state; @@ -128,7 +129,7 @@ class Pagination extends Component { {({ i18n }) => (
- {opts && ( + {showPageSizeOptions && (
Items Per Page