Commit f46f89a2 authored by dehari.blend's avatar dehari.blend

Added Unit tests for elements, simulated the behavior of a TextInput, added linting

parent f157b1d9
......@@ -2,7 +2,8 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="5ae91b90-d560-48c7-b78a-749f34de6ae4" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
......
......@@ -26,7 +26,7 @@ export default class App extends React.Component {
componentDidMount() {}
calculateSum = () => {
submitHandler = () => {
const { firstValue, secondValue, thirdValue } = this.state;
const sum =
(Number(firstValue) + Number(secondValue) + Number(thirdValue)) % 10;
......@@ -53,21 +53,21 @@ export default class App extends React.Component {
});
};
submitHandler = () => {
console.log('Pressed the button!');
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false });
}, 2000);
};
// submitHandler = () => {
// console.log('Pressed the button!');
// this.setState({ loading: true });
// setTimeout(() => {
// this.setState({ loading: false });
// }, 2000);
// };
_renderItem = ({ item }) => (
<TouchableOpacity onPress={() => alert(item.body)}>
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
</TouchableOpacity>
);
// _renderItem = ({ item }) => (
// <TouchableOpacity onPress={() => alert(item.body)}>
// <View style={styles.item}>
// <Text>{item.title}</Text>
// </View>
// </TouchableOpacity>
// );
renderItem = data => (
<TouchableOpacity style={styles.list}>
......@@ -89,7 +89,7 @@ export default class App extends React.Component {
render() {
const { loading } = this.state;
const mySpinner = <ActivityIndicator size="large" color="#0000ff" />;
// const mySpinner = <ActivityIndicator size="large" color="#0000ff" />;
if (this.state.loading) {
return (
<View style={styles.container}>
......@@ -104,6 +104,7 @@ export default class App extends React.Component {
<PickerStringExample />
<PickerStringExample /> */}
<TextInput
id="textInputTest"
style={inpuStyle.input}
value={this.state.firstValue}
onChangeText={firstValue => this.setState({ firstValue })}
......@@ -125,7 +126,7 @@ export default class App extends React.Component {
<Button
className="button"
title="Submit"
onPress={this.calculateSum}
onPress={this.submitHandler}
disabled={loading}
></Button>
{loading && mySpinner}
......
{
"preset": "react-native",
"collectCoverage": true,
"moduleDirectories": ["node_modules", "src"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"setupFiles": ["<rootDir>/jest/setup.js"],
"transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native)"],
"coveragePathIgnorePatterns": ["/node_modules/", "/jest"]
}
......@@ -5,7 +5,8 @@
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
"eject": "expo eject",
"test": "jest"
},
"dependencies": {
"@material-ui/core": "^4.6.0",
......@@ -19,7 +20,16 @@
"rn-number-input": "0.0.2"
},
"devDependencies": {
"babel-preset-expo": "^7.1.0"
"babel-preset-expo": "^7.1.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0"
},
"private": true
"private": true,
"jest": {
"preset": "react-native",
"setupFiles": [
"./tests/setup.js"
]
}
}
import React from 'react';
import { shallow } from 'enzyme';
import App from '../App';
describe('Elements rendered in <App />', () => {
it('renders a button', () => {
const wrapper = shallow(<App />);
expect(wrapper.find('Button').length).toEqual(1);
});
it('renders a FlatList', () => {
const wrapper = shallow(<App />);
expect(wrapper.find('FlatList').length).toEqual(1);
});
it('renders three TextInputs', () => {
const wrapper = shallow(<App />);
expect(wrapper.find('TextInput').length).toEqual(3);
});
// it('renders spinner', () => {
// const wrapper = shallow(<App />);
// expect(wrapper.find('ActivityIndicator').length).toEqual(1);
// });
});
import React from 'react';
import { shallow } from 'enzyme';
import App from '../App';
it('simulates text input', () => {
const wrapper = shallow(<App />);
wrapper.find('#textInputTest').simulate('changeText', '5');
wrapper.update();
expect(wrapper.find('#textInputTest').prop('value')).toEqual('5');
// console.log(wrapper.debug());
// console.log(wrapper.html());
});
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Markdown is supported
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