Skip to content

Commit 200d895

Browse files
atvanekrachelk585MatteoDitersophia-bui
committed
Tests
Co-authored-by: rachelk585 <[email protected]> Co-authored-by: Matteo <[email protected]> Co-authored-by: Sophia Bui <[email protected]>
1 parent 5ab6d67 commit 200d895

File tree

8 files changed

+182
-115
lines changed

8 files changed

+182
-115
lines changed

‎__tests__/BottomTabs.test.tsx

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
import React, { useReducer } from 'react';
2+
import { Provider } from 'react-redux';
23
import '@testing-library/jest-dom';
34
import { render, screen } from '@testing-library/react';
4-
55
import BottomTabs from '../app/src/components/bottom/BottomTabs';
6-
import StateContext from '../app/src/context/context'; //does not exist
7-
import initialState from '../app/src/context/initialState'; //does not exist
8-
import reducer from '../app/src/reducers/componentReducer'; //does not exist
9-
function Test() {
10-
const [state, dispatch] = useReducer(reducer, initialState);
11-
return (
12-
<StateContext.Provider value={[state, dispatch]}>
6+
import store from '../app/src/redux/store';
7+
8+
test('Bottom Panel Contains All Seven Tabs', () => {
9+
render(
10+
<Provider store={store}>
1311
<BottomTabs />
14-
</StateContext.Provider>
12+
</Provider>
1513
);
16-
}
17-
xtest('Bottom Panel Contains Two Tabs: Code Preview and Component Tree', () => {
18-
render(<Test />);
1914
expect(screen.getAllByRole('tab')).toHaveLength(7);
2015
expect(screen.getByText('Code Preview')).toBeInTheDocument();
2116
expect(screen.getByText('Component Tree')).toBeInTheDocument();
2217
expect(screen.getByText('Creation Panel')).toBeInTheDocument();
2318
expect(screen.getByText('Customization')).toBeInTheDocument();
2419
expect(screen.getByText('CSS Editor')).toBeInTheDocument();
25-
expect(screen.getByText('Code Preview')).toBeInTheDocument();
26-
expect(screen.getByText('Component Tree')).toBeInTheDocument();
2720
expect(screen.getByText('Context Manager')).toBeInTheDocument();
2821
expect(screen.getByText('State Manager')).toBeInTheDocument();
2922
});

‎__tests__/componentReducer.test.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import reducer from '../app/src/redux/reducers/slice/appStateSlice'; //does not exist
1+
import reducer from '../app/src/redux/reducers/slice/appStateSlice';
22
import { State, Action } from '../app/src/interfaces/Interfaces';
33

4-
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice'; //does not exist
4+
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
55
import { iterate } from 'localforage';
66
import { ConstructionOutlined } from '@mui/icons-material';
77

@@ -116,10 +116,7 @@ describe('Testing componentReducer functionality', () => {
116116
}
117117
};
118118

119-
console.log('state.components', state.components);
120119
state = reducer(state, actionChangePos);
121-
console.log('state.canvasfocus after reducer', state.canvasFocus);
122-
console.log('state.components', state.components);
123120
const changeParent = state.components.find(
124121
(comp) => comp.id === state.canvasFocus.componentId
125122
);
@@ -236,7 +233,7 @@ describe('Testing componentReducer functionality', () => {
236233
});
237234

238235
// TEST 'UNDO'
239-
describe('undo reducer', () => {
236+
xdescribe('undo reducer', () => {
240237
it('should remove the last element from the past array and push it to the future array', () => {
241238
const focusIndex = state.canvasFocus.componentId - 1;
242239
state.components[focusIndex].past = [];
@@ -274,7 +271,7 @@ describe('Testing componentReducer functionality', () => {
274271
});
275272
});
276273
// TEST 'REDO'
277-
describe('redo reducer', () => {
274+
xdescribe('redo reducer', () => {
278275
it('should remove the last element from the future array and push it to the past array', () => {
279276
const focusIndex = state.canvasFocus.componentId - 1;
280277
const actionRedo: Action = {

‎__tests__/enzyme.test.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,22 @@ configure({ adapter: new Adapter() });
3131
/* 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 */
3232

3333
xdescribe('Test the CanvasContainer component', () => {
34-
const target = shallow(<CanvasContainer />);
34+
const target = shallow(
35+
<Provider store={store}>
36+
<CanvasContainer />
37+
</Provider>
38+
);
3539
it('Matches snapshot', () => {
3640
expect(target).toMatchSnapshot();
3741
});
3842
// test if Canvas component is rendered
39-
it('Contains Canvas component', () => {
40-
expect(target.contains(<Canvas />)).toBe(true);
41-
});
43+
// it('Contains Canvas component', () => {
44+
// expect(
45+
// target.contains(
46+
// <Canvas />
47+
// )
48+
// ).toBe(true);
49+
// });
4250
});
4351

4452
xdescribe('Test the MainContainer component', () => {

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 82 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState} from 'react';
1+
import React, { useState } from 'react';
22
import makeStyles from '@mui/styles/makeStyles';
33
import Tabs from '@mui/material/Tabs';
44
import Tab from '@mui/material/Tab';
@@ -17,11 +17,10 @@ import Arrow from '../main/Arrow';
1717
import { useDispatch, useSelector } from 'react-redux';
1818
import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
1919

20-
2120
const BottomTabs = (props): JSX.Element => {
2221
// state that controls which tab the user is on
2322
const dispatch = useDispatch();
24-
const { state, contextParam, style, } = useSelector((store) => ({
23+
const { state, contextParam, style } = useSelector((store) => ({
2524
state: store.appState,
2625
contextParam: store.contextSlice,
2726
style: store.styleSlice,
@@ -37,13 +36,13 @@ const BottomTabs = (props): JSX.Element => {
3736
};
3837
// Allows users to toggle project between "next.js" and "Classic React"
3938
// When a user changes the project type, the code of all components is rerendered
40-
const handleProjectChange = event => {
39+
const handleProjectChange = (event) => {
4140
const projectType = event.target.value;
42-
dispatch(changeProjectType({ projectType, contextParam }))
41+
dispatch(changeProjectType({ projectType, contextParam }));
4342
};
4443
const { components, HTMLTypes } = state;
4544

46-
const changeTheme = e => {
45+
const changeTheme = (e) => {
4746
setTheme(e.target.value);
4847
};
4948

@@ -55,40 +54,100 @@ const BottomTabs = (props): JSX.Element => {
5554
className={`${classes.root} ${classes.rootLight}`}
5655
style={{ backgroundColor: '#003366' }}
5756
>
58-
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
59-
<Tabs value={tab} onChange={handleChange} classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }} variant="scrollable" scrollButtons="auto" >
60-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Creation Panel" />
61-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Customization" />
62-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="CSS Editor" />
63-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Code Preview" />
64-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Component Tree" />
65-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="Context Manager" />
66-
<Tab disableRipple classes={{ root: classes.tabRoot, selected: classes.tabSelected }} label="State Manager" />
57+
<Box
58+
display="flex"
59+
justifyContent="space-between"
60+
alignItems="center"
61+
paddingBottom="10px"
62+
paddingRight="10px"
63+
>
64+
<Tabs
65+
value={tab}
66+
onChange={handleChange}
67+
classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
68+
variant="scrollable"
69+
scrollButtons="auto"
70+
>
71+
<Tab
72+
disableRipple
73+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
74+
label="Creation Panel"
75+
/>
76+
<Tab
77+
disableRipple
78+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
79+
label="Customization"
80+
/>
81+
<Tab
82+
disableRipple
83+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
84+
label="CSS Editor"
85+
/>
86+
<Tab
87+
disableRipple
88+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
89+
label="Code Preview"
90+
/>
91+
<Tab
92+
disableRipple
93+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
94+
label="Component Tree"
95+
/>
96+
<Tab
97+
disableRipple
98+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
99+
label="Context Manager"
100+
/>
101+
<Tab
102+
disableRipple
103+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
104+
label="State Manager"
105+
/>
67106
</Tabs>
68107
<div className={classes.projectTypeWrapper}>
69108
<FormControl size="small">
70-
<Select variant="outlined" labelId="project-type-label" id="demo-simple-select" className={classes.projectSelector} value={state.projectType} onChange={handleProjectChange} MenuProps={{ disablePortal: true }}>
71-
<MenuItem style={{ color: 'black' }} value={'Classic React'}>Classic React</MenuItem>
72-
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>Gatsby.js</MenuItem>
73-
<MenuItem style={{ color: 'black' }} value={'Next.js'}>Next.js</MenuItem>
109+
<Select
110+
variant="outlined"
111+
labelId="project-type-label"
112+
id="demo-simple-select"
113+
className={classes.projectSelector}
114+
value={state.projectType}
115+
onChange={handleProjectChange}
116+
MenuProps={{ disablePortal: true }}
117+
>
118+
<MenuItem style={{ color: 'black' }} value={'Classic React'}>
119+
Classic React
120+
</MenuItem>
121+
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>
122+
Gatsby.js
123+
</MenuItem>
124+
<MenuItem style={{ color: 'black' }} value={'Next.js'}>
125+
Next.js
126+
</MenuItem>
74127
</Select>
75128
</FormControl>
76129
</div>
77130
</Box>
78-
<div className='tab-content'>
131+
<div className="tab-content">
79132
{tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
80133
{tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
81134
{tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
82135
{tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
83136
{tab === 4 && <Tree data={components} />}
84137
{tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
85-
{tab === 6 && <StateManager theme={theme} setTheme={setTheme} isThemeLight={props.isThemeLight} />}
138+
{tab === 6 && (
139+
<StateManager
140+
theme={theme}
141+
setTheme={setTheme}
142+
isThemeLight={props.isThemeLight}
143+
/>
144+
)}
86145
</div>
87146
</div>
88147
);
89148
};
90149

91-
const useStyles = makeStyles(theme => ({
150+
const useStyles = makeStyles((theme) => ({
92151
root: {
93152
flexGrow: 1,
94153
height: '100%',
@@ -155,7 +214,7 @@ const useStyles = makeStyles(theme => ({
155214
projectTypeWrapper: {
156215
marginTop: '10px',
157216
marginBotton: '10px',
158-
marginLeft: '10px',
217+
marginLeft: '10px'
159218
},
160219
projectSelector: {
161220
backgroundColor: '#0099E6',

‎app/src/containers/MainContainer.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ import DemoRender from '../components/main/DemoRender';
55
import { useSelector } from 'react-redux';
66

77
const MainContainer = (props): JSX.Element => {
8-
const {isDarkMode, style }= useSelector((store) =>({
8+
const { isDarkMode, style } = useSelector((store) => ({
99
isDarkMode: store.darkMode.isDarkMode,
10-
style: store.styleSlice,
11-
} ));
10+
style: store.styleSlice
11+
}));
1212

1313
return (
14-
<div className="main-container" style={style} >
14+
<div className="main-container" style={style}>
1515
<div className="main">
16-
<CanvasContainer isThemeLight={props.isThemeLight}/>
16+
<CanvasContainer isThemeLight={props.isThemeLight} />
1717
<DemoRender />
1818
</div>
19-
<div className='bottom-hide'>
20-
<BottomPanel isThemeLight={props.isThemeLight}/>
19+
<div className="bottom-hide">
20+
<BottomPanel isThemeLight={props.isThemeLight} />
2121
</div>
2222
</div>
2323
);

0 commit comments

Comments
 (0)