-
Notifications
You must be signed in to change notification settings - Fork 958
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Artur Yorsh
committed
Feb 28, 2020
1 parent
e9fc5a7
commit 577241d
Showing
5 changed files
with
169 additions
and
665 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,146 +1,110 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Akveo. All Rights Reserved. | ||
| * Licensed under the MIT License. See License.txt in the project root for license information. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { TouchableOpacity } from 'react-native'; | ||
| import { | ||
| render, | ||
| Text, | ||
| TouchableOpacity, | ||
| } from 'react-native'; | ||
| import { | ||
| fireEvent, | ||
| waitForElement, | ||
| shallow, | ||
| RenderAPI, | ||
| render, | ||
| } from 'react-native-testing-library'; | ||
| import { ReactTestInstance } from 'react-test-renderer'; | ||
| import { | ||
| ApplicationProvider, | ||
| ApplicationProviderProps, | ||
| } from '@kitten/theme'; | ||
| light, | ||
| mapping, | ||
| } from '@eva-design/eva'; | ||
| import { ApplicationProvider } from '../../theme'; | ||
| import { | ||
| Radio, | ||
| RadioComponent, | ||
| RadioProps, | ||
| } from './radio.component'; | ||
| import { | ||
| mapping, | ||
| theme, | ||
| } from '../support/tests'; | ||
|
|
||
| const Mock = (props?: RadioProps): React.ReactElement<ApplicationProviderProps> => { | ||
| return ( | ||
| describe('@radio: component checks', () => { | ||
|
|
||
| const TestRadio = (props?: RadioProps) => ( | ||
| <ApplicationProvider | ||
| mapping={mapping} | ||
| theme={theme}> | ||
| theme={light}> | ||
| <Radio {...props} /> | ||
| </ApplicationProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const renderComponent = (props?: RadioProps): RenderAPI => { | ||
| return render( | ||
| <Mock {...props}/>, | ||
| ); | ||
| }; | ||
|
|
||
| describe('@radio: matches snapshot', () => { | ||
|
|
||
| it('default', () => { | ||
| const component: RenderAPI = renderComponent(); | ||
| const { output } = shallow(component.getByType(RadioComponent)); | ||
| it('should request checking', () => { | ||
| const onCheckedChange = jest.fn(); | ||
|
|
||
| expect(output).toMatchSnapshot(); | ||
| }); | ||
| const component = render( | ||
| <TestRadio | ||
| checked={false} | ||
| onChange={onCheckedChange} | ||
| />, | ||
| ); | ||
|
|
||
| it('checked', () => { | ||
| const component: RenderAPI = renderComponent({ checked: true }); | ||
| const { output } = shallow(component.getByType(Radio)); | ||
| fireEvent.press(component.getByType(TouchableOpacity)); | ||
|
|
||
| expect(output).toMatchSnapshot(); | ||
| expect(onCheckedChange).toBeCalledWith(true); | ||
| }); | ||
|
|
||
| it('disabled', () => { | ||
| const component: RenderAPI = renderComponent({ disabled: true }); | ||
| const { output } = shallow(component.getByType(Radio)); | ||
| it('should request unchecking', () => { | ||
| const onCheckedChange = jest.fn(); | ||
|
|
||
| expect(output).toMatchSnapshot(); | ||
| }); | ||
| const component = render( | ||
| <TestRadio | ||
| checked={true} | ||
| onChange={onCheckedChange} | ||
| />, | ||
| ); | ||
|
|
||
| it('checked disabled', () => { | ||
| const component: RenderAPI = renderComponent({ | ||
| checked: true, | ||
| disabled: true, | ||
| }); | ||
| const { output } = shallow(component.getByType(Radio)); | ||
| fireEvent.press(component.getByType(TouchableOpacity)); | ||
|
|
||
| expect(output).toMatchSnapshot(); | ||
| expect(onCheckedChange).toBeCalledWith(false); | ||
| }); | ||
|
|
||
| it('active', async () => { | ||
| const component: RenderAPI = renderComponent(); | ||
| it('should render text', () => { | ||
| const component = render( | ||
| <TestRadio text='I love Babel'/>, | ||
| ); | ||
|
|
||
| fireEvent(component.getByType(TouchableOpacity), 'pressIn'); | ||
|
|
||
| const active: ReactTestInstance = await waitForElement(() => { | ||
| return component.getByType(Radio); | ||
| }); | ||
| const { output: activeOutput } = shallow(active); | ||
|
|
||
| fireEvent(component.getByType(TouchableOpacity), 'pressOut'); | ||
| const text = component.getByText('I love Babel'); | ||
|
|
||
| const inactive: ReactTestInstance = await waitForElement(() => { | ||
| return component.getByType(Radio); | ||
| }); | ||
| const { output: inactiveOutput } = shallow(inactive); | ||
|
|
||
| expect(activeOutput).toMatchSnapshot(); | ||
| expect(inactiveOutput).toMatchSnapshot('default'); | ||
| expect(text).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('active checked', async () => { | ||
| const component: RenderAPI = renderComponent({ checked: true }); | ||
| it('should render text as component', () => { | ||
| const component = render( | ||
| <TestRadio text={props => <Text {...props}>I love Babel</Text>}/>, | ||
| ); | ||
|
|
||
| fireEvent(component.getByType(TouchableOpacity), 'pressIn'); | ||
| const text = component.getByText('I love Babel'); | ||
|
|
||
| const active: ReactTestInstance = await waitForElement(() => { | ||
| return component.getByType(Radio); | ||
| }); | ||
| const { output: activeOutput } = shallow(active); | ||
| expect(text).toBeTruthy(); | ||
| }); | ||
|
|
||
| fireEvent(component.getByType(TouchableOpacity), 'pressOut'); | ||
| it('should call onPressIn', () => { | ||
| const onPressIn = jest.fn(); | ||
|
|
||
| const inactive: ReactTestInstance = await waitForElement(() => { | ||
| return component.getByType(Radio); | ||
| }); | ||
| const { output: inactiveOutput } = shallow(inactive); | ||
| const component = render( | ||
| <TestRadio onPressIn={onPressIn}/>, | ||
| ); | ||
|
|
||
| expect(activeOutput).toMatchSnapshot(); | ||
| expect(inactiveOutput).toMatchSnapshot('checked'); | ||
| }); | ||
| fireEvent(component.getByType(TouchableOpacity), 'pressIn'); | ||
|
|
||
| it('with text (styled)', () => { | ||
| const component: RenderAPI = renderComponent({ | ||
| text: 'Place your text', | ||
| textStyle: { | ||
| fontSize: 22, | ||
| lineHeight: 24, | ||
| }, | ||
| }); | ||
| const { output } = shallow(component.getByType(Radio)); | ||
|
|
||
| expect(output).toMatchSnapshot(); | ||
| expect(onPressIn).toBeCalled(); | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| describe('@radio: component checks', () => { | ||
|
|
||
| it('* emits onChange with correct args', () => { | ||
| const onChange = jest.fn(); | ||
| it('should call onPressOut', () => { | ||
| const onPressOut = jest.fn(); | ||
|
|
||
| const component: RenderAPI = renderComponent({ | ||
| checked: false, | ||
| onChange: onChange, | ||
| }); | ||
| const component = render( | ||
| <TestRadio onPressOut={onPressOut}/>, | ||
| ); | ||
|
|
||
| fireEvent.press(component.getByType(TouchableOpacity)); | ||
| fireEvent(component.getByType(TouchableOpacity), 'pressOut'); | ||
|
|
||
| expect(onChange).toBeCalledWith(true); | ||
| expect(onPressOut).toBeCalled(); | ||
| }); | ||
|
|
||
| }); |
Oops, something went wrong.