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)
 
@@ -53,7 +53,12 @@ No public interface changes since `9.0.1`.
 - Converted `EuiToggle` to TypeScript ([#1570](https://github.com/elastic/eui/pull/1570))
 - Added type definitions for `EuiButtonGroup`,`EuiButtonToggle`, `EuiFilterButton`, `EuiFilterGroup`, and `EuiFilterSelectItem` ([#1570](https://github.com/elastic/eui/pull/1570))
 - Added `displayOnly` prop to EuiFormRow ([#1582](https://github.com/elastic/eui/pull/1582))
-- Added support to `findTestSubject` for finding one of multiple space-separated values within a single element's `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587))
+- Added an index.d.ts file for the date picker components, including `EuiDatePicker`, `EuiDatePickerRange`, and `EuiSuperDatePicker` ([#1574](https://github.com/elastic/eui/pull/1574))
+
+**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,11 +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) => {
-  // The ~ looks for the value in space-separated list, allowing support for multiple data-test-subj
-  // values on a single element.
-  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);
+    });
+  });
+});