Merge pull request #281 from qoretechnologies/foxhoundn/bug-add-onpag…

…echange-280

- Panel action fixes & improvements

__tests__/button.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { ReqoreButton, ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 
@@ -18,6 +18,20 @@ test('Renders <Button /> properly', () => {
   expect(document.querySelectorAll('.reqore-button').length).toBe(2);
 });
 
+test('Renders <Button /> using `label`', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton label='Button label' />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(screen.getAllByText('Button label')).toBeTruthy();
+});
+
 test('Renders <Button /> with size properly', () => {
   render(
     <ReqoreUIProvider>
@@ -170,6 +184,21 @@ test('Renders <Button /> with a Tag props badge', () => {
   expect(document.querySelectorAll('.reqore-button-badge').length).toBe(1);
 });
 
+test('Renders <Button /> with multiple badges', () => {
+  const onClick = jest.fn();
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton badge={[0, 'test', { label: 0 }]}>Click</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-button-badge').length).toBe(3);
+});
+
 test('Tooltip on <Button /> works', () => {
   jest.useFakeTimers();
 

__tests__/drawer.test.tsx

@@ -66,7 +66,7 @@ test('Renders closable <Drawer /> properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
-        <ReqoreContent>
+        <ReqoreContent style={{ width: 800 }}>
           <ReqoreDrawer isOpen onClose={fn}>
             Hello
           </ReqoreDrawer>

__tests__/heading.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  ReqoreH1,
+  ReqoreH2,
+  ReqoreH3,
+  ReqoreH4,
+  ReqoreH5,
+  ReqoreH6,
+  ReqoreUIProvider,
+} from '../src';
+
+test('<Heading /> renders properly', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreH1>H1</ReqoreH1>
+      <ReqoreH2>H2</ReqoreH2>
+      <ReqoreH3>H3</ReqoreH3>
+      <ReqoreH4>H4</ReqoreH4>
+      <ReqoreH5>H5</ReqoreH5>
+      <ReqoreH6>H6</ReqoreH6>
+    </ReqoreUIProvider>
+  );
+
+  expect(screen.getAllByText('H1')).toBeTruthy();
+  expect(screen.getAllByText('H2')).toBeTruthy();
+  expect(screen.getAllByText('H3')).toBeTruthy();
+  expect(screen.getAllByText('H4')).toBeTruthy();
+  expect(screen.getAllByText('H5')).toBeTruthy();
+  expect(screen.getAllByText('H6')).toBeTruthy();
+
+  expect(document.querySelectorAll('h1').length).toBe(1);
+  expect(document.querySelectorAll('h2').length).toBe(1);
+  expect(document.querySelectorAll('h3').length).toBe(1);
+  expect(document.querySelectorAll('h4').length).toBe(1);
+  expect(document.querySelectorAll('h5').length).toBe(1);
+  expect(document.querySelectorAll('h6').length).toBe(1);
+});
+
+test('Tooltip on <Heading /> works', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreH3 tooltip='test'>Test</ReqoreH3>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  fireEvent.mouseEnter(document.querySelectorAll('h3')[0]);
+
+  jest.advanceTimersByTime(1);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+});

__tests__/hooks/useReqorePaging.test.tsx

@@ -6,28 +6,33 @@ import { IReqorePagingOptions } from '../../src/hooks/usePaging';
 import { tableData as data } from '../../src/mock/tableData';
 
 test('useReqorePaging returns all pages', () => {
+  const fn = jest.fn();
   const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
   const { result } = renderHook(
     ({ items }) =>
       useReqorePaging({
         items,
+        onPageChange: fn,
       }),
     { wrapper, initialProps: { items: data } }
   );
 
   expect(result.current.pages.length).toEqual(100);
   expect(result.current.pageCount).toEqual(100);
   expect(result.current.renderControls).toEqual(true);
+  expect(fn).not.toHaveBeenCalled();
 });
 
 test('useReqorePaging with default start page', () => {
+  const fn = jest.fn();
   const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
   const { result } = renderHook(
     ({ items }) =>
       useReqorePaging({
         items,
         startPage: 11,
         pagesToShow: 5,
+        onPageChange: fn,
       }),
     { wrapper, initialProps: { items: data } }
   );
@@ -39,6 +44,7 @@ test('useReqorePaging with default start page', () => {
   expect(result.current.pages[1]).toEqual(9);
   expect(result.current.pages[5]).toEqual(13);
   expect(result.current.pages[6]).toEqual(100);
+  expect(fn).toHaveBeenCalledWith(11, { isFirst: false, isLast: false });
 });
 
 test('useReqorePaging specified number of pages', () => {
@@ -116,12 +122,14 @@ test('useReqorePaging returns items per page', () => {
 });
 
 test('useReqorePaging returns new items and pages when size of data change, current page is set to 1', () => {
+  const fn = jest.fn();
   const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
   const { result, rerender } = renderHook(
     ({ itemsPerPage, items }) =>
       useReqorePaging({
         items,
         itemsPerPage,
+        onPageChange: fn,
       }),
     { wrapper, initialProps: { itemsPerPage: 10, items: data } }
   );
@@ -140,6 +148,7 @@ test('useReqorePaging returns new items and pages when size of data change, curr
   expect(result.current.pages.length).toEqual(2);
   expect(result.current.items.length).toEqual(15);
   expect(result.current.currentPage).toEqual(1);
+  expect(fn).toHaveBeenCalledWith(1, { isFirst: true, isLast: false });
 });
 
 test('useReqorePaging does not return new items and pages when data change', () => {
@@ -168,13 +177,15 @@ test('useReqorePaging does not return new items and pages when data change', ()
 });
 
 test('useReqorePaging page navigation works correctly', () => {
+  const fn = jest.fn();
   const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
   const { result } = renderHook(
     ({ itemsPerPage, items }: IReqorePagingOptions<any>) =>
       useReqorePaging({
         items,
         itemsPerPage,
         infinite: true,
+        onPageChange: fn,
       }),
     { wrapper, initialProps: { itemsPerPage: 10, items: data } as IReqorePagingOptions<any> }
   );
@@ -187,32 +198,37 @@ test('useReqorePaging page navigation works correctly', () => {
   });
 
   expect(result.current.currentPage).toEqual(2);
+  expect(fn).toHaveBeenLastCalledWith(2, { isFirst: false, isLast: false });
 
   act(() => {
     result.current.next();
   });
 
   expect(result.current.currentPage).toEqual(3);
+  expect(fn).toHaveBeenLastCalledWith(3, { isFirst: false, isLast: false });
 
   act(() => {
     result.current.last();
   });
 
   expect(result.current.isLastPage).toEqual(true);
   expect(result.current.currentPage).toEqual(100);
+  expect(fn).toHaveBeenLastCalledWith(100, { isFirst: false, isLast: true });
 
   act(() => {
     result.current.back();
   });
 
   expect(result.current.currentPage).toEqual(99);
+  expect(fn).toHaveBeenLastCalledWith(99, { isFirst: false, isLast: false });
 
   act(() => {
     result.current.first();
   });
 
   expect(result.current.isFirstPage).toEqual(true);
   expect(result.current.currentPage).toEqual(1);
+  expect(fn).toHaveBeenLastCalledWith(1, { isFirst: true, isLast: false });
 });
 
 test('useReqorePaging returns correct number of items with infinite loading', () => {

__tests__/pagination.test.tsx

@@ -1,6 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React, { useState } from 'react';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
+import { useMount } from 'react-use';
 import {
   ReqoreContent,
   ReqoreControlGroup,
@@ -23,13 +24,18 @@ const Component = ({
   items?: any[];
 }) => {
   const paging = useReqorePaging<any>({ ...pagingOptions, items: items || data });
+  const [scrollContainer, setScrollContainer] = useState<any>(undefined);
+
+  useMount(() => {
+    setScrollContainer(document.querySelector('.reqore-content')!);
+  });
 
   return (
     <ReqoreControlGroup vertical fluid>
       {paging.items.map((item) => (
         <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
       ))}
-      <ReqorePagination {...componentOptions} {...paging} />
+      <ReqorePagination {...componentOptions} {...paging} scrollContainer={scrollContainer} />
     </ReqoreControlGroup>
   );
 };
@@ -303,3 +309,98 @@ test('Renders <Pagination /> with load more button and auto load', () => {
   // Pagination should be removed
   expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(0);
 });
+
+test('Renders <Pagination /> and changes pages with vertical scroll', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <Component componentOptions={{ changePageOnScroll: 'vertical' }} />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    deltaY: 1,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    deltaY: 21,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Claudian Klosterman')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    deltaY: -21,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+});
+
+test('Renders <Pagination /> and changes pages with horizontal scroll', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <Component componentOptions={{ changePageOnScroll: 'horizontal' }} />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    shiftKey: true,
+    deltaX: 1,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    shiftKey: true,
+    deltaX: 21,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Claudian Klosterman')).toBeTruthy();
+
+  fireEvent.wheel(document.querySelector('.reqore-content')!, {
+    shiftKey: true,
+    deltaX: -21,
+  });
+
+  act(() => {
+    jest.advanceTimersByTime(100);
+  });
+
+  expect(screen.getAllByText('Rob Pooley')).toBeTruthy();
+});