-
Notifications
You must be signed in to change notification settings - Fork 957
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING: refactor Toggle to new api
- Loading branch information
Artur Yorsh
committed
Feb 28, 2020
1 parent
da7d51f
commit c0b5f1e
Showing
2 changed files
with
91 additions
and
131 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,110 +1,88 @@ | ||
| /** | ||
| * @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 { Text } from 'react-native'; | ||
| import { | ||
| fireEvent, | ||
| render, | ||
| RenderAPI, | ||
| waitForElement, | ||
| } 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 { | ||
| Toggle, | ||
| ToggleComponent, | ||
| ToggleProps, | ||
| } from './toggle.component'; | ||
| import { | ||
| mapping, | ||
| theme, | ||
| } from '../support/tests'; | ||
|
|
||
| jest.mock('react-native/Libraries/Animated/src/Animated', (): unknown => { | ||
| const AnimatedModule = jest.requireActual('react-native/Libraries/Animated/src/Animated'); | ||
| return { | ||
| ...AnimatedModule, | ||
| timing: (value, config) => { | ||
| return { | ||
| start: (callback) => { | ||
| value.setValue(config.toValue); | ||
| callback && callback(); | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| const Mock = (props?: ToggleProps): React.ReactElement<ApplicationProviderProps> => { | ||
| return ( | ||
| describe('@toggle: component checks', () => { | ||
|
|
||
| const TestToggle = (props?: ToggleProps) => ( | ||
| <ApplicationProvider | ||
| mapping={mapping} | ||
| theme={theme}> | ||
| theme={light}> | ||
| <Toggle {...props} /> | ||
| </ApplicationProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const renderComponent = (props?: ToggleProps): RenderAPI => { | ||
| return render( | ||
| <Mock {...props}/>, | ||
| ); | ||
| }; | ||
| it('should request checking', async () => { | ||
| const onCheckedChange = jest.fn(); | ||
|
|
||
| describe('@toggle: component checks', () => { | ||
| const component = render( | ||
| <TestToggle | ||
| checked={false} | ||
| onChange={onCheckedChange} | ||
| />, | ||
| ); | ||
|
|
||
| it('contains text', () => { | ||
| const component: RenderAPI = renderComponent({ | ||
| text: 'Sample Text', | ||
| }); | ||
| const responder = component.getByType(ToggleComponent).children[0]; | ||
| fireEvent(responder as ReactTestInstance, 'responderRelease'); | ||
|
|
||
| expect(component.getByText('Sample Text')).toBeTruthy(); | ||
| await waitForElement(() => expect(onCheckedChange).toBeCalledWith(true)); | ||
| }); | ||
|
|
||
| it('emits onChange', () => { | ||
| const onChange = jest.fn(); | ||
| it('should request unchecking', async () => { | ||
| const onCheckedChange = jest.fn(); | ||
|
|
||
| const component: RenderAPI = renderComponent({ onChange }); | ||
| const { [0]: containerView } = component.getByType(ToggleComponent).children; | ||
| const component = render( | ||
| <TestToggle | ||
| checked={true} | ||
| onChange={onCheckedChange} | ||
| />, | ||
| ); | ||
|
|
||
| fireEvent(containerView as ReactTestInstance, 'responderRelease'); | ||
| const responder = component.getByType(ToggleComponent).children[0]; | ||
| fireEvent(responder as ReactTestInstance, 'responderRelease'); | ||
|
|
||
| expect(onChange).toHaveBeenCalled(); | ||
| await waitForElement(() => expect(onCheckedChange).toBeCalledWith(false)); | ||
| }); | ||
|
|
||
| it('checking of value direct', () => { | ||
| let checked: boolean = false; | ||
| const onChangeValue = (changed: boolean) => { | ||
| checked = changed; | ||
| }; | ||
|
|
||
| const component: RenderAPI = renderComponent({ | ||
| checked: checked, | ||
| onChange: onChangeValue, | ||
| }); | ||
| it('should render text', () => { | ||
| const component = render( | ||
| <TestToggle text='I love Babel'/>, | ||
| ); | ||
|
|
||
| const { [0]: containerView } = component.getByType(ToggleComponent).children; | ||
| const text = component.getByText('I love Babel'); | ||
|
|
||
| fireEvent(containerView as ReactTestInstance, 'responderRelease'); | ||
|
|
||
| expect(checked).toBe(true); | ||
| expect(text).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('checking of value reverse', () => { | ||
| let checked: boolean = true; | ||
| const onChangeValue = (changed: boolean) => { | ||
| checked = changed; | ||
| }; | ||
|
|
||
| const component: RenderAPI = renderComponent({ | ||
| checked: checked, | ||
| onChange: onChangeValue, | ||
| }); | ||
|
|
||
| const { [0]: containerView } = component.getByType(ToggleComponent).children; | ||
| it('should render text as component', () => { | ||
| const component = render( | ||
| <TestToggle text={props => <Text {...props}>I love Babel</Text>}/>, | ||
| ); | ||
|
|
||
| fireEvent(containerView as ReactTestInstance, 'responderRelease'); | ||
| const text = component.getByText('I love Babel'); | ||
|
|
||
| expect(checked).toBe(false); | ||
| expect(text).toBeTruthy(); | ||
| }); | ||
|
|
||
| }); |