Skip to content

Commit 72fa755

Browse files
sean1292sean1292
authored
Merge pull request #51 from tonyito/testing
Testing Configurations Set Up
2 parents c5dc925 + fc18270 commit 72fa755

File tree

11 files changed

+262
-34
lines changed

11 files changed

+262
-34
lines changed

‎.babelrc

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
}
88
],
99
"react",
10-
"stage-0"
10+
"stage-0",
1111
],
12-
"plugins": ["transform-es2015-modules-commonjs"]
12+
"plugins": ["transform-es2015-modules-commonjs"],
13+
"env": {
14+
"test": {
15+
"plugins": ["transform-es2015-modules-commonjs"]
16+
}
17+
}
1318
}

‎__mocks__/electron.js renamed to ‎__mocks__/electron.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ const ipcRenderer = {
33
on: jest.fn(),
44
};
55

6-
export default ipcRenderer;
6+
module.exports = ipcRenderer;

‎package.json

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
7373
"build-bin": "electron-builder -mwl",
7474
"test": "cross-env NODE_ENV=test jest",
75+
"test:clear": "cross-env NODE_ENV=test jest --clearCache",
7576
"linter": "eslint src",
7677
"develop": "concurrently \"npm run dev\" \"npm run electron\""
7778
},
@@ -83,16 +84,32 @@
8384
"jest": {
8485
"moduleNameMapper": {
8586
"^.+\\.(css|scss|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy",
86-
"electron": "<rootDir>/__mocks__/electron.js"
87+
"electron": "<rootDir>/__mocks__/electron.ts"
88+
},
89+
"moduleFileExtensions": [
90+
"ts",
91+
"tsx",
92+
"js"
93+
],
94+
"transform": {
95+
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
96+
},
97+
"testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
98+
"globals": {
99+
"ts-jest": {
100+
"diagnostics": false
101+
}
87102
},
88103
"setupFiles": [
89-
"./src/setupTests.js"
104+
"<rootDir>/src/setupTests.ts"
90105
]
91106
},
92107
"dependencies": {
93108
"@material-ui/core": "^4.2.1",
94109
"@material-ui/icons": "^4.0.1",
95110
"@material-ui/styles": "^4.9.6",
111+
"@types/enzyme": "^3.10.5",
112+
"@types/enzyme-adapter-react-16": "^1.0.6",
96113
"@types/prettier": "^1.19.0",
97114
"@types/prismjs": "^1.16.0",
98115
"@types/react": "^16.8.14",
@@ -106,14 +123,16 @@
106123
"cli-spinner": "^0.2.8",
107124
"commander": "^2.17.1",
108125
"concurrently": "^5.1.0",
126+
"core-js": "^3.6.4",
109127
"csstype": "^2.6.9",
110128
"d3": "^5.9.2",
111129
"electron-reload": "^1.4.0",
112130
"enzyme": "^3.4.1",
131+
"enzyme-adapter-react-16": "^1.2.0",
113132
"konva": "^4.2.0",
114133
"localforage": "^1.7.2",
115134
"lodash.throttle": "^4.1.1",
116-
"material-table": "^1.25.2",
135+
"material-table": "^1.57.2",
117136
"prettier": "^1.19.1",
118137
"prismjs": "^1.19.0",
119138
"prop-types": "^15.6.2",
@@ -134,11 +153,15 @@
134153
"redux-undo": "^1.0.1"
135154
},
136155
"devDependencies": {
156+
"@babel/core": "^7.9.0",
137157
"@babel/preset-typescript": "^7.3.3",
158+
"@types/jest": "^25.1.5",
138159
"awesome-typescript-loader": "^5.2.1",
139160
"babel-core": "^6.26.3",
140161
"babel-eslint": "^8.2.6",
162+
"babel-jest": "^25.2.4",
141163
"babel-loader": "^7.1.4",
164+
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
142165
"babel-preset-env": "^1.6.1",
143166
"babel-preset-react": "^6.24.1",
144167
"babel-preset-stage-0": "^6.24.1",
@@ -151,7 +174,6 @@
151174
"electron-builder": "^20.44.4",
152175
"electron-devtools-installer": "^2.2.4",
153176
"electron-installer-dmg": "^2.0.0",
154-
"enzyme-adapter-react-16": "^1.2.0",
155177
"eslint": "^4.19.1",
156178
"eslint-config-airbnb-base": "^13.0.0",
157179
"eslint-plugin-babel": "^5.1.0",
@@ -162,12 +184,14 @@
162184
"extract-text-webpack-plugin": "^4.0.0-beta.0",
163185
"html-webpack-plugin": "^3.1.0",
164186
"identity-obj-proxy": "^3.0.0",
165-
"jest": "^23.5.0",
187+
"jest": "^23.6.0",
166188
"node-sass": "^4.13.1",
167189
"postcss-loader": "^2.1.6",
190+
"redux-mock-store": "^1.5.4",
168191
"sass-loader": "^7.0.3",
169192
"style-loader": "^0.20.3",
170-
"typescript": "^3.4.4",
193+
"ts-jest": "^25.3.0",
194+
"typescript": "^3.8.3",
171195
"webpack": "^4.42.0",
172196
"webpack-cli": "^3.3.11"
173197
},

‎src/components/__tests__/App.test.js

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/components/__tests__/MainContainer.test.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import App from '../App';
4+
import AppContainer from '../../containers/AppContainer';
5+
6+
describe('Test the App Component', () => {
7+
// wrapped version of react component
8+
// component comes with additional functionality
9+
const wrapped: any = shallow(<App />);
10+
it('Matches snapshot', () => {
11+
// look inside wrapped component and find every instance of commentBox inside of it
12+
// expect(wrapped.find(KonvaStage).length).toEqual(1);
13+
expect(wrapped).toMatchSnapshot();
14+
});
15+
it('Should contain the App Container', () => {
16+
// look inside wrapped component and find every instance of commentBox inside of it
17+
// expect(wrapped.find(KonvaStage).length).toEqual(1);
18+
expect(wrapped.contains(<AppContainer />)).toBe(true)
19+
20+
});
21+
});

‎src/components/__tests__/__snapshots__/MainContainer.test.tsx.snap

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test the App Component Matches snapshot 1`] = `
4+
ShallowWrapper {
5+
Symbol(enzyme.__root__): [Circular],
6+
Symbol(enzyme.__unrendered__): <Unknown />,
7+
Symbol(enzyme.__renderer__): Object {
8+
"batchedUpdates": [Function],
9+
"checkPropTypes": [Function],
10+
"getNode": [Function],
11+
"render": [Function],
12+
"simulateError": [Function],
13+
"simulateEvent": [Function],
14+
"unmount": [Function],
15+
},
16+
Symbol(enzyme.__node__): Object {
17+
"instance": null,
18+
"key": undefined,
19+
"nodeType": "host",
20+
"props": Object {
21+
"children": <div>
22+
<header
23+
style={
24+
Object {
25+
"height": "40px",
26+
"width": "100%",
27+
}
28+
}
29+
>
30+
ReacType
31+
</header>
32+
<Connect(AppContainer) />
33+
</div>,
34+
"className": "app",
35+
},
36+
"ref": null,
37+
"rendered": Object {
38+
"instance": null,
39+
"key": undefined,
40+
"nodeType": "host",
41+
"props": Object {
42+
"children": Array [
43+
<header
44+
style={
45+
Object {
46+
"height": "40px",
47+
"width": "100%",
48+
}
49+
}
50+
>
51+
ReacType
52+
</header>,
53+
<Connect(AppContainer) />,
54+
],
55+
},
56+
"ref": null,
57+
"rendered": Array [
58+
Object {
59+
"instance": null,
60+
"key": undefined,
61+
"nodeType": "host",
62+
"props": Object {
63+
"children": "ReacType",
64+
"style": Object {
65+
"height": "40px",
66+
"width": "100%",
67+
},
68+
},
69+
"ref": null,
70+
"rendered": "ReacType",
71+
"type": "header",
72+
},
73+
Object {
74+
"instance": null,
75+
"key": undefined,
76+
"nodeType": "class",
77+
"props": Object {},
78+
"ref": null,
79+
"rendered": null,
80+
"type": [Function],
81+
},
82+
],
83+
"type": "div",
84+
},
85+
"type": "div",
86+
},
87+
Symbol(enzyme.__nodes__): Array [
88+
Object {
89+
"instance": null,
90+
"key": undefined,
91+
"nodeType": "host",
92+
"props": Object {
93+
"children": <div>
94+
<header
95+
style={
96+
Object {
97+
"height": "40px",
98+
"width": "100%",
99+
}
100+
}
101+
>
102+
ReacType
103+
</header>
104+
<Connect(AppContainer) />
105+
</div>,
106+
"className": "app",
107+
},
108+
"ref": null,
109+
"rendered": Object {
110+
"instance": null,
111+
"key": undefined,
112+
"nodeType": "host",
113+
"props": Object {
114+
"children": Array [
115+
<header
116+
style={
117+
Object {
118+
"height": "40px",
119+
"width": "100%",
120+
}
121+
}
122+
>
123+
ReacType
124+
</header>,
125+
<Connect(AppContainer) />,
126+
],
127+
},
128+
"ref": null,
129+
"rendered": Array [
130+
Object {
131+
"instance": null,
132+
"key": undefined,
133+
"nodeType": "host",
134+
"props": Object {
135+
"children": "ReacType",
136+
"style": Object {
137+
"height": "40px",
138+
"width": "100%",
139+
},
140+
},
141+
"ref": null,
142+
"rendered": "ReacType",
143+
"type": "header",
144+
},
145+
Object {
146+
"instance": null,
147+
"key": undefined,
148+
"nodeType": "class",
149+
"props": Object {},
150+
"ref": null,
151+
"rendered": null,
152+
"type": [Function],
153+
},
154+
],
155+
"type": "div",
156+
},
157+
"type": "div",
158+
},
159+
],
160+
Symbol(enzyme.__options__): Object {
161+
"adapter": ReactSixteenAdapter {
162+
"options": Object {
163+
"enableComponentDidUpdateOnSetState": true,
164+
"legacyContextMode": "parent",
165+
"lifecycles": Object {
166+
"componentDidUpdate": Object {
167+
"onSetState": true,
168+
},
169+
"getChildContext": Object {
170+
"calledByRenderer": false,
171+
},
172+
"getDerivedStateFromError": true,
173+
"getDerivedStateFromProps": Object {
174+
"hasShouldComponentUpdateBug": false,
175+
},
176+
"getSnapshotBeforeUpdate": true,
177+
"setState": Object {
178+
"skipsComponentDidUpdateOnNullish": true,
179+
},
180+
},
181+
},
182+
},
183+
Symbol(enzyme.__providerValues__): undefined,
184+
},
185+
Symbol(enzyme.__providerValues__): Map {},
186+
}
187+
`;

‎src/components/left/LeftColExpansionPanel.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ComponentsInt,
2020
PropsInt
2121
} from '../../interfaces/Interfaces'; // unused
22+
2223
interface LeftColExpPanPropsInt extends PropsInt {
2324
classes: any;
2425
id?: number;
@@ -69,10 +70,13 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
6970
focusChild,
7071
changeFocusChild
7172
} = props;
73+
7274
const { title, id, color, stateful, classBased } = component;
75+
7376
function isFocused() {
7477
return focusComponent.id === id ? 'focused' : '';
7578
}
79+
7680
// boolean flag to determine if the component card is focused or not
7781
// state/class toggles will be displayed when a component is focused
7882
const focusedToggle = isFocused() === 'focused' ? true : false;

‎src/setupTests.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/setupTests.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configure } from 'enzyme';
2+
import * as ReactSixteenAdapter from 'enzyme-adapter-react-16';
3+
4+
5+
const adapter = ReactSixteenAdapter as any;
6+
7+
configure({ adapter: new adapter.default() });

0 commit comments

Comments
 (0)