Merge pull request #129 from AlexSCorey/paginationTest

add pagination test

__tests__/components/Pagination.test.jsx

@@ -117,6 +117,7 @@ describe('<Pagination />', () => {
     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('<Pagination />', () => {
         />
       </I18nProvider>
     );
-    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(
+      <I18nProvider>
+        <Pagination
+          count={7}
+          page={2}
+          pageCount={2}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    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('<Pagination />', () => {
     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('<Pagination />', () => {
         />
       </I18nProvider>
     );
-
+    const paginationElem = pagination.find('Pagination');
+    expect(paginationElem.state().value).toBe(1);
     const textInput = pagination.find(textInputSelector);
     expect(textInput.length).toBe(1);
-    textInput.simulate('change');
+    expect(textInput.at(0).prop('value')).toBe(1);
-    pagination.setProps({ page: 2 });
+    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' });
+    expect(pagination.find('TextInput').prop('value')).toBe(2);
-    submitForm.simulate('submit');
+    // 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(
+      <I18nProvider>
+        <Pagination
+          count={21}
+          page={1}
+          pageCount={5}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    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(
       <I18nProvider>
         <Pagination
@@ -221,5 +275,75 @@ describe('<Pagination />', () => {
         />
       </I18nProvider>
     );
+    let pageInput = pagination.find(pageNumber);
+    expect(pageInput.length).toBe(0);
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={11}
+          page={1}
+          pageCount={3}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    pageInput = pagination.find(pageNumber);
+    expect(pageInput.length).toBe(1);
+  });
+
+  test('make sure componentDidUpdate calls onPageChange', () => {
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={7}
+          page={1}
+          pageCount={2}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const paginationElem = pagination.find('Pagination');
+    expect(paginationElem.state().value).toBe(1);
+    pagination.setProps({
+      children: (
+        <Pagination
+          count={7}
+          page={2}
+          pageCount={2}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      )
+    });
+    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(
+      <I18nProvider>
+        <Pagination
+          count={21}
+          page={1}
+          pageCount={5}
+          page_size={5}
+          showPageSizeOptions={false}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const pageSizeDropdown = pagination.find(pageSizeDropdownSelector);
+    expect(pageSizeDropdown.length).toBe(0);
   });
 });

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}
                   />
                 </Fragment>

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>
         {({ i18n }) => (
           <div className="awx-pagination" style={style}>
-            {opts && (
+            {showPageSizeOptions && (
               <div className="awx-pagination__page-size-selection">
                 <Trans>Items Per Page</Trans>
                 <Dropdown
@@ -237,12 +237,14 @@ Pagination.propTypes = {
   pageCount: PropTypes.number,
   pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
   page_size: PropTypes.number.isRequired,
+  showPageSizeOptions: PropTypes.bool
 };
 
 Pagination.defaultProps = {
   count: null,
   pageCount: null,
   pageSizeOptions: [5, 10, 25, 50],
+  showPageSizeOptions: true
 };
 
 export default Pagination;