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"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
"collectCoverageFrom": [
"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
exports[`Dummy renders correctly 1`] = `
<div
className={undefined}
>
<div
className={undefined}
>
<h1>
SUBTASK
</h1>
<div
className={undefined}
>
<a
className={undefined}
href="/mytask"
onClick={[Function]}
>
My Task
</a>
<a
className={undefined}
href="/inbox"
onClick={[Function]}
>
Inbox
</a>
<a
className={undefined}
href="/dashboard"
onClick={[Function]}
>
Dashboard
</a>
</div>
</div>
Dashboard
</div>
exports[`Daoardshb renders correctly 1`] = `
ShallowWrapper {
"length": 1,
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <HashRouter>
<Unknown
title="Dashboard"
/>
</HashRouter>,
Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function],
"getNode": [Function],
"render": [Function],
"simulateEvent": [Function],
"unmount": [Function],
},
Symbol(enzyme.__node__): 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.__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 {MemoryRouter as Router} from 'react-router-dom'
import Dashboard from './index';
import {mount} from 'enzyme'
import {HashRouter as Router} from 'react-router-dom'
import {Dashboard} from './index';
import {shallow} from 'enzyme'
import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => {
test('Daoardshb renders correctly', () => {
const props = {
title: 'Dashboard',
title: 'Dashboard'
}
// // const component = renderer.create(
// <Router><Dashboard props ={...props}/></Router>,
// );
const component = mount((<Router><Dashboard {...props} /></Router>))
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
const component = shallow((<Router><Dashboard {...props} /></Router>))
expect(component).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 Header from '../Header/index'
const Dashboard = (props) => {
export const Dashboard = (props) => {
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
exports[`Dummy renders correctly 1`] = `
exports[`Header renders correctly 1`] = `
<div
className={undefined}
>
@@ -12,21 +12,21 @@ exports[`Dummy renders correctly 1`] = `
>
<a
className={undefined}
href="/mytask"
href="#/mytask"
onClick={[Function]}
>
My Task
</a>
<a
className={undefined}
href="/inbox"
href="#/inbox"
onClick={[Function]}
>
Inbox
</a>
<a
className={undefined}
href="/dashboard"
href="#/dashboard"
onClick={[Function]}
>
Dashboard

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

@@ -1,9 +1,9 @@
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 renderer from 'react-test-renderer';
test('Dummy renders correctly', () => {
test('Header renders correctly', () => {
const component = renderer.create(
<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 styles from './styles.scss';
const Header = () => {
export const Header = () => {
return <div className={styles.Header}>
<h1>SUBTASK</h1>
<div className={styles.HeaderContainer}>
<Link className={styles.HeaderContainer} to="/mytask">My Task</Link>
<Link className={styles.HeaderContainer} to="/inbox">Inbox</Link>
<Link className={styles.HeaderContainer} to="/dashboard">Dashboard</Link>
<Link className={styles.HeaderContainer} to="/mytask">My Task</Link>
<Link className={styles.HeaderContainer} to="/inbox">Inbox</Link>
<Link className={styles.HeaderContainer} to="/dashboard">Dashboard</Link>
</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
exports[`Dummy renders correctly 1`] = `
<div
className={undefined}
>
<div
className={undefined}
>
<h1>
SUBTASK
</h1>
<div
className={undefined}
>
<a
className={undefined}
href="/mytask"
onClick={[Function]}
>
My Task
</a>
<a
className={undefined}
href="/inbox"
onClick={[Function]}
>
Inbox
</a>
<a
className={undefined}
href="/dashboard"
onClick={[Function]}
>
Dashboard
</a>
</div>
</div>
Inbox
</div>
exports[`Inbox renders correctly 1`] = `
ShallowWrapper {
"length": 1,
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <HashRouter>
<Unknown
title="Inbox"
/>
</HashRouter>,
Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function],
"getNode": [Function],
"render": [Function],
"simulateEvent": [Function],
"unmount": [Function],
},
Symbol(enzyme.__node__): 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.__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 {MemoryRouter as Router} from 'react-router-dom'
import Inbox from './index';
import {HashRouter as Router} from 'react-router-dom'
import {shallow} from 'enzyme'
import {Inbox} from './index';
import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => {
const component = renderer.create(
<Router><Inbox/></Router>,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
test('Inbox renders correctly', () => {
const props = {
title: 'Inbox'
}
const component = shallow((<Router><Inbox {...props} /></Router>))
expect(component).toMatchSnapshot();
});

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

@@ -1,15 +1,15 @@
import React from 'react';
import {connect} from 'react-redux'
import { connect } from 'react-redux'
import styles from './styles.scss';
import Header from '../Header/index'
const Inbox = (props) => {
return <div className={styles.colored}><Header/>Title {props.title}</div>;
export const Inbox = (props) => {
return <div className={styles.colored}><Header />Title {props.title}</div>;
};
const mapStateToProps = (state) => {
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
exports[`Dummy renders correctly 1`] = `
<div
className={undefined}
>
<div
className={undefined}
>
<h1>
SUBTASK
</h1>
<div
className={undefined}
>
<a
className={undefined}
href="/mytask"
onClick={[Function]}
>
My Task
</a>
<a
className={undefined}
href="/inbox"
onClick={[Function]}
>
Inbox
</a>
<a
className={undefined}
href="/dashboard"
onClick={[Function]}
>
Dashboard
</a>
</div>
</div>
My Task
</div>
exports[`MyTask renders correctly 1`] = `
ShallowWrapper {
"length": 1,
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <HashRouter>
<Unknown
title="MyTask"
/>
</HashRouter>,
Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function],
"getNode": [Function],
"render": [Function],
"simulateEvent": [Function],
"unmount": [Function],
},
Symbol(enzyme.__node__): 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.__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 Header from '../Header/index'
const MyTask = (props) => {
export const MyTask = (props) => {
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 {MemoryRouter as Router} from 'react-router-dom'
import MyTask from './index';
import {HashRouter as Router} from 'react-router-dom'
import {shallow} from 'enzyme'
import {MyTask} from './index';
import renderer from 'react-test-renderer';
test('Dummy renders correctly', () => {
const component = renderer.create(
<Router><MyTask/></Router>,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
test('MyTask renders correctly', () => {
const props = {
title: 'MyTask'
}
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)
ReactDOM.render(
<Root store={store}/>,
<Root store={store} />,
document.getElementById('root'));
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() });