Assign EuiComboBox data-test-subj to the options list with a '-option…

…sList' suffix (#1054)
elastic · Jul 30, 2018 · 35f77ba · 35f77ba
1 parent 22238ad
commit 35f77ba
Show file tree

Hide file tree

Showing 7 changed files with 5,515 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- `EuiComboBox` now applies the provided `data-test-subj` to its options list element with the suffix `-optionsList` so you can find a specific combo box instance's options list. This wasn't previously possible because the options list is attached to the body element, not the combo box element. This is in addition to the existing `data-test-subj="comboBoxOptionsList"`. ([#1054](https://github.com/elastic/eui/pull/1054))
+
 **Bug fixes**
 
 - Fixed `EuiXYChart` responsive resize in a flexbox layout ([#1041](https://github.com/elastic/eui/pull/1041))

diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
@@ -77,6 +77,7 @@ export default class extends Component {
         onChange={this.onChange}
         onCreateOption={this.onCreateOption}
         isClearable={true}
+        data-test-subj="demoComboBox"
       />
     );
   }

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -164,31 +164,86 @@ exports[`props isDisabled is rendered 1`] = `
 </div>
 `;
 
-exports[`props options are rendered 1`] = `
+exports[`props options list is rendered 1`] = `
 <div
-  className="euiComboBox"
-  onFocus={[Function]}
-  onKeyDown={[Function]}
+  class="euiComboBox euiComboBox-isOpen"
+  data-test-subj="alsoGetsAppliedToOptionsList"
 >
-  <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
-    hasSelectedOptions={false}
-    inputRef={[Function]}
-    isListOpen={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    searchValue=""
-    selectedOptions={Array []}
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <div
+        class="euiComboBox__inputWrap"
+        data-test-subj="comboBoxInput"
+      >
+        <div
+          class="euiComboBox__input"
+          style="font-size: 14px; display: inline-block;"
+        >
+          <input
+            aria-hidden="true"
+            data-test-subj="comboBoxSearchInput"
+            style="box-sizing: content-box; width: 2px;"
+            value=""
+          />
+          <div
+            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+          />
+        </div>
+      </div>
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <button
+          aria-label="Close list of options"
+          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+          data-test-subj="comboBoxToggleListButton"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_down-a"
+              />
+            </defs>
+            <use
+              fill-rule="nonzero"
+              xlink:href="#arrow_down-a"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiPanel euiComboBoxOptionsList euiComboBoxOptionsList--bottom"
+    data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
+  >
+    <div
+      class="euiComboBoxOptionsList__rowWrap"
+    >
+      <div
+        aria-label="grid"
+        aria-readonly="true"
+        class="ReactVirtualized__Grid ReactVirtualized__List"
+        role="grid"
+        style="box-sizing: border-box; direction: ltr; height: 189px; position: relative; width: 0px; overflow-x: hidden; overflow-y: auto;"
+        tabindex="-1"
+      />
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -569,6 +569,7 @@ export class EuiComboBox extends Component {
       isInvalid,
       rowHeight,
       isClearable,
+      'data-test-subj': dataTestSubj,
       ...rest
     } = this.props;
 
@@ -585,6 +586,7 @@ export class EuiComboBox extends Component {
     let optionsList;
 
     if (!noSuggestions && isListOpen) {
+      const optionsListDataTestSubj = dataTestSubj ? `${dataTestSubj}-optionsList` : undefined;
       optionsList = (
         <EuiPortal>
           <EuiComboBoxOptionsList
@@ -607,6 +609,7 @@ export class EuiComboBox extends Component {
             scrollToIndex={activeOptionIndex}
             onScroll={this.focusActiveOption}
             rowHeight={rowHeight}
+            data-test-subj={optionsListDataTestSubj}
           />
         </EuiPortal>
       );
@@ -618,6 +621,7 @@ export class EuiComboBox extends Component {
         onFocus={this.onComboBoxFocus}
         onKeyDown={this.onKeyDown}
         ref={this.comboBoxRef}
+        data-test-subj={dataTestSubj}
         {...rest}
       >
         <EuiComboBoxInput

diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, render, mount } from 'enzyme';
 import sinon from 'sinon';
-import { requiredProps, findTestSubject } from '../../test';
+import { requiredProps, findTestSubject, takeMountedSnapshot } from '../../test';
 import { comboBoxKeyCodes } from '../../services';
 
 import { EuiComboBox } from './combo_box';
@@ -27,6 +27,13 @@ jest.mock('tabbable', () => () => {
   return proxy;
 });
 
+jest.mock(
+  '../portal',
+  () => ({
+    EuiPortal: ({ children }) => children
+  })
+);
+
 beforeEach(() => {
   hasComboBoxLostFocus = false;
 });
@@ -65,14 +72,13 @@ describe('EuiComboBox', () => {
 });
 
 describe('props', () => {
-  test('options are rendered', () => {
-    // NOTE: It's tough to test this because the dropdown containing the options opens up in
-    // a portal.
-    const component = shallow(
-      <EuiComboBox options={options} />
+  test('options list is rendered', () => {
+    const component = mount(
+      <EuiComboBox options={options} data-test-subj="alsoGetsAppliedToOptionsList" />
     );
 
-    expect(component).toMatchSnapshot();
+    component.setState({ isListOpen: true });
+    expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
 
   test('selectedOptions are rendered', () => {

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -46,6 +46,7 @@ export class EuiComboBoxOptionsList extends Component {
 
   static defaultProps = {
     rowHeight: 27, // row height of default option renderer
+    'data-test-subj': '',
   }
 
   updatePosition = () => {
@@ -109,6 +110,7 @@ export class EuiComboBoxOptionsList extends Component {
       scrollToIndex,
       onScroll,
       rowHeight,
+      'data-test-subj': dataTestSubj,
       ...rest
     } = this.props;
 
@@ -212,8 +214,8 @@ export class EuiComboBoxOptionsList extends Component {
       <EuiPanel
         paddingSize="none"
         className={classes}
-        data-test-subj="comboBoxOptionsList"
         panelRef={this.listRef}
+        data-test-subj={`comboBoxOptionsList ${dataTestSubj}`}
         {...rest}
       >
         <div className="euiComboBoxOptionsList__rowWrap">