add: test by pages/ScheduleDetail/Page.tsx

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<Props> = memo(props => {
+type Props = ConnectedProps & {
+  showActionSheetWithOptions: (
+    options: ActionSheetOptions,
+    callback: (i: number) => void
+  ) => void;
+};
+
+export type ScheduleDetailType = {
+  onOpenActionSheet: () => void;
+};
+
+const Connected: FC<ConnectedProps> = props => {
   const { showActionSheetWithOptions } = useActionSheet();
 
+  return (
+    <ScheduleDetailPage
+      {...props}
+      showActionSheetWithOptions={showActionSheetWithOptions}
+    />
+  );
+};
+
+export const ScheduleDetailPage: FC<Props> = memo(props => {
   const onOpenActionSheet = () => {
-    showActionSheetWithOptions(
+    props.showActionSheetWithOptions(
       {
         options: ['編集', '削除', 'キャンセル'],
         destructiveButtonIndex: 1,
@@ -57,7 +80,7 @@ const ScheduleDetailPage: FC<Props> = 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<Props> = memo(props => {
   );
 });
 
-export default ScheduleDetailPage;
+export default Connected;
 
 const styles = EStyleSheet.create({
   contents: {

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<ScheduleDetailType>;
+
+  describe('Connected', () => {
+    const propsData = () => ({
+      ...mockData,
+      loading: false,
+      onDismiss: jest.fn(),
+      onDelete: jest.fn(),
+      onCreateScheduleDetail: jest.fn(),
+    });
 
-  beforeEach(() => {
-    wrapper = shallow(<Page {...propsData()} />);
+    it('正常に表示されている', () => {
+      wrapper = shallow(<Connected {...propsData()} />);
+
+      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(<ScheduleDetailPage {...propsData()} />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('Loadingが表示されている', () => {
+      wrapper = shallow(<ScheduleDetailPage {...propsData()} loading />);
+
+      expect(wrapper.find(Loading).exists()).toBeTruthy();
+    });
+
+    describe('onOpenActionSheet', () => {
+      wrapper = shallow(<ScheduleDetailPage {...propsData()} />);
+
+      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);
+      });
+    });
   });
 });

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`] = `
+<Memo()
+  id="1"
+  itemId="1"
+  kind="park"
+  loading={false}
+  memo=""
+  moveMinutes={30}
+  onCreateScheduleDetail={[MockFunction]}
+  onDelete={[MockFunction]}
+  onDismiss={[MockFunction]}
+  place=""
+  priority={1}
+  showActionSheetWithOptions={[Function]}
+  title="新宿駅"
+  url=""
+/>
+`;
+
+exports[`components/pages/ScheduleDetail/Page.tsx ScheduleDetailPage 正常に表示されている 1`] = `
 <Fragment>
   <_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=""
     />