senaduka/old-subtaskio
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Updated comonent tests to work with redux state

Browse Source
This commit is contained in:
Nedim Uka
2018-04-16 18:17:10 +02:00
parent a7cd381e96
commit 6101a2f218
15 changed files with 372 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@@ -62,6 +62,7 @@
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive" "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
}, },
"jest": { "jest": {
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
"collectCoverageFrom": [ "collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}" "src/**/*.{js,jsx,mjs}"
], ],

146
frontend/src/components/App/Dashboard/__snapshots__/dashboard.test.js.snap
View File

@@ -1,41 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dummy renders correctly 1`] = ` exports[`Daoardshb renders correctly 1`] = `
<div ShallowWrapper {
className={undefined} "length": 1,
> Symbol(enzyme.__root__): [Circular],
<div Symbol(enzyme.__unrendered__): <HashRouter>
className={undefined} <Unknown
> title="Dashboard"
<h1> />
SUBTASK </HashRouter>,
</h1> Symbol(enzyme.__renderer__): Object {
<div "batchedUpdates": [Function],
className={undefined} "getNode": [Function],
> "render": [Function],
<a "simulateEvent": [Function],
className={undefined} "unmount": [Function],
href="/mytask" },
onClick={[Function]} Symbol(enzyme.__node__): Object {
> "instance": null,
My Task "key": undefined,
</a> "nodeType": "class",
<a "props": Object {
className={undefined} "children": <Unknown
href="/inbox" title="Dashboard"
onClick={[Function]} />,
> "history": Object {
Inbox "action": "POP",
</a> "block": [Function],
<a "createHref": [Function],
className={undefined} "go": [Function],
href="/dashboard" "goBack": [Function],
onClick={[Function]} "goForward": [Function],
> "length": 1,
Dashboard "listen": [Function],
</a> "location": Object {
</div> "hash": "",
</div> "pathname": "/",
Dashboard "search": "",
</div> "state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "Dashboard",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {
"children": <Unknown
title="Dashboard"
/>,
"history": Object {
"action": "POP",
"block": [Function],
"createHref": [Function],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"length": 1,
"listen": [Function],
"location": Object {
"hash": "",
"pathname": "/",
"search": "",
"state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "Dashboard",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {
"enableComponentDidUpdateOnSetState": true,
},
},
},
}
`; `;

21
frontend/src/components/App/Dashboard/dashboard.test.js
View File

@@ -1,20 +1,13 @@
import React from 'react'; import React from 'react';
import {MemoryRouter as Router} from 'react-router-dom' import {HashRouter as Router} from 'react-router-dom'
import Dashboard from './index'; import {Dashboard} from './index';
import {mount} from 'enzyme' import {shallow} from 'enzyme'
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => { test('Daoardshb renders correctly', () => {
const props = { const props = {
title: 'Dashboard', title: 'Dashboard'
} }
const component = shallow((<Router><Dashboard {...props} /></Router>))
expect(component).toMatchSnapshot();
// // const component = renderer.create(
// <Router><Dashboard props ={...props}/></Router>,
// );
const component = mount((<Router><Dashboard {...props} /></Router>))
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
}); });

2
frontend/src/components/App/Dashboard/index.js
View File

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
import styles from './styles.scss'; import styles from './styles.scss';
import Header from '../Header/index' import Header from '../Header/index'
const Dashboard = (props) => { export const Dashboard = (props) => {
return <div className={styles.colored}><Header />Title {props.title}</div>; return <div className={styles.colored}><Header />Title {props.title}</div>;
}; };

8
frontend/src/components/App/Header/__snapshots__/header.test.js.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dummy renders correctly 1`] = ` exports[`Header renders correctly 1`] = `
<div <div
className={undefined} className={undefined}
> >
@@ -12,21 +12,21 @@ exports[`Dummy renders correctly 1`] = `
> >
<a <a
className={undefined} className={undefined}
href="/mytask" href="#/mytask"
onClick={[Function]} onClick={[Function]}
> >
My Task My Task
</a> </a>
<a <a
className={undefined} className={undefined}
href="/inbox" href="#/inbox"
onClick={[Function]} onClick={[Function]}
> >
Inbox Inbox
</a> </a>
<a <a
className={undefined} className={undefined}
href="/dashboard" href="#/dashboard"
onClick={[Function]} onClick={[Function]}
> >
Dashboard Dashboard

4
frontend/src/components/App/Header/header.test.js
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import {MemoryRouter as Router} from 'react-router-dom' import {HashRouter as Router} from 'react-router-dom'
import Header from './index'; import Header from './index';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => { test('Header renders correctly', () => {
const component = renderer.create( const component = renderer.create(
<Router><Header/></Router>, <Router><Header/></Router>,
); );

8
frontend/src/components/App/Header/index.js
View File

@@ -2,13 +2,13 @@ import React from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import styles from './styles.scss'; import styles from './styles.scss';
const Header = () => { export const Header = () => {
return <div className={styles.Header}> return <div className={styles.Header}>
<h1>SUBTASK</h1> <h1>SUBTASK</h1>
<div className={styles.HeaderContainer}> <div className={styles.HeaderContainer}>
<Link className={styles.HeaderContainer} to="/mytask">My Task</Link> <Link className={styles.HeaderContainer} to="/mytask">My Task</Link>
<Link className={styles.HeaderContainer} to="/inbox">Inbox</Link> <Link className={styles.HeaderContainer} to="/inbox">Inbox</Link>
<Link className={styles.HeaderContainer} to="/dashboard">Dashboard</Link> <Link className={styles.HeaderContainer} to="/dashboard">Dashboard</Link>
</div> </div>
</div>; </div>;
}; };

146
frontend/src/components/App/Inbox/__snapshots__/inbox.test.js.snap
View File

@@ -1,41 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dummy renders correctly 1`] = ` exports[`Inbox renders correctly 1`] = `
<div ShallowWrapper {
className={undefined} "length": 1,
> Symbol(enzyme.__root__): [Circular],
<div Symbol(enzyme.__unrendered__): <HashRouter>
className={undefined} <Unknown
> title="Inbox"
<h1> />
SUBTASK </HashRouter>,
</h1> Symbol(enzyme.__renderer__): Object {
<div "batchedUpdates": [Function],
className={undefined} "getNode": [Function],
> "render": [Function],
<a "simulateEvent": [Function],
className={undefined} "unmount": [Function],
href="/mytask" },
onClick={[Function]} Symbol(enzyme.__node__): Object {
> "instance": null,
My Task "key": undefined,
</a> "nodeType": "class",
<a "props": Object {
className={undefined} "children": <Unknown
href="/inbox" title="Inbox"
onClick={[Function]} />,
> "history": Object {
Inbox "action": "POP",
</a> "block": [Function],
<a "createHref": [Function],
className={undefined} "go": [Function],
href="/dashboard" "goBack": [Function],
onClick={[Function]} "goForward": [Function],
> "length": 1,
Dashboard "listen": [Function],
</a> "location": Object {
</div> "hash": "",
</div> "pathname": "/",
Inbox "search": "",
</div> "state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "Inbox",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {
"children": <Unknown
title="Inbox"
/>,
"history": Object {
"action": "POP",
"block": [Function],
"createHref": [Function],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"length": 1,
"listen": [Function],
"location": Object {
"hash": "",
"pathname": "/",
"search": "",
"state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "Inbox",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {
"enableComponentDidUpdateOnSetState": true,
},
},
},
}
`; `;

17
frontend/src/components/App/Inbox/inbox.test.js
View File

@@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import {MemoryRouter as Router} from 'react-router-dom' import {HashRouter as Router} from 'react-router-dom'
import Inbox from './index'; import {shallow} from 'enzyme'
import {Inbox} from './index';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => { test('Inbox renders correctly', () => {
const component = renderer.create( const props = {
<Router><Inbox/></Router>, title: 'Inbox'
); }
let tree = component.toJSON(); const component = shallow((<Router><Inbox {...props} /></Router>))
expect(tree).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });

8
frontend/src/components/App/Inbox/index.js
View File

@@ -1,15 +1,15 @@
import React from 'react'; import React from 'react';
import {connect} from 'react-redux' import { connect } from 'react-redux'
import styles from './styles.scss'; import styles from './styles.scss';
import Header from '../Header/index' import Header from '../Header/index'
const Inbox = (props) => { export const Inbox = (props) => {
return <div className={styles.colored}><Header/>Title {props.title}</div>; return <div className={styles.colored}><Header />Title {props.title}</div>;
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
title: state.pageInitialised.titles.title, title: state.pageInitialised.titles.title,
} }
} }

146
frontend/src/components/App/Mytask/__snapshots__/mytask.test.js.snap
View File

@@ -1,41 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dummy renders correctly 1`] = ` exports[`MyTask renders correctly 1`] = `
<div ShallowWrapper {
className={undefined} "length": 1,
> Symbol(enzyme.__root__): [Circular],
<div Symbol(enzyme.__unrendered__): <HashRouter>
className={undefined} <Unknown
> title="MyTask"
<h1> />
SUBTASK </HashRouter>,
</h1> Symbol(enzyme.__renderer__): Object {
<div "batchedUpdates": [Function],
className={undefined} "getNode": [Function],
> "render": [Function],
<a "simulateEvent": [Function],
className={undefined} "unmount": [Function],
href="/mytask" },
onClick={[Function]} Symbol(enzyme.__node__): Object {
> "instance": null,
My Task "key": undefined,
</a> "nodeType": "class",
<a "props": Object {
className={undefined} "children": <Unknown
href="/inbox" title="MyTask"
onClick={[Function]} />,
> "history": Object {
Inbox "action": "POP",
</a> "block": [Function],
<a "createHref": [Function],
className={undefined} "go": [Function],
href="/dashboard" "goBack": [Function],
onClick={[Function]} "goForward": [Function],
> "length": 1,
Dashboard "listen": [Function],
</a> "location": Object {
</div> "hash": "",
</div> "pathname": "/",
My Task "search": "",
</div> "state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "MyTask",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "class",
"props": Object {
"children": <Unknown
title="MyTask"
/>,
"history": Object {
"action": "POP",
"block": [Function],
"createHref": [Function],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"length": 1,
"listen": [Function],
"location": Object {
"hash": "",
"pathname": "/",
"search": "",
"state": undefined,
},
"push": [Function],
"replace": [Function],
},
},
"ref": null,
"rendered": Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"title": "MyTask",
},
"ref": null,
"rendered": null,
"type": [Function],
},
"type": [Function],
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {
"enableComponentDidUpdateOnSetState": true,
},
},
},
}
`; `;

2
frontend/src/components/App/Mytask/index.js
View File

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
import styles from './styles.scss'; import styles from './styles.scss';
import Header from '../Header/index' import Header from '../Header/index'
const MyTask = (props) => { export const MyTask = (props) => {
return <div className={styles.colored}><Header />Title {props.title}</div>; return <div className={styles.colored}><Header />Title {props.title}</div>;
}; };

18
frontend/src/components/App/Mytask/mytask.test.js
View File

@@ -1,12 +1,14 @@
import React from 'react'; import React from 'react';
import {MemoryRouter as Router} from 'react-router-dom' import {HashRouter as Router} from 'react-router-dom'
import MyTask from './index'; import {shallow} from 'enzyme'
import {MyTask} from './index';
import renderer from 'react-test-renderer'; import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => { test('MyTask renders correctly', () => {
const component = renderer.create(
<Router><MyTask/></Router>, const props = {
); title: 'MyTask'
let tree = component.toJSON(); }
expect(tree).toMatchSnapshot(); const component = shallow((<Router><MyTask {...props} /></Router>))
expect(component).toMatchSnapshot();
}); });

2
frontend/src/index.js
View File

@@ -10,6 +10,6 @@ import Root from './components/App/Root/index';
const store = createStore(subtaskIo) const store = createStore(subtaskIo)
ReactDOM.render( ReactDOM.render(
<Root store={store}/>, <Root store={store} />,
document.getElementById('root')); document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();

4
frontend/src/setupTests.js Normal file
View File

@@ -0,0 +1,4 @@
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });