Skip to content

Commit 294060f

Browse files
atvanekatvanek
authored
Merge pull request #7 from oslabs-beta/adam-testing3
Adam testing3
2 parents 1e45fe9 + 3102b01 commit 294060f

File tree

9 files changed

+257
-170
lines changed

9 files changed

+257
-170
lines changed

‎__tests__/BottomTabs.test.tsx

Lines changed: 107 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,114 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33
import '@testing-library/jest-dom';
4-
import { render, screen } from '@testing-library/react';
4+
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
55
import BottomTabs from '../app/src/components/bottom/BottomTabs';
66
import store from '../app/src/redux/store';
7+
import ComponentPanel from '../app/src/components/right/ComponentPanel';
8+
import HTMLPanel from '../app/src/components/left/HTMLPanel';
79

8-
test('Bottom Panel Contains All Seven Tabs', () => {
9-
render(
10-
<Provider store={store}>
11-
<BottomTabs />
12-
</Provider>
13-
);
14-
expect(screen.getAllByRole('tab')).toHaveLength(7);
15-
expect(screen.getByText('Code Preview')).toBeInTheDocument();
16-
expect(screen.getByText('Component Tree')).toBeInTheDocument();
17-
expect(screen.getByText('Creation Panel')).toBeInTheDocument();
18-
expect(screen.getByText('Customization')).toBeInTheDocument();
19-
expect(screen.getByText('CSS Editor')).toBeInTheDocument();
20-
expect(screen.getByText('Context Manager')).toBeInTheDocument();
21-
expect(screen.getByText('State Manager')).toBeInTheDocument();
10+
describe('Bottom Panel Render Test', () => {
11+
test('should render all seven tabs', () => {
12+
render(
13+
<Provider store={store}>
14+
<BottomTabs />
15+
</Provider>
16+
);
17+
expect(screen.getAllByRole('tab')).toHaveLength(7);
18+
expect(screen.getByText('Code Preview')).toBeInTheDocument();
19+
expect(screen.getByText('Component Tree')).toBeInTheDocument();
20+
expect(screen.getByText('Creation Panel')).toBeInTheDocument();
21+
expect(screen.getByText('Customization')).toBeInTheDocument();
22+
expect(screen.getByText('CSS Editor')).toBeInTheDocument();
23+
expect(screen.getByText('Context Manager')).toBeInTheDocument();
24+
expect(screen.getByText('State Manager')).toBeInTheDocument();
25+
});
26+
});
27+
28+
describe('invalid input test', () => {
29+
test('New Component should display correct warning on empty input', async () => {
30+
render(
31+
<Provider store={store}>
32+
<ComponentPanel isThemeLight={null} />
33+
</Provider>
34+
);
35+
36+
fireEvent.click(screen.getByText('Create'));
37+
38+
await waitFor(() => {
39+
expect(
40+
screen.getByText('Component name cannot be blank.')
41+
).toBeInTheDocument();
42+
});
43+
});
44+
45+
test('New Component should display correct warning when input contains symbols', async () => {
46+
render(
47+
<Provider store={store}>
48+
<ComponentPanel isThemeLight={null} />
49+
</Provider>
50+
);
51+
52+
fireEvent.change(screen.getByLabelText('Name:'), {
53+
target: {
54+
value: '!@#'
55+
}
56+
});
57+
58+
fireEvent.click(screen.getByText('Create'));
59+
60+
await waitFor(() => {
61+
expect(
62+
screen.getByText('Component name must start with a letter.')
63+
).toBeInTheDocument();
64+
});
65+
});
66+
67+
test('html tag should display error if input is empty', async () => {
68+
render(
69+
<Provider store={store}>
70+
<HTMLPanel isThemeLight={null} />
71+
</Provider>
72+
);
73+
74+
fireEvent.click(screen.getByText('Add Element'));
75+
76+
await waitFor(() => {
77+
expect(screen.getAllByText('* Input cannot be blank. *')).toHaveLength(2);
78+
});
79+
});
80+
81+
test('element name should display error if input starts with symbol', async () => {
82+
render(
83+
<Provider store={store}>
84+
<HTMLPanel isThemeLight={null} />
85+
</Provider>
86+
);
87+
88+
fireEvent.change(screen.getByLabelText('Element Name:'), {
89+
target: {
90+
value: '!@#'
91+
}
92+
});
93+
94+
fireEvent.change(screen.getByLabelText('Tag:'), {
95+
target: {
96+
value: '!@#'
97+
}
98+
});
99+
100+
fireEvent.click(screen.getByText('Add Element'));
101+
102+
await waitFor(() => {
103+
expect(
104+
screen.getAllByText('* Input must start with a letter. *')
105+
).toHaveLength(2);
106+
});
107+
});
108+
109+
//test for edge cases
110+
//trigger an event for each input
111+
//value being empty string
112+
//grab error message
113+
//check if it matches what is expected
22114
});

‎__tests__/HTMLPanel.test.tsx

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

‎__tests__/componentReducer.test.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ 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';
44

5-
describe('Testing componentReducer functionality', () => {
5+
describe('componentReducer Test', () => {
66
let state: State = initialState;
77

88
// TEST 'ADD COMPONENT'
@@ -30,7 +30,7 @@ describe('Testing componentReducer functionality', () => {
3030
});
3131

3232
// TEST 'ADD COMPONENT' with new root
33-
describe('addComponent reducer', () => {
33+
describe('addComponent', () => {
3434
it('should add new reuseable component to state as the new root', () => {
3535
const action: Action = {
3636
type: 'appState/addComponent',
@@ -56,7 +56,7 @@ describe('Testing componentReducer functionality', () => {
5656
});
5757

5858
// TEST 'ADD CHILD'
59-
describe('addChild reducer', () => {
59+
describe('addChild', () => {
6060
it('should add child component and separator to top-level component', () => {
6161
const action: Action = {
6262
type: 'appState/addChild',
@@ -88,7 +88,7 @@ describe('Testing componentReducer functionality', () => {
8888
});
8989

9090
// TEST 'CHANGE POSITION'
91-
describe('CHANGE POSITION reducer ', () => {
91+
describe('changePosition', () => {
9292
it('should move position of an instance', () => {
9393
const actionHtml: Action = {
9494
type: 'appState/addChild',
@@ -130,7 +130,7 @@ describe('Testing componentReducer functionality', () => {
130130
});
131131

132132
// TEST 'DELETE CHILD'
133-
describe('DELETE CHILD reducer', () => {
133+
describe('deleteChild', () => {
134134
it('should delete child of focused top-level component', () => {
135135
// canvas still focused on childId: 2, which is an HTML element
136136
const action: Action = {
@@ -159,7 +159,7 @@ describe('Testing componentReducer functionality', () => {
159159
});
160160

161161
// TEST 'CHANGE FOCUS'
162-
describe('CHANGE FOCUS reducer', () => {
162+
describe('changeFocus', () => {
163163
it('should change focus to specified component', () => {
164164
const action: Action = {
165165
type: 'appState/changeFocus',
@@ -175,7 +175,7 @@ describe('Testing componentReducer functionality', () => {
175175
});
176176

177177
// TEST 'UPDATE CSS'
178-
describe('updateCss reducer', () => {
178+
describe('updateCss', () => {
179179
it('should add style to focused component', () => {
180180
const action: Action = {
181181
type: 'appState/updateCss',
@@ -200,7 +200,7 @@ describe('Testing componentReducer functionality', () => {
200200
});
201201

202202
// TEST 'UPDATE PROJECT NAME'
203-
describe('updateProjectName reducer', () => {
203+
describe('updateProjectName', () => {
204204
it('should update project with specified name', () => {
205205
const action: Action = {
206206
type: 'appState/updateProjectName',
@@ -213,7 +213,7 @@ describe('Testing componentReducer functionality', () => {
213213
});
214214

215215
// TEST 'CHANGE PROJECT TYPE'
216-
describe('changeProjectType reducer', () => {
216+
describe('changeProjectType', () => {
217217
it('should change project type to specified type', () => {
218218
const action: Action = {
219219
type: 'appState/changeProjectType',
@@ -230,7 +230,7 @@ describe('Testing componentReducer functionality', () => {
230230
});
231231

232232
// TEST 'UNDO'
233-
xdescribe('undo reducer', () => {
233+
xdescribe('undo', () => {
234234
it('should remove the last element from the past array and push it to the future array', () => {
235235
const focusIndex = state.canvasFocus.componentId - 1;
236236
state.components[focusIndex].past = [];
@@ -268,7 +268,7 @@ describe('Testing componentReducer functionality', () => {
268268
});
269269
});
270270
// TEST 'REDO'
271-
xdescribe('redo reducer', () => {
271+
xdescribe('redo', () => {
272272
it('should remove the last element from the future array and push it to the past array', () => {
273273
const focusIndex = state.canvasFocus.componentId - 1;
274274
const actionRedo: Action = {
@@ -281,7 +281,7 @@ describe('Testing componentReducer functionality', () => {
281281
});
282282
});
283283
// TEST 'RESET STATE'
284-
describe('resetState reducer', () => {
284+
describe('resetState', () => {
285285
it('should reset project to initial state', () => {
286286
const action: Action = {
287287
type: 'appState/resetState',

‎__tests__/contextReducer.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import subject from '../app/src/redux/reducers/slice/contextReducer';
22

3-
describe('Context Reducer', () => {
3+
describe('contextReducer test', () => {
44
let state;
55

66
beforeEach(() => {
@@ -21,7 +21,7 @@ describe('Context Reducer', () => {
2121
});
2222
});
2323

24-
describe('context/addContext', () => {
24+
describe('addContext', () => {
2525
const action = {
2626
type: 'context/addContext',
2727
payload: {
@@ -79,7 +79,7 @@ describe('Context Reducer', () => {
7979
// });
8080
// });
8181

82-
describe('context/addContextValues', () => {
82+
describe('addContextValues', () => {
8383
beforeEach(() => {
8484
state = {
8585
allContext: [
@@ -115,7 +115,7 @@ describe('Context Reducer', () => {
115115
});
116116
});
117117

118-
describe('context/deleteContext', () => {
118+
describe('deleteContext', () => {
119119
let action;
120120
beforeEach(() => {
121121
state = {
@@ -154,7 +154,7 @@ describe('Context Reducer', () => {
154154
});
155155
});
156156

157-
describe('context/addComponentToContext', () => {
157+
describe('addComponentToContext', () => {
158158
beforeEach(() => {
159159
state = {
160160
allContext: [

‎__tests__/stateManagementReducer.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const findComponent = (components, componentId) => {
6060
return components.find((elem) => elem.id === componentId);
6161
};
6262

63-
describe('Testing componentReducer functionality for stateManagement tab', () => {
63+
describe('stateManagementReducer test', () => {
6464
// TEST 'ADD STATE'
6565
describe('addState', () => {
6666
// setting canvas focus to root component (App)

‎__tests__/tree.test.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,18 @@ state.components = [
9696
];
9797

9898
// renders a tree of the components in tester
99-
test('Test the tree functionality', () => {
100-
render(
101-
<Provider store={store}>
102-
<TreeChart data={state.components} />
103-
</Provider>
104-
);
105-
// elements that are not separators should appear in the tree
106-
expect(screen.getByText('index')).toBeInTheDocument();
107-
expect(screen.getByText('A')).toBeInTheDocument();
108-
expect(screen.getByText('B')).toBeInTheDocument();
109-
// tree should not include separators
110-
expect(screen.queryByText('separator')).toBe(null);
99+
describe('Component Tree Render Test', () => {
100+
test('should render full component tree based on state', () => {
101+
render(
102+
<Provider store={store}>
103+
<TreeChart data={state.components} />
104+
</Provider>
105+
);
106+
// elements that are not separators should appear in the tree
107+
expect(screen.getByText('index')).toBeInTheDocument();
108+
expect(screen.getByText('A')).toBeInTheDocument();
109+
expect(screen.getByText('B')).toBeInTheDocument();
110+
// tree should not include separators
111+
expect(screen.queryByText('separator')).toBe(null);
112+
});
111113
});

0 commit comments

Comments
 (0)