@patternfly/react-core 4.202.30 → 4.202.31

package/src/components/Pagination/__tests__/Pagination.test.tsx

@@ -1,332 +1,284 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { Pagination, PaginationVariant } from '../index';
-
-describe('component render', () => {
-  test('should render correctly top', () => {
-    const wrapper = render(<Pagination itemCount={20} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
 
-  test('should render correctly bottom', () => {
-    const wrapper = render(<Pagination itemCount={20} variant={PaginationVariant.bottom} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('should render correctly compact', () => {
-    const wrapper = render(<Pagination itemCount={20} isCompact />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
-  test('should render correctly sticky', () => {
-    const wrapper = render(<Pagination itemCount={20} isSticky />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('should render correctly bottom sticky', () => {
-    const wrapper = render(<Pagination itemCount={20} variant={PaginationVariant.bottom} isSticky />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('should render correctly disabled', () => {
-    const wrapper = render(<Pagination itemCount={20} isDisabled />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('limited number of pages', () => {
-    const wrapper = render(<Pagination itemCount={20} perPage={20} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('zero results', () => {
-    const wrapper = render(<Pagination itemCount={0} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('last page', () => {
-    const wrapper = render(<Pagination itemCount={20} perPage={10} page={2} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('custom perPageOptions', () => {
-    const wrapper = render(<Pagination itemCount={40} perPageOptions={[{ title: 'some', value: 1 }]} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('empty per page options', () => {
-    const wrapper = render(<Pagination itemCount={40} perPageOptions={[]} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('no items', () => {
-    const wrapper = render(<Pagination itemCount={0} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('custom start end', () => {
-    const wrapper = render(<Pagination itemCount={40} itemsStart={5} itemsEnd={15} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
-
-  test('titles', () => {
-    const wrapper = render(<Pagination itemCount={40} titles={{ items: 'values', page: 'books' }} />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
+import { Pagination, PaginationVariant } from '../index';
 
-  test('custom pagination toggle', () => {
-    const wrapper = render(
-      // eslint-disable-next-line no-template-curly-in-string
-      <Pagination itemCount={40} toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'} />
-    );
-    expect(wrapper.container).toMatchSnapshot();
-  });
+describe('Pagination', () => {
+  describe('component render', () => {
+    test('should render correctly top', () => {
+      const { asFragment } = render(<Pagination itemCount={20} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-  test('up drop direction', () => {
-    const wrapper = render(<Pagination itemCount={40} dropDirection="up" />);
-    expect(wrapper.container).toMatchSnapshot();
-  });
+    test('should render correctly bottom', () => {
+      const { asFragment } = render(<Pagination itemCount={20} variant={PaginationVariant.bottom} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-  test('indeterminate count (no item count)', () => {
-    const toggle = mount(
-      <Pagination />
-    ).find('span.pf-c-options-menu__toggle-text');
-    expect(toggle.find('b').at(0).text()).toBe('1 - 10');
-    expect(toggle).toMatchSnapshot();
-  });
+    test('should render correctly compact', () => {
+      const { asFragment } = render(<Pagination itemCount={20} isCompact />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-  test('toggleTemplate toggle text with function', () => {
-    const toggle = mount(
-      <Pagination toggleTemplate={({ firstIndex, lastIndex }) => (<div>{firstIndex} - {lastIndex} of many</div>)} />
-    ).find('span.pf-c-options-menu__toggle-text');
-    expect(toggle.find('div').text()).toBe('1 - 10 of many');
-    expect(toggle).toMatchSnapshot();
-  });
+    test('should render correctly sticky', () => {
+      const { asFragment } = render(<Pagination itemCount={20} isSticky />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-  test('toggleTemplate toggle text with string', () => {
-    const toggle = mount(
-      <Pagination toggleTemplate={'I am a string'} />
-    ).find('span.pf-c-options-menu__toggle-text');
-    expect(toggle.text()).toBe('I am a string');
-    expect(toggle).toMatchSnapshot();
-  });
-});
+    test('should render correctly bottom sticky', () => {
+      const { asFragment } = render(<Pagination itemCount={20} variant={PaginationVariant.bottom} isSticky />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-describe('API', () => {
-  describe('onSetPage', () => {
-    const onSetPage = jest.fn();
-
-    test('should call first', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} page={2} />);
-      wrapper
-        .find('[data-action="first"]')
-        .first()
-        .simulate('click');
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(1);
+    test('should render correctly disabled', () => {
+      const { asFragment } = render(<Pagination itemCount={20} isDisabled />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call previous', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} page={3} />);
-      wrapper
-        .find('[data-action="previous"]')
-        .first()
-        .simulate('click');
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(2);
+    test('limited number of pages', () => {
+      const { asFragment } = render(<Pagination itemCount={20} perPage={20} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call next', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('[data-action="next"]')
-        .first()
-        .simulate('click');
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(2);
+    test('zero results', () => {
+      const { asFragment } = render(<Pagination itemCount={0} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call last', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('[data-action="last"]')
-        .first()
-        .simulate('click');
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(4);
+    test('last page', () => {
+      const { asFragment } = render(<Pagination itemCount={20} perPage={10} page={2} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call input', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value: '1' } })
-        .simulate('keydown', { keyCode: 13 });
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(1);
+    test('custom perPageOptions', () => {
+      const { asFragment } = render(<Pagination itemCount={40} perPageOptions={[{ title: 'some', value: 1 }]} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call input wrong value', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value: 'a' } })
-        .simulate('keydown', { keyCode: 13 });
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(1);
+    test('empty per page options', () => {
+      const { asFragment } = render(<Pagination itemCount={40} perPageOptions={[]} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call input huge page number', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value: '10' } })
-        .simulate('keydown', { keyCode: 13 });
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(4);
+    test('custom start end', () => {
+      const { asFragment } = render(<Pagination itemCount={40} itemsStart={5} itemsEnd={15} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should call input small page number', () => {
-      const wrapper = mount(<Pagination onSetPage={onSetPage} itemCount={40} />);
-      wrapper
-        .find('input')
-        .first()
-        .simulate('change', { target: { value: '-10' } })
-        .simulate('keydown', { keyCode: 13 });
-      expect(onSetPage.mock.calls).toHaveLength(1);
-      expect(onSetPage.mock.calls[0][1]).toBe(1);
+    test('titles', () => {
+      const { asFragment } = render(<Pagination itemCount={40} titles={{ items: 'values', page: 'books' }} />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} />);
-      wrapper
-        .find('[data-action="last"]')
-        .first()
-        .simulate('click');
-      expect(onSetPage.mock.calls).toHaveLength(0);
+    test('custom pagination toggle', () => {
+      const { asFragment } = render(
+        <Pagination
+          itemCount={40}
+          toggleTemplate={'${firstIndex} - ${lastIndex} - ${itemCount} - ${itemsTitle}'}
+        />
+      );
+      expect(asFragment()).toMatchSnapshot();
     });
-  });
 
-  describe('onFirst', () => {
-    const onFirst = jest.fn();
-    test('should call', () => {
-      const wrapper = mount(<Pagination onFirstClick={onFirst} itemCount={40} page={2} />);
-      wrapper
-        .find('[data-action="first"]')
-        .first()
-        .simulate('click');
-      expect(onFirst.mock.calls).toHaveLength(1);
-      expect(onFirst.mock.calls[0][1]).toBe(1);
+    test('up drop direction', () => {
+      const { asFragment } = render(<Pagination itemCount={40} dropDirection="up" />);
+      expect(asFragment()).toMatchSnapshot();
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} page={2} />);
-      wrapper
-        .find('[data-action="first"]')
-        .first()
-        .simulate('click');
-      expect(onFirst.mock.calls).toHaveLength(0);
+    test('indeterminate count (no item count)', () => {
+      render(<Pagination />);
+      expect(screen.getAllByText('1 - 10')[0]).toBeInTheDocument();
     });
-  });
 
-  describe('onLast', () => {
-    const onLast = jest.fn();
-    test('should call', () => {
-      const wrapper = mount(<Pagination onLastClick={onLast} itemCount={40} />);
-      wrapper
-        .find('[data-action="last"]')
-        .first()
-        .simulate('click');
-      expect(onLast.mock.calls).toHaveLength(1);
-      expect(onLast.mock.calls[0][1]).toBe(4);
+    test('toggleTemplate toggle text with function', () => {
+      render(
+        <Pagination
+          toggleTemplate={({ firstIndex, lastIndex }) => (
+            <div>
+              {firstIndex} - {lastIndex} of many
+            </div>
+          )}
+        />
+      );
+      expect(screen.getAllByText('1 - 10 of many')[0]).toBeInTheDocument();
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} />);
-      wrapper
-        .find('[data-action="last"]')
-        .first()
-        .simulate('click');
-      expect(onLast.mock.calls).toHaveLength(0);
+    test('toggleTemplate toggle text with string', () => {
+      render(<Pagination toggleTemplate={'I am a string'} />);
+      expect(screen.getAllByText('I am a string')[0]).toBeInTheDocument();
     });
   });
 
-  describe('onPrevious', () => {
-    const onPrevious = jest.fn();
-    test('should call', () => {
-      const wrapper = mount(<Pagination onPreviousClick={onPrevious} itemCount={40} page={3} />);
-      wrapper
-        .find('[data-action="previous"]')
-        .first()
-        .simulate('click');
-      expect(onPrevious.mock.calls).toHaveLength(1);
-      expect(onPrevious.mock.calls[0][1]).toBe(2);
+  describe('API', () => {
+    describe('onSetPage', () => {
+      const onSetPage = jest.fn();
+
+      test('should call first', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} page={2} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call previous', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} page={3} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call next', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call last', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call input', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        const input = screen.getByLabelText('Current page');
+        userEvent.type(input, '1');
+        userEvent.type(input, '{enter}');
+
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call input wrong value', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        const input = screen.getByLabelText('Current page');
+        userEvent.type(input, 'a');
+        userEvent.type(input, '{enter}');
+
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call input huge page number', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        const input = screen.getByLabelText('Current page');
+        userEvent.type(input, '10');
+        userEvent.type(input, '{enter}');
+
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should call input small page number', () => {
+        render(<Pagination onSetPage={onSetPage} itemCount={40} />);
+
+        const input = screen.getByLabelText('Current page');
+        userEvent.type(input, '-10');
+        userEvent.type(input, '{enter}');
+
+        expect(onSetPage).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        expect(onSetPage).not.toHaveBeenCalled();
+      });
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} />);
-      wrapper
-        .find('[data-action="previous"]')
-        .first()
-        .simulate('click');
-      expect(onPrevious.mock.calls).toHaveLength(0);
+    describe('onFirst', () => {
+      const onFirst = jest.fn();
+      test('should call', () => {
+        render(<Pagination onFirstClick={onFirst} itemCount={40} page={2} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        expect(onFirst).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} page={2} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to first page' }));
+        expect(onFirst).not.toHaveBeenCalled();
+      });
     });
-  });
 
-  describe('onNext', () => {
-    const onNext = jest.fn();
-    test('should call', () => {
-      const wrapper = mount(<Pagination onNextClick={onNext} itemCount={40} />);
-      wrapper
-        .find('[data-action="next"]')
-        .first()
-        .simulate('click');
-      expect(onNext.mock.calls).toHaveLength(1);
-      expect(onNext.mock.calls[0][1]).toBe(2);
+    describe('onLast', () => {
+      const onLast = jest.fn();
+      test('should call', () => {
+        render(<Pagination onLastClick={onLast} itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        expect(onLast).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to last page' }));
+        expect(onLast).not.toHaveBeenCalled();
+      });
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} />);
-      wrapper
-        .find('[data-action="previous"]')
-        .first()
-        .simulate('click');
-      expect(onNext.mock.calls).toHaveLength(0);
+    describe('onPrevious', () => {
+      const onPrevious = jest.fn();
+      test('should call', () => {
+        render(<Pagination onPreviousClick={onPrevious} itemCount={40} page={3} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        expect(onPrevious).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        expect(onPrevious).not.toHaveBeenCalled();
+      });
     });
-  });
 
-  describe('onPerPage', () => {
-    const onPerPage = jest.fn();
-    test('should call', () => {
-      const wrapper = mount(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
-      wrapper
-        .find('.pf-c-options-menu button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-      wrapper
-        .find('ul li [data-action="per-page-20"]')
-        .first()
-        .simulate('click');
-      expect(onPerPage.mock.calls).toHaveLength(1);
-      expect(onPerPage.mock.calls[0][1]).toBe(20);
+    describe('onNext', () => {
+      const onNext = jest.fn();
+      test('should call', () => {
+        render(<Pagination onNextClick={onNext} itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to next page' }));
+        expect(onNext).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Go to previous page' }));
+        expect(onNext).not.toHaveBeenCalled();
+      });
     });
 
-    test('should NOT call', () => {
-      const wrapper = mount(<Pagination itemCount={40} />);
-      wrapper
-        .find('.pf-c-options-menu button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-      wrapper
-        .find('ul li [data-action="per-page-20"]')
-        .first()
-        .simulate('click');
-      expect(onPerPage.mock.calls).toHaveLength(0);
+    describe('onPerPage', () => {
+      const onPerPage = jest.fn();
+      test('should call', () => {
+        render(<Pagination onPerPageSelect={onPerPage} itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
+        userEvent.click(screen.getByText('20 per page'));
+
+        expect(onPerPage).toHaveBeenCalled();
+      });
+
+      test('should NOT call', () => {
+        render(<Pagination itemCount={40} />);
+
+        userEvent.click(screen.getByRole('button', { name: 'Items per page' }));
+        userEvent.click(screen.getByText('20 per page'));
+
+        expect(onPerPage).not.toHaveBeenCalled();
+      });
     });
   });
 });