Skip to content

Commit 63c5c66

Browse files
atvanekatvanek
committed
HTML Panel test working
1 parent 532155d commit 63c5c66

File tree

7 files changed

+214
-175
lines changed

7 files changed

+214
-175
lines changed

‎__tests__/HTMLPanel.test.tsx

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,49 @@ import '@testing-library/jest-dom';
33
import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
55
import { render, fireEvent, cleanup, screen } from '@testing-library/react';
6-
// import StateContext from '../app/src/context/context';
7-
// import initialState from '../app/src/context/initialState';
8-
// import reducer from '../app/src/reducers/componentReducer';
9-
import HTMLPanel from '../app/src/components/left/HTMLPanel';
6+
import DragDropPanel from '../app/src/components/left/DragDropPanel';
7+
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
8+
import { Provider } from 'react-redux';
9+
import store from '../app/src/redux/store';
10+
1011
function Test() {
11-
const [state, dispatch] = useReducer(reducer, initialState);
1212
return (
13-
<DndProvider backend={HTML5Backend}>
14-
{/* <StateContext.Provider value={[state, dispatch]}> */}
15-
<HTMLPanel />
16-
{/* </StateContext.Provider> */}
17-
</DndProvider>
13+
<Provider store={store}>
14+
<DndProvider backend={HTML5Backend}>
15+
<DragDropPanel />
16+
</DndProvider>
17+
</Provider>
1818
);
1919
}
20-
xtest('Renders HTMLPanel component properly', () => {
20+
test('Renders HTMLPanel component properly', () => {
2121
render(<Test />);
22-
expect(screen.getAllByRole('textbox')).toHaveLength(2);
22+
// expect(screen.getAllByRole('textbox')).toHaveLength(2);
2323
expect(screen.getByText('Div')).toBeInTheDocument();
24-
expect(screen.getByText('Image')).toBeInTheDocument();
24+
expect(screen.getByText('Img')).toBeInTheDocument();
2525
expect(screen.getByText('Form')).toBeInTheDocument();
26-
expect(screen.getByText('List')).toBeInTheDocument();
2726
expect(screen.getByText('Button')).toBeInTheDocument();
2827
expect(screen.getByText('Link')).toBeInTheDocument();
2928
expect(screen.getByText('Paragraph')).toBeInTheDocument();
3029
expect(screen.getByText('Header 1')).toBeInTheDocument();
3130
expect(screen.getByText('Header 2')).toBeInTheDocument();
3231
expect(screen.getByText('Span')).toBeInTheDocument();
32+
expect(screen.getByText('Input')).toBeInTheDocument();
33+
expect(screen.getByText('Label')).toBeInTheDocument();
34+
expect(screen.getByText('Ordered List')).toBeInTheDocument();
35+
expect(screen.getByText('Unordered List')).toBeInTheDocument();
36+
expect(screen.getByText('Menu')).toBeInTheDocument();
37+
expect(screen.getByText('List')).toBeInTheDocument();
3338
expect(screen.queryByText('separator')).toBe(null);
3439
});
3540

36-
xtest('Adds new custom element', () => {
37-
render(<Test />);
38-
fireEvent.change(screen.getAllByRole('textbox')[0], {
39-
target: { value: 'Testing' }
40-
});
41-
fireEvent.change(screen.getAllByRole('textbox')[1], {
42-
target: { value: 'Testing' }
43-
});
44-
fireEvent.click(screen.getByDisplayValue('Add Element'));
45-
expect(screen.getByText('Testing')).toBeInTheDocument();
46-
});
41+
// test('Adds new custom element', () => {
42+
// render(<Test />);
43+
// fireEvent.change(screen.getAllByRole('textbox')[0], {
44+
// target: { value: 'Testing' }
45+
// });
46+
// fireEvent.change(screen.getAllByRole('textbox')[1], {
47+
// target: { value: 'Testing' }
48+
// });
49+
// fireEvent.click(screen.getByDisplayValue('Add Element'));
50+
// expect(screen.getByText('Testing')).toBeInTheDocument();
51+
// });

‎__tests__/componentReducer.test.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import reducer from '../app/src/redux/reducers/slice/appStateSlice';
22
import { State, Action } from '../app/src/interfaces/Interfaces';
33
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
4-
import { iterate } from 'localforage';
5-
import { ConstructionOutlined } from '@mui/icons-material';
64

75
describe('Testing componentReducer functionality', () => {
86
let state: State = initialState;

‎__tests__/enzyme.tsx renamed to ‎__tests__/enzyme.test.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,14 @@ import LoginButton from '../app/src/components/right/LoginButton';
2323
import customizationPanel from '../app/src/containers/CustomizationPanel';
2424
import configureMockStore from 'redux-mock-store';
2525

26-
2726
const mockStore = configureMockStore();
2827
const store = mockStore({});
2928

3029
configure({ adapter: new Adapter() });
3130

3231
// /* If there is an error with unmatched snapshots because of intentionally modified codes, delete the contents in enzyme.test.tsx.snap to record new codes as blueprints */
3332

34-
xdescribe('Test the CanvasContainer component', () => {
33+
describe.skip('Test the CanvasContainer component', () => {
3534
const target = shallow(
3635
<Provider store={store}>
3736
<CanvasContainer />
@@ -42,11 +41,7 @@ xdescribe('Test the CanvasContainer component', () => {
4241
});
4342
// test if Canvas component is rendered
4443
it('Contains Canvas component', () => {
45-
expect(
46-
target.contains(
47-
<Canvas />
48-
)
49-
).toBe(true);
44+
expect(target.contains(<Canvas />)).toBe(true);
5045
});
5146
});
5247

‎__tests__/stateManagementReducer.test.js

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,60 @@
11
import reducer from '../app/src/redux/reducers/slice/appStateSlice';
2-
import state from './test_utils';
2+
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
33

44
//initializing copy of initial state to be used for test suite
5+
let state = JSON.parse(JSON.stringify(initialState));
6+
state.components = [
7+
{
8+
id: 1,
9+
name: 'App',
10+
style: {},
11+
code: "import React, { useState, useEffect, useContext} from 'react';\n\n\n\nimport C1 from './C1'\nconst App = (props) => {\n\n\n const [appState, setAppState] = useState<number | undefined>(1);\n\n return(\n <>\n<C1 id = \"1\" />\n </>\n );\n}\n\nexport default App\n",
12+
children: [
13+
{
14+
type: 'HTML Element',
15+
typeId: 1000,
16+
name: 'separator',
17+
childId: 1000,
18+
style: { border: 'none' },
19+
attributes: {},
20+
children: []
21+
},
22+
{
23+
type: 'Component',
24+
typeId: 2,
25+
name: 'C1',
26+
childId: 1,
27+
style: {},
28+
attributes: {},
29+
children: [],
30+
stateProps: [],
31+
passedInProps: []
32+
}
33+
],
34+
isPage: true,
35+
past: [[]],
36+
future: [],
37+
stateProps: [],
38+
useStateCodes: [
39+
'const [appState, setAppState] = useState<number | undefined>(1)'
40+
]
41+
},
42+
{
43+
id: 2,
44+
name: 'C1',
45+
nextChildId: 1,
46+
style: {},
47+
attributes: {},
48+
code: "import React, { useState, useEffect, useContext} from 'react';\n\n\n\n\nconst C1 = (props) => {\n\n\n\n return(\n <>\n\n </>\n );\n}\n\nexport default C1\n",
49+
children: [],
50+
isPage: false,
51+
past: [],
52+
future: [],
53+
stateProps: [],
54+
useStateCodes: [],
55+
passedInProps: []
56+
}
57+
];
558

659
const findComponent = (components, componentId) => {
760
return components.find((elem) => elem.id === componentId);
@@ -88,7 +141,6 @@ describe('Testing componentReducer functionality for stateManagement tab', () =>
88141
};
89142

90143
state = reducer(state, action2);
91-
console.log(state.components[0].stateProps);
92144

93145
describe('should handle value with type of boolean', () => {
94146
it(`state key type should be boolean`, () => {
@@ -124,7 +176,6 @@ describe('Testing componentReducer functionality for stateManagement tab', () =>
124176

125177
// setting test state
126178
state = reducer(state, action);
127-
console.log('state.components', state.components);
128179
const currComponent = findComponent(state.components, 2);
129180
const parentComponent = findComponent(state.components, 1);
130181

‎__tests__/test_utils.jsx

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

‎__tests__/tree.test.tsx

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import TreeChart from '../app/src/tree/TreeChart';
2-
import React, { useReducer } from 'react';
2+
import React from 'react';
33
import '@testing-library/jest-dom';
44
import { render, screen } from '@testing-library/react';
5-
// import StateContext from '../app/src/context/context';
6-
// import initialState from '../app/src/context/initialState';
7-
// import reducer from '../app/src/reducers/componentReducer';
5+
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
6+
import { Provider } from 'react-redux';
7+
import store from '../app/src/redux/store';
88
import 'd3';
99

10-
// tester populates the components array used for this testing suite
11-
const tester = [
10+
let state = JSON.parse(JSON.stringify(initialState));
11+
state.components = [
1212
{
1313
id: 1,
1414
name: 'index',
@@ -96,18 +96,12 @@ const tester = [
9696
];
9797

9898
// renders a tree of the components in tester
99-
// function Test() {
100-
// const [state, dispatch] = useReducer(reducer, initialState);
101-
// state.components = tester;
102-
// return (
103-
// <StateContext.Provider value={[state, dispatch]}>
104-
// <TreeChart data={state.components} />
105-
// </StateContext.Provider>
106-
// );
107-
// }
108-
109-
xtest('Test the tree functionality', () => {
110-
render(<Test />);
99+
test('Test the tree functionality', () => {
100+
render(
101+
<Provider store={store}>
102+
<TreeChart data={state.components} />
103+
</Provider>
104+
);
111105
// elements that are not separators should appear in the tree
112106
expect(screen.getByText('index')).toBeInTheDocument();
113107
expect(screen.getByText('A')).toBeInTheDocument();

0 commit comments

Comments
 (0)