Skip to content

maintenance: cleanup TS typedefs tests #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 20, 2020
Merged

maintenance: cleanup TS typedefs tests #337

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 116 additions & 167 deletions typings/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { ReactTestInstance } from 'react-test-renderer';
import {
render,
fireEvent,
shallow,
flushMicrotasksQueue,
waitFor,
act,
Expand All @@ -31,86 +30,89 @@ const TestComponent = () => (

const tree = render(<TestComponent />);

// getByAPI tests
const getByType: ReactTestInstance = tree.UNSAFE_getByType(View);
const getByTypeWithRequiredProps: ReactTestInstance = tree.UNSAFE_getByType(
ElementWithRequiredProps
);
const getByTextString: ReactTestInstance = tree.getByText('<View />');
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g);
const getByPlaceholderString: ReactTestInstance = tree.getByPlaceholder(
'my placeholder'
);
const getByPlaceholderRegExp: ReactTestInstance = tree.getByPlaceholder(
/placeholder/g
);
const getByDisplayValueString: ReactTestInstance = tree.getByDisplayValue(
'my value'
);
const getByDisplayValueRegExp: ReactTestInstance = tree.getByDisplayValue(
/value/g
);
const getByProps: ReactTestInstance = tree.UNSAFE_getByProps({ value: 2 });
const getByTestId: ReactTestInstance = tree.getByTestId('test-id');
const getAllByTestId: ReactTestInstance[] = tree.getAllByTestId('test-id');
const getAllByType: Array<ReactTestInstance> = tree.UNSAFE_getAllByType(View);
const getAllByTypeWithRequiredProps: Array<ReactTestInstance> = tree.UNSAFE_getAllByType(
ElementWithRequiredProps
);
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
'<View />'
);
const getAllByTextRegExp: Array<ReactTestInstance> = tree.getAllByText(/Text/g);
const getAllByProps: Array<ReactTestInstance> = tree.UNSAFE_getAllByProps({
value: 2,
});
// getBy API
const getBy: ReactTestInstance[] = [
tree.getByText('<View />'),
tree.getByText(/View/g),
tree.getByPlaceholder('my placeholder'),
tree.getByPlaceholder(/placeholder/g),
tree.getByDisplayValue('my value'),
tree.getByDisplayValue(/value/g),
tree.getByTestId('test-id'),
tree.getByA11yLabel('label'),
tree.getByA11yHint('label'),
tree.getByA11yRole('button'),
tree.getByA11yStates('selected'),
tree.getByA11yStates(['selected']),
tree.getByA11yState({ busy: true }),
tree.getByA11yValue({ min: 10 }),
tree.UNSAFE_getByType(View),
tree.UNSAFE_getByType(ElementWithRequiredProps),
tree.UNSAFE_getByProps({ value: 2 }),
];

// queuryByAPI tests
const queryByType: ReactTestInstance | null = tree.UNSAFE_queryByType(View);
const queryByTypeWithRequiredProps: ReactTestInstance | null = tree.UNSAFE_queryByType(
ElementWithRequiredProps
);
const queryByTextString: ReactTestInstance | null = tree.queryByText('View');
const queryByTextRegExp: ReactTestInstance | null = tree.queryByText(/View/g);
const queryByPlaceholderString: ReactTestInstance | null = tree.queryByPlaceholder(
'my placeholder'
);
const queryByPlaceholderRegExp: ReactTestInstance | null = tree.queryByPlaceholder(
/placeholder/g
);
const queryByDisplayValueString: ReactTestInstance | null = tree.queryByDisplayValue(
'my value'
);
const queryByDisplayValueRegExp: ReactTestInstance | null = tree.queryByDisplayValue(
/value/g
);
const queryByProps: ReactTestInstance | null = tree.UNSAFE_queryByProps({
value: 2,
});
const queryByTestId: ReactTestInstance | null = tree.queryByTestId('test-id');
const queryAllByTestId: ReactTestInstance[] | null = tree.queryAllByTestId(
'test-id'
);
const queryAllByType: Array<ReactTestInstance> = tree.UNSAFE_queryAllByType(
View
);
const queryAllByTypeWithRequiredProps: Array<ReactTestInstance> = tree.UNSAFE_queryAllByType(
ElementWithRequiredProps
);
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
'View'
);
const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
/View/g
);
const queryAllByDisplayValueString: Array<ReactTestInstance> = tree.queryAllByDisplayValue(
'View'
);
const queryAllByDisplayValueRegExp: Array<ReactTestInstance> = tree.queryAllByDisplayValue(
/View/g
);
const getAllBy: ReactTestInstance[][] = [
tree.getAllByText('<View />'),
tree.getAllByText(/Text/g),
tree.getAllByPlaceholder('my placeholder'),
tree.getAllByPlaceholder(/placeholder/g),
tree.getAllByDisplayValue('my value'),
tree.getAllByDisplayValue(/value/g),
tree.getAllByTestId('test-id'),
tree.getAllByA11yLabel('label'),
tree.getAllByA11yHint('label'),
tree.getAllByA11yRole('button'),
tree.getAllByA11yStates('selected'),
tree.getAllByA11yStates(['selected']),
tree.getAllByA11yState({ busy: true }),
tree.getAllByA11yValue({ min: 10 }),
tree.UNSAFE_getAllByType(View),
tree.UNSAFE_getAllByType(ElementWithRequiredProps),
tree.UNSAFE_getAllByProps({ value: 2 }),
];

// queryBy API
const queryBy: Array<ReactTestInstance | null> = [
tree.queryByText('View'),
tree.queryByText(/View/g),
tree.queryByPlaceholder('my placeholder'),
tree.queryByPlaceholder(/placeholder/g),
tree.queryByDisplayValue('my value'),
tree.queryByDisplayValue(/value/g),
tree.queryByTestId('test-id'),
tree.queryByA11yHint('label'),
tree.queryByA11yLabel('label'),
tree.queryByA11yRole('button'),
tree.queryByA11yStates('selected'),
tree.queryByA11yStates(['selected']),
tree.queryByA11yState({ busy: true }),
tree.queryByA11yValue({ min: 10 }),
tree.UNSAFE_queryByType(View),
tree.UNSAFE_queryByType(ElementWithRequiredProps),
tree.UNSAFE_queryByProps({ value: 2 }),
];

// findBy API tests
const queryAllBy: ReactTestInstance[][] = [
tree.queryAllByText('View'),
tree.queryAllByText(/View/g),
tree.queryAllByPlaceholder('my placeholder'),
tree.queryAllByPlaceholder(/placeholder/g),
tree.queryAllByDisplayValue('my value'),
tree.queryAllByDisplayValue(/value/g),
tree.queryAllByTestId('test-id'),
tree.queryAllByA11yLabel('label'),
tree.queryAllByA11yHint('label'),
tree.queryAllByA11yRole('button'),
tree.queryAllByA11yStates('selected'),
tree.queryAllByA11yStates(['selected']),
tree.queryAllByA11yState({ busy: true }),
tree.queryAllByA11yValue({ min: 10 }),
tree.UNSAFE_queryAllByType(View),
tree.UNSAFE_queryAllByType(ElementWithRequiredProps),
tree.UNSAFE_queryAllByProps({ value: 2 }),
];

// findBy API
const findBy: Promise<ReactTestInstance>[] = [
tree.findByText('View'),
tree.findByText('View', { timeout: 10, interval: 10 }),
Expand Down Expand Up @@ -153,6 +155,8 @@ const findAllBy: Promise<ReactTestInstance[]>[] = [
tree.findAllByDisplayValue(/View/g, { timeout: 10, interval: 10 }),
tree.findAllByTestId('test-id'),
tree.findAllByTestId('test-id', { timeout: 10, interval: 10 }),
tree.findAllByA11yLabel('label'),
tree.findAllByA11yLabel('label', { timeout: 10, interval: 10 }),
tree.findAllByA11yHint('label'),
tree.findAllByA11yHint('label', { timeout: 10, interval: 10 }),
tree.findAllByA11yState({ busy: true }),
Expand All @@ -161,105 +165,50 @@ const findAllBy: Promise<ReactTestInstance[]>[] = [
tree.findAllByA11yValue({ min: 10 }, { timeout: 10, interval: 10 }),
];

// Accessibility queries
const getByA11yLabel: ReactTestInstance = tree.getByA11yLabel('label');
const getAllByA11yLabel: Array<ReactTestInstance> = tree.getAllByA11yLabel(
'label'
);
const queryByA11yLabel: ReactTestInstance = tree.queryByA11yLabel('label');
const queryAllByA11yLabel: Array<ReactTestInstance> = tree.queryAllByA11yLabel(
'label'
);

const getByA11yHint: ReactTestInstance = tree.getByA11yHint('label');
const getAllByA11yHint: Array<ReactTestInstance> = tree.getAllByA11yHint(
'label'
);
const queryByA11yHint: ReactTestInstance = tree.queryByA11yHint('label');
const queryAllByA11yHint: Array<ReactTestInstance> = tree.queryAllByA11yHint(
'label'
);

const getByA11yRole: ReactTestInstance = tree.getByA11yRole('button');
const getAllByA11yRole: Array<ReactTestInstance> = tree.getAllByA11yRole(
'button'
);
const queryByA11yRole: ReactTestInstance = tree.queryByA11yRole('button');
const queryAllByA11yRole: Array<ReactTestInstance> = tree.queryAllByA11yRole(
'button'
);

const getByA11yStates: ReactTestInstance = tree.getByA11yStates('selected');
const getByA11yStatesArray: ReactTestInstance = tree.getByA11yStates([
'selected',
]);
const getAllByA11yStates: Array<ReactTestInstance> = tree.getAllByA11yStates(
'selected'
);
const getAllByA11yStatesArray: Array<ReactTestInstance> = tree.getAllByA11yStates(
['selected']
);
const queryByA11yStates: ReactTestInstance = tree.queryByA11yStates('selected');
const queryByA11yStatesArray: ReactTestInstance = tree.queryByA11yStates([
'selected',
]);
const queryAllByA11yStates: Array<ReactTestInstance> = tree.queryAllByA11yStates(
'selected'
);
const queryAllByA11yStatesArray: Array<ReactTestInstance> = tree.queryAllByA11yStates(
['selected']
);

const getByA11yState: ReactTestInstance = tree.getByA11yState({ busy: true });
const getAllByA11yState: Array<ReactTestInstance> = tree.getAllByA11yState({
busy: true,
});
const queryByA11yState: ReactTestInstance = tree.queryByA11yState({
busy: true,
});
const queryAllByA11yState: Array<ReactTestInstance> = tree.queryAllByA11yState({
busy: true,
});

const getByA11yValue: ReactTestInstance = tree.getByA11yValue({ min: 10 });
const getAllByA11yValue: Array<ReactTestInstance> = tree.getAllByA11yValue({
min: 10,
});
const queryByA11yValue: ReactTestInstance = tree.queryByA11yValue({ min: 10 });
const queryAllByA11yValue: Array<ReactTestInstance> = tree.queryAllByA11yValue({
min: 10,
});

// debug API
const debugFn = tree.debug();
const debugFnWithMessage = tree.debug('my message');

// update API
tree.update(<View />);
tree.rerender(<View />);
tree.unmount();

// fireEvent API tests
fireEvent(getByA11yLabel, 'press');
fireEvent(getByA11yLabel, 'press', 'data');
fireEvent(getByA11yLabel, 'press', 'param1', 'param2');
fireEvent.press(getByA11yLabel);
fireEvent.changeText(getByA11yLabel, 'string');
fireEvent.scroll(getByA11yLabel, 'eventData');
// fireEvent API
const element: ReactTestInstance = tree.getByText('text');
fireEvent(element, 'press');
fireEvent(element, 'press', 'data');
fireEvent(element, 'press', 'param1', 'param2');
fireEvent.press(element);
fireEvent.changeText(element, 'string');
fireEvent.scroll(element, 'eventData');

// shallow API
const shallowTree: { output: React.ReactElement<any> } = shallow(
<TestComponent />
);
// waitFor API
const waitGetBy: Promise<ReactTestInstance>[] = [
waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label')),
waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label'), {
timeout: 10,
}),
waitFor<ReactTestInstance>(() => tree.getByA11yLabel('label'), {
timeout: 100,
interval: 10,
}),
];

const waitForFlush: Promise<any> = flushMicrotasksQueue();
const waitGetAllBy: Promise<ReactTestInstance[]>[] = [
waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label')),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

waitFor can work with any throwable function, maybe we can showcase that and get rid of tree.getAllBy examples?

waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label'), {
timeout: 10,
}),
waitFor<ReactTestInstance[]>(() => tree.getAllByA11yLabel('label'), {
timeout: 100,
interval: 10,
}),
];

const waitBy: Promise<ReactTestInstance> = waitFor<ReactTestInstance>(() =>
tree.getByA11yLabel('label')
);
const waitByAll: Promise<ReactTestInstance[]> = waitFor<ReactTestInstance[]>(
() => tree.getAllByA11yLabel('label'),
{ timeout: 1000, interval: 50 }
);
const waitForFlush: Promise<any> = flushMicrotasksQueue();

// act API
act(() => {
render(<TestComponent />);
});
Expand Down