feat: add getByType helper (#64)

* feat: add getByType helper

* add docs
This commit is contained in:
Michał Pierzchała
2018-11-19 13:44:51 +01:00
committed by GitHub
parent 235942bee3
commit fa198c4037
6 changed files with 74 additions and 0 deletions
+8
View File
@@ -113,6 +113,14 @@ A method returning a `ReactTestInstance` with matching a React component type. T
A method returning an array of `ReactTestInstance`s with matching a React component type.
### `getByType: (type: React.ComponentType<*>)`
A method returning a `ReactTestInstance` with matching a React component type. Throws when no matches.
### `getAllByType: (type: React.ComponentType<*>)`
A method returning an array of `ReactTestInstance`s with matching a React component type.
### `getByText: (text: string | RegExp)`
A method returning a `ReactTestInstance` with matching text – may be a string or regular expression. Throws when no matches.
+14
View File
@@ -96,6 +96,20 @@ test('getAllByName, queryAllByName', () => {
expect(queryAllByName('InExistent')).toHaveLength(0);
});
test('getAllByType, queryAllByType', () => {
const { getAllByType, queryAllByType } = render(<Banana />);
const [text, status, button] = getAllByType(Text);
const InExistent = () => null;
expect(text.props.children).toBe('Is the banana fresh?');
expect(status.props.children).toBe('not fresh');
expect(button.props.children).toBe('Change freshness!');
expect(() => getAllByType(InExistent)).toThrow('No instances found');
expect(queryAllByType(Text)[1]).toBe(status);
expect(queryAllByType(InExistent)).toHaveLength(0);
});
test('getByText, queryByText', () => {
const { getByText, queryByText } = render(<Banana />);
const button = getByText(/change/i);
+20
View File
@@ -40,6 +40,15 @@ export const getByName = (instance: ReactTestInstance) =>
}
};
export const getByType = (instance: ReactTestInstance) =>
function getByTypeFn(type: React.ComponentType<*>) {
try {
return instance.findByType(type);
} catch (error) {
throw new ErrorWithStack(prepareErrorMessage(error), getByTypeFn);
}
};
export const getByText = (instance: ReactTestInstance) =>
function getByTextFn(text: string | RegExp) {
try {
@@ -80,6 +89,15 @@ export const getAllByName = (instance: ReactTestInstance) =>
return results;
};
export const getAllByType = (instance: ReactTestInstance) =>
function getAllByTypeFn(type: React.ComponentType<*>) {
const results = instance.findAllByType(type);
if (results.length === 0) {
throw new ErrorWithStack('No instances found', getAllByTypeFn);
}
return results;
};
export const getAllByText = (instance: ReactTestInstance) =>
function getAllByTextFn(text: string | RegExp) {
const results = instance.findAll(node => getNodeByText(node, text));
@@ -107,9 +125,11 @@ export const getAllByProps = (instance: ReactTestInstance) =>
export const getByAPI = (instance: ReactTestInstance) => ({
getByTestId: getByTestId(instance),
getByName: getByName(instance),
getByType: getByType(instance),
getByText: getByText(instance),
getByProps: getByProps(instance),
getAllByName: getAllByName(instance),
getAllByType: getAllByType(instance),
getAllByText: getAllByText(instance),
getAllByProps: getAllByProps(instance),
});
+24
View File
@@ -3,9 +3,11 @@ import * as React from 'react';
import {
getByTestId,
getByName,
getByType,
getByText,
getByProps,
getAllByName,
getAllByType,
getAllByText,
getAllByProps,
} from './getByAPI';
@@ -20,6 +22,16 @@ export const queryByName = (instance: ReactTestInstance) => (
}
};
export const queryByType = (instance: ReactTestInstance) => (
type: React.ComponentType<*>
) => {
try {
return getByType(instance)(type);
} catch (error) {
return null;
}
};
export const queryByText = (instance: ReactTestInstance) => (
text: string | RegExp
) => {
@@ -60,6 +72,16 @@ export const queryAllByName = (instance: ReactTestInstance) => (
}
};
export const queryAllByType = (instance: ReactTestInstance) => (
type: React.ComponentType<*>
) => {
try {
return getAllByType(instance)(type);
} catch (error) {
return [];
}
};
export const queryAllByText = (instance: ReactTestInstance) => (
text: string | RegExp
) => {
@@ -83,9 +105,11 @@ export const queryAllByProps = (instance: ReactTestInstance) => (props: {
export const queryByAPI = (instance: ReactTestInstance) => ({
queryByTestId: queryByTestId(instance),
queryByName: queryByName(instance),
queryByType: queryByType(instance),
queryByText: queryByText(instance),
queryByProps: queryByProps(instance),
queryAllByName: queryAllByName(instance),
queryAllByType: queryAllByType(instance),
queryAllByText: queryAllByText(instance),
queryAllByProps: queryAllByProps(instance),
});
+4
View File
@@ -23,6 +23,7 @@ const tree = render(<TestComponent />);
// getByAPI tests
const getByNameString: ReactTestInstance = tree.getByName('View');
const getByNameContructor: ReactTestInstance = tree.getByName(View);
const getByType: ReactTestInstance = tree.getByType(View);
const getByTextString: ReactTestInstance = tree.getByText('<View />');
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g);
const getByProps: ReactTestInstance = tree.getByProps({ value: 2 });
@@ -31,6 +32,7 @@ const getAllByNameString: Array<ReactTestInstance> = tree.getAllByName('View');
const getAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const getAllByType: Array<ReactTestInstance> = tree.getAllByType(View);
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
'<View />'
);
@@ -42,6 +44,7 @@ const getAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
// queuryByAPI tests
const queryByNameString: ReactTestInstance | null = tree.queryByName('View');
const queryByNameConstructor: ReactTestInstance | null = tree.queryByName(View);
const queryByType: ReactTestInstance | null = tree.queryByType(View);
const queryByTextString: ReactTestInstance | null = tree.queryByText(
'<View />'
);
@@ -54,6 +57,7 @@ const queryAllByNameString: Array<ReactTestInstance> = tree.getAllByName(
const queryAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const queryAllByType: Array<ReactTestInstance> = tree.getAllByType(View);
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
'View'
);
+4
View File
@@ -3,20 +3,24 @@ import { ReactTestInstance, ReactTestRendererJSON } from 'react-test-renderer';
export interface GetByAPI {
getByName: (name: React.ReactType) => ReactTestInstance;
getByType: (type: React.ComponentType) => ReactTestInstance;
getByText: (text: string | RegExp) => ReactTestInstance;
getByProps: (props: Record<string, any>) => ReactTestInstance;
getByTestId: (testID: string) => ReactTestInstance;
getAllByName: (name: React.ReactType) => Array<ReactTestInstance>;
getAllByType: (type: React.ComponentType) => Array<ReactTestInstance>;
getAllByText: (text: string | RegExp) => Array<ReactTestInstance>;
getAllByProps: (props: Record<string, any>) => Array<ReactTestInstance>;
}
export interface QueryByAPI {
queryByName: (name: React.ReactType) => ReactTestInstance | null;
queryByType: (type: React.ComponentType) => ReactTestInstance | null;
queryByText: (name: string | RegExp) => ReactTestInstance | null;
queryByProps: (props: Record<string, any>) => ReactTestInstance | null;
queryByTestId: (testID: string) => ReactTestInstance | null;
queryAllByName: (name: React.ReactType) => Array<ReactTestInstance> | [];
queryAllByType: (type: React.ComponentType) => Array<ReactTestInstance> | [];
queryAllByText: (text: string | RegExp) => Array<ReactTestInstance> | [];
queryAllByProps: (
props: Record<string, any>