-
-
{WELCOME_HEADING}
-
-
-
-
+const Home = () => {
+
+ const isLoggedIn = useSelector(loggedIn)
+ const dispatch = useDispatch()
+ const displayName = useSelector(userName)
+ const displayToken = useSelector(token)
+ const displayRoles = useSelector(roles)
+
+ const doLogin = () => {
+ dispatch(login({
+ name: 'Test',
+ token: '123',
+ roles: ['Admin', 'Clinician']
+ }))
+ }
+
+ const doLogout = () => {
+ dispatch(logout())
+ }
+
+ return (
+ <>
+
+
+ {GITHUB_FORK_TEXT}
+
+
+
+
{WELCOME_HEADING}
+
+
+
+
+
+
+
-
-
-);
-export default Home;
+ {
+ isLoggedIn &&
+
+
{displayName}
+ {displayToken}
+ {
+ displayRoles &&
+ displayRoles.map((value, index) => {
+ return (
+ {value}
+ )
+ })
+ }
+
+ }
+
+ )
+}
+export default Home
diff --git a/src/components/home/Home.scss b/src/components/home/Home.scss
index 18d6b5b..0b6e5a6 100644
--- a/src/components/home/Home.scss
+++ b/src/components/home/Home.scss
@@ -109,5 +109,5 @@ body {
position: absolute;
top: 50%;
left: 50%;
- transform: translate(-50%,-50%);
+ transform: translate(-50%, -50%);
}
diff --git a/src/components/home/Home.story.jsx b/src/components/home/Home.story.jsx
index ee27a9a..9a5ee2a 100644
--- a/src/components/home/Home.story.jsx
+++ b/src/components/home/Home.story.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import Button from '../../pure-components/Button/Button';
+import React from 'react'
+import Button from '../../pure-components/Button/Button'
-export default { title: 'Home' };
+export default { title: 'Home' }
-export const withText = () =>
;
+export const withText = () =>
-export const withEmoji = () =>
;
+export const withEmoji = () =>
diff --git a/src/components/home/Home.test.jsx b/src/components/home/Home.test.jsx
index ae97d36..dc10e3a 100644
--- a/src/components/home/Home.test.jsx
+++ b/src/components/home/Home.test.jsx
@@ -1,11 +1,83 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { WELCOME_HEADING } from '../../constants/HomeConstants';
-import Home from './Home';
+import React from 'react'
+import { fireEvent, screen, cleanup, act } from '@testing-library/react'
+import { WELCOME_HEADING, LOGIN_ID, LOGOUT_ID,
+ USERNAME_ID, TOKEN_ID, ROLES_ID } from '../../constants/HomeConstants'
+import Home from './Home'
+import {renderWithProviders} from '../../tests/setup/TestUtils'
+
+
+describe('[Home Component Static Test Suite]', () => {
+
+ afterEach(() => {
+ cleanup()
+ })
-describe('[Home Component Test Suite]', () => {
test('should pass if "React Enterprise Starter Kit" is found in the document', () => {
- render(
);
- expect(screen.getByText(WELCOME_HEADING)).toBeInTheDocument();
- });
-});
+ act(() => {
+ renderWithProviders(
)
+ })
+
+ expect(screen.getByText(WELCOME_HEADING)).toBeInTheDocument()
+ })
+
+ test('Should contain the log in button', () => {
+ act(() => {
+ renderWithProviders(
)
+ })
+
+ expect(screen.getByTestId(LOGIN_ID)).toBeInTheDocument()
+ })
+
+ test('Should contain the log out button', () => {
+ act(() => {
+ renderWithProviders(
)
+ })
+
+ expect(screen.getByTestId(LOGOUT_ID)).toBeInTheDocument()
+ })
+})
+
+describe('[Home Component Behavior Test Suite]', () => {
+
+ afterEach(() => {
+ cleanup()
+ })
+
+ test('Should be able to click on the login button and see the user details', () => {
+ act(() => {
+ renderWithProviders(
)
+ })
+ const loginBtn = screen.getByTestId(LOGIN_ID)
+ act(() => {
+ fireEvent.click(loginBtn)
+ })
+ const userName = screen.getByTestId(USERNAME_ID)
+ expect(userName).toBeInTheDocument()
+ expect(userName).toHaveTextContent('Test')
+ const tokenId = screen.getByTestId(TOKEN_ID)
+ expect(tokenId).toBeInTheDocument()
+ expect(tokenId).toHaveTextContent('123')
+ const roles = screen.getAllByTestId(ROLES_ID)
+ expect(roles.length).toBe(2)
+ expect(roles[0]).toHaveTextContent('Admin')
+ expect(roles[1]).toHaveTextContent('Clinician')
+ })
+
+ test('Should be able to click the logout button and user details should be removed', () => {
+ act(() => {
+ renderWithProviders(
)
+ })
+ const loginBtn = screen.getByTestId(LOGIN_ID)
+ act(() => {
+ fireEvent.click(loginBtn)
+ })
+ const userName = screen.getByTestId(USERNAME_ID)
+ expect(userName).toBeInTheDocument()
+ const logoutBtn = screen.getByTestId(LOGOUT_ID)
+ act(() => {
+ fireEvent.click(logoutBtn)
+ })
+ const userNameAfterLogout = screen.queryByTestId(USERNAME_ID)
+ expect(userNameAfterLogout).not.toBeInTheDocument()
+ })
+})
diff --git a/src/components/loader/Loader.jsx b/src/components/loader/Loader.jsx
index d2a6073..7531ce4 100644
--- a/src/components/loader/Loader.jsx
+++ b/src/components/loader/Loader.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import Styles from './Loader.scss';
+import React from 'react'
+import Styles from './Loader.scss'
-const Loader = () =>
;
-export default Loader;
+const Loader = () =>
+export default Loader
diff --git a/src/components/loader/Loader.story.jsx b/src/components/loader/Loader.story.jsx
index c7205da..80a1fdb 100644
--- a/src/components/loader/Loader.story.jsx
+++ b/src/components/loader/Loader.story.jsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import Loader from './Loader';
+import React from 'react'
+import Loader from './Loader'
-export default { title: 'Loader' };
+export default { title: 'Loader' }
-export const Default = () =>
;
+export const Default = () =>
diff --git a/src/components/loader/Loader.test.jsx b/src/components/loader/Loader.test.jsx
index edefef0..056ae45 100644
--- a/src/components/loader/Loader.test.jsx
+++ b/src/components/loader/Loader.test.jsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Loader from './Loader';
+import React from 'react'
+import { render, act } from '@testing-library/react'
+import Loader from './Loader'
describe('[Loader Component Test Suite]', () => {
test('should pass if loader component can be loaded', () => {
- render(
);
- });
-});
+ act(() => {
+ render(
)
+ })
+ })
+})
diff --git a/src/components/not-found/NotFound.jsx b/src/components/not-found/NotFound.jsx
index 17742aa..ab91ead 100644
--- a/src/components/not-found/NotFound.jsx
+++ b/src/components/not-found/NotFound.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import Styles from './NotFound.scss';
-import { ERROR_CODE, ERROR_TEXT } from '../../constants/404Constants';
+import React from 'react'
+import Styles from './NotFound.scss'
+import { ERROR_CODE, ERROR_TEXT } from '../../constants/404Constants'
const NotFound = () => (
{ERROR_CODE}
{ERROR_TEXT}
-);
+)
-export default NotFound;
+export default NotFound
diff --git a/src/components/not-found/NotFound.scss b/src/components/not-found/NotFound.scss
index ec775e4..29a3443 100644
--- a/src/components/not-found/NotFound.scss
+++ b/src/components/not-found/NotFound.scss
@@ -1,10 +1,10 @@
.bold {
- color: red;
+ color: red;
}
.container {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- text-align: center;
-}
\ No newline at end of file
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
diff --git a/src/components/not-found/NotFound.story.jsx b/src/components/not-found/NotFound.story.jsx
index 02c3a97..3563e75 100644
--- a/src/components/not-found/NotFound.story.jsx
+++ b/src/components/not-found/NotFound.story.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import Button from '../../pure-components/Button/Button';
+import React from 'react'
+import Button from '../../pure-components/Button/Button'
-export default { title: 'Not Found' };
+export default { title: 'Not Found' }
-export const withText = () =>
;
+export const withText = () =>
-export const withEmoji = () =>
;
+export const withEmoji = () =>
diff --git a/src/components/not-found/NotFound.test.jsx b/src/components/not-found/NotFound.test.jsx
index dd7d80b..e8f6c7e 100644
--- a/src/components/not-found/NotFound.test.jsx
+++ b/src/components/not-found/NotFound.test.jsx
@@ -1,16 +1,20 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ERROR_CODE, ERROR_TEXT } from '../../constants/404Constants';
-import NotFound from './NotFound';
+import React from 'react'
+import { act, render, screen } from '@testing-library/react'
+import { ERROR_CODE, ERROR_TEXT } from '../../constants/404Constants'
+import NotFound from './NotFound'
describe('[NotFound Component Test Suite]', () => {
test('should pass if "404" is found in the document', () => {
- render(
);
- expect(screen.getByText(ERROR_CODE)).toBeInTheDocument();
- });
+ act(() => {
+ render(
)
+ })
+ expect(screen.getByText(ERROR_CODE)).toBeInTheDocument()
+ })
test('should pass if "PAGE NOT FOUND" is found in the document', () => {
- render(
);
- expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument();
- });
-});
+ act(() => {
+ render(
)
+ })
+ expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument()
+ })
+})
diff --git a/src/constants/404Constants.js b/src/constants/404Constants.js
index 37e3e14..b32d409 100644
--- a/src/constants/404Constants.js
+++ b/src/constants/404Constants.js
@@ -1,2 +1,2 @@
-export const ERROR_CODE = '404';
-export const ERROR_TEXT = 'PAGE NOT FOUND';
+export const ERROR_CODE = '404'
+export const ERROR_TEXT = 'PAGE NOT FOUND'
diff --git a/src/constants/AppConstants.js b/src/constants/AppConstants.js
index f8f864d..18876e5 100644
--- a/src/constants/AppConstants.js
+++ b/src/constants/AppConstants.js
@@ -1,9 +1,9 @@
-export const INCREASE_COUNTER = 'Increase Counter';
-export const DECREASE_COUNTER = 'Decrease Counter';
+export const INCREASE_COUNTER = 'Increase Counter'
+export const DECREASE_COUNTER = 'Decrease Counter'
export const requestObject = {
url: '',
params: {},
data: {},
config: {},
-};
+}
diff --git a/src/constants/HomeConstants.js b/src/constants/HomeConstants.js
index 496f48d..321b403 100644
--- a/src/constants/HomeConstants.js
+++ b/src/constants/HomeConstants.js
@@ -1,7 +1,12 @@
-export const WELCOME_HEADING = 'React Enterprise Starter Kit';
-export const IMG_ALT = 'React-Enterprise-Starter-Kit';
-export const REPO_URL = 'https://github.com/anandgupta193/react-enterprise-starter-kit';
-export const GITHUB_FORK_TEXT = 'Fork on Github';
-export const LICENCE_BADGE = 'https://img.shields.io/github/license/anandgupta193/react-enterprise-starter-kit?style=for-the-badge';
-export const STARS_BADGE = 'https://img.shields.io/github/stars/anandgupta193/react-enterprise-starter-kit?style=for-the-badge';
-export const FORK_BADGE = 'https://img.shields.io/github/forks/anandgupta193/react-enterprise-starter-kit?style=for-the-badge';
+export const WELCOME_HEADING = 'React Enterprise Starter Kit'
+export const IMG_ALT = 'React-Enterprise-Starter-Kit'
+export const REPO_URL = 'https://github.com/anandgupta193/react-enterprise-starter-kit'
+export const GITHUB_FORK_TEXT = 'Fork on Github'
+export const LICENCE_BADGE = 'https://img.shields.io/github/license/anandgupta193/react-enterprise-starter-kit?style=for-the-badge'
+export const STARS_BADGE = 'https://img.shields.io/github/stars/anandgupta193/react-enterprise-starter-kit?style=for-the-badge'
+export const FORK_BADGE = 'https://img.shields.io/github/forks/anandgupta193/react-enterprise-starter-kit?style=for-the-badge'
+export const LOGIN_ID = 'LogIn'
+export const LOGOUT_ID = 'LogOut'
+export const USERNAME_ID = 'UserName'
+export const ROLES_ID = 'Roles'
+export const TOKEN_ID = 'Token'
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index bd6213e..b5c61c9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/src/index.jsx b/src/index.jsx
index ba1c210..8269cc3 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,30 +1,34 @@
/* eslint-disable no-console */
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
-import Routes from './routes/Routes';
-import Store from './redux/store';
-import './index.css';
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+import App from './components/App'
+import Store from './redux/store'
-const container = document.getElementById('root');
-const root = createRoot(container);
+import './index.css'
+
+const container = document.getElementById('root')
+const root = createRoot(container)
root.render(
-
+
,
-);
+)
if (!__DEVELOPMENT__ && !__SERVER__) {
const registerServiceWorker = () => {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
- navigator.serviceWorker.register('/service-worker.js').then((registration) => {
- console.log('SW registered: ', registration);
- }).catch((registrationError) => {
- console.log('SW registration failed: ', registrationError);
- });
- });
+ navigator.serviceWorker
+ .register('/service-worker.js')
+ .then((registration) => {
+ console.log('SW registered: ', registration)
+ })
+ .catch((registrationError) => {
+ console.log('SW registration failed: ', registrationError)
+ })
+ })
}
- };
- registerServiceWorker();
+ }
+ registerServiceWorker()
}
diff --git a/src/index.test.jsx b/src/index.test.jsx
new file mode 100644
index 0000000..ba912e8
--- /dev/null
+++ b/src/index.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { act, screen, cleanup } from '@testing-library/react'
+import { BrowserRouter, MemoryRouter } from 'react-router-dom'
+import Routes from './routes/Routes'
+import { WELCOME_HEADING } from './constants/HomeConstants'
+import { ERROR_CODE, ERROR_TEXT } from './constants/404Constants'
+import { renderWithProviders } from './tests/setup/TestUtils'
+
+describe('[Routing Test]', () => {
+
+ afterEach(() => {
+ cleanup()
+ })
+
+ test('If the default route is the home page', () => {
+ act(() => {
+ renderWithProviders(
)
+ })
+
+ expect(screen.getByText(WELCOME_HEADING)).toBeInTheDocument()
+ })
+
+ test('Landing on the notfound page', async () => {
+ act(() => {
+ renderWithProviders(
+
+
+
+ )
+ })
+
+ expect(await screen.findByText(ERROR_CODE)).toBeInTheDocument()
+ expect(await screen.findByText(ERROR_TEXT)).toBeInTheDocument()
+ })
+})
\ No newline at end of file
diff --git a/src/pure-components/Button/Button.jsx b/src/pure-components/Button/Button.jsx
index 2d72ba4..2046113 100644
--- a/src/pure-components/Button/Button.jsx
+++ b/src/pure-components/Button/Button.jsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from 'react'
+import PropTypes from 'prop-types'
-const Button = ({ value }) =>
;
+const Button = ({ value }) =>
Button.defaultProps = {
value: '',
-};
+}
Button.propTypes = {
value: PropTypes.string,
-};
+}
-export default Button;
+export default Button
diff --git a/src/pure-components/Button/Button.story.jsx b/src/pure-components/Button/Button.story.jsx
index 06d86ae..1834b71 100644
--- a/src/pure-components/Button/Button.story.jsx
+++ b/src/pure-components/Button/Button.story.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
// eslint-disable-next-line import/no-unresolved
-import Button from './Button';
+import Button from './Button'
-export default { title: 'Button' };
+export default { title: 'Button' }
-export const withText = () =>
;
+export const withText = () =>
-export const withEmoji = () =>
;
+export const withEmoji = () =>
diff --git a/src/pure-components/Button/Button.test.jsx b/src/pure-components/Button/Button.test.jsx
index aca528f..ccace4e 100644
--- a/src/pure-components/Button/Button.test.jsx
+++ b/src/pure-components/Button/Button.test.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Button from './Button';
+import React from 'react'
+import { render } from '@testing-library/react'
+import Button from './Button'
describe('[Button Component Test Suite]', () => {
test('should pass if button component renders successfully', () => {
- render(
);
- });
-});
+ render(
)
+ })
+})
diff --git a/src/reducers/CounterReducer.js b/src/reducers/CounterReducer.js
deleted file mode 100644
index 9016452..0000000
--- a/src/reducers/CounterReducer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { INCREMENT_SUCCESS, DECREMENT_SUCCESS } from '../actionTypes/CounterActionTypes';
-
-const defaultState = 1;
-
-const counter = (state = defaultState, action) => {
- switch (action.type) {
- case INCREMENT_SUCCESS:
- return state + 1;
- case DECREMENT_SUCCESS:
- return state - 1;
- default:
- return state;
- }
-};
-
-export default counter;
diff --git a/src/reducers/UserSlice.js b/src/reducers/UserSlice.js
new file mode 100644
index 0000000..c6dd034
--- /dev/null
+++ b/src/reducers/UserSlice.js
@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+ loggedIn: false,
+ name: '',
+ token: '',
+ roles: ''
+}
+
+export const UserSlice = createSlice({
+ name: 'user',
+ initialState,
+ reducers: {
+ login: (state, action) => {
+ state.loggedIn = true
+ state.name = action.payload.name
+ state.token = action.payload.token
+ state.roles = action.payload.roles
+ },
+ logout: (state) => {
+ state.loggedIn = false
+ state.name = ''
+ state.token = ''
+ state.roles = ''
+ },
+ refreshToken: (state, action) => {
+ state.token = action.payload.token
+ }
+ }
+})
+
+export const { login, logout, refreshToken } = UserSlice.actions
+
+export const userName = (state) => state.user.name
+export const token = (state) => state.user.token
+export const roles = (state) => state.user.roles
+export const loggedIn = (state) => state.user.loggedIn
+export default UserSlice.reducer
diff --git a/src/reducers/index.js b/src/reducers/index.js
deleted file mode 100644
index a49044f..0000000
--- a/src/reducers/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { combineReducers } from 'redux';
-import counter from './CounterReducer';
-
-const rootReducer = combineReducers({
- counter,
-});
-
-export default rootReducer;
diff --git a/src/redux/store.js b/src/redux/store.js
index 1bbc6ae..f216c3d 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -1,26 +1,28 @@
-import createSagaMiddleware from 'redux-saga';
-import { createStore, applyMiddleware } from 'redux';
-import { composeWithDevTools } from 'redux-devtools-extension';
-import reducers from '../reducers';
-import rootSagas from '../sagas';
+import createSagaMiddleware from 'redux-saga'
+import { configureStore } from '@reduxjs/toolkit'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import userReducer from '../reducers/UserSlice'
+import rootSagas from '../sagas'
-const sagaMiddleware = createSagaMiddleware();
-let middleware = applyMiddleware(sagaMiddleware);
-
-// adding redux devtools for developmennt mode
-if (__DEVELOPMENT__) {
- middleware = composeWithDevTools(middleware);
-}
+const sagaMiddleware = createSagaMiddleware()
+let middleware = [sagaMiddleware]
// eslint-disable-next-line no-underscore-dangle
-const initialState = !__SERVER__ ? window.__PRELOADED__STATE__ : {};
+const initialState = !__SERVER__ ? window.__PRELOADED__STATE__ : {}
-const store = createStore(reducers, initialState, middleware);
+const store = configureStore({
+ reducer: {
+ user: userReducer
+ },
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware().concat(middleware),
+ composeWithDevTools: __DEVELOPMENT__?true:false,
+})
if (__SERVER__) {
- store.runSaga = sagaMiddleware.run;
+ store.runSaga = sagaMiddleware.run
} else {
- sagaMiddleware.run(rootSagas);
+ sagaMiddleware.run(rootSagas)
}
-export default store;
+export default store
diff --git a/src/routes/Routes.jsx b/src/routes/Routes.jsx
index 6193a07..e550da1 100644
--- a/src/routes/Routes.jsx
+++ b/src/routes/Routes.jsx
@@ -1,19 +1,17 @@
-import React, { Suspense } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Loader from '../components/loader/Loader';
-import NotFound from './Routes.lazy';
-import App from '../components/App';
+import React, { Suspense } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Loader from '../components/loader/Loader'
+import NotFound from './Routes.lazy'
+import Home from '../components/home/Home'
const RoutePaths = () => (
<>
-
- }>
-
- } end />
- } end />
-
-
-
+
}>
+
+ } />
+ } />
+
+
-);
-export default RoutePaths;
+)
+export default RoutePaths
diff --git a/src/routes/Routes.lazy.jsx b/src/routes/Routes.lazy.jsx
index 04ca458..78ac341 100644
--- a/src/routes/Routes.lazy.jsx
+++ b/src/routes/Routes.lazy.jsx
@@ -1,5 +1,5 @@
-import { lazy } from 'react';
+import { lazy } from 'react'
-const NotFound = lazy(() => import('../components/not-found/NotFound'));
+const NotFound = lazy(() => import('../components/not-found/NotFound'))
-export default NotFound;
+export default NotFound
diff --git a/src/sagas/DecrCountSaga.js b/src/sagas/DecrCountSaga.js
index c64a3c6..360c7b4 100644
--- a/src/sagas/DecrCountSaga.js
+++ b/src/sagas/DecrCountSaga.js
@@ -1,5 +1,5 @@
-import { takeLatest, put } from 'redux-saga/effects';
-import { DECREMENT, DECREMENT_SUCCESS } from '../actionTypes/CounterActionTypes';
+import { takeLatest, put } from 'redux-saga/effects'
+import { DECREMENT, DECREMENT_SUCCESS } from '../actionTypes/CounterActionTypes'
// import RestClient from '../Utils/RestClient';
function* decrementUserCountSaga() {
@@ -7,9 +7,9 @@ function* decrementUserCountSaga() {
// url: `base-url/${action.payload.queryParam}`,
// };
// const response = yield call(RestClient.get, requestObject);
- yield put({ type: DECREMENT_SUCCESS, payload: {} });
+ yield put({ type: DECREMENT_SUCCESS, payload: {} })
}
export default function* watchDecrementCountSaga() {
- yield takeLatest(DECREMENT, decrementUserCountSaga);
+ yield takeLatest(DECREMENT, decrementUserCountSaga)
}
diff --git a/src/sagas/IncrCountSaga.js b/src/sagas/IncrCountSaga.js
index 10ddc84..30304d4 100644
--- a/src/sagas/IncrCountSaga.js
+++ b/src/sagas/IncrCountSaga.js
@@ -1,5 +1,5 @@
-import { takeLatest, put } from 'redux-saga/effects';
-import { INCREMENT, INCREMENT_SUCCESS } from '../actionTypes/CounterActionTypes';
+import { takeLatest, put } from 'redux-saga/effects'
+import { INCREMENT, INCREMENT_SUCCESS } from '../actionTypes/CounterActionTypes'
// import RestClient from '../Utils/RestClient';
function* incrementUserCountSaga() {
@@ -9,9 +9,9 @@ function* incrementUserCountSaga() {
} catch (error) {
// console.log(error.message);
}
- yield put({ type: INCREMENT_SUCCESS, payload: {} });
+ yield put({ type: INCREMENT_SUCCESS, payload: {} })
}
export default function* watchIncrementCountSaga() {
- yield takeLatest(INCREMENT, incrementUserCountSaga);
+ yield takeLatest(INCREMENT, incrementUserCountSaga)
}
diff --git a/src/sagas/index.js b/src/sagas/index.js
index 7cb990f..48ad84c 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -1,8 +1,8 @@
-import { fork } from 'redux-saga/effects';
-import IncrCounterSaga from './IncrCountSaga';
-import DecrCounterSaga from './DecrCountSaga';
+import { fork } from 'redux-saga/effects'
+import IncrCounterSaga from './IncrCountSaga'
+import DecrCounterSaga from './DecrCountSaga'
// List of all sagas combined as root sagas
export default function* rootSagas() {
- yield* [fork(IncrCounterSaga), fork(DecrCounterSaga)];
+ yield* [fork(IncrCounterSaga), fork(DecrCounterSaga)]
}
diff --git a/src/server/server.jsx b/src/server/server.jsx
index 15f6ab6..91c670b 100644
--- a/src/server/server.jsx
+++ b/src/server/server.jsx
@@ -1,32 +1,29 @@
/* eslint-disable no-console */
-import React from 'react';
-import path from 'path';
-import fs from 'fs';
-import express from 'express';
-import { renderToString } from 'react-dom/server';
-import { Provider } from 'react-redux';
-import store from '../redux/store';
+import React from 'react'
+import path from 'path'
+import fs from 'fs'
+import express from 'express'
+import { renderToString } from 'react-dom/server'
+import { Provider } from 'react-redux'
+import store from '../redux/store'
// import rootSagas from '../sagas';
-import App from '../components/App';
+import App from '../components/App'
-const server = express();
+const server = express()
server.get('/', (req, res) => {
- console.log('Middle Ware Called');
- console.log(path.resolve('./dist/index.html'));
- const data = fs.readFileSync(path.resolve('./dist/index.html'), 'utf8');
+ console.log('Middle Ware Called')
+ console.log(path.resolve('./dist/index.html'))
+ const data = fs.readFileSync(path.resolve('./dist/index.html'), 'utf8')
const content = renderToString(
,
- );
- const preloadedState = ``;
- const serverRenderedHTML = data.replace(
- '
',
- `
${content}
${preloadedState}`,
- );
+ )
+ const preloadedState = ``
+ const serverRenderedHTML = data.replace('
', `
${content}
${preloadedState}`)
- res.status(200).send(serverRenderedHTML);
+ res.status(200).send(serverRenderedHTML)
// store.runSaga(rootSagas).toPromise()
// .then(() => {
// console.log('Saga Run Successfully');
@@ -36,24 +33,24 @@ server.get('/', (req, res) => {
// console.log('Saga Run Failed', e.message);
// // res.status(500).send(e.message);
// });
-});
+})
// serving compressed version if production mode
if (!__DEVELOPMENT__) {
const encodeResToGzip = (contentType) => (req, res, next) => {
- req.url += '.gz';
- console.log(req.url);
- res.set('Content-Encoding', 'gzip');
- res.set('Content-Type', contentType);
- console.log(`Serving gzipped JS, ${req.url}`);
- next();
- };
- server.get('*.js', encodeResToGzip('text/javascript'));
- server.get('*.css', encodeResToGzip('text/css'));
+ req.url += '.gz'
+ console.log(req.url)
+ res.set('Content-Encoding', 'gzip')
+ res.set('Content-Type', contentType)
+ console.log(`Serving gzipped JS, ${req.url}`)
+ next()
+ }
+ server.get('*.js', encodeResToGzip('text/javascript'))
+ server.get('*.css', encodeResToGzip('text/css'))
}
-server.use(express.static('./dist'));
+server.use(express.static('./dist'))
server.listen(3000, () => {
- console.log(`SSR running on port ${3000}`);
-});
+ console.log(`SSR running on port ${3000}`)
+})
diff --git a/src/service-worker.js b/src/service-worker.js
index 20fbdc7..97c96d7 100644
--- a/src/service-worker.js
+++ b/src/service-worker.js
@@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-restricted-globals */
-import { precacheAndRoute } from 'workbox-precaching';
+import { precacheAndRoute } from 'workbox-precaching'
// Your other import statements go here.
-precacheAndRoute(self.__WB_MANIFEST);
+precacheAndRoute(self.__WB_MANIFEST)
// Your other SW code goes here.
diff --git a/src/tests/__mocks__/FileMock.js b/src/tests/__mocks__/FileMock.js
index 86059f3..0e56c5b 100644
--- a/src/tests/__mocks__/FileMock.js
+++ b/src/tests/__mocks__/FileMock.js
@@ -1 +1 @@
-module.exports = 'test-file-stub';
+module.exports = 'test-file-stub'
diff --git a/src/tests/__mocks__/SetupTests.js b/src/tests/__mocks__/SetupTests.js
index 3f13df1..b75ae8d 100644
--- a/src/tests/__mocks__/SetupTests.js
+++ b/src/tests/__mocks__/SetupTests.js
@@ -1,2 +1,2 @@
// importing jest-dom to use some utility functions with expect assertion lib
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/src/tests/setup/TestUtils.js b/src/tests/setup/TestUtils.js
new file mode 100644
index 0000000..b148897
--- /dev/null
+++ b/src/tests/setup/TestUtils.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { setupStore } from './store'
+
+export function renderWithProviders(ui, extendedRenderOptions = {}) {
+ const {
+ preloadedState = {},
+ // Automatically create a store instance if no store was passed in
+ store = setupStore(preloadedState),
+ ...renderOptions
+ } = extendedRenderOptions
+
+ const Wrapper = ({ children }) => (
+
{children}
+ )
+
+ // Return an object with the store and all of RTL's query functions
+ return {
+ store,
+ ...render(ui, { wrapper: Wrapper, ...renderOptions })
+ }
+}
\ No newline at end of file
diff --git a/src/tests/setup/store.js b/src/tests/setup/store.js
new file mode 100644
index 0000000..3ca2788
--- /dev/null
+++ b/src/tests/setup/store.js
@@ -0,0 +1,28 @@
+import createSagaMiddleware from 'redux-saga'
+import { configureStore } from '@reduxjs/toolkit'
+import userReducer from '../../reducers/UserSlice'
+import rootSagas from '../../sagas'
+
+const sagaMiddleware = createSagaMiddleware()
+let middleware = [sagaMiddleware]
+
+
+export const rootReducer = {
+ user: userReducer
+}
+
+export const setupStore = preloadedState => {
+ return configureStore({
+ reducer: rootReducer,
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware().concat(middleware),
+ composeWithDevTools: true,
+ preloadedState
+ })
+}
+
+const store = setupStore()
+
+sagaMiddleware.run(rootSagas)
+
+export default store
diff --git a/src/utils/Api.js b/src/utils/Api.js
new file mode 100644
index 0000000..4893413
--- /dev/null
+++ b/src/utils/Api.js
@@ -0,0 +1,80 @@
+import axios from 'axios'
+
+class Api {
+
+ constructor (baseUrl, reqLifecycleCallback, tokenFetcher, headers) {
+ this.reqLifecycleCallback = reqLifecycleCallback
+ this.tokenFetcher = tokenFetcher
+ this.instance = axios.create({
+ baseURL: baseUrl,
+ headers: headers,
+ validateStatus: (status) => {
+ return status >= 200
+ }
+ })
+ }
+
+ handleRequestSentCallback = () => {
+ if (this.reqLifecycleCallback) {
+ this.reqLifecycleCallback(true)
+ }
+ }
+
+ handleResponseReceivedCallback = () => {
+ if (this.reqLifecycleCallback) {
+ this.reqLifecycleCallback(false)
+ }
+ }
+
+ handleTokenFetch = () => {
+ let headers = {}
+ if (this.tokenFetcher) {
+ let token = this.tokenFetcher()
+ headers = {'Authorization' : 'Bearer ' + token}
+ }
+ return headers
+ }
+
+ get = async (reqUrl, params) => {
+ this.handleRequestSentCallback()
+ const headers = this.handleTokenFetch()
+ let retVal = await this.instance.get(reqUrl, {
+ params: params,
+ headers: headers
+ })
+ this.handleResponseReceivedCallback()
+ return retVal
+ }
+
+ handleDataBasedCalls = async (method, reqUrl, data) => {
+ this.handleRequestSentCallback()
+ const headers = this.handleTokenFetch()
+ let retVal = await this.instance.request({
+ method: method,
+ url: reqUrl,
+ data: data,
+ headers: headers
+ })
+ this.handleResponseReceivedCallback()
+ return retVal
+ }
+
+ post = async (reqUrl, data) => {
+ return await this.handleDataBasedCalls('post', reqUrl, data)
+ }
+
+ put = async (reqUrl, data) => {
+ return await this.handleDataBasedCalls('put', reqUrl, data)
+ }
+
+ patch = async (reqUrl, data) => {
+ return await this.handleDataBasedCalls('patch', reqUrl, data)
+ }
+
+ del = async (reqUrl, data) => {
+ return await this.handleDataBasedCalls('delete', reqUrl, data)
+ }
+}
+
+
+export default Api
\ No newline at end of file
diff --git a/src/utils/Api.test.js b/src/utils/Api.test.js
new file mode 100644
index 0000000..dfb5e5e
--- /dev/null
+++ b/src/utils/Api.test.js
@@ -0,0 +1,363 @@
+import axios from 'axios'
+import Api from './Api'
+
+jest.mock('axios')
+
+describe('[Api Test Suite]', () => {
+ test('Create the Api Object', async () => {
+ const myApi = new Api('/api', null, null, { 'Content-Type': 'application/json' })
+ expect(axios.create).toHaveBeenCalledWith(expect.objectContaining({
+ baseURL: '/api',
+ headers: { 'Content-Type': 'application/json' }
+ }))
+ })
+
+ describe('[Test Suite for get]', () => {
+ test('Call the get function with all callbacks', async () => {
+ const reqCallback = jest.fn()
+
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', reqCallback, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.get('/user', {'q': '1234'})
+ expect(myApi.instance.get).toHaveBeenCalledWith('/user',
+ expect.objectContaining({
+ params: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the get function with only request callback', async () => {
+ const reqCallback = jest.fn()
+
+ let myApi = new Api('/api', reqCallback, null, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.get('/user', {'q': '1234'})
+ expect(myApi.instance.get).toHaveBeenCalledWith('/user',
+ expect.objectContaining({
+ params: {'q': '1234'},
+ headers: {}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the get function with only token callback', async () => {
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', null, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.get('/user', {'q': '1234'})
+ expect(myApi.instance.get).toHaveBeenCalledWith('/user',
+ expect.objectContaining({
+ params: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ })
+ })
+
+ describe('[Test Suite for post]', () => {
+ test('Call the post function with all callbacks', async () => {
+ const reqCallback = jest.fn()
+
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', reqCallback, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.post('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'post',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the post function with only req callback', async () => {
+ const reqCallback = jest.fn()
+
+ let myApi = new Api('/api', reqCallback, null, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.post('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'post',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the post function with only token fetcher', async () => {
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', null, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.post('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'post',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ })
+ })
+
+ describe('[Test Suite for put]', () => {
+ test('Call the put function with all callbacks', async () => {
+ const reqCallback = jest.fn()
+
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', reqCallback, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.put('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'put',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the put function with only req callback', async () => {
+ const reqCallback = jest.fn()
+
+ let myApi = new Api('/api', reqCallback, null, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.put('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'put',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the put function with only token fetcher', async () => {
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', null, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.put('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'put',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ })
+ })
+
+ describe('[Test Suite for patch]', () => {
+ test('Call the patch function with all callbacks', async () => {
+ const reqCallback = jest.fn()
+
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', reqCallback, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.patch('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'patch',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the patch function with only req callback', async () => {
+ const reqCallback = jest.fn()
+
+ let myApi = new Api('/api', reqCallback, null, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.patch('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'patch',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the patch function with only token fetcher', async () => {
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', null, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.patch('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'patch',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ })
+ })
+
+ describe('[Test Suite for delete]', () => {
+ test('Call the delete function with all callbacks', async () => {
+ const reqCallback = jest.fn()
+
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', reqCallback, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.del('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'delete',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the delete function with only req callback', async () => {
+ const reqCallback = jest.fn()
+
+ let myApi = new Api('/api', reqCallback, null, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.del('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'delete',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {}
+ })
+ )
+ expect(reqCallback).toHaveBeenCalledTimes(2)
+ expect(reqCallback).toHaveBeenNthCalledWith(1, true)
+ expect(reqCallback).toHaveBeenNthCalledWith(2, false)
+ })
+
+ test('Call the delete function with only token fetcher', async () => {
+ const tokenFetcher = () => {
+ return '123'
+ }
+
+ let myApi = new Api('/api', null, tokenFetcher, { 'Content-Type': 'application/json' })
+ myApi.instance = {
+ get: jest.fn(),
+ request: jest.fn()
+ }
+ await myApi.del('/user', {'q': '1234'})
+ expect(myApi.instance.request).toHaveBeenCalledWith(
+ expect.objectContaining({
+ method: 'delete',
+ url: '/user',
+ data: {'q': '1234'},
+ headers: {'Authorization': 'Bearer 123'}
+ })
+ )
+ })
+ })
+})
\ No newline at end of file
diff --git a/src/utils/RestClient.js b/src/utils/RestClient.js
deleted file mode 100644
index f8a3ead..0000000
--- a/src/utils/RestClient.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// TODO: Need to configure axios and interceptor
-import axios from 'axios';
-
-const RestClient = {
- get: (reqObj) => axios.get(reqObj.url, {
- params: reqObj.params,
- }),
- post: (reqObj) => axios.post(reqObj.url, reqObj.data, {
- config: reqObj.config,
- }),
- put: (reqObj) => axios.put(reqObj.url, reqObj.data, {
- config: reqObj.config,
- }),
- patch: (reqObj) => axios.patch(reqObj.url, reqObj.data, {
- config: reqObj.config,
- }),
- delete: (reqObj) => axios.delete(reqObj.url, {
- config: reqObj.config,
- }),
-};
-
-export default RestClient;