Skip to content

Commit 912134b

Browse files
rachelk585rachelk585
authored
Merge pull request #2 from oslabs-beta/adam-testing-phase1
Adam testing phase1
2 parents 5d6031c + ae79907 commit 912134b

File tree

8 files changed

+194
-128
lines changed

8 files changed

+194
-128
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 & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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';
3-
4-
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice'; //does not exist
3+
import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
54
import { iterate } from 'localforage';
65
import { ConstructionOutlined } from '@mui/icons-material';
76

@@ -116,10 +115,7 @@ describe('Testing componentReducer functionality', () => {
116115
}
117116
};
118117

119-
console.log('state.components', state.components);
120118
state = reducer(state, actionChangePos);
121-
console.log('state.canvasfocus after reducer', state.canvasFocus);
122-
console.log('state.components', state.components);
123119
const changeParent = state.components.find(
124120
(comp) => comp.id === state.canvasFocus.componentId
125121
);
@@ -236,7 +232,7 @@ describe('Testing componentReducer functionality', () => {
236232
});
237233

238234
// TEST 'UNDO'
239-
describe('undo reducer', () => {
235+
xdescribe('undo reducer', () => {
240236
it('should remove the last element from the past array and push it to the future array', () => {
241237
const focusIndex = state.canvasFocus.componentId - 1;
242238
state.components[focusIndex].past = [];
@@ -274,7 +270,7 @@ describe('Testing componentReducer functionality', () => {
274270
});
275271
});
276272
// TEST 'REDO'
277-
describe('redo reducer', () => {
273+
xdescribe('redo reducer', () => {
278274
it('should remove the last element from the future array and push it to the past array', () => {
279275
const focusIndex = state.canvasFocus.componentId - 1;
280276
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: 93 additions & 34 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%',
@@ -113,9 +172,9 @@ const useStyles = makeStyles(theme => ({
113172
tabRoot: {
114173
textTransform: 'initial',
115174
minWidth: 40,
116-
fontWeight: theme.typography.fontWeightRegular,
117-
marginRight: theme.spacing(2), // JZ: updated syntax as per deprecation warning
118-
marginLeft: theme.spacing(2),
175+
// fontWeight: theme.typography.fontWeightRegular,
176+
// marginRight: theme.spacing(2), // JZ: updated syntax as per deprecation warning
177+
// marginLeft: theme.spacing(2),
119178

120179
fontFamily: [
121180
'-apple-system',
@@ -134,28 +193,28 @@ const useStyles = makeStyles(theme => ({
134193
opacity: 1
135194
},
136195
'&$tabSelected': {
137-
color: 'white',
138-
fontWeight: theme.typography.fontWeightMedium
196+
color: 'white'
197+
// fontWeight: theme.typography.fontWeightMedium
139198
},
140199
'&:focus': {
141200
color: 'white'
142201
}
143202
},
144203
tabSelected: {},
145-
typography: {
146-
padding: theme.spacing(3)
147-
},
148-
padding: {
149-
padding: `0 ${theme.spacing(2)}`
150-
},
204+
// typography: {
205+
// padding: theme.spacing(3)
206+
// // },
207+
// padding: {
208+
// padding: `0 ${theme.spacing(2)}`
209+
// },
151210
switch: {
152211
marginRight: '10px',
153212
marginTop: '2px'
154213
},
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)