Support multiple space-separated values within a single element's data-test-subj attribute

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.0.1`.
+- Added support to `findTestSubject` for an optional `matcher` argument, which defaults to `~=`, enabling it to identify an element based on one of multiple space-separated values within its `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587))
 
 ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1)
 
@@ -58,6 +58,7 @@ No public interface changes since `9.0.1`.
 **Bug fixes**
 
 - Fixed several bugs with `EuiRange` and `EuiDualRange` including sizing of inputs, tick placement, and the handling of invalid values ([#1580](https://github.com/elastic/eui/pull/1580))
+>>>>>>> edf0b85abf0668db2fc7f3c282a077fcc2d6f121
 
 ## [`7.2.0`](https://github.com/elastic/eui/tree/v7.2.0)
 

src/test/find_test_subject.js

@@ -2,9 +2,12 @@
  * Find node which matches a specific test subject selector. Returns ReactWrappers around DOM element,
  * https://github.com/airbnb/enzyme/tree/master/docs/api/ReactWrapper.
  * Common use cases include calling simulate or getDOMNode on the returned ReactWrapper.
+ *
+ * The ~= matcher looks for the value in space-separated list, allowing support for multiple data-test-subj
+ * values on a single element.
  */
-export const findTestSubject = (mountedComponent, testSubjectSelector) => {
-  const testSubject = mountedComponent.find(`[data-test-subj="${testSubjectSelector}"]`);
+export const findTestSubject = (mountedComponent, testSubjectSelector, matcher = '~=') => {
+  const testSubject = mountedComponent.find(`[data-test-subj${matcher}"${testSubjectSelector}"]`);
 
   // Restores Enzyme 2's find behavior, which was to only return ReactWrappers around DOM elements.
   // Enzyme 3 returns ReactWrappers around both DOM elements and React components.

src/test/find_test_subject.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { findTestSubject } from './find_test_subject';
+
+describe('findTestSubject', () => {
+  test('finds the specified element in a mounted component', () => {
+    const TestComponent = () => <div data-test-subj="test" />;
+    const component = mount(<TestComponent />);
+    const element = findTestSubject(component, 'test');
+
+    expect(element.length).toBe(1);
+  });
+
+  test('finds the specified element even if it has multiple identifiers', () => {
+    const TestComponent = () => <div data-test-subj="test1 test2" />;
+    const component = mount(<TestComponent />);
+    const element = findTestSubject(component, 'test2');
+
+    expect(element.length).toBe(1);
+  });
+
+  test('finds multiple elements with the same identifier', () => {
+    const TestComponent = () => (
+      <div>
+        <div data-test-subj="test" />
+        <div data-test-subj="test" />
+      </div>
+    );
+    const component = mount(<TestComponent />);
+    const element = findTestSubject(component, 'test');
+
+    expect(element.length).toBe(2);
+  });
+
+  describe('matcher optional argument', () => {
+    test('finds multiple elements with identifiers beginning with the same string', () => {
+      const TestComponent = () => (
+        <div>
+          <div data-test-subj="test1" />
+          <div data-test-subj="test2" />
+        </div>
+      );
+      const component = mount(<TestComponent />);
+      const element = findTestSubject(component, 'test', '^=');
+
+      expect(element.length).toBe(2);
+    });
+  });
+});