test: convert even more component unit tests using enzyme render to R…

…TL (#6974) * test: convert EuiPopover unit tests using enzyme render to RTL * test: convert EuiPanel unit tests using enzyme render to RTL * test: convert EuiNotification unit tests using enzyme render to RTL * test: convert EuiMarkdownEditor unit tests using enzyme render to RTL * test: convert EuiLoading* unit tests using enzyme render to RTL * test: convert EuiListGroup unit tests using enzyme render to RTL * test: convert EuiKeyPadMenu unit tests using enzyme render to RTL * test: convert EuiHeader unit tests using enzyme render to RTL * uncomment showTooltip test * fix EuiComboBox tests
elastic · Jul 24, 2023 · 69c0142 · 69c0142
1 parent 0ccd0c7
commit 69c0142
Show file tree

Hide file tree

Showing 39 changed files with 479 additions and 398 deletions.
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -417,6 +417,7 @@ exports[`props option.prepend & option.append renders in pills 1`] = `
 Array [
   <span
     class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
+    data-test-subj="euiComboBoxPill"
     title="1"
   >
     <span
@@ -428,7 +429,11 @@ Array [
         <span
           class="euiComboBoxPill__prepend"
         >
-          Pre
+          <span
+            data-test-subj="prepend"
+          >
+            Pre
+          </span>
         </span>
         1
       </span>
@@ -448,6 +453,7 @@ Array [
   </span>,
   <span
     class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
+    data-test-subj="euiComboBoxPill"
     title="2"
   >
     <span
@@ -460,7 +466,11 @@ Array [
         <span
           class="euiComboBoxPill__append"
         >
-          Post
+          <span
+            data-test-subj="append"
+          >
+            Post
+          </span>
         </span>
       </span>
       <button
@@ -483,11 +493,16 @@ Array [
 exports[`props option.prepend & option.append renders in single selection 1`] = `
 <span
   class="euiComboBoxPill euiComboBoxPill--plainText"
+  data-test-subj="euiComboBoxPill"
 >
   <span
     class="euiComboBoxPill__prepend"
   >
-    Pre
+    <span
+      data-test-subj="prepend"
+    >
+      Pre
+    </span>
   </span>
   1
 </span>
@@ -535,7 +550,11 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
                 <span
                   class="euiComboBoxOption__prepend"
                 >
-                  Pre
+                  <span
+                    data-test-subj="prepend"
+                  >
+                    Pre
+                  </span>
                 </span>
                 <span
                   class="euiComboBoxOption__content"
@@ -572,7 +591,11 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
                 <span
                   class="euiComboBoxOption__append"
                 >
-                  Post
+                  <span
+                    data-test-subj="append"
+                  >
+                    Post
+                  </span>
                 </span>
               </span>
             </span>

diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
@@ -119,18 +119,18 @@ describe('props', () => {
 
   describe('option.prepend & option.append', () => {
     const options = [
-      { label: '1', prepend: 'Pre' },
-      { label: '2', append: 'Post' },
+      { label: '1', prepend: <span data-test-subj="prepend">Pre</span> },
+      { label: '2', append: <span data-test-subj="append">Post</span> },
     ];
 
     test('renders in pills', () => {
-      const component = render(
+      const { getByTestSubject, getAllByTestSubject } = render(
         <EuiComboBox options={options} selectedOptions={options} />
       );
 
-      expect(component.find('.euiComboBoxPill__prepend')).toHaveLength(1);
-      expect(component.find('.euiComboBoxPill__append')).toHaveLength(1);
-      expect(component.find('.euiComboBoxPill')).toMatchSnapshot();
+      expect(getByTestSubject('prepend')).toBeInTheDocument();
+      expect(getByTestSubject('append')).toBeInTheDocument();
+      expect(getAllByTestSubject('euiComboBoxPill')).toMatchSnapshot();
     });
 
     test('renders in the options dropdown', () => {
@@ -146,14 +146,15 @@ describe('props', () => {
     });
 
     test('renders in single selection', () => {
-      const component = render(
+      const { getByTestSubject } = render(
         <EuiComboBox
           options={options}
           selectedOptions={[options[0]]}
           singleSelection={{ asPlainText: true }}
         />
       );
-      expect(component.find('.euiComboBoxPill')).toMatchSnapshot();
+
+      expect(getByTestSubject('euiComboBoxPill')).toMatchSnapshot();
     });
   });
 

diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -89,6 +89,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
             <EuiBadge
               className={classes}
               color={color}
+              data-test-subj="euiComboBoxPill"
               iconOnClick={this.onCloseButtonClick}
               iconOnClickAriaLabel={removeSelection}
               iconSide="right"
@@ -106,7 +107,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
 
     if (asPlainText) {
       return (
-        <span className={classes} {...rest}>
+        <span className={classes} data-test-subj="euiComboBoxPill" {...rest}>
           {content}
         </span>
       );
@@ -116,6 +117,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
       <EuiBadge
         className={classes}
         color={color}
+        data-test-subj="euiComboBoxPill"
         title={children}
         {...rest}
         {...onClickProps}

diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
@@ -128,10 +128,11 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
   <h3
     class="euiHeaderAlert__title"
     id="generated-id-title"
-  />
-  <h2>
-    Circumambulate the city
-  </h2>
+  >
+    <span>
+      Circumambulate the city
+    </span>
+  </h3>
   <div
     class="euiHeaderAlert__text"
   />

diff --git a/src/components/header/header_alert/header_alert.test.tsx b/src/components/header/header_alert/header_alert.test.tsx
@@ -7,23 +7,23 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { render } from '../../../test/rtl';
 
 import { EuiHeaderAlert } from './header_alert';
 
 describe('EuiHeaderAlert', () => {
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiHeaderAlert {...requiredProps} title="title" date="date" />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('renders action', () => {
     const action = <button>Quietly take to the ship</button>;
-    const component = render(
+    const { container } = render(
       <EuiHeaderAlert
         {...requiredProps}
         title="title"
@@ -32,24 +32,24 @@ describe('EuiHeaderAlert', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('renders title as an element', () => {
-    const title = <h2>Circumambulate the city</h2>;
-    const component = render(
+    const title = <span>Circumambulate the city</span>;
+    const { container } = render(
       <EuiHeaderAlert {...requiredProps} date="date" title={title} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('renders date as an element', () => {
     const date = <h2>October 18, 1851</h2>;
-    const component = render(
+    const { container } = render(
       <EuiHeaderAlert {...requiredProps} title="shazm" date={date} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/header/header_links/header_link.test.tsx b/src/components/header/header_links/header_link.test.tsx
@@ -7,27 +7,27 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { render } from '../../../test/rtl';
 
 import { EuiHeaderLink } from './header_link';
 
 describe('EuiHeaderLink', () => {
   test('is rendered', () => {
-    const component = render(<EuiHeaderLink {...requiredProps} />);
+    const { container } = render(<EuiHeaderLink {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('is rendered as active', () => {
-    const component = render(<EuiHeaderLink isActive />);
+    const { container } = render(<EuiHeaderLink isActive />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('can render as specific color', () => {
-    const component = render(<EuiHeaderLink color="danger" />);
+    const { container } = render(<EuiHeaderLink color="danger" />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
@@ -7,9 +7,9 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
+import { render } from '../../../test/rtl';
 
 import { EuiHeaderLinks, GUTTER_SIZES } from './header_links';
 
@@ -19,24 +19,26 @@ describe('EuiHeaderLinks', () => {
   });
 
   test('is rendered', () => {
-    const component = render(<EuiHeaderLinks {...requiredProps} />);
+    const { container } = render(<EuiHeaderLinks {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('gutterSize', () => {
     GUTTER_SIZES.forEach((gutterSize) => {
       test(`${gutterSize} is rendered`, () => {
-        const component = render(<EuiHeaderLinks gutterSize={gutterSize} />);
+        const { container } = render(
+          <EuiHeaderLinks gutterSize={gutterSize} />
+        );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });
 
   describe('popover props', () => {
     test('is rendered', () => {
-      const component = render(
+      const { container } = render(
         <EuiHeaderLinks
           popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
           popoverButtonProps={{
@@ -47,13 +49,15 @@ describe('EuiHeaderLinks', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is never rendered with "none"', () => {
-      const component = render(<EuiHeaderLinks popoverBreakpoints={'none'} />);
+      const { container } = render(
+        <EuiHeaderLinks popoverBreakpoints={'none'} />
+      );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 });
diff --git a/src/components/header/header_section/__snapshots__/header_section.test.tsx.snap b/src/components/header/header_section/__snapshots__/header_section.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`EuiHeaderSection is rendered 1`] = `
 exports[`EuiHeaderSection renders optional params 1`] = `
 <div
   class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
-  style="color:blue"
+  style="color: blue;"
 >
   <span>
     Some years ago never mind how long precisely...