test: convert EuiTable unit tests using enzyme render to RTL (#6969)

elastic · Jul 20, 2023 · 47a02dd · 47a02dd
1 parent cf66046
commit 47a02dd
Show file tree

Hide file tree

Showing 21 changed files with 184 additions and 148 deletions.
diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`renders EuiTable 1`] = `
         >
           <span
             class="euiTableCellContent__text"
+            title="Hi Title"
           >
             Hi Title
           </span>
@@ -34,6 +35,7 @@ exports[`renders EuiTable 1`] = `
         >
           <span
             class="euiTableCellContent__text"
+            title="Bye Title"
           >
             Bye Title
           </span>

diff --git a/src/components/table/__snapshots__/table_footer.test.tsx.snap b/src/components/table/__snapshots__/table_footer.test.tsx.snap
@@ -1,14 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiTableFooter is rendered 1`] = `
-Array [
+<div>
   <tfoot
     aria-label="aria-label"
     class="testClass1 testClass2 emotion-euiTestCss"
     data-test-subj="test subject string"
   >
-    <tr />
-  </tfoot>,
-  "children",
-]
+    <tr>
+      children
+    </tr>
+  </tfoot>
+</div>
 `;
diff --git a/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`EuiTableFooterCell is rendered 1`] = `
 exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
 <td
   class="euiTableFooterCell"
-  style="width:20%"
+  style="width: 20%;"
 >
   <div
     class="euiTableCellContent"
@@ -80,7 +80,7 @@ exports[`EuiTableFooterCell width and style accepts style attribute 1`] = `
 exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
 <td
   class="euiTableFooterCell"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"
@@ -97,7 +97,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute 1`] = `
 exports[`EuiTableFooterCell width and style accepts width attribute as number 1`] = `
 <td
   class="euiTableFooterCell"
-  style="width:100px"
+  style="width: 100px;"
 >
   <div
     class="euiTableCellContent"
@@ -114,7 +114,7 @@ exports[`EuiTableFooterCell width and style accepts width attribute as number 1`
 exports[`EuiTableFooterCell width and style resolves style and width attribute 1`] = `
 <td
   class="euiTableFooterCell"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"

diff --git a/src/components/table/__snapshots__/table_header_cell.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`renders EuiTableHeaderCell 1`] = `
   >
     <span
       class="euiTableCellContent__text"
+      title="children"
     >
       children
     </span>
@@ -95,6 +96,7 @@ exports[`sorting does not render a button with readOnly 1`] = `
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -119,6 +121,7 @@ exports[`sorting is rendered with isSortAscending 1`] = `
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -143,6 +146,7 @@ exports[`sorting is rendered with isSorted 1`] = `
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -172,6 +176,7 @@ exports[`sorting renders a button with onSort 1`] = `
     >
       <span
         class="euiTableCellContent__text"
+        title="Test"
       >
         Test
       </span>
@@ -189,13 +194,14 @@ exports[`width and style accepts style attribute 1`] = `
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
-  style="width:20%"
+  style="width: 20%;"
 >
   <span
     class="euiTableCellContent"
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -208,13 +214,14 @@ exports[`width and style accepts width attribute 1`] = `
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
-  style="width:10%"
+  style="width: 10%;"
 >
   <span
     class="euiTableCellContent"
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -227,13 +234,14 @@ exports[`width and style accepts width attribute as number 1`] = `
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
-  style="width:100px"
+  style="width: 100px;"
 >
   <span
     class="euiTableCellContent"
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>
@@ -246,13 +254,14 @@ exports[`width and style resolves style and width attribute 1`] = `
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
-  style="width:10%"
+  style="width: 10%;"
 >
   <span
     class="euiTableCellContent"
   >
     <span
       class="euiTableCellContent__text"
+      title="Test"
     >
       Test
     </span>

diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts style attribute 1`]
 <th
   class="euiTableHeaderCellCheckbox"
   scope="col"
-  style="width:20%"
+  style="width: 20%;"
 >
   <div
     class="euiTableCellContent"
@@ -31,7 +31,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute 1`]
 <th
   class="euiTableHeaderCellCheckbox"
   scope="col"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"
@@ -45,7 +45,7 @@ exports[`EuiTableHeaderCellCheckbox width and style accepts width attribute as n
 <th
   class="euiTableHeaderCellCheckbox"
   scope="col"
-  style="width:100px"
+  style="width: 100px;"
 >
   <div
     class="euiTableCellContent"
@@ -59,7 +59,7 @@ exports[`EuiTableHeaderCellCheckbox width and style resolves style and width att
 <th
   class="euiTableHeaderCellCheckbox"
   scope="col"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"

diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`valign renders top when specified 1`] = `
 exports[`width and style accepts style attribute 1`] = `
 <td
   class="euiTableRowCell euiTableRowCell--middle"
-  style="width:20%"
+  style="width: 20%;"
 >
   <div
     class="euiTableCellContent"
@@ -188,7 +188,7 @@ exports[`width and style accepts style attribute 1`] = `
 exports[`width and style accepts width attribute 1`] = `
 <td
   class="euiTableRowCell euiTableRowCell--middle"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"
@@ -205,7 +205,7 @@ exports[`width and style accepts width attribute 1`] = `
 exports[`width and style accepts width attribute as number 1`] = `
 <td
   class="euiTableRowCell euiTableRowCell--middle"
-  style="width:100px"
+  style="width: 100px;"
 >
   <div
     class="euiTableCellContent"
@@ -222,7 +222,7 @@ exports[`width and style accepts width attribute as number 1`] = `
 exports[`width and style resolves style and width attribute 1`] = `
 <td
   class="euiTableRowCell euiTableRowCell--middle"
-  style="width:10%"
+  style="width: 10%;"
 >
   <div
     class="euiTableCellContent"

diff --git a/src/components/table/mobile/table_header_mobile.test.tsx b/src/components/table/mobile/table_header_mobile.test.tsx
@@ -7,15 +7,15 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { render } from '../../../test/rtl';
 
 import { EuiTableHeaderMobile } from './table_header_mobile';
 
 describe('EuiTableHeaderMobile', () => {
   test('is rendered', () => {
-    const component = render(<EuiTableHeaderMobile {...requiredProps} />);
+    const { container } = render(<EuiTableHeaderMobile {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/table/mobile/table_sort_mobile.test.tsx b/src/components/table/mobile/table_sort_mobile.test.tsx
@@ -7,15 +7,15 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { render } from '../../../test/rtl';
 
 import { EuiTableSortMobile } from './table_sort_mobile';
 
 describe('EuiTableSortMobile', () => {
   test('is rendered', () => {
-    const component = render(<EuiTableSortMobile {...requiredProps} />);
+    const { container } = render(<EuiTableSortMobile {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/table/mobile/table_sort_mobile_item.test.tsx b/src/components/table/mobile/table_sort_mobile_item.test.tsx
@@ -7,15 +7,15 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { render } from '../../../test/rtl';
 
 import { EuiTableSortMobileItem } from './table_sort_mobile_item';
 
 describe('EuiTableSortMobileItem', () => {
   test('is rendered', () => {
-    const component = render(<EuiTableSortMobileItem {...requiredProps} />);
+    const { container } = render(<EuiTableSortMobileItem {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/table/table.test.tsx b/src/components/table/table.test.tsx
@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { render } from '../../test/rtl';
 
 import { EuiTable } from './table';
 import { EuiTableRow } from './table_row';
@@ -18,7 +18,7 @@ import { EuiTableHeader } from './table_header';
 import { EuiTableHeaderCell } from './table_header_cell';
 
 test('renders EuiTable', () => {
-  const component = (
+  const { container } = render(
     <EuiTable {...requiredProps}>
       <EuiTableHeader>
         <EuiTableHeaderCell>Hi Title</EuiTableHeaderCell>
@@ -34,5 +34,5 @@ test('renders EuiTable', () => {
       </EuiTableBody>
     </EuiTable>
   );
-  expect(render(component)).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
diff --git a/src/components/table/table_footer.test.tsx b/src/components/table/table_footer.test.tsx
@@ -7,17 +7,17 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { render } from '../../test/rtl';
 
 import { EuiTableFooter } from './table_footer';
 
 describe('EuiTableFooter', () => {
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiTableFooter {...requiredProps}>children</EuiTableFooter>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });