fix EuiComboBox tests

elastic · Jul 24, 2023 · 695dc42 · 695dc42
1 parent 0651419
commit 695dc42
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 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
@@ -427,6 +428,7 @@ Array [
       >
         <span
           class="euiComboBoxPill__prepend"
+          data-test-subj="euiComboBoxPillPrepend"
         >
           Pre
         </span>
@@ -448,6 +450,7 @@ Array [
   </span>,
   <span
     class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
+    data-test-subj="euiComboBoxPill"
     title="2"
   >
     <span
@@ -459,6 +462,7 @@ Array [
         2
         <span
           class="euiComboBoxPill__append"
+          data-test-subj="euiComboBoxPillAppend"
         >
           Post
         </span>
@@ -483,9 +487,11 @@ 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"
+    data-test-subj="euiComboBoxPillPrepend"
   >
     Pre
   </span>

diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
@@ -124,13 +124,13 @@ describe('props', () => {
     ];
 
     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('euiComboBoxPillPrepend')).toBeInTheDocument();
+      expect(getByTestSubject('euiComboBoxPillAppend')).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
@@ -69,11 +69,21 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
     const content = (
       <>
         {option.prepend && (
-          <span className="euiComboBoxPill__prepend">{option.prepend}</span>
+          <span
+            className="euiComboBoxPill__prepend"
+            data-test-subj="euiComboBoxPillPrepend"
+          >
+            {option.prepend}
+          </span>
         )}
         {children}
         {option.append && (
-          <span className="euiComboBoxPill__append">{option.append}</span>
+          <span
+            className="euiComboBoxPill__append"
+            data-test-subj="euiComboBoxPillAppend"
+          >
+            {option.append}
+          </span>
         )}
       </>
     );
@@ -89,6 +99,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 +117,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 +127,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
       <EuiBadge
         className={classes}
         color={color}
+        data-test-subj="euiComboBoxPill"
         title={children}
         {...rest}
         {...onClickProps}