kibana/x-pack/test_utils/find_test_subject.ts

53 lines
1.9 KiB
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { ReactWrapper } from 'enzyme';
type Matcher = '=' | '~=' | '|=' | '^=' | '$=' | '*=';
const MATCHERS: Matcher[] = [
'=', // Exact match
'~=', // Exists in a space-separated list
'|=', // Begins with substring, followed by '-'
'^=', // Begins with substring
'$=', // Ends with substring
'*=',
];
/**
* 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.
*
* @param reactWrapper The React wrapper to search in
* @param testSubjectSelector The data test subject selector
* @param matcher optional matcher
*/
export const findTestSubject = <T = string>(
reactWrapper: ReactWrapper,
testSubjectSelector: T,
matcher: Matcher = '~='
) => {
if (!MATCHERS.includes(matcher)) {
throw new Error(
'Matcher '
.concat(matcher, ' not found in list of allowed matchers: ')
.concat(MATCHERS.join(' '))
);
}
const testSubject = reactWrapper.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.
// https://github.com/airbnb/enzyme/issues/1174
return testSubject.hostNodes();
};