From 3d281cd8e6b16ecfbb55aba64082490a3c0d162f Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Wed, 20 May 2020 09:27:54 +0200 Subject: [PATCH] Reorganized TS test file --- typings/__tests__/index.test.tsx | 283 +++++++++++++------------------ 1 file changed, 116 insertions(+), 167 deletions(-) diff --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx index 9981ded7e..f6f7cb31b 100644 --- a/typings/__tests__/index.test.tsx +++ b/typings/__tests__/index.test.tsx @@ -4,7 +4,6 @@ import { ReactTestInstance } from 'react-test-renderer'; import { render, fireEvent, - shallow, flushMicrotasksQueue, waitFor, act, @@ -31,86 +30,89 @@ const TestComponent = () => ( const tree = render(); -// getByAPI tests -const getByType: ReactTestInstance = tree.UNSAFE_getByType(View); -const getByTypeWithRequiredProps: ReactTestInstance = tree.UNSAFE_getByType( - ElementWithRequiredProps -); -const getByTextString: ReactTestInstance = tree.getByText(''); -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 = tree.UNSAFE_getAllByType(View); -const getAllByTypeWithRequiredProps: Array = tree.UNSAFE_getAllByType( - ElementWithRequiredProps -); -const getAllByTextString: Array = tree.getAllByText( - '' -); -const getAllByTextRegExp: Array = tree.getAllByText(/Text/g); -const getAllByProps: Array = tree.UNSAFE_getAllByProps({ - value: 2, -}); +// getBy API +const getBy: ReactTestInstance[] = [ + tree.getByText(''), + 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 = tree.UNSAFE_queryAllByType( - View -); -const queryAllByTypeWithRequiredProps: Array = tree.UNSAFE_queryAllByType( - ElementWithRequiredProps -); -const queryAllByTextString: Array = tree.queryAllByText( - 'View' -); -const queryAllByTextRegExp: Array = tree.queryAllByText( - /View/g -); -const queryAllByDisplayValueString: Array = tree.queryAllByDisplayValue( - 'View' -); -const queryAllByDisplayValueRegExp: Array = tree.queryAllByDisplayValue( - /View/g -); +const getAllBy: ReactTestInstance[][] = [ + tree.getAllByText(''), + 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 = [ + 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[] = [ tree.findByText('View'), tree.findByText('View', { timeout: 10, interval: 10 }), @@ -153,6 +155,8 @@ const findAllBy: Promise[] = [ 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 }), @@ -161,105 +165,50 @@ const findAllBy: Promise[] = [ tree.findAllByA11yValue({ min: 10 }, { timeout: 10, interval: 10 }), ]; -// Accessibility queries -const getByA11yLabel: ReactTestInstance = tree.getByA11yLabel('label'); -const getAllByA11yLabel: Array = tree.getAllByA11yLabel( - 'label' -); -const queryByA11yLabel: ReactTestInstance = tree.queryByA11yLabel('label'); -const queryAllByA11yLabel: Array = tree.queryAllByA11yLabel( - 'label' -); - -const getByA11yHint: ReactTestInstance = tree.getByA11yHint('label'); -const getAllByA11yHint: Array = tree.getAllByA11yHint( - 'label' -); -const queryByA11yHint: ReactTestInstance = tree.queryByA11yHint('label'); -const queryAllByA11yHint: Array = tree.queryAllByA11yHint( - 'label' -); - -const getByA11yRole: ReactTestInstance = tree.getByA11yRole('button'); -const getAllByA11yRole: Array = tree.getAllByA11yRole( - 'button' -); -const queryByA11yRole: ReactTestInstance = tree.queryByA11yRole('button'); -const queryAllByA11yRole: Array = tree.queryAllByA11yRole( - 'button' -); - -const getByA11yStates: ReactTestInstance = tree.getByA11yStates('selected'); -const getByA11yStatesArray: ReactTestInstance = tree.getByA11yStates([ - 'selected', -]); -const getAllByA11yStates: Array = tree.getAllByA11yStates( - 'selected' -); -const getAllByA11yStatesArray: Array = tree.getAllByA11yStates( - ['selected'] -); -const queryByA11yStates: ReactTestInstance = tree.queryByA11yStates('selected'); -const queryByA11yStatesArray: ReactTestInstance = tree.queryByA11yStates([ - 'selected', -]); -const queryAllByA11yStates: Array = tree.queryAllByA11yStates( - 'selected' -); -const queryAllByA11yStatesArray: Array = tree.queryAllByA11yStates( - ['selected'] -); - -const getByA11yState: ReactTestInstance = tree.getByA11yState({ busy: true }); -const getAllByA11yState: Array = tree.getAllByA11yState({ - busy: true, -}); -const queryByA11yState: ReactTestInstance = tree.queryByA11yState({ - busy: true, -}); -const queryAllByA11yState: Array = tree.queryAllByA11yState({ - busy: true, -}); - -const getByA11yValue: ReactTestInstance = tree.getByA11yValue({ min: 10 }); -const getAllByA11yValue: Array = tree.getAllByA11yValue({ - min: 10, -}); -const queryByA11yValue: ReactTestInstance = tree.queryByA11yValue({ min: 10 }); -const queryAllByA11yValue: Array = tree.queryAllByA11yValue({ - min: 10, -}); - +// debug API const debugFn = tree.debug(); const debugFnWithMessage = tree.debug('my message'); +// update API tree.update(); tree.rerender(); 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 } = shallow( - -); +// waitFor API +const waitGetBy: Promise[] = [ + waitFor(() => tree.getByA11yLabel('label')), + waitFor(() => tree.getByA11yLabel('label'), { + timeout: 10, + }), + waitFor(() => tree.getByA11yLabel('label'), { + timeout: 100, + interval: 10, + }), +]; -const waitForFlush: Promise = flushMicrotasksQueue(); +const waitGetAllBy: Promise[] = [ + waitFor(() => tree.getAllByA11yLabel('label')), + waitFor(() => tree.getAllByA11yLabel('label'), { + timeout: 10, + }), + waitFor(() => tree.getAllByA11yLabel('label'), { + timeout: 100, + interval: 10, + }), +]; -const waitBy: Promise = waitFor(() => - tree.getByA11yLabel('label') -); -const waitByAll: Promise = waitFor( - () => tree.getAllByA11yLabel('label'), - { timeout: 1000, interval: 50 } -); +const waitForFlush: Promise = flushMicrotasksQueue(); +// act API act(() => { render(); });