Skip to content

Commit 12092b3

Browse files
dsolimandoDamien
dsolimando
and
Damien
authored
feat: mock unit tests (#169)
* feat: mock unit tests * feat: mock unit tests --------- Co-authored-by: Damien <damien.solimando.ext@proximus.com>
1 parent 2d421b0 commit 12092b3

23 files changed

+2354
-737
lines changed

‎config/jest.setup.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ jest.doMock('react-native', () => {
1616
);
1717
});
1818

19+
// jest.mock('react-native', () => {
20+
// return {
21+
// ...jest.requireActual('react-native'),
22+
// ...mockNativeModules,
23+
// // useColorScheme: jest.fn().mockReturnValue('light'),
24+
// };
25+
// });
26+
1927
// jest.mock('react-native-paper');
2028
jest.mock('react-native-paper', () => {
2129
return {
@@ -32,7 +40,8 @@ jest.mock('react-native-paper', () => {
3240
Text: () => <></>,
3341
Icon: () => <></>,
3442
Searchbar: () => <></>,
35-
ActivityIndicator: () => <></>
43+
ActivityIndicator: () => <></>,
44+
Provider: ({ children }) => children,
3645
};
3746
});
3847

‎src/Components/Mocking/EditMockResponse.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import { TextInput } from 'react-native-paper';
22
import { Button, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
3-
import * as React from 'react';
4-
import { useCallback, useContext, useEffect } from 'react';
3+
import React, { useCallback, useContext, useEffect, useState } from 'react';
54
import { ThemeContext } from '../../Theme';
65
import { NavBar } from '../NavBar';
76
import { extractURL, mockRequestWithResponse, MockResponse } from './utils';
87

98
export function EditMockResponse(props: { mockResponse: MockResponse; onPressBack: () => void; update: boolean }) {
109
const theme = useContext(ThemeContext);
1110

12-
const [url, setUrl] = React.useState<string>();
13-
const [method, setMethod] = React.useState<string>(); // [GET, POST, PUT, PATCH, DELETE
14-
const [headers, setHeaders] = React.useState<string>();
15-
const [body, setBody] = React.useState<string>();
16-
const [code, setCode] = React.useState<string>();
17-
const [active, setActive] = React.useState<boolean>(true);
18-
const [to, setTo] = React.useState<string>();
11+
const [url, setUrl] = useState<string>();
12+
const [method, setMethod] = useState<string>(); // [GET, POST, PUT, PATCH, DELETE
13+
const [headers, setHeaders] = useState<string>();
14+
const [body, setBody] = useState<string>();
15+
const [code, setCode] = useState<string>();
16+
const [active, setActive] = useState<boolean>(true);
17+
const [to, setTo] = useState<string>();
1918

2019
useEffect(() => {
2120
setUrl(props.mockResponse.url);

‎src/Components/Mocking/MockList.tsx

+56-50
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Button, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
2-
import * as React from 'react';
3-
import { useContext, useEffect } from 'react';
2+
import React, { useContext, useEffect, useState } from 'react';
43
import { ThemeContext } from '../../Theme';
54
import { NavBar } from '../NavBar';
65
import { Divider } from 'react-native-paper';
@@ -10,13 +9,66 @@ import Share from 'react-native-share';
109
import RNFS from 'react-native-fs';
1110
import Clipboard from '@react-native-clipboard/clipboard';
1211

12+
export function NavbarRightSide(props: {
13+
mockResponsesCopy: MockResponse[];
14+
setMockResponsesCopy: (mockResponsesCopy: MockResponse[]) => void;
15+
}) {
16+
const theme = useContext(ThemeContext);
17+
18+
return (
19+
<>
20+
<TouchableOpacity
21+
onPress={() => {
22+
Clipboard.getString().then(responses => {
23+
if (responses) {
24+
resetMockResponses(responses);
25+
props.setMockResponsesCopy(getMockResponses());
26+
}
27+
});
28+
}}
29+
style={[styles.button, { borderLeftWidth: 0 }]}
30+
>
31+
<FeatherIcon name="download" color={theme.textColorOne} size={24} />
32+
</TouchableOpacity>
33+
{props.mockResponsesCopy.length > 0 && (
34+
<TouchableOpacity
35+
style={[styles.button, { borderLeftWidth: 0 }]}
36+
onPress={() => {
37+
RNFS.copyFile(FILE_PATH, `${RNFS.DocumentDirectoryPath}/mocks-preset.json`)
38+
.then(() => {
39+
Share.open({
40+
title: 'Export Mock preset',
41+
url: `${RNFS.DocumentDirectoryPath}/mocks-preset.json`,
42+
type: 'text/plain',
43+
// excludedActivityTypes: []
44+
}).then(() => {
45+
RNFS.unlink(`${RNFS.DocumentDirectoryPath}/mocks-preset.json`);
46+
});
47+
})
48+
.catch(console.error);
49+
}}
50+
>
51+
<FeatherIcon name="upload" color={theme.textColorOne} size={24} />
52+
</TouchableOpacity>
53+
)}
54+
<Button
55+
title={'Clear'}
56+
onPress={() => {
57+
clearMockResponses();
58+
props.setMockResponsesCopy([]);
59+
}}
60+
/>
61+
</>
62+
);
63+
}
64+
1365
export function MockList(props: {
1466
showEdit: (mockResponse: MockResponse, update: boolean) => void;
1567
onPressBack: () => void;
1668
}) {
1769
const theme = useContext(ThemeContext);
1870

19-
const [mockResponsesCopy, setMockResponsesCopy] = React.useState<MockResponse[]>([]);
71+
const [mockResponsesCopy, setMockResponsesCopy] = useState<MockResponse[]>([]);
2072

2173
useEffect(() => {
2274
setMockResponsesCopy(getMockResponses());
@@ -29,53 +81,7 @@ export function MockList(props: {
2981
title={'Mock List'}
3082
onPressBack={props.onPressBack}
3183
rightComponent={
32-
<>
33-
<TouchableOpacity style={[styles.button, { borderLeftWidth: 0 }]}>
34-
<FeatherIcon
35-
name="download"
36-
color={theme.textColorOne}
37-
size={24}
38-
onPress={() => {
39-
Clipboard.getString().then(responses => {
40-
if (responses) {
41-
resetMockResponses(responses);
42-
setMockResponsesCopy(getMockResponses());
43-
}
44-
});
45-
}}
46-
/>
47-
</TouchableOpacity>
48-
{mockResponsesCopy.length > 0 && (
49-
<TouchableOpacity style={[styles.button, { borderLeftWidth: 0 }]}>
50-
<FeatherIcon
51-
name="upload"
52-
color={theme.textColorOne}
53-
size={24}
54-
onPress={() => {
55-
RNFS.copyFile(FILE_PATH, `${RNFS.DocumentDirectoryPath}/mocks-preset.json`)
56-
.then(() => {
57-
Share.open({
58-
title: 'Export Mock preset',
59-
url: `${RNFS.DocumentDirectoryPath}/mocks-preset.json`,
60-
type: 'text/plain',
61-
// excludedActivityTypes: []
62-
}).then(() => {
63-
RNFS.unlink(`${RNFS.DocumentDirectoryPath}/mocks-preset.json`);
64-
});
65-
})
66-
.catch(console.error);
67-
}}
68-
/>
69-
</TouchableOpacity>
70-
)}
71-
<Button
72-
title={'Clear'}
73-
onPress={() => {
74-
clearMockResponses();
75-
setMockResponsesCopy([]);
76-
}}
77-
/>
78-
</>
84+
<NavbarRightSide mockResponsesCopy={mockResponsesCopy} setMockResponsesCopy={setMockResponsesCopy} />
7985
}
8086
/>
8187

‎src/Components/Mocking/__tests__/EditMockResponse.test.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { useState } from 'react';
2+
import { EditMockResponse } from '../EditMockResponse';
3+
import { getMockResponses, mockRequestWithResponse, MockResponse } from '../utils';
4+
import { shallow, ShallowWrapper } from 'enzyme';
5+
import { NavBar } from '../../NavBar';
6+
7+
jest.mock('react', () => ({
8+
...jest.requireActual('react'),
9+
useState: jest.fn(),
10+
useEffect: (f: () => void) => f(),
11+
}));
12+
13+
describe('Test Edit Mock Response Screen', () => {
14+
let component: ShallowWrapper;
15+
const mockResponse: MockResponse = {
16+
url: 'https://www.google.com',
17+
method: 'GET',
18+
headers: '',
19+
response: '',
20+
statusCode: 0,
21+
timeout: 0,
22+
active: true,
23+
};
24+
25+
it('should render properly', () => {
26+
givenMockResponse();
27+
component = shallow(<EditMockResponse mockResponse={mockResponse} onPressBack={() => {}} update={false} />);
28+
expect(component).toMatchSnapshot();
29+
});
30+
31+
it('should render properly when updating mock', () => {
32+
givenMockResponse();
33+
component = shallow(<EditMockResponse mockResponse={mockResponse} onPressBack={() => {}} update={true} />);
34+
expect(component).toMatchSnapshot();
35+
});
36+
37+
it('should save mock response when pressing save button', function () {
38+
givenMockResponse();
39+
component = shallow(<EditMockResponse mockResponse={mockResponse} onPressBack={() => {}} update={false} />);
40+
// @ts-ignore
41+
component.find(NavBar).props().rightComponent?.props.onPress();
42+
expect(getMockResponses()[0]).toEqual(expect.objectContaining(mockResponse));
43+
});
44+
45+
function givenMockResponse() {
46+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.url, jest.fn()]);
47+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.method, jest.fn()]);
48+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.headers, jest.fn()]);
49+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.response, jest.fn()]);
50+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.statusCode, jest.fn()]);
51+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.active, jest.fn()]);
52+
(useState as jest.Mock).mockReturnValueOnce([mockResponse.timeout, jest.fn()]);
53+
}
54+
});

0 commit comments

Comments
 (0)