-
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 Drawer to new api
- Loading branch information
Artur Yorsh
committed
Feb 28, 2020
1 parent
cc4ea57
commit 9188551
Showing
4 changed files
with
200 additions
and
183 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,136 +1,145 @@ | ||
| /** | ||
| * @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 { | ||
| Image, | ||
| ImageSourcePropType, | ||
| ImageProps, | ||
| Text, | ||
| TouchableOpacity, | ||
| } from 'react-native'; | ||
| import { | ||
| fireEvent, | ||
| render, | ||
| RenderAPI, | ||
| } from 'react-native-testing-library'; | ||
| import { | ||
| ApplicationProvider, | ||
| ApplicationProviderProps, | ||
| } from '@kitten/theme'; | ||
| light, | ||
| mapping, | ||
| } from '@eva-design/eva'; | ||
| import { ApplicationProvider } from '../../theme'; | ||
| import { | ||
| Drawer, | ||
| DrawerProps, | ||
| } from '../drawer/drawer.component'; | ||
| import { DrawerHeaderFooter } from './drawerHeaderFooter.component'; | ||
| } from './drawer.component'; | ||
| import { | ||
| MenuItemType, | ||
| MenuItem, | ||
| } from '../menu/menuItem.component'; | ||
| import { | ||
| mapping, | ||
| theme, | ||
| } from '../support/tests'; | ||
| DrawerItem, | ||
| DrawerItemProps, | ||
| } from './drawerItem.component'; | ||
|
|
||
| const data: MenuItemType[] = [ | ||
| { title: 'Item 1' }, | ||
| { title: 'Item 2' }, | ||
| { title: 'Item 3' }, | ||
| ]; | ||
| describe('@drawer-item: component checks', () => { | ||
|
|
||
| const Mock = (props?: DrawerProps): React.ReactElement<ApplicationProviderProps> => { | ||
| return ( | ||
| const TestDrawerItem = (props?: DrawerItemProps) => ( | ||
| <ApplicationProvider | ||
| mapping={mapping} | ||
| theme={theme}> | ||
| <Drawer data={data} {...props} /> | ||
| theme={light}> | ||
| <DrawerItem {...props}/> | ||
| </ApplicationProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const renderComponent = (props?: DrawerProps): RenderAPI => { | ||
| return render( | ||
| <Mock {...props}/>, | ||
| ); | ||
| }; | ||
|
|
||
| describe('@drawer: component checks', () => { | ||
|
|
||
| it('* should render proper number of items', () => { | ||
| const component: RenderAPI = renderComponent(); | ||
| it('should render text passed to title prop', () => { | ||
| const component = render( | ||
| <TestDrawerItem title='I love Babel'/>, | ||
| ); | ||
|
|
||
| expect(component.getAllByType(MenuItem).length).toEqual(3); | ||
| const title = component.getByText('I love Babel'); | ||
| expect(title).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('* item should render title', () => { | ||
| const component: RenderAPI = renderComponent(); | ||
| it('should render component passed to title prop', () => { | ||
| const component = render( | ||
| <TestDrawerItem title={props => <Text {...props}>I love Babel</Text>}/>, | ||
| ); | ||
|
|
||
| expect(component.getByText('Item 1')).toBeTruthy(); | ||
| expect(component.getByText('Item 2')).toBeTruthy(); | ||
| expect(component.getByText('Item 3')).toBeTruthy(); | ||
| const titleAsComponent = component.getByText('I love Babel'); | ||
| expect(titleAsComponent).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('* item should render icon', () => { | ||
| const source: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }; | ||
| it('should render components passed to accessoryLeft or accessoryRight props', () => { | ||
| const AccessoryLeft = (props): React.ReactElement<ImageProps> => ( | ||
| <Image | ||
| {...props} | ||
| source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }} | ||
| /> | ||
| ); | ||
|
|
||
| const icon = () => ( | ||
| <Image testID='@drawer-item-icon' source={source}/> | ||
| const AccessoryRight = (props): React.ReactElement<ImageProps> => ( | ||
| <Image | ||
| {...props} | ||
| source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/home.png' }} | ||
| /> | ||
| ); | ||
|
|
||
| const drawerData: MenuItemType[] = [ | ||
| { title: 'Item 1', icon }, | ||
| { title: 'Item 2', icon }, | ||
| { title: 'Item 3', icon }, | ||
| ]; | ||
| const component = render( | ||
| <TestDrawerItem | ||
| accessoryLeft={AccessoryLeft} | ||
| accessoryRight={AccessoryRight} | ||
| />, | ||
| ); | ||
|
|
||
| const [accessoryLeft, accessoryRight] = component.getAllByType(Image); | ||
|
|
||
| const component: RenderAPI = renderComponent({ data: drawerData, onSelect: () => 1 }); | ||
| expect(accessoryLeft).toBeTruthy(); | ||
| expect(accessoryRight).toBeTruthy(); | ||
|
|
||
| expect(component.getAllByTestId('@drawer-item-icon').length).toEqual(3); | ||
| expect(accessoryLeft.props.source.uri).toEqual('https://akveo.github.io/eva-icons/fill/png/128/star.png'); | ||
| expect(accessoryRight.props.source.uri).toEqual('https://akveo.github.io/eva-icons/fill/png/128/home.png'); | ||
| }); | ||
|
|
||
| it('* item should render accessory view', () => { | ||
| const source: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }; | ||
| it('should call onPress', () => { | ||
| const onPress = jest.fn(); | ||
|
|
||
| const accessory = () => ( | ||
| <Image testID='@drawer-item-accessory' source={source}/> | ||
| const component = render( | ||
| <TestDrawerItem onPress={onPress}/>, | ||
| ); | ||
|
|
||
| const drawerData: MenuItemType[] = [ | ||
| { title: 'Item 1', accessory }, | ||
| { title: 'Item 2', accessory }, | ||
| { title: 'Item 3', accessory }, | ||
| ]; | ||
|
|
||
| const component: RenderAPI = renderComponent({ data: drawerData, onSelect: () => 1 }); | ||
| const touchable = component.getByType(TouchableOpacity); | ||
| fireEvent.press(touchable); | ||
|
|
||
| expect(component.getAllByTestId('@drawer-item-accessory').length).toEqual(3); | ||
| expect(onPress).toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
|
|
||
| it('* should render header', () => { | ||
| const header = () => ( | ||
| <DrawerHeaderFooter testID='@drawer-header'/> | ||
| ); | ||
|
|
||
| const component: RenderAPI = renderComponent({ data, header, onSelect: () => 1 }); | ||
| describe('@drawer: component checks', () => { | ||
|
|
||
| expect(component.getAllByTestId('@drawer-header').length).toBeTruthy(); | ||
| }); | ||
| const TestDrawer = (props?: DrawerProps) => ( | ||
| <ApplicationProvider | ||
| mapping={mapping} | ||
| theme={light}> | ||
| <Drawer {...props}> | ||
| <DrawerItem/> | ||
| <DrawerItem/> | ||
| </Drawer> | ||
| </ApplicationProvider> | ||
| ); | ||
|
|
||
| it('* should render footer', () => { | ||
| const footer = () => ( | ||
| <DrawerHeaderFooter testID='@drawer-footer'/> | ||
| it('should render 2 drawer items passed to children', () => { | ||
| const component = render( | ||
| <TestDrawer/>, | ||
| ); | ||
|
|
||
| const component: RenderAPI = renderComponent({ data, footer, onSelect: () => 1 }); | ||
|
|
||
| expect(component.getAllByTestId('@drawer-footer').length).toBeTruthy(); | ||
| const items = component.getAllByType(DrawerItem); | ||
| expect(items.length).toEqual(2); | ||
| }); | ||
|
|
||
| it('* should call onSelect', () => { | ||
| const pressIndex: number = 1; | ||
| it('should render component passed to header prop', () => { | ||
| const component = render( | ||
| <TestDrawer header={() => <Text>I love Babel</Text>}/>, | ||
| ); | ||
|
|
||
| const onSelect = jest.fn((index: number) => { | ||
| expect(index).toEqual(pressIndex); | ||
| }); | ||
| const header = component.getByText('I love Babel'); | ||
| expect(header).toBeTruthy(); | ||
| }); | ||
|
|
||
| const component: RenderAPI = renderComponent({ data, onSelect }); | ||
| it('should render component passed to footer prop', () => { | ||
| const component = render( | ||
| <TestDrawer footer={() => <Text>I love Babel</Text>}/>, | ||
| ); | ||
|
|
||
| fireEvent.press(component.getAllByType(TouchableOpacity)[pressIndex]); | ||
| const footer = component.getByText('I love Babel'); | ||
| expect(footer).toBeTruthy(); | ||
| }); | ||
|
|
||
| }); |
Oops, something went wrong.