Skip to content

Commit bb2b6d1

Browse files
atvanekatvanek
authored
Merge pull request #22 from oslabs-beta/test-coverage
Test coverage
2 parents f33a813 + 3ecc74c commit bb2b6d1

File tree

11 files changed

+310
-141
lines changed

11 files changed

+310
-141
lines changed

‎__tests__/BottomTabs.test.tsx

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33
import '@testing-library/jest-dom';
4-
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
4+
import {
5+
render,
6+
screen,
7+
fireEvent,
8+
waitFor,
9+
within
10+
} from '@testing-library/react';
511
import BottomTabs from '../app/src/components/bottom/BottomTabs';
612
import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
713
import store from '../app/src/redux/store';
814
import ComponentPanel from '../app/src/components/right/ComponentPanel';
915
import HTMLPanel from '../app/src/components/left/HTMLPanel';
1016
import StateManager from '../app/src/components/StateManagement/StateManagement';
17+
import CustomizationPanel from '../app/src/containers/CustomizationPanel';
18+
import { BrowserRouter } from 'react-router-dom';
19+
import DragDropPanel from '../app/src/components/left/DragDropPanel';
20+
import MainContainer from '../app/src/containers/MainContainer';
21+
import { DndProvider } from 'react-dnd';
22+
import { HTML5Backend } from 'react-dnd-html5-backend';
1123

1224
describe('Bottom Panel Render Test', () => {
1325
test('should render all seven tabs', () => {
@@ -120,7 +132,7 @@ describe('Context Manager', () => {
120132
expect(screen.getAllByRole('button')).toHaveLength(3);
121133
expect(screen.getByText('Context Name')).toBeInTheDocument();
122134
});
123-
test('Create/Edit Tab should contain all buttons and input fields', () => {
135+
test('Assign Tab should contain all buttons and input fields', () => {
124136
render(
125137
<Provider store={store}>
126138
<ContextManager />
@@ -145,3 +157,48 @@ describe('State Manager', () => {
145157
expect(screen.getAllByRole('columnheader')).toHaveLength(9);
146158
});
147159
});
160+
161+
describe('Customization Panel', () => {
162+
test('Should render customization container with no elements in Canvas', () => {
163+
render(
164+
<Provider store={store}>
165+
<BrowserRouter>
166+
<CustomizationPanel />
167+
</BrowserRouter>
168+
</Provider>
169+
);
170+
expect(screen.getByText('Parent Component:')).toBeInTheDocument();
171+
expect(screen.getByText('App')).toBeInTheDocument();
172+
expect(
173+
screen.getByText(
174+
'Drag and drop an html element (or focus one) to see what happens!'
175+
)
176+
).toBeInTheDocument();
177+
});
178+
test('Should render all buttons and inputs when Canvas has element', () => {
179+
render(
180+
<Provider store={store}>
181+
<BrowserRouter>
182+
<DndProvider backend={HTML5Backend}>
183+
<DragDropPanel />
184+
<MainContainer />
185+
<CustomizationPanel />
186+
</DndProvider>
187+
</BrowserRouter>
188+
</Provider>
189+
);
190+
const drop = screen.getByTestId('drop');
191+
const div = screen.getAllByText('Div')[0];
192+
expect(drop).toBeInTheDocument();
193+
expect(div).toBeInTheDocument();
194+
fireEvent.dragStart(div);
195+
fireEvent.dragEnter(drop);
196+
fireEvent.dragOver(drop);
197+
fireEvent.drop(drop);
198+
//check if customization panel elements are rendering correctly
199+
const panel = screen.getByTestId('customization');
200+
expect(within(panel).getAllByRole('textbox')).toHaveLength(4);
201+
// check dropdowns
202+
expect(within(panel).getAllByRole('button')).toHaveLength(11);
203+
});
204+
});

‎__tests__/DragAndDrop.test.tsx

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,24 @@ import { DndProvider } from 'react-dnd';
44
import { HTML5Backend } from 'react-dnd-html5-backend';
55
import { fireEvent, render, screen } from '@testing-library/react';
66
import DragDropPanel from '../app/src/components/left/DragDropPanel';
7-
import ComponentDrag from '../app/src/components/right/ComponentDrag';
7+
import ComponentDrag from '../app/src/components/left/ComponentDrag';
88
import { Provider } from 'react-redux';
99
import store from '../app/src/redux/store';
10+
import MainContainer from '../app/src/containers/MainContainer';
11+
import { within } from '@testing-library/react';
12+
1013

1114
function TestContext(component) {
12-
return(
13-
<Provider store={store}>
14-
<DndProvider backend={HTML5Backend}>
15-
{component}
16-
</DnDProvider>
15+
return (
16+
<Provider store={store}>
17+
<DndProvider backend={HTML5Backend}>{component}</DndProvider>
1718
</Provider>
18-
)
19+
);
1920
}
2021

2122
describe('Drag and Drop Side Panel', () => {
22-
2323
test('Renders all HTML Element choices', () => {
24-
render(
25-
TestContext(<DragDropPanel/>)
26-
);
24+
render(TestContext(<DragDropPanel />));
2725
expect(screen.getByText('Div')).toBeInTheDocument();
2826
expect(screen.getByText('Img')).toBeInTheDocument();
2927
expect(screen.getByText('Form')).toBeInTheDocument();
@@ -43,22 +41,36 @@ describe('Drag and Drop Side Panel', () => {
4341
});
4442

4543
test('Renders all React Router Component choices', () => {
46-
render(
47-
TestContext(<DragDropPanel />)
48-
);
44+
render(TestContext(<DragDropPanel />));
4945

5046
expect(screen.getByText('Switch')).toBeInTheDocument();
5147
expect(screen.getByText('Route')).toBeInTheDocument();
5248
expect(screen.getByText('LinkTo')).toBeInTheDocument();
5349
});
5450

5551
test('Should render Roots Components and Reusbale components', () => {
56-
render(
57-
TestContext(<ComponentDrag/>)
58-
);
59-
52+
render(TestContext(<ComponentDrag />));
53+
6054
expect(screen.getByText('Root Components')).toBeInTheDocument();
6155
expect(screen.getByText('Reusable Components')).toBeInTheDocument();
6256
});
63-
57+
test('test drag and drop', () => {
58+
render(
59+
TestContext(
60+
<>
61+
<DragDropPanel />
62+
<MainContainer />
63+
</>
64+
)
65+
);
66+
const drop = screen.getByTestId('drop');
67+
const div = screen.getByText('Div');
68+
expect(drop).toBeInTheDocument();
69+
expect(div).toBeInTheDocument();
70+
fireEvent.dragStart(div);
71+
fireEvent.dragEnter(drop);
72+
fireEvent.dragOver(drop);
73+
fireEvent.drop(drop);
74+
expect(within(drop).getByText('div')).toBeInTheDocument();
75+
});
6476
});

‎app/src/components/ContextAPIManager/AssignTab/components/ContextTable.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,21 @@ const rows = [
4545
createData('Cupcake', 305, 3.7, 67, 4.3),
4646
createData('Gingerbread', 356, 16.0, 49, 3.9)
4747
];
48-
{/* <Table style={{ width: 400, margin: 'auto' }}></Table> */}
48+
{
49+
/* <Table style={{ width: 400, margin: 'auto' }}></Table> */
50+
}
4951
export default function ContextTable() {
5052
return (
5153
<TableContainer component={Paper}>
52-
<Table sx={{ width: '50%'}} aria-label="customized table">
54+
<Table sx={{ width: '50%' }} aria-label="customized table">
5355
<TableHead>
5456
<TableRow>
5557
<StyledTableCell>Context</StyledTableCell>
5658
<StyledTableCell align="right">Component</StyledTableCell>
5759
</TableRow>
5860
</TableHead>
5961
<TableBody>
60-
{rows.map(row => (
62+
{rows.map((row) => (
6163
<StyledTableRow key={row.name}>
6264
<StyledTableCell component="th" scope="row">
6365
{row.name}
@@ -69,4 +71,4 @@ export default function ContextTable() {
6971
</Table>
7072
</TableContainer>
7173
);
72-
}
74+
}

‎app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import TableCell, { tableCellClasses } from '@mui/material/TableCell';
1111
const StyledTableCell = styled(TableCell)(({ theme }) => ({
1212
[`&.${tableCellClasses.head}`]: {
1313
backgroundColor: theme.palette.common.black,
14-
color: theme.palette.common.white
14+
color: 'theme.palette.common.white'
1515
},
1616
[`&.${tableCellClasses.body}`]: {
1717
fontSize: 14
@@ -48,10 +48,16 @@ export default function DataTable({ target, contextInput }) {
4848
<TableBody>
4949
{target.map((data, index) => (
5050
<StyledTableRow key={index}>
51-
<StyledTableCell component="th" scope="row">
51+
<StyledTableCell
52+
style={{ color: 'black' }}
53+
component="th"
54+
scope="row"
55+
>
5256
{data.key}
5357
</StyledTableCell>
54-
<StyledTableCell align="right">{data.value}</StyledTableCell>
58+
<StyledTableCell style={{ color: 'black' }} align="right">
59+
{data.value}
60+
</StyledTableCell>
5561
</StyledTableRow>
5662
))}
5763
</TableBody>
@@ -64,4 +70,4 @@ export default function DataTable({ target, contextInput }) {
6470
</TableContainer>
6571
</>
6672
);
67-
}
73+
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import ComponentPanel from '../right/ComponentPanel'
3-
import HTMLPanel from '../left/HTMLPanel'
2+
import ComponentPanel from '../right/ComponentPanel';
3+
import HTMLPanel from '../left/HTMLPanel';
44
import { useSelector } from 'react-redux';
55
import { RootState } from '../../redux/store';
66

@@ -10,8 +10,8 @@ const CreationPanel = (props): JSX.Element => {
1010
const style = useSelector((store: RootState) => store.styleSlice);
1111
return (
1212
<div className="creation-panel" style={style.style}>
13-
<ComponentPanel isThemeLight={props.isThemeLight}/>
14-
<HTMLPanel isThemeLight={props.isThemeLight}/>
13+
<ComponentPanel isThemeLight={props.isThemeLight} />
14+
<HTMLPanel isThemeLight={props.isThemeLight} />
1515
</div>
1616
);
1717
};

‎app/src/components/right/ComponentDrag.tsx renamed to ‎app/src/components/left/ComponentDrag.tsx

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from 'react';
22
import Grid from '@mui/material/Grid';
3-
import ComponentPanelItem from './ComponentPanelItem';
3+
import ComponentPanelItem from '../right/ComponentPanelItem';
44
import makeStyles from '@mui/styles/makeStyles';
55
import { useSelector } from 'react-redux';
66
import { RootState } from '../../redux/store';
77
// The component panel section of the left panel displays all components and has the ability to add new components
88
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
99
const classes = useStyles();
10-
const state = useSelector((store:RootState) => store.appState)
11-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
10+
const state = useSelector((store: RootState) => store.appState);
11+
const isDarkMode = useSelector(
12+
(store: RootState) => store.darkMode.isDarkMode
13+
);
1214
const isFocus = (targetId: Number) => {
1315
return state.canvasFocus.componentId === targetId ? true : false;
1416
};
@@ -19,11 +21,26 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
1921
{/* Font size for 'index' in root components in .compPanelItem h3 style.css */}
2022
<div className={classes.panelWrapperList}>
2123
{/* Heading just below ADD button */}
22-
<h4 className={!isDarkMode ? classes.lightThemeFontColor : classes.darkThemeFontColor}>{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js' ? 'Pages' : 'Root Components'}</h4>
23-
<Grid container direction="row" justifyContent="center" alignItems="center">
24+
<h4
25+
className={
26+
!isDarkMode
27+
? classes.lightThemeFontColor
28+
: classes.darkThemeFontColor
29+
}
30+
>
31+
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
32+
? 'Pages'
33+
: 'Root Components'}
34+
</h4>
35+
<Grid
36+
container
37+
direction="row"
38+
justifyContent="center"
39+
alignItems="center"
40+
>
2441
{state.components
25-
.filter(comp => state.rootComponents.includes(comp.id))
26-
.map(comp => {
42+
.filter((comp) => state.rootComponents.includes(comp.id))
43+
.map((comp) => {
2744
return (
2845
<ComponentPanelItem
2946
isFocus={isFocus(comp.id)}
@@ -33,16 +50,28 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
3350
root={true}
3451
isThemeLight={isThemeLight}
3552
/>
36-
3753
);
3854
})}
3955
</Grid>
4056
{/* Display all reusable components */}
41-
<h4 className={!isDarkMode ? classes.lightThemeFontColor : classes.darkThemeFontColor}>Reusable Components</h4>
42-
<Grid container direction="row" justifyContent="center" alignItems="center">
57+
<h4
58+
className={
59+
!isDarkMode
60+
? classes.lightThemeFontColor
61+
: classes.darkThemeFontColor
62+
}
63+
>
64+
Reusable Components
65+
</h4>
66+
<Grid
67+
container
68+
direction="row"
69+
justifyContent="center"
70+
alignItems="center"
71+
>
4372
{state.components
44-
.filter(comp => !state.rootComponents.includes(comp.id))
45-
.map(comp => {
73+
.filter((comp) => !state.rootComponents.includes(comp.id))
74+
.map((comp) => {
4675
return (
4776
<ComponentPanelItem
4877
isFocus={isFocus(comp.id)}
@@ -55,7 +84,6 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
5584
);
5685
})}
5786
</Grid>
58-
5987
</div>
6088
</div>
6189
);
@@ -67,7 +95,7 @@ const useStyles = makeStyles({
6795
flexDirection: 'column',
6896
alignItems: 'center',
6997
flexGrow: 1,
70-
overflow: 'auto',
98+
overflow: 'auto'
7199
},
72100
panelWrapperList: {
73101
minHeight: '120px',
@@ -77,7 +105,7 @@ const useStyles = makeStyles({
77105
display: 'flex',
78106
flexDirection: 'column',
79107
alignItems: 'center',
80-
wordWrap: 'break-word',
108+
wordWrap: 'break-word'
81109
},
82110
lightThemeFontColor: {
83111
color: '#155084'

0 commit comments

Comments
 (0)