Skip to content

Commit 11383b6

Browse files
loq24loq24
committed
Implement more testing
1 parent 60dde01 commit 11383b6

23 files changed

+546
-47
lines changed

‎src/Root.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import { AuthUserAction, ActionAuthTypes, fetchCurrentUser } from './actions';
88

99
type RootProps = {
1010
children: React.ReactNode;
11+
initialState?: {};
1112
};
1213

13-
const store = createStore(rootReducer, applyMiddleware(thunk));
14-
const token = localStorage.getItem('_wp_react_typescipt_token');
15-
if (token) {
16-
store.dispatch<AuthUserAction>({ type: ActionAuthTypes.authUser });
17-
(store.dispatch as ThunkDispatch<{}, void, AnyAction>)(fetchCurrentUser());
18-
}
19-
20-
const Root: React.FC<RootProps> = ({ children }) => {
14+
const Root: React.FC<RootProps> = ({ children, initialState = {} }) => {
15+
const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
16+
const token = localStorage.getItem('_wp_react_typescipt_token');
17+
if (token) {
18+
store.dispatch<AuthUserAction>({ type: ActionAuthTypes.authUser });
19+
(store.dispatch as ThunkDispatch<{}, void, AnyAction>)(fetchCurrentUser());
20+
}
2121
return <Provider store={store}>{children}</Provider>;
2222
};
2323

‎src/pages/SignIn/SignInForm.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ const SignInForm = ({
4444
{warningMsg}
4545
</Alert>
4646
)}
47-
{successMsg && <Alert variant='success'>{successMsg}</Alert>}
47+
{successMsg && (
48+
<Alert variant='success' data-test='ty-msg'>
49+
{successMsg}
50+
</Alert>
51+
)}
4852
<Formik
4953
initialValues={accessValues}
5054
onSubmit={handleSubmit}

‎src/pages/SignIn/__tests__/SignInForm.test.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,42 @@ describe('SignIn Form Component', () => {
1717
wrapper.unmount();
1818
});
1919

20+
it('shows warning message when the input is wrong', () => {
21+
wrapper.unmount();
22+
const mockMsg = {
23+
msg: {
24+
warning: 'Username or password is incorrect.'
25+
}
26+
};
27+
wrapper = mount(
28+
<Root initialState={mockMsg}>
29+
<SignInForm accessValues={initialFormValues} />
30+
</Root>
31+
);
32+
expect(wrapper.find('div[data-test="warning-msg"]')).toHaveLength(1);
33+
});
34+
35+
it('shows a message after logging out', () => {
36+
wrapper.unmount();
37+
const mockMsg = {
38+
msg: {
39+
success: 'Thanks for trying the app.'
40+
}
41+
};
42+
wrapper = mount(
43+
<Root initialState={mockMsg}>
44+
<SignInForm accessValues={initialFormValues} />
45+
</Root>
46+
);
47+
expect(wrapper.find('div[data-test="ty-msg"]')).toHaveLength(1);
48+
});
49+
2050
it('successfully submits', () => {
2151
expect(wrapper.find('span[data-test="submitting"]')).toHaveLength(0);
2252
wrapper.find('form').simulate('submit', {
2353
preventDefault: () => {}
2454
});
55+
2556
expect(wrapper.find('span[data-test="submitting"]')).toHaveLength(1);
2657
expect(wrapper.find('button[type="submit"]').props().disabled).toBeTruthy();
2758
});

‎src/pages/admin/AccountInfo.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,26 @@ import { AppState } from 'reducers';
55

66
const AccountInfo = () => {
77
const currentUser = useSelector((state: AppState) => state.wp.currentUser);
8-
console.log('Current User', currentUser);
98

109
return (
1110
<>
1211
<h1>Account Info</h1>
1312
<Container className='mt-3'>
1413
<Row className='mb-3'>
1514
<Col sm={1}>Name</Col>
16-
<Col sm={9}>{currentUser ? currentUser.name : '...'}</Col>
15+
<Col sm={9} data-test='user-name'>
16+
{currentUser ? currentUser.name : '...'}
17+
</Col>
1718
</Row>
1819
<Row className='mb-3'>
1920
<Col sm={1}>Bio</Col>
20-
<Col sm={9}>{currentUser ? currentUser.description : '...'}</Col>
21+
<Col sm={9} data-test='user-bio'>
22+
{currentUser ? currentUser.description : '...'}
23+
</Col>
2124
</Row>
2225
<Row>
2326
<Col sm={1}>Website</Col>
24-
<Col sm={9}>
27+
<Col sm={9} data-test='user-website'>
2528
<a href={currentUser ? currentUser.url : ''}>
2629
{currentUser ? currentUser.url : '...'}
2730
</a>

‎src/pages/admin/AddNew/AddNew.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import AddNewForm from './AddNewForm';
44
const AddNew = () => {
55
return (
66
<div>
7-
<h1>Publish new post</h1>
7+
<h1 data-test='addnew-heading'>Publish new post</h1>
88
<div className='mt-3'>
99
<AddNewForm />
1010
</div>

‎src/pages/admin/AddNew/AddNewForm.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ const AddNewForm: React.FC<AddNewProps> = ({ publishPost }) => {
2828

2929
return (
3030
<>
31-
{successMsg && <Alert variant='success'>{successMsg}</Alert>}
31+
{successMsg && (
32+
<Alert data-test='add-successful-msg' variant='success'>
33+
{successMsg}
34+
</Alert>
35+
)}
3236
<Formik
3337
initialValues={initialValues}
3438
enableReinitialize={true}
@@ -60,7 +64,10 @@ const AddNewForm: React.FC<AddNewProps> = ({ publishPost }) => {
6064
<Button variant='primary' type='submit' disabled={isSubmitting}>
6165
{isSubmitting ? (
6266
<>
63-
<span className='spinner-grow spinner-grow-sm' />
67+
<span
68+
data-test='submitting'
69+
className='spinner-grow spinner-grow-sm'
70+
/>
6471
Loading...
6572
</>
6673
) : (

‎src/pages/admin/AddNew/__tests__/AddNew.test.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import AddNew from 'pages/admin/AddNew/AddNew';
3+
import { mountByRouter } from 'utils/helpers';
4+
import { ReactWrapper } from 'enzyme';
5+
6+
describe('AddNew Component', () => {
7+
let wrapper: ReactWrapper;
8+
let path = '/add-new';
9+
const mockMsg = {
10+
msg: {
11+
success: 'Post was successfully added'
12+
}
13+
};
14+
15+
beforeEach(() => {
16+
wrapper = mountByRouter(path, mockMsg);
17+
});
18+
19+
afterEach(() => {
20+
wrapper.unmount();
21+
});
22+
23+
it('renders the Add New Form', () => {
24+
expect(wrapper.find(AddNew)).toHaveLength(1);
25+
});
26+
27+
it('has heading', () => {
28+
expect(wrapper.find('[data-test="addnew-heading"]')).toHaveLength(1);
29+
});
30+
31+
describe('Add New Form', () => {
32+
it('has a title field', () => {
33+
expect(wrapper.find('input[name="title"]')).toHaveLength(1);
34+
});
35+
36+
it('has a content field', () => {
37+
expect(wrapper.find('textarea[name="content"]')).toHaveLength(1);
38+
});
39+
40+
it('successfully submits the form', () => {
41+
expect(wrapper.find('span[data-test="submitting"]')).toHaveLength(0);
42+
wrapper.find('form').simulate('submit', {
43+
preventDefault: () => {}
44+
});
45+
46+
expect(wrapper.find('span[data-test="submitting"]')).toHaveLength(1);
47+
expect(
48+
wrapper.find('button[type="submit"]').props().disabled
49+
).toBeTruthy();
50+
});
51+
52+
it('displays success message', () => {
53+
expect(wrapper.find('div[data-test="add-successful-msg"]')).toHaveLength(
54+
1
55+
);
56+
});
57+
});
58+
});

‎src/pages/admin/Admin.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { useSelector, connect } from 'react-redux';
33
import Header from '../../components/Header';
44
import SidebarNav from 'components/SidebarNav';
5-
import { match, Route } from 'react-router-dom';
5+
import { Route } from 'react-router-dom';
66
import Introduction from './Introduction';
77
import Posts from './Posts/Posts';
88
import Edit from './Post/Edit/Edit';
@@ -13,27 +13,25 @@ import { AppState } from 'reducers';
1313
import { unAuthUser } from 'actions';
1414

1515
type AdminProps = {
16-
match: match;
1716
location: Location;
1817
unAuthUser: () => void;
1918
};
2019

21-
const Admin: React.FC<AdminProps> = ({ match, location, unAuthUser }) => {
20+
const Admin: React.FC<AdminProps> = ({ location, unAuthUser }) => {
2221
const currentUser = useSelector((state: AppState) => state.wp.currentUser);
2322

24-
const { path: basePath } = match;
2523
const { pathname } = location;
2624
return (
2725
<div className='dashboard'>
2826
<Header currentUser={currentUser} unAuthUser={unAuthUser} />
2927
<div className='admin-content'>
30-
<SidebarNav basePath={basePath} pathName={pathname} />
28+
<SidebarNav basePath='/' pathName={pathname} />
3129
<div className='container-fluid'>
32-
<Route path={basePath} exact component={Introduction} />
33-
<Route path={`${basePath}posts`} component={Posts} />
34-
<Route path={`${basePath}post/edit/:id`} component={Edit} />
35-
<Route path={`${basePath}add-new`} component={AddNew} />
36-
<Route path={`${basePath}account`} component={AccountInfo} />
30+
<Route path='/' exact component={Introduction} />
31+
<Route path='/posts' component={Posts} />
32+
<Route path='/post/edit/:id' component={Edit} />
33+
<Route path='/add-new' component={AddNew} />
34+
<Route path='/account' component={AccountInfo} />
3735
</div>
3836
</div>
3937
</div>

‎src/pages/admin/Introduction.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,17 @@ const Introduction = () => {
1919
way to help other developer who are having a hard time integrating
2020
Typescript with their react-redux projects. You may find the source code
2121
of this project{' '}
22-
<a href='https://github.com/loq24/wp-react-typescript/'>here</a>. Any
23-
feedback is appreciated. I hope you enjoy this app!
22+
<a
23+
data-test='github-link'
24+
href='https://github.com/loq24/wp-react-typescript/'
25+
>
26+
here
27+
</a>
28+
. Any feedback is appreciated. I hope you enjoy this app!
2429
</p>
2530
<p>
2631
<a
32+
data-test='portfolio-link'
2733
href='https://lougiequisel.com/'
2834
target='_blank'
2935
rel='noopener noreferrer'

‎src/pages/admin/Post/Edit/EditForm.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ const EditForm: React.FC<EditFormProps> = ({ id, post, updatePost }) => {
2929

3030
return (
3131
<>
32-
{successMsg && <Alert variant='success'>{successMsg}</Alert>}
32+
{successMsg && (
33+
<Alert variant='success' data-test='edit-successful-msg'>
34+
{successMsg}
35+
</Alert>
36+
)}
3337
<Formik
3438
initialValues={{
3539
title: post ? post.title.rendered : '',
@@ -63,7 +67,10 @@ const EditForm: React.FC<EditFormProps> = ({ id, post, updatePost }) => {
6367
<Button variant='primary' type='submit' disabled={isSubmitting}>
6468
{isSubmitting ? (
6569
<>
66-
<span className='spinner-grow spinner-grow-sm' />
70+
<span
71+
data-test='submitting'
72+
className='spinner-grow spinner-grow-sm'
73+
/>
6774
Loading...
6875
</>
6976
) : (

0 commit comments

Comments
 (0)