Skip to content

Commit e2debb6

Browse files
yujinkayyujinkay
committed
d3 unit tests completed
2 parents 9d742c8 + a12e83a commit e2debb6

File tree

8 files changed

+143
-83
lines changed

8 files changed

+143
-83
lines changed

‎.eslintrc‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"root": true,
44
"plugins": ["jest", "react"],
55
"rules": {
6-
"arrow-parens": [2, "as-needed"]
6+
"arrow-parens": [2, "as-needed"],
7+
"import/no-unresolved": "off",
8+
"import/extensions": "off"
79
},
810
"env": {
911
"es6": true,
@@ -22,8 +24,5 @@
2224
},
2325
"ecmaVersion": 2018,
2426
"sourceType": "module"
25-
},
26-
"settings": {
27-
"import/no-unresolved": "off"
2827
}
2928
}

‎src/app/__tests__/Chart.test.jsx‎

Lines changed: 81 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,88 @@
1-
import React from 'react';
2-
import Chart from '../components/Chart';
3-
4-
// Unit test cases for d3 functionality
1+
import React from 'react';
2+
import { configure, mount } from 'enzyme';
3+
import Adapter from 'enzyme-adapter-react-16';
4+
// eslint-disable-next-line import/no-named-as-default-member
5+
import Chart from '../components/Chart';
6+
// Unit test cases for d3 functionality
7+
configure({ adapter: new Adapter() });
58
// Test the life cycle methods in Chart
69
describe('Life cycle methods in Chart', () => {
10+
let wrapper;
11+
const props = {
12+
hierarchy: 0,
13+
};
14+
// Set up wrapper
15+
beforeEach(() => {
16+
wrapper = mount(<Chart {...props} />);
17+
});
18+
// test componentDidMount
19+
it('should call componentDidMount once', () => {
20+
const instance = wrapper.instance();
21+
jest.spyOn(instance, 'componentDidMount');
22+
instance.componentDidMount();
23+
expect(instance.componentDidMount).toHaveBeenCalledTimes(1);
24+
});
25+
// test maked3Tree within componentDidMount
726
it('should call maked3Tree upon mounting', () => {
8-
// Component should call maked3Tree upon mounting
9-
// Use the mock function + .toBeCalled()
10-
// Test the method in the component
11-
throw new Error();
12-
});
13-
});
14-
15-
// Test the root object and hierarchy
27+
const instance = wrapper.instance();
28+
jest.spyOn(instance, 'maked3Tree');
29+
instance.componentDidMount();
30+
expect(instance.maked3Tree).toHaveBeenCalledTimes(1);
31+
});
32+
// test componentDidUpdate
33+
it('should call componentDidUpdate once', () => {
34+
const instance = wrapper.instance();
35+
jest.spyOn(instance, 'componentDidUpdate');
36+
instance.componentDidUpdate();
37+
expect(instance.componentDidUpdate).toHaveBeenCalledTimes(1);
38+
});
39+
// test maked3Tree within componentDidUpdate
40+
it('should call maked3Tree once upon updating', () => {
41+
const instance = wrapper.instance();
42+
jest.spyOn(instance, 'maked3Tree');
43+
instance.componentDidUpdate();
44+
expect(instance.maked3Tree).toHaveBeenCalledTimes(1);
45+
});
46+
});
47+
// Test the root object and hierarchy
1648
describe('Root object', () => {
49+
let wrapper;
50+
const root = {};
51+
const props = {
52+
hierarchy: {
53+
index: 1,
54+
stateSnapshot: {},
55+
children: [],
56+
},
57+
};
58+
// Set up wrapper
59+
beforeEach(() => {
60+
wrapper = mount(<Chart {...props} />);
61+
});
62+
1763
it('should be a deep clone of the hierarchy', () => {
18-
// object 'root' should be a deep clone of the hierarchy
19-
// create an empty object to mimic root
20-
// i.e.: this.props.hierarchy !== root
21-
// expect to !== this.props.hierarchy
22-
// expect to be a deep clone
23-
throw new Error();
24-
});
25-
});
64+
const instance = wrapper.instance();
65+
instance.componentDidMount();
66+
expect(typeof root).toBe(typeof props.hierarchy);
67+
expect(root).not.toEqual(props.hierarchy);
68+
});
69+
});
2670

27-
// Test the maked3Tree method
71+
// Test the maked3Tree method
2872
describe('maked3Tree method', () => {
29-
it('should call removed3tree once', () => {
30-
// Should call function 'removed3tree' only once
31-
// expect toBeCalled()
32-
// expect toHaveBeenCalled()
33-
throw new Error();
34-
});
35-
});
36-
// Test the tooltip functionality in maked3Tree method
37-
describe('tooltip functionality in maked3Tree', () => {
38-
// Should call appropriate function upon triggering
39-
// a certain event on the tooltip div
40-
// Should call appropriate function upon triggering mouseOver
41-
it('should invoke tip.show on mouseOver', () => {
42-
throw new Error();
43-
});
44-
// Should call appropriate function upon triggering mouseOut
45-
it ('should invoke tip.hide on mouseOut', () => {
46-
throw new Error();
47-
});
48-
});
49-
50-
51-
52-
73+
let wrapper;
74+
const props = {
75+
hierarchy: 0,
76+
};
77+
// Set up wrapper
78+
beforeEach(() => {
79+
wrapper = mount(<Chart {...props} />);
80+
});
81+
// Test the invocation of removed3Tree within maked3Tree
82+
it('should call removed3Tree once', () => {
83+
const instance = wrapper.instance();
84+
jest.spyOn(instance, 'removed3Tree');
85+
instance.maked3Tree();
86+
expect(instance.removed3Tree).toHaveBeenCalledTimes(1);
87+
});
88+
});

‎src/app/__tests__/action.test.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/jsx-props-no-spreading */
12
import React from 'react';
23
import { configure, shallow } from 'enzyme';
34
import Adapter from 'enzyme-adapter-react-16';

‎src/app/__tests__/dropdown.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/jsx-props-no-spreading */
12
/* eslint-disable react/jsx-filename-extension */
23
import React from 'react';
34
import { configure, shallow } from 'enzyme';

‎src/app/components/Chart.jsx‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@
1010
/* eslint-disable no-use-before-define */
1111
/* eslint-disable react/no-string-refs */
1212
import React, { Component } from 'react';
13-
// import PropTypes from 'prop-types';
1413
import * as d3 from 'd3';
15-
import d3Tip from 'd3-tip';
1614

1715
let root = {};
1816
class Chart extends Component {
@@ -78,10 +76,10 @@ class Chart extends Component {
7876
const d3root = tree(hierarchy);
7977

8078
g.selectAll('.link')
81-
// root.links() gets an array of all the links,
82-
// where each element is an object containing a
83-
// source property, which represents the link's source node,
84-
// and a target property, which represents the link's target node.
79+
// root.links() gets an array of all the links,
80+
// where each element is an object containing a
81+
// source property, which represents the link's source node,
82+
// and a target property, which represents the link's target node.
8583
.data(d3root.links())
8684
.enter()
8785
.append('path')
@@ -104,21 +102,36 @@ class Chart extends Component {
104102
});
105103

106104
node.append('circle')
107-
.attr('r', 10);
108-
109-
// creating a d3.tip method where the html has a function that returns
110-
// the data we passed into tip.show from line 120
111-
const tip = d3Tip()
112-
.attr('class', 'd3-tip')
113-
.html(function (d) { return 'State: ' + d; });
114-
115-
// invoking tooltip for nodes
116-
node.call(tip);
117-
105+
.attr('r', 10)
106+
.on('mouseover', function (d) {
107+
d3.select(this)
108+
.transition(100)
109+
.duration(20)
110+
.attr('r', 20);
111+
112+
tooltipDiv.transition()
113+
.duration(200)
114+
.style('opacity', 0.9);
115+
116+
tooltipDiv.html(JSON.stringify(d.data.stateSnapshot.children[0].state), this)
117+
.style('left', (d3.event.pageX) + 'px')
118+
.style('top', (d3.event.pageY - 28) + 'px');
119+
})
120+
// eslint-disable-next-line no-unused-vars
121+
.on('mouseout', function (d) {
122+
d3.select(this)
123+
.transition()
124+
.duration(200)
125+
.attr('r', 12);
126+
127+
tooltipDiv.transition()
128+
.duration(500)
129+
.style('opacity', 0);
130+
});
118131
node
119132
.append('text')
120133
// adjusts the y coordinates for the node text
121-
.attr('dy', '0.35em')
134+
.attr('dy', '-1.5em')
122135
.attr('x', function (d) {
123136
// this positions how far the text is from leaf nodes (ones without children)
124137
// negative number before the colon moves the text of rightside nodes,
@@ -160,14 +173,12 @@ class Chart extends Component {
160173
g.attr('transform', d3.event.transform);
161174
}
162175

176+
// define the div for the tooltip
177+
const tooltipDiv = d3.select('body').append('div')
178+
.attr('class', 'tooltip')
179+
.style('opacity', 0);
180+
163181
// applying tooltip on mouseover and removes it when mouse cursor moves away
164-
node
165-
.on('mouseover', function (d) {
166-
// without JSON.stringify, data will display as object Object
167-
// console.log('d.data --> ', JSON.stringify(d.data))
168-
tip.show(JSON.stringify(d.data.stateSnapshot.children[0].state), this);
169-
})
170-
.on('mouseout', tip.hide);
171182

172183
function reinfeldTidierAlgo(x, y) {
173184
return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
@@ -179,8 +190,4 @@ class Chart extends Component {
179190
}
180191
}
181192

182-
// Chart.propTypes = {
183-
// snapshot: PropTypes.arrayOf(PropTypes.object).isRequired,
184-
// };
185-
186193
export default Chart;

‎src/app/components/MainSlider.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/jsx-props-no-spreading */
12
/* eslint-disable react/prop-types */
23

34
import React from 'react';

‎src/app/styles/components/d3graph.css‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,22 @@ body {
4343
stroke-width: 5px;
4444
}
4545

46-
.d3-tip {
46+
div.tooltip {
47+
position: absolute;
48+
text-align: center;
49+
display: inline;
50+
max-width: 250px;
51+
overflow-wrap: break-word;
52+
padding: 6px;
53+
color: #320a5c;
54+
font-size: 12px;
55+
font-family: "Overpass Mono", monospace;
56+
background: #9cf4df;
57+
border-radius: 8px;
58+
pointer-events: none;
59+
}
60+
61+
/* .d3-tip {
4762
line-height: 1;
4863
padding: 6px;
4964
background: #9cf4df;
@@ -53,7 +68,7 @@ body {
5368
max-width: 400px;
5469
overflow-wrap: break-word;
5570
font-family: "Overpass Mono", monospace;
56-
}
71+
} */
5772

5873
/* Creates a small triangle extender for the tooltip
5974
.d3-tip:after {
@@ -68,8 +83,8 @@ body {
6883
} */
6984

7085
/* Style northward tooltips specifically */
71-
.d3-tip.n:after {
86+
/* .d3-tip.n:after {
7287
margin: -2px 0 0 0;
7388
top: 100%;
7489
left: 0;
75-
}
90+
} */

‎src/extension/build/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Reactime",
3-
"version": "3.0",
3+
"version": "3.1",
44
"devtools_page": "devtools.html",
55
"description": "A Chrome extension that helps debug state in React applications by memorizing the state of components with every render.",
66
"manifest_version": 2,

0 commit comments

Comments
 (0)