diff --git a/CHANGELOG.md b/CHANGELOG.md index 6269e5cbb82..74ace75f5b0 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.js index 3f533338545..15d2bf6c342 100644 --- a/src/test/find_test_subject.js +++ b/src/test/find_test_subject.js @@ -2,9 +2,27 @@ * 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. See https://www.w3.org/TR/selectors-3/#attribute-selectors for more + * info on the other possible matchers. */ -export const findTestSubject = (mountedComponent, testSubjectSelector) => { - const testSubject = mountedComponent.find(`[data-test-subj="${testSubjectSelector}"]`); + +const MATCHERS = [ + '=', // Exact match + '~=', // Exists in a space-separated list + '|=', // Begins with substring, followed by '-' + '^=', // Begins with substring + '$=', // Ends with substring + '*=', // Contains substring +]; + +export const findTestSubject = (mountedComponent, testSubjectSelector, matcher = '~=') => { + if (!MATCHERS.includes(matcher)) { + throw new Error(`Matcher ${matcher} not found in list of allowed matchers: ${MATCHERS.join(' ')}`); + } + + 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. diff --git a/src/test/find_test_subject.test.js b/src/test/find_test_subject.test.js new file mode 100644 index 00000000000..0672722e863 --- /dev/null +++ b/src/test/find_test_subject.test.js @@ -0,0 +1,56 @@ +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 = () =>
; + const component = mount(