[setup] Misc EuiTablePaginationCleanup

- convert tests to RTL - remove unnecessary `() => {}` callback default (since prop is not required), use optional chaining instead
elastic · Jul 14, 2023 · cc1a917 · cc1a917
1 parent 98196ee
commit cc1a917
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 44 deletions.
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -1,40 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiTablePagination is rendered 1`] = `
+exports[`EuiTablePagination hides the per page options 1`] = `
 <div
   class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
 >
   <div
     class="euiFlexItem emotion-euiFlexItem-growZero"
-  >
-    <div
-      class="euiPopover emotion-euiPopover"
-    >
-      <div
-        class="euiPopover__anchor css-16vtueo-render"
-      >
-        <button
-          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
-          data-test-subj="tablePaginationPopoverButton"
-          type="button"
-        >
-          <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
-          >
-            <span
-              class="eui-textTruncate euiButtonEmpty__text"
-            >
-              Rows per page: 50
-            </span>
-            <span
-              color="inherit"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
+  />
   <div
     class="euiFlexItem emotion-euiFlexItem-growZero"
   >
@@ -191,13 +163,43 @@ exports[`EuiTablePagination is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
+exports[`EuiTablePagination renders 1`] = `
 <div
   class="euiFlexGroup eui-xScroll emotion-euiFlexGroup-wrap-s-spaceBetween-center-row"
 >
   <div
     class="euiFlexItem emotion-euiFlexItem-growZero"
-  />
+  >
+    <div
+      class="euiPopover emotion-euiPopover"
+    >
+      <div
+        class="euiPopover__anchor css-16vtueo-render"
+      >
+        <button
+          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
+          data-test-subj="tablePaginationPopoverButton"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          >
+            <span
+              class="eui-textTruncate euiButtonEmpty__text"
+            >
+              Rows per page
+              : 
+              50
+            </span>
+            <span
+              color="inherit"
+              data-euiicon-type="arrowDown"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
   <div
     class="euiFlexItem emotion-euiFlexItem-growZero"
   >

diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 
 import { EuiTablePagination } from './table_pagination';
@@ -18,28 +18,29 @@ describe('EuiTablePagination', () => {
     pageCount: 5,
     onChangePage: jest.fn(),
   };
-  test('is rendered', () => {
-    const component = render(
+
+  it('renders', () => {
+    const { container } = render(
       <EuiTablePagination {...requiredProps} {...paginationProps} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('is rendered when hiding the per page options', () => {
-    const component = render(
+  it('hides the per page options', () => {
+    const { container } = render(
       <EuiTablePagination
         {...requiredProps}
         {...paginationProps}
         showPerPageOptions={false}
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders a "show all" itemsPerPage option', () => {
-    const component = render(
+  it('renders a "show all" itemsPerPage option', () => {
+    const { container } = render(
       <EuiTablePagination
         {...requiredProps}
         {...paginationProps}
@@ -48,6 +49,6 @@ describe('EuiTablePagination', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
@@ -56,7 +56,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
   itemsPerPage = 50,
   itemsPerPageOptions = [10, 20, 50, 100],
   showPerPageOptions = true,
-  onChangeItemsPerPage = () => {},
+  onChangeItemsPerPage,
   onChangePage,
   pageCount,
   ...rest
@@ -105,7 +105,7 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
           icon={itemsPerPageOption === itemsPerPage ? 'check' : 'empty'}
           onClick={() => {
             closePopover();
-            onChangeItemsPerPage(itemsPerPageOption);
+            onChangeItemsPerPage?.(itemsPerPageOption);
           }}
           data-test-subj={`tablePagination-${itemsPerPageOption}-rows`}
         >