Fakultas Ilmu Komputer UI

Commit 5c82ffdf authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Merge branch 'install-rn-testing-library' into 'staging'

Install React Native Testing Library (with example usage)

See merge request !7
parents e411e880 03f9e595
Pipeline #66520 passed with stages
in 21 minutes and 21 seconds
......@@ -7,6 +7,7 @@
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest --coverage --watchAll=false --verbose --collectCoverageFrom=\"src/**/*.tsx\"",
"test-only": "jest -t",
"lint": "eslint . --ext .ts,.tsx --fix",
"prettify": "prettier --write src"
},
......@@ -14,6 +15,7 @@
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"@testing-library/react-native": "^7.2.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-elements": "^3.3.2",
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`examples of some things 1`] = `
<View>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
rejectResponderTermination={true}
testID="input"
underlineColorAndroid="transparent"
value="Ada Lovelace"
/>
<View
accessibilityRole="button"
accessibilityState={Object {}}
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
]
}
>
<Text
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
]
}
>
Print Username
</Text>
</View>
</View>
<Text
testID="printed-username"
>
Ada Lovelace
</Text>
</View>
`;
import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react-native';
import Example from '.';
test('examples of some things', async () => {
const { getByTestId, getByText, queryByTestId, toJSON } = render(<Example />);
const famousProgrammerInHistory = 'Ada Lovelace';
const input = getByTestId('input');
fireEvent.changeText(input, famousProgrammerInHistory);
const button = getByText('Print Username');
fireEvent.press(button);
await waitFor(() => expect(queryByTestId('printed-username')).toBeTruthy());
expect(getByTestId('printed-username').props.children).toBe(
famousProgrammerInHistory,
);
expect(toJSON()).toMatchSnapshot();
});
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
export default function Example() {
const [name, setUser] = React.useState('');
const [show, setShow] = React.useState(false);
return (
<View>
<TextInput value={name} onChangeText={setUser} testID="input" />
<Button
title="Print Username"
onPress={() => {
// let's pretend this is making a server request, so it's async
// (you'd want to mock this imaginary request in your unit tests)...
setTimeout(() => {
setShow(!show);
}, Math.floor(Math.random() * 200));
}}
/>
{show && <Text testID="printed-username">{name}</Text>}
</View>
);
}
import * as ROUTES from 'constants/routes';
import { HomePage } from 'scenes';
import { InitialPage } from 'scenes';
export const navigation = [
{
name: ROUTES.home,
component: HomePage,
name: ROUTES.initial,
component: InitialPage,
},
];
export const home = 'home';
export const initial = 'initial-page';
import 'react-native';
import React from 'react';
import { create } from 'react-test-renderer';
import InitialPage from '.';
describe('InitialPage', () => {
it('renders correctly', () => {
create(<InitialPage />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { styles } from './styles';
const InitialPage: FC = () => (
<View style={styles.view}>
<Text>Hello there</Text>
</View>
);
export default InitialPage;
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
view: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export { default as HomePage } from './common/HomePage';
export { default as InitialPage } from './common/InitialPage';
......@@ -971,6 +971,17 @@
"@types/yargs" "^15.0.0"
chalk "^3.0.0"
"@jest/types@^26.6.2":
version "26.6.2"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
dependencies:
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^3.0.0"
"@types/node" "*"
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
"@react-native-community/cli-debugger-ui@^4.13.1":
version "4.13.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz#07de6d4dab80ec49231de1f1fbf658b4ad39b32c"
......@@ -1162,6 +1173,13 @@
dependencies:
type-detect "4.0.8"
"@testing-library/react-native@^7.2.0":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-7.2.0.tgz#e5ec5b0974e4e5f525f8057563417d1e9f820d96"
integrity sha512-rDKzJjAAeGgyoJT0gFQiMsIL09chdWcwZyYx6WZHMgm2c5NDqY52hUuyTkzhqddMYWmSRklFphSg7B2HX+246Q==
dependencies:
pretty-format "^26.0.1"
"@types/babel__core@^7.1.7":
version "7.1.14"
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
......@@ -1232,6 +1250,13 @@
"@types/istanbul-lib-coverage" "*"
"@types/istanbul-lib-report" "*"
"@types/istanbul-reports@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
dependencies:
"@types/istanbul-lib-report" "*"
"@types/jest@^25.2.3":
version "25.2.3"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.2.3.tgz#33d27e4c4716caae4eced355097a47ad363fdcaf"
......@@ -2064,7 +2089,7 @@ chalk@^3.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chalk@^4.1.0:
chalk@^4.0.0, chalk@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
......@@ -5846,6 +5871,16 @@ pretty-format@^25.1.0, pretty-format@^25.2.0, pretty-format@^25.2.1, pretty-form
ansi-styles "^4.0.0"
react-is "^16.12.0"
pretty-format@^26.0.1:
version "26.6.2"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
dependencies:
"@jest/types" "^26.6.2"
ansi-regex "^5.0.0"
ansi-styles "^4.0.0"
react-is "^17.0.1"
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
......@@ -5943,6 +5978,11 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-is@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-native-elements@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-3.3.2.tgz#42cc05c90a5c85c8aee95ce363bce0c5a39fe633"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment