From 4d384adeb2e5396881ffdd737ce101d0fb1c995c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 21 Feb 2019 15:02:40 -0800 Subject: [PATCH 1/5] Support multiple space-separated values within a single element's data-test-subj attribute. --- src/test/find_test_subject.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.js index 3f533338545..18ba7976bb5 100644 --- a/src/test/find_test_subject.js +++ b/src/test/find_test_subject.js @@ -4,7 +4,9 @@ * Common use cases include calling simulate or getDOMNode on the returned ReactWrapper. */ export const findTestSubject = (mountedComponent, testSubjectSelector) => { - const testSubject = mountedComponent.find(`[data-test-subj="${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}"]`); // 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. From 42b6bfea350e5df449893a770aef37bfcd765c01 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 21 Feb 2019 15:26:21 -0800 Subject: [PATCH 2/5] Update CHANGELOG. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a6deba12df..55352b4420c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - 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)) ## [`7.2.0`](https://github.com/elastic/eui/tree/v7.2.0) From cd7bb9143959c19b6cebd71d0a248fecbe268227 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 28 Feb 2019 16:14:52 -0800 Subject: [PATCH 3/5] Add matcher argument to findTestSubject. --- src/test/find_test_subject.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.js index 18ba7976bb5..e0499d1127a 100644 --- a/src/test/find_test_subject.js +++ b/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. From 774273f10ac89719a44e80f929357d315ef439f6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 28 Feb 2019 16:26:20 -0800 Subject: [PATCH 4/5] Add tests. --- src/test/find_test_subject.test.js | 50 ++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/test/find_test_subject.test.js diff --git a/src/test/find_test_subject.test.js b/src/test/find_test_subject.test.js new file mode 100644 index 00000000000..755da2b5ba4 --- /dev/null +++ b/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 = () =>
; + const component = mount(); + const element = findTestSubject(component, 'test'); + + expect(element.length).toBe(1); + }); + + test('finds the specified element even if it has multiple identifiers', () => { + const TestComponent = () =>
; + const component = mount(); + const element = findTestSubject(component, 'test2'); + + expect(element.length).toBe(1); + }); + + test('finds multiple elements with the same identifier', () => { + const TestComponent = () => ( +
+
+
+
+ ); + const component = mount(); + 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 = () => ( +
+
+
+
+ ); + const component = mount(); + const element = findTestSubject(component, 'test', '^='); + + expect(element.length).toBe(2); + }); + }); +}); From d1bad33724826671df9196686953a99d0c279b6f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 1 Mar 2019 08:56:03 -0800 Subject: [PATCH 5/5] Remove merge conflict token. Add link to matcher docs and check for valid matcher. --- CHANGELOG.md | 1 - src/test/find_test_subject.js | 17 ++++++++++++++++- src/test/find_test_subject.test.js | 6 ++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04d510a2b6e..74ace75f5b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,7 +58,6 @@ **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) diff --git a/src/test/find_test_subject.js b/src/test/find_test_subject.js index e0499d1127a..15d2bf6c342 100644 --- a/src/test/find_test_subject.js +++ b/src/test/find_test_subject.js @@ -4,9 +4,24 @@ * 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. + * values on a single element. See https://www.w3.org/TR/selectors-3/#attribute-selectors for more + * info on the other possible matchers. */ + +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. diff --git a/src/test/find_test_subject.test.js b/src/test/find_test_subject.test.js index 755da2b5ba4..0672722e863 100644 --- a/src/test/find_test_subject.test.js +++ b/src/test/find_test_subject.test.js @@ -46,5 +46,11 @@ describe('findTestSubject', () => { expect(element.length).toBe(2); }); + + test('throws an error if unsupported matcher is provided', () => { + const TestComponent = () =>
; + const component = mount(); + expect(() => findTestSubject(component, 'test', '===')).toThrow(); + }); }); });