fix EuiComboBox tests

elastic · Jul 24, 2023 · 7cbab7f · 7cbab7f
1 parent 0651419
commit 7cbab7f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 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}