Skip to content

Commit 3410ec4

Browse files
ngoczwolinskingoczwolinski
authored
Merge pull request #18 from oslabs-beta/testing
Added Backend Testing & Modified to work with Remix & NextJS
2 parents c4fd3dc + 8351160 commit 3410ec4

30 files changed

+1532
-13688
lines changed

‎demo-app/src/client/Components/Increment.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import React, { useState } from 'react';
2-
import Box from './Box';
3-
import { BoardText } from '../../types';
4-
import { Function } from 'lodash';
52
function Increment() {
63
const [count, setCount] = useState(0);
74
return (

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
"^.+\\.(js|ts|tsx)$": "ts-jest"
77
},
88
"testPathIgnorePatterns": [
9-
"www"
9+
"www",
10+
"./src/backend/__tests__/ignore"
11+
],
12+
"coveragePathIgnorePatterns": [
13+
"/src/backend/__tests__/ignore/"
1014
],
1115
"transformIgnorePatterns": [
1216
"/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
@@ -98,7 +102,6 @@
98102
],
99103
"license": "ISC",
100104
"devDependencies": {
101-
"@babel/core": "^7.12.7",
102105
"@babel/plugin-proposal-class-properties": "^7.10.4",
103106
"@babel/plugin-proposal-decorators": "^7.10.5",
104107
"@babel/preset-env": "^7.12.7",
@@ -138,6 +141,7 @@
138141
"jscharting-react": "^1.2.1",
139142
"prettier": "2.8.4",
140143
"puppeteer": "^14.3.0",
144+
"react-devtools-core": "^4.27.3",
141145
"sass": "^1.26.10",
142146
"sass-loader": "^7.3.1",
143147
"sinon-chrome": "^3.0.1",

‎src/backend/__tests__/ignore/IncrementClass.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
3+
export default class IncrementClass extends React.Component {
4+
constructor(props) {
5+
super(props);
6+
this.state = { count: 0 };
7+
this.handleClick = this.handleClick.bind(this);
8+
}
9+
10+
handleClick() {
11+
this.setState({ count: this.state.count + 1 });
12+
}
13+
14+
render() {
15+
return (
16+
<div>
17+
<button className='increment' onClick={this.handleClick}>
18+
You clicked me {this.state.count} times.
19+
</button>
20+
</div>
21+
);
22+
}
23+
}

‎src/backend/__tests__/ignore/IncrementFunc.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { useState } from 'react';
2+
function IncrementFunc() {
3+
const [count, setCount] = useState(0);
4+
return (
5+
<div>
6+
<button className='increment' onClick={() => setCount(count + 1)}>
7+
You clicked me {count} times.
8+
</button>
9+
</div>
10+
);
11+
}
12+
13+
export default IncrementFunc;
14+
15+
export function IncrementFuncMultiStates() {
16+
const [count, setCount] = useState(0);
17+
const [count1, setCount1] = useState(1);
18+
return (
19+
<div>
20+
<button className='increment' onClick={() => setCount(count + 1)}>
21+
You clicked me {count + count1} times
22+
</button>
23+
</div>
24+
);
25+
}

‎src/backend/__tests__/ignore/deepCopy.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default function deepCopy<T>(obj: T): T {
2+
if (obj === null || typeof obj !== 'object') {
3+
return obj;
4+
}
5+
const copy = Array.isArray(obj) ? [] : {};
6+
Object.keys(obj).forEach((key) => {
7+
if (typeof obj[key] === 'function') {
8+
copy[key] = obj[key];
9+
} else {
10+
copy[key] = deepCopy(obj[key]);
11+
}
12+
});
13+
return copy as T;
14+
}

‎src/backend/__tests__/ignore/propComponent-testcase.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Fiber } from '../../types/backendTypes';
2+
import { FunctionComponent } from '../../types/backendTypes';
3+
4+
// -------------------TEST CASE FOR COMPONENT WITH PROPS-----------------------
5+
export const Router: Fiber = {
6+
tag: FunctionComponent,
7+
elementType: { name: 'Router' },
8+
sibling: null,
9+
stateNode: null,
10+
child: null,
11+
memoizedState: {
12+
memoizedState: null,
13+
queue: null,
14+
},
15+
memoizedProps: { location: { pathname: '/tictactoe' } },
16+
actualDuration: 1,
17+
actualStartTime: 2,
18+
selfBaseDuration: 3,
19+
treeBaseDuration: 4,
20+
_debugHookTypes: ['useContext', 'useMemo', 'useMemo'],
21+
};
22+
export const RenderedRoute: Fiber = {
23+
tag: FunctionComponent,
24+
elementType: { name: 'RenderedRoute' },
25+
sibling: null,
26+
stateNode: null,
27+
child: null,
28+
memoizedState: null,
29+
memoizedProps: { match: { pathname: '/tictactoe' } },
30+
actualDuration: 1,
31+
actualStartTime: 2,
32+
selfBaseDuration: 3,
33+
treeBaseDuration: 4,
34+
_debugHookTypes: ['useContext'],
35+
};

‎src/backend/__tests__/ignore/stateComponents-testcases.ts

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import Tree from '../../models/tree';
2+
import routes from '../../models/routes';
3+
import { ComponentData, Fiber } from '../../types/backendTypes';
4+
import { FunctionComponent, ClassComponent, HostRoot } from '../../types/backendTypes';
5+
import IncrementFunc from './IncrementFunc';
6+
import IncrementClass from './IncrementClass';
7+
import componentActionsRecord from '../../models/masterState';
8+
import deepCopy from './deepCopy';
9+
10+
// ----------------------------TEST CASES FOR ROOT------------------------------
11+
export const root: Fiber = {
12+
tag: HostRoot,
13+
elementType: null,
14+
sibling: null,
15+
stateNode: null,
16+
child: null,
17+
memoizedState: null,
18+
memoizedProps: null,
19+
actualDuration: 1,
20+
actualStartTime: 2,
21+
selfBaseDuration: 3,
22+
treeBaseDuration: 4,
23+
_debugHookTypes: null,
24+
};
25+
export const rootPayload = new Tree('root', 'root');
26+
rootPayload.route = routes.addRoute('http://localhost/');
27+
28+
// ----------------------TEST CASE FOR FUNCTIONAL COMPONENT---------------------
29+
export const functionalComponent: Fiber = {
30+
tag: FunctionComponent,
31+
elementType: IncrementFunc,
32+
sibling: null,
33+
stateNode: null,
34+
child: null,
35+
memoizedState: {
36+
memoizedState: 0,
37+
queue: {
38+
dispatch: function (newState) {
39+
this.memoizedState = newState;
40+
},
41+
},
42+
},
43+
memoizedProps: {},
44+
actualDuration: 1,
45+
actualStartTime: 2,
46+
selfBaseDuration: 3,
47+
treeBaseDuration: 4,
48+
_debugHookTypes: ['useState'],
49+
};
50+
51+
const functionalComponentData: ComponentData = {
52+
actualDuration: 1,
53+
actualStartTime: 2,
54+
selfBaseDuration: 3,
55+
treeBaseDuration: 4,
56+
context: {},
57+
hooksIndex: [0],
58+
hooksState: { count: 0 },
59+
index: null,
60+
props: {},
61+
state: null,
62+
};
63+
64+
componentActionsRecord.clear();
65+
export const functionalPayload: Tree = new Tree('root', 'root');
66+
functionalPayload.route = rootPayload.route;
67+
functionalPayload.addChild({ count: 0 }, 'IncrementFunc', functionalComponentData, null);
68+
69+
// -----------------------TEST CASE FOR CLASS COMPONENT-------------------------
70+
71+
export const classComponent: Fiber = {
72+
tag: ClassComponent,
73+
elementType: IncrementClass,
74+
sibling: null,
75+
stateNode: {
76+
state: { count: 0 },
77+
setState: function (callback) {
78+
this.state = { ...callback() };
79+
},
80+
},
81+
child: null,
82+
memoizedState: {
83+
count: 0,
84+
},
85+
memoizedProps: {},
86+
actualDuration: 1,
87+
actualStartTime: 2,
88+
selfBaseDuration: 3,
89+
treeBaseDuration: 4,
90+
_debugHookTypes: null,
91+
};
92+
classComponent.stateNode.setState = classComponent.stateNode.setState.bind(
93+
classComponent.stateNode,
94+
);
95+
96+
const classComponentData: ComponentData = {
97+
actualDuration: 1,
98+
actualStartTime: 2,
99+
selfBaseDuration: 3,
100+
treeBaseDuration: 4,
101+
context: {},
102+
hooksIndex: null,
103+
hooksState: null,
104+
index: 0,
105+
props: {},
106+
state: { count: 0 },
107+
};
108+
109+
componentActionsRecord.clear();
110+
export const classPayload = new Tree('root', 'root');
111+
classPayload.route = rootPayload.route;
112+
classPayload.addChild({ count: 0 }, 'IncrementClass', classComponentData, null);
113+
114+
componentActionsRecord.clear();
115+
export const updateClassPayload = new Tree('root', 'root');
116+
updateClassPayload.route = rootPayload.route;
117+
updateClassPayload.addChild(
118+
{ count: 2 },
119+
'IncrementClass',
120+
{ ...classComponentData, state: { count: 2 } },
121+
null,
122+
);
123+
124+
// -----------------------TEST CASE FOR MIX OF COMPONENTS-----------------------
125+
componentActionsRecord.clear();
126+
export const mixComponents: Fiber = deepCopy(root);
127+
mixComponents.child = deepCopy(functionalComponent);
128+
mixComponents.sibling = deepCopy(classComponent);
129+
mixComponents.child!.child = deepCopy(functionalComponent);
130+
mixComponents.child!.child!.sibling = deepCopy(classComponent);
131+
// console.dir(mixComponents, { depth: null });
132+
133+
export const mixPayload = new Tree('root', 'root');
134+
mixPayload.route = rootPayload.route;
135+
136+
// Outer Func Comp
137+
let funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc', functionalComponentData, null);
138+
funcPayloadMix.componentData = {
139+
...funcPayloadMix.componentData,
140+
hooksState: { count: 0 },
141+
hooksIndex: [0],
142+
};
143+
mixPayload.children.push(deepCopy(funcPayloadMix));
144+
145+
// Outer Class Comp
146+
let classPayloadMix = new Tree({ count: 0 }, 'IncrementClass', classComponentData, null);
147+
classPayloadMix.componentData = {
148+
...classPayloadMix.componentData,
149+
state: { count: 0 },
150+
index: 3,
151+
};
152+
mixPayload.children.push(deepCopy(classPayloadMix));
153+
154+
// Inner Func Comp
155+
funcPayloadMix = new Tree({ count: 0 }, 'IncrementFunc', functionalComponentData, null);
156+
funcPayloadMix.componentData = {
157+
...funcPayloadMix.componentData,
158+
hooksState: { count: 0 },
159+
hooksIndex: [1],
160+
};
161+
funcPayloadMix.name = 'IncrementFunc1';
162+
mixPayload.children[0].children.push(deepCopy(funcPayloadMix));
163+
164+
// Inner Class Comp
165+
classPayloadMix = new Tree({ count: 0 }, 'IncrementClass', classComponentData, null);
166+
classPayloadMix.componentData = {
167+
...classPayloadMix.componentData,
168+
state: { count: 0 },
169+
index: 2,
170+
};
171+
mixPayload.children[0].children.push(deepCopy(classPayloadMix));
172+
173+
// console.dir(mixPayload, { depth: null });

‎src/backend/__tests__/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
<title>Testing LinkFiber</title>
77
</head>
88
<body>
9-
9+
<main id="root"></main>
1010
</body>
1111
</html>

0 commit comments

Comments
 (0)