From 4b332e1f9a020d675a402693a2d38d93821b7e1b Mon Sep 17 00:00:00 2001 From: wheatandcat Date: Sat, 7 Mar 2020 00:01:20 +0900 Subject: [PATCH] add: test by pages/ScheduleDetail/Page.tsx --- .../components/pages/ScheduleDetail/Page.tsx | 37 +++++++-- .../ScheduleDetail/__tests__/Page.test.tsx | 82 +++++++++++++++---- .../__snapshots__/Page.test.tsx.snap | 45 +++++++++- 3 files changed, 142 insertions(+), 22 deletions(-) diff --git a/PeperomiaNative/src/components/pages/ScheduleDetail/Page.tsx b/PeperomiaNative/src/components/pages/ScheduleDetail/Page.tsx index 668216f1..e819bbdf 100644 --- a/PeperomiaNative/src/components/pages/ScheduleDetail/Page.tsx +++ b/PeperomiaNative/src/components/pages/ScheduleDetail/Page.tsx @@ -1,30 +1,53 @@ import React, { FC, memo } from 'react'; import { SafeAreaView, Alert, StatusBar, TouchableOpacity } from 'react-native'; import EStyleSheet from 'react-native-extended-stylesheet'; -import { useActionSheet } from '@expo/react-native-action-sheet'; +import { + useActionSheet, + ActionSheetOptions, +} from '@expo/react-native-action-sheet'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import Color from 'color'; import GlobalStyles from '../../../GlobalStyles'; import { SelectItemDetail } from '../../../domain/itemDetail'; -import { KINDS, KIND_DEFAULT } from '../../../lib/getKind'; +import { KINDS } from '../../../lib/getKind'; import s from '../../../config/style'; import theme from '../../../config/theme'; import Card from '../../molecules/ScheduleDetail/Card'; import Header from '../../molecules/Header'; import Loading from '../../molecules/ScheduleDetail/Loading'; -type Props = SelectItemDetail & { +type ConnectedProps = SelectItemDetail & { loading: boolean; onDismiss: () => void; onDelete: () => void; onCreateScheduleDetail: () => void; }; -const ScheduleDetailPage: FC = memo(props => { +type Props = ConnectedProps & { + showActionSheetWithOptions: ( + options: ActionSheetOptions, + callback: (i: number) => void + ) => void; +}; + +export type ScheduleDetailType = { + onOpenActionSheet: () => void; +}; + +const Connected: FC = props => { const { showActionSheetWithOptions } = useActionSheet(); + return ( + + ); +}; + +export const ScheduleDetailPage: FC = memo(props => { const onOpenActionSheet = () => { - showActionSheetWithOptions( + props.showActionSheetWithOptions( { options: ['編集', '削除', 'キャンセル'], destructiveButtonIndex: 1, @@ -57,7 +80,7 @@ const ScheduleDetailPage: FC = memo(props => { ); }; - const kind = props.kind || KIND_DEFAULT; + const kind = props.kind; const config = KINDS[kind]; const ss = s.schedule; const bc = Color(config.backgroundColor) @@ -107,7 +130,7 @@ const ScheduleDetailPage: FC = memo(props => { ); }); -export default ScheduleDetailPage; +export default Connected; const styles = EStyleSheet.create({ contents: { diff --git a/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/Page.test.tsx b/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/Page.test.tsx index 22c62b18..f0dc7635 100644 --- a/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/Page.test.tsx +++ b/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/Page.test.tsx @@ -1,24 +1,78 @@ import React from 'react'; +import { Alert } from 'react-native'; import { shallow, ShallowWrapper } from 'enzyme'; -import Page from '../Page'; +import Loading from '../../../molecules/ScheduleDetail/Loading'; +import Card from '../../../molecules/ScheduleDetail/Card'; +import Connected, { ScheduleDetailPage, ScheduleDetailType } from '../Page'; import { mockData } from './mockData'; describe('components/pages/ScheduleDetail/Page.tsx', () => { - let wrapper: ShallowWrapper; - - const propsData = () => ({ - ...mockData, - loading: false, - onDismiss: jest.fn(), - onDelete: jest.fn(), - onCreateScheduleDetail: jest.fn(), - }); + let wrapper: ShallowWrapper; + + describe('Connected', () => { + const propsData = () => ({ + ...mockData, + loading: false, + onDismiss: jest.fn(), + onDelete: jest.fn(), + onCreateScheduleDetail: jest.fn(), + }); - beforeEach(() => { - wrapper = shallow(); + it('正常に表示されている', () => { + wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); }); - it('正常に表示されている', () => { - expect(wrapper).toMatchSnapshot(); + describe('ScheduleDetailPage', () => { + const showActionSheetWithOptions = jest.fn(); + const onCreateScheduleDetail = jest.fn(); + const onDelete = jest.fn(); + + const propsData = () => ({ + ...mockData, + loading: false, + onDismiss: jest.fn(), + onDelete, + onCreateScheduleDetail, + showActionSheetWithOptions, + }); + + it('正常に表示されている', () => { + wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); + it('Loadingが表示されている', () => { + wrapper = shallow(); + + expect(wrapper.find(Loading).exists()).toBeTruthy(); + }); + + describe('onOpenActionSheet', () => { + wrapper = shallow(); + + wrapper + .find(Card) + .props() + .onOpenActionSheet(); + + it('編集', () => { + showActionSheetWithOptions.mock.calls[0][1](0); + + expect(onCreateScheduleDetail.mock.calls.length).toBe(1); + }); + + it('削除', () => { + const alertMock = jest.fn(); + jest.spyOn(Alert, 'alert').mockImplementation(alertMock); + + showActionSheetWithOptions.mock.calls[0][1](1); + alertMock.mock.calls[0][2][1].onPress(); + + expect(onDelete.mock.calls.length).toBe(1); + }); + }); }); }); diff --git a/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/__snapshots__/Page.test.tsx.snap b/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/__snapshots__/Page.test.tsx.snap index d144899e..36a322a4 100644 --- a/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/__snapshots__/Page.test.tsx.snap +++ b/PeperomiaNative/src/components/pages/ScheduleDetail/__tests__/__snapshots__/Page.test.tsx.snap @@ -1,6 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/pages/ScheduleDetail/Page.tsx 正常に表示されている 1`] = ` +exports[`components/pages/ScheduleDetail/Page.tsx Connected 正常に表示されている 1`] = ` + +`; + +exports[`components/pages/ScheduleDetail/Page.tsx ScheduleDetailPage 正常に表示されている 1`] = ` <_default color="none" @@ -54,6 +73,30 @@ exports[`components/pages/ScheduleDetail/Page.tsx 正常に表示されている onOpenActionSheet={[Function]} place="" priority={1} + showActionSheetWithOptions={ + [MockFunction] { + "calls": Array [ + Array [ + Object { + "cancelButtonIndex": 2, + "destructiveButtonIndex": 1, + "options": Array [ + "編集", + "削除", + "キャンセル", + ], + }, + [Function], + ], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + } + } title="新宿駅" url="" />