diff --git a/app/scenes/ExampleScreen/index.js b/app/scenes/ExampleScreen/index.js
index 1d7df58..3b273c1 100644
--- a/app/scenes/ExampleScreen/index.js
+++ b/app/scenes/ExampleScreen/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { Button, Platform, View, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
@@ -6,6 +5,7 @@ import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';
import { createStructuredSelector } from 'reselect';
import { injectIntl } from 'react-intl';
+import React, { useEffect } from 'react';
import AppContainer from '@atoms/Container';
import SimpsonsLoveWednesday from '@organisms/SimpsonsLoveWednesday';
@@ -44,36 +44,32 @@ const instructions = Platform.select({
'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.'
});
-class ExampleScreen extends React.Component {
- componentDidMount() {
- this.requestFetchUser()();
- }
-
- requestFetchUser = () => () => {
- this.props.fetchUser();
+const ExampleScreen = props => {
+ const requestFetchUser = () => {
+ props.fetchUser();
};
-
- render() {
- return (
-
- {this.props.userIsLoading ? (
-
- ) : (
-
-
-
-
-
-
- )}
-
- );
- }
-}
+ useEffect(() => {
+ requestFetchUser();
+ }, []);
+ return (
+
+ {props.userIsLoading ? (
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+ );
+};
ExampleScreen.propTypes = {
user: PropTypes.object,
diff --git a/app/scenes/ExampleScreen/saga.js b/app/scenes/ExampleScreen/saga.js
index a0eefa1..6c3feaa 100644
--- a/app/scenes/ExampleScreen/saga.js
+++ b/app/scenes/ExampleScreen/saga.js
@@ -1,5 +1,5 @@
import { put, call, takeLatest } from 'redux-saga/effects';
-import { get } from 'lodash';
+import get from 'lodash/get';
import { getUser } from '@app/services/userService';
import { exampleScreenActions, exampleScreenTypes } from './reducer';
diff --git a/app/scenes/ExampleScreen/tests/index.test.js b/app/scenes/ExampleScreen/tests/index.test.js
index a1f364c..6038f51 100644
--- a/app/scenes/ExampleScreen/tests/index.test.js
+++ b/app/scenes/ExampleScreen/tests/index.test.js
@@ -7,15 +7,10 @@
import React from 'react';
import { renderProvider } from 'app/utils/testUtils';
import { ExampleScreenTest } from '../index';
-
+const setupJest = () => ({ submitSpy: jest.fn() });
describe(' Container tests', () => {
- let submitSpy;
-
- beforeAll(() => {
- submitSpy = jest.fn();
- });
-
it('should render and match the snapshot', () => {
+ const { submitSpy } = setupJest();
const baseElement = renderProvider(
);
@@ -23,10 +18,12 @@ describe(' Container tests', () => {
});
it('should fetch the user data on mount', () => {
+ const { submitSpy } = setupJest();
renderProvider();
expect(submitSpy).toHaveBeenCalled();
});
it('should render ActivityIndicator if userIsLoading is true', () => {
+ const { submitSpy } = setupJest();
const { getByTestId } = renderProvider(
);
@@ -36,6 +33,7 @@ describe(' Container tests', () => {
});
it('should not render ActivityIndicator if userIsLoading is false, should instead render exampleContainerContent', () => {
+ const { submitSpy } = setupJest();
const { getByTestId } = renderProvider(
);
diff --git a/app/scenes/ExampleScreen/tests/reducer.test.js b/app/scenes/ExampleScreen/tests/reducer.test.js
index f0dd0e0..9356002 100644
--- a/app/scenes/ExampleScreen/tests/reducer.test.js
+++ b/app/scenes/ExampleScreen/tests/reducer.test.js
@@ -5,50 +5,53 @@ import {
} from '../reducer';
/* eslint-disable default-case, no-param-reassign */
+const setupState = () => ({
+ state: initialState,
+ user: 'Mohammed Ali Chherawalla'
+});
describe('Tests for reducers used in the ExampleScreen', () => {
- let state;
- beforeEach(() => {
- state = initialState;
- });
-
it('should return the initial state', () => {
+ const { state } = setupState();
expect(exampleContainerReducer(undefined, {})).toEqual(state);
});
it('should ensure that userLoading = true when an action of type REQUEST_FETCH_USER is dispatched', () => {
+ const { state, user } = setupState();
const expectedResult = state
.set('userIsLoading', true)
.set('userErrorMessage', null);
expect(
exampleContainerReducer(state, {
type: exampleScreenTypes.REQUEST_FETCH_USER,
- user: 'Mohammed Ali Chherawalla'
+ user
})
).toEqual(expectedResult);
});
it('should ensure that the user data is present and userLoading = false when SUCCESS_FETCH_USER is dispatched', () => {
+ const { state, user } = setupState();
const expectedResult = state
- .set('user', { name: 'Mohammed Ali Chherawalla' })
+ .set('user', { name: user })
.set('userIsLoading', false)
.set('userErrorMessage', null);
expect(
exampleContainerReducer(state, {
type: exampleScreenTypes.SUCCESS_FETCH_USER,
- user: { name: 'Mohammed Ali Chherawalla' }
+ user: { name: user }
})
).toEqual(expectedResult);
});
it('should ensure that the userErrorMessage has some data and userLoading = false when FAILURE_FETCH_USER is dispatched', () => {
+ const { state } = setupState();
const expectedResult = state
.set('user', {})
.set('userIsLoading', false)
- .set('userErrorMessage', 'There was some error bro');
+ .set('userErrorMessage', 'There was some error');
expect(
exampleContainerReducer(state, {
type: exampleScreenTypes.FAILURE_FETCH_USER,
- errorMessage: 'There was some error bro'
+ errorMessage: 'There was some error'
})
).toEqual(expectedResult);
});
diff --git a/app/scenes/ExampleScreen/tests/selectors.test.js b/app/scenes/ExampleScreen/tests/selectors.test.js
index 85c0635..1072308 100644
--- a/app/scenes/ExampleScreen/tests/selectors.test.js
+++ b/app/scenes/ExampleScreen/tests/selectors.test.js
@@ -5,18 +5,15 @@ import {
selectUserErrorMessage
} from '../selectors';
-describe('Tests for selectors to get data from state for the ExampleScreen', () => {
- let mockedState;
- let username;
- let userIsLoading;
- let userErrorMessage;
-
- beforeEach(() => {
- username = 'Mohammed Ali Chherawalla';
- userErrorMessage = 'Some error';
- userIsLoading = false;
-
- mockedState = {
+const setupMockedState = () => {
+ const username = 'Mohammed Ali Chherawalla';
+ const userErrorMessage = 'Some error';
+ const userIsLoading = false;
+ return {
+ username,
+ userErrorMessage,
+ userIsLoading,
+ mockedState: {
example: fromJS({
user: {
username
@@ -24,20 +21,24 @@ describe('Tests for selectors to get data from state for the ExampleScreen', ()
userErrorMessage,
userIsLoading
})
- };
- });
-
+ }
+ };
+};
+describe('Tests for selectors to get data from state for the ExampleScreen', () => {
it('should select the user state', () => {
+ const { mockedState, username } = setupMockedState();
const userSelector = selectUser();
expect(userSelector(mockedState)).toEqual({ username });
});
it('should select userIsLoading', () => {
+ const { mockedState, userIsLoading } = setupMockedState();
const userIsLoadingSelector = selectUserIsLoading();
expect(userIsLoadingSelector(mockedState)).toEqual(userIsLoading);
});
it('should select the userErrorMessage', () => {
+ const { mockedState, userErrorMessage } = setupMockedState();
const userErrorMessageSelector = selectUserErrorMessage();
expect(userErrorMessageSelector(mockedState)).toEqual(userErrorMessage);
});