Fakultas Ilmu Komputer UI

index.test.tsx 4.05 KB
Newer Older
1
2
import 'react-native';
import React from 'react';
Nandhika Prayoga's avatar
Nandhika Prayoga committed
3
import axios from 'axios';
4
5
6
7
8
9
10
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {AppContext} from 'contexts';
import {useMainService} from 'services';
import Log from '.';

// Note: test renderer must be required after react-native.
Nandhika Prayoga's avatar
Nandhika Prayoga committed
11
import ReactTestRenderer, {act} from 'react-test-renderer';
12

Nandhika Prayoga's avatar
Nandhika Prayoga committed
13
jest.mock('axios');
14
jest.useFakeTimers();
15
jest.setTimeout(30000);
16
17
18
19
20
21
const Stack = createStackNavigator();
const testProps = {
  services: {
    main: useMainService('dummyToken'),
  },
  cache: {},
Nandhika Prayoga's avatar
Nandhika Prayoga committed
22
  setCache: jest.fn(),
23
24
};

Nandhika Prayoga's avatar
Nandhika Prayoga committed
25
26
27
28
29
30
31
32
33
34
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.request.mockImplementation(
  () =>
    new Promise(resolve => {
      resolve({
        status: 200,
        data: {
          count: 0,
          previous: true,
          next: true,
35
36
37
38
39
40
41
42
43
44
          case_subject: {
            id: 'f18cb059-c52e-49b1-8bb8-b066a946af4e',
            name: 'Raden Logy Ajeng',
            age: 22,
            is_male: false,
            address: 'Jl. Mahajapit Selatan 29',
            district: 'Beji',
            sub_district: 'Beji',
            created_at: '2020-04-21T15:28:04.205152+07:00',
          },
Nandhika Prayoga's avatar
Nandhika Prayoga committed
45
46
47
          results: [
            {
              id: 'id',
48
              model_name: 'Investigation Case',
Nandhika Prayoga's avatar
Nandhika Prayoga committed
49
50
51
              revision_id: 'rev-id',
              object_id: 'obj-id',
              action_type: 'Create',
52
              recorded_at: '2020-04-09T13:48:39.677670+07:00',
Nandhika Prayoga's avatar
Nandhika Prayoga committed
53
              author: null,
54
              latest: true,
Nandhika Prayoga's avatar
Nandhika Prayoga committed
55
56
57
58
59
60
61
            },
          ],
        },
      });
    }),
);

62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
it('renders correctly', () => {
  const instance = ReactTestRenderer.create(
    <AppContext.Provider value={testProps}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            // Empty header
            header: () => <></>,
          }}>
          <Stack.Screen name="log" component={Log} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>,
  );
  expect(instance.toJSON()).toMatchSnapshot();
});
Nandhika Prayoga's avatar
Nandhika Prayoga committed
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

it('successfully fetch log data', async () => {
  const instance = ReactTestRenderer.create(
    <AppContext.Provider value={testProps}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            // Empty header
            header: () => <></>,
          }}>
          <Stack.Screen name="log" component={Log} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>,
  );
  expect(instance.toJSON()).toMatchSnapshot();
  expect(mockedAxios.request).toBeCalled();
});

it('successfully call edit log callback ', async () => {
  const instance = ReactTestRenderer.create(
    <AppContext.Provider value={testProps}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            // Empty header
            header: () => <></>,
          }}>
          <Stack.Screen name="log" component={Log} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>,
  );

  expect(instance.toJSON()).toMatchSnapshot();

  await act(async () => {
    expect(mockedAxios.request).toBeCalled();
  });

  const selectedLog = instance.root.find(elem => elem.props.id === 'log-0');
  act(() => {
    selectedLog.props.onPress();
  });
});

it('successfully change log page', async () => {
  const instance = ReactTestRenderer.create(
    <AppContext.Provider value={testProps}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            // Empty header
            header: () => <></>,
          }}>
          <Stack.Screen name="log" component={Log} />
        </Stack.Navigator>
      </NavigationContainer>
    </AppContext.Provider>,
  );

  expect(instance.toJSON()).toMatchSnapshot();

  await act(async () => {
    expect(mockedAxios.request).toBeCalled();
  });

  const previous = instance.root.find(elem => elem.props.id === 'prev');
  const next = instance.root.find(elem => elem.props.id === 'next');

  act(() => {
    previous.props.onPress();
    next.props.onPress();
  });
});