Skip to content

Commit 33ca427

Browse files
stormikphstormikph
committed
tree testing
1 parent d0cd5ca commit 33ca427

File tree

2 files changed

+95
-26
lines changed

2 files changed

+95
-26
lines changed

‎__tests__/tree.test.tsx

Lines changed: 93 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,114 @@ import TreeChart from '../app/src/tree/TreeChart';
22
import React, { useReducer } from 'react';
33
import '@testing-library/jest-dom';
44
import { render, fireEvent, cleanup, screen } from '@testing-library/react';
5-
import { StateContext } from '../app/src/context/context';
5+
import StateContext from '../app/src/context/context';
66
import { State, Action, Component, ChildElement } from '../app/src/interfaces/Interfaces';
77
import initialState from '../app/src/context/initialState';
88
import reducer from '../app/src/reducers/componentReducer';
9+
import 'd3';
910

11+
const tester = [
12+
{
13+
id: 1,
14+
name: 'index',
15+
style: {},
16+
code: `import React, { useState } from 'react';
17+
import A from '../components/A';
18+
import B from '../components/B';
19+
import Head from 'next/head';
20+
const index = (props): JSX.Element => {
21+
const [value, setValue] = useState<any | undefined>('INITIAL VALUE');
22+
return (
23+
<>
24+
<Head>
25+
<title>index</title>
26+
</Head>
27+
<div className="index" style={props.style}>
28+
<div>
29+
<A />
30+
</div>
31+
<div>
32+
<B />
33+
</div>
34+
</div>
35+
</>
36+
);
37+
};
38+
export default index;
39+
`,
40+
children: [
41+
{
42+
childId: 1,
43+
children: [
44+
{
45+
childId: 2,
46+
children: [],
47+
name: 'A',
48+
style: {},
49+
type: "Component",
50+
typeId: 2
51+
}
52+
],
53+
name: 'div',
54+
style: {},
55+
type: "HTML Element",
56+
typeId: 11
57+
},
58+
{
59+
childId: 3,
60+
children: [
61+
{
62+
childId: 4,
63+
children: [],
64+
name: 'B',
65+
style: {},
66+
type: "Component",
67+
typeId: 3
68+
}
69+
],
70+
name: 'div',
71+
style: {},
72+
type: "HTML Element",
73+
typeId: 11
74+
}
75+
],
76+
isPage: true
77+
},
78+
{
79+
id: 2,
80+
nextChildId: 1,
81+
name: 'A',
82+
style: {},
83+
code: '',
84+
children: [],
85+
isPage: false
86+
},
87+
{
88+
id: 3,
89+
nextChildId: 1,
90+
name: 'B',
91+
style: {},
92+
code: '',
93+
children: [],
94+
isPage: false
95+
}
96+
]
1097

1198
function Test() {
1299
const [state, dispatch] = useReducer(reducer, initialState);
100+
state.components = tester;
13101
return (
14102
<StateContext.Provider value={[state, dispatch]} >
15-
<TreeChart />
103+
<TreeChart data={state.components} />
16104
</StateContext.Provider>
17105
);
18106
}
19107

20108
test('Test the tree functionality', function () {
21109
render(<Test/>);
22110

23-
screen.getByRole('');
24-
25-
{/*TEST 'ADD COMPONENT TO PAGE' */}
26-
27-
{/* TEST 'ADD COMPONENT TO ANOTHER COMPONENT'
28-
xdescribe('ADD COMPONENT TO ANOTHER COMPONENT', () => {
29-
it('should add child component to top-level component', () => {
30-
31-
})
32-
})
33-
34-
TEST 'ADD A HTML ELEMENT TO A PAGE'
35-
xdescribe('ADD CHILD TO COMPONENT', () => {
36-
it('should add child component to top-level component', () => {
37-
38-
})
39-
})
40-
41-
TEST 'ADD A HTML ELEMENT TO A COMPONENT'
42-
xdescribe('', () => {
43-
it('', () => {
44-
45-
})
46-
}) */}
111+
screen.getByText('index');
112+
screen.getByText('A');
113+
screen.getByText('B');
47114

48115
})

‎app/src/tree/TreeChart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ function TreeChart({ data }) {
8181
if (data !== previouslyRenderedData) {
8282
enteringAndUpdatingLinks
8383
.attr('stroke-dashoffset', function() {
84+
console.log('this', this);
8485
return this.getTotalLength();
8586
})
8687
.attr('stroke-dashoffset', 0);
@@ -117,6 +118,7 @@ function TreeChart({ data }) {
117118
display: 'flex',
118119
justifyContent: 'center'
119120
};
121+
120122
return (
121123
// <div theme={theme} style={{ backgroundColor: 'black' }}>
122124
<div ref={wrapperRef} style={wrapperStyles}>

0 commit comments

Comments
 (0)