Skip to content

Commit f33a813

Browse files
atvanekatvanek
authored
Merge pull request #21 from oslabs-beta/supertest-2
Supertest 2
2 parents 478e9fc + 1b17966 commit f33a813

File tree

12 files changed

+154
-54
lines changed

12 files changed

+154
-54
lines changed

‎__tests__/BottomTabs.test.tsx

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { Provider } from 'react-redux';
33
import '@testing-library/jest-dom';
44
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
55
import BottomTabs from '../app/src/components/bottom/BottomTabs';
6+
import ContextManager from '../app/src/components/ContextAPIManager/ContextManager';
67
import store from '../app/src/redux/store';
78
import ComponentPanel from '../app/src/components/right/ComponentPanel';
89
import HTMLPanel from '../app/src/components/left/HTMLPanel';
10+
import StateManager from '../app/src/components/StateManagement/StateManagement';
911

1012
describe('Bottom Panel Render Test', () => {
1113
test('should render all seven tabs', () => {
@@ -25,8 +27,8 @@ describe('Bottom Panel Render Test', () => {
2527
});
2628
});
2729

28-
describe('invalid input test', () => {
29-
test('New Component should display correct warning on empty input', async () => {
30+
describe('Creation Panel', () => {
31+
test('should invalidate empty field in New Component name', async () => {
3032
render(
3133
<Provider store={store}>
3234
<ComponentPanel isThemeLight={null} />
@@ -42,7 +44,7 @@ describe('invalid input test', () => {
4244
});
4345
});
4446

45-
test('New Component should display correct warning when input contains symbols', async () => {
47+
test('should invalidate New Component name containing symbols', async () => {
4648
render(
4749
<Provider store={store}>
4850
<ComponentPanel isThemeLight={null} />
@@ -64,7 +66,7 @@ describe('invalid input test', () => {
6466
});
6567
});
6668

67-
test('html tag should display error if input is empty', async () => {
69+
test('should invalidate empty field in HTML Tag tag', async () => {
6870
render(
6971
<Provider store={store}>
7072
<HTMLPanel isThemeLight={null} />
@@ -78,7 +80,7 @@ describe('invalid input test', () => {
7880
});
7981
});
8082

81-
test('element name should display error if input starts with symbol', async () => {
83+
test('should invalidate HTML Element name containing symbols', async () => {
8284
render(
8385
<Provider store={store}>
8486
<HTMLPanel isThemeLight={null} />
@@ -105,10 +107,41 @@ describe('invalid input test', () => {
105107
).toHaveLength(2);
106108
});
107109
});
110+
});
108111

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
112+
describe('Context Manager', () => {
113+
test('Create/Edit Tab should contain all buttons and input fields', () => {
114+
render(
115+
<Provider store={store}>
116+
<ContextManager />
117+
</Provider>
118+
);
119+
expect(screen.getAllByRole('textbox')).toHaveLength(2);
120+
expect(screen.getAllByRole('button')).toHaveLength(3);
121+
expect(screen.getByText('Context Name')).toBeInTheDocument();
122+
});
123+
test('Create/Edit Tab should contain all buttons and input fields', () => {
124+
render(
125+
<Provider store={store}>
126+
<ContextManager />
127+
</Provider>
128+
);
129+
130+
fireEvent.click(screen.getByText('Assign'));
131+
expect(screen.getByText('Contexts Consumed')).toBeInTheDocument();
132+
});
133+
});
134+
135+
describe('State Manager', () => {
136+
test('Should render all containers', () => {
137+
render(
138+
<Provider store={store}>
139+
<StateManager isThemeLight={null} />
140+
</Provider>
141+
);
142+
expect(screen.getAllByRole('heading')).toHaveLength(4);
143+
expect(screen.getAllByRole('textbox')).toHaveLength(2);
144+
expect(screen.getAllByRole('grid')).toHaveLength(3);
145+
expect(screen.getAllByRole('columnheader')).toHaveLength(9);
146+
});
114147
});

‎__tests__/DragAndDrop.test.tsx

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,25 @@ 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';
78
import { Provider } from 'react-redux';
89
import store from '../app/src/redux/store';
910

11+
function TestContext(component) {
12+
return(
13+
<Provider store={store}>
14+
<DndProvider backend={HTML5Backend}>
15+
{component}
16+
</DnDProvider>
17+
</Provider>
18+
)
19+
}
20+
1021
describe('Drag and Drop Side Panel', () => {
22+
1123
test('Renders all HTML Element choices', () => {
1224
render(
13-
<Provider store={store}>
14-
<DndProvider backend={HTML5Backend}>
15-
<DragDropPanel />
16-
</DndProvider>
17-
</Provider>
25+
TestContext(<DragDropPanel/>)
1826
);
1927
expect(screen.getByText('Div')).toBeInTheDocument();
2028
expect(screen.getByText('Img')).toBeInTheDocument();
@@ -36,27 +44,21 @@ describe('Drag and Drop Side Panel', () => {
3644

3745
test('Renders all React Router Component choices', () => {
3846
render(
39-
<Provider store={store}>
40-
<DndProvider backend={HTML5Backend}>
41-
<DragDropPanel />
42-
</DndProvider>
43-
</Provider>
47+
TestContext(<DragDropPanel />)
4448
);
4549

4650
expect(screen.getByText('Switch')).toBeInTheDocument();
4751
expect(screen.getByText('Route')).toBeInTheDocument();
4852
expect(screen.getByText('LinkTo')).toBeInTheDocument();
4953
});
5054

51-
// test('Adds new custom element', () => {
52-
// render(<Test />);
53-
// fireEvent.change(screen.getAllByRole('textbox')[0], {
54-
// target: { value: 'Testing' }
55-
// });
56-
// fireEvent.change(screen.getAllByRole('textbox')[1], {
57-
// target: { value: 'Testing' }
58-
// });
59-
// fireEvent.click(screen.getByDisplayValue('Add Element'));
60-
// expect(screen.getByText('Testing')).toBeInTheDocument();
61-
// });
55+
test('Should render Roots Components and Reusbale components', () => {
56+
render(
57+
TestContext(<ComponentDrag/>)
58+
);
59+
60+
expect(screen.getByText('Root Components')).toBeInTheDocument();
61+
expect(screen.getByText('Reusable Components')).toBeInTheDocument();
62+
});
63+
6264
});

‎__tests__/componentReducer.test.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +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 styled from '@emotion/styled';
54

65
describe('componentReducer Test', () => {
76
let state: State = initialState;

‎__tests__/signIn.test.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import SignIn from '../app/src/components/login/SignIn';
2+
import React from 'react';
3+
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
4+
import { Provider } from 'react-redux';
5+
import store from '../app/src/redux/store';
6+
import { BrowserRouter } from 'react-router-dom';
7+
import '@testing-library/jest-dom';
8+
9+
function TestSignIn() {
10+
return (
11+
<Provider store={store}>
12+
<BrowserRouter>
13+
<SignIn />
14+
</BrowserRouter>
15+
</Provider>
16+
);
17+
}
18+
19+
describe('sign in page', () => {
20+
test('should render a login input', () => {
21+
render(<TestSignIn />);
22+
expect(screen.getByTestId('username-input')).toBeInTheDocument();
23+
});
24+
test('should render a password field', () => {
25+
render(<TestSignIn />);
26+
expect(screen.getByTestId('password-input')).toBeInTheDocument();
27+
});
28+
test('should render 4 login buttons and dark mode button', () => {
29+
render(<TestSignIn />);
30+
expect(screen.getAllByRole('button')).toHaveLength(5);
31+
});
32+
test('should invalidate empty username field', () => {
33+
render(<TestSignIn />);
34+
fireEvent.click(screen.getAllByRole('button')[1]);
35+
waitFor(() => {
36+
expect(screen.getByText('No Username Input')).toBeInTheDocument();
37+
});
38+
});
39+
test('should invalidate empty password field', () => {
40+
render(<TestSignIn />);
41+
fireEvent.change(screen.getByRole('textbox'), {
42+
target: {
43+
value: 'username'
44+
}
45+
});
46+
fireEvent.click(screen.getAllByRole('button')[1]);
47+
waitFor(() => {
48+
expect(screen.getByText('No Password Input')).toBeInTheDocument();
49+
});
50+
});
51+
});

‎__tests__/userAuth.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('User authentication tests', () => {
2929
});
3030
});
3131

32-
describe('POST', () => {
32+
xdescribe('POST', () => {
3333
it('responds with status 200 and json object on valid new user signup', () => {
3434
return request(app)
3535
.post('/signup')

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React, { useContext } from 'react';
22
import { makeStyles } from '@mui/styles';
33
import Box from '@mui/material/Box';
44
import Tab from '@mui/material/Tab';

‎app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import TablePassedInProps from './TablePassedInProps';
1818
import { RootState } from '../../../../redux/store';
1919

2020
const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
21-
const { state, contextParam } = useSelector((store:RootState) => ({
21+
const { state, contextParam } = useSelector((store: RootState) => ({
2222
state: store.appState,
2323
contextParam: store.contextSlice
2424
}));
@@ -526,11 +526,11 @@ const useStyles = makeStyles((theme: Theme) => ({
526526
color: 'rgba(0,0,0,0.54)'
527527
},
528528
formControl: {
529-
margin: theme.spacing(1),
529+
margin: '8px',
530530
minWidth: 120
531531
},
532532
selectEmpty: {
533-
marginTop: theme.spacing(2)
533+
marginTop: '16px'
534534
},
535535
color: {
536536
color: '#fff'

‎app/src/components/StateManagement/StateManagement.tsx

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ const useStyles = makeStyles({
2020
});
2121

2222
const StateManager = (props): JSX.Element => {
23-
24-
const state = useSelector((store:RootState) => store.appState)
25-
const isDarkMode = useSelector((state:RootState) => state.darkMode.isDarkMode);
23+
const state = useSelector((store: RootState) => store.appState);
24+
const isDarkMode = useSelector(
25+
(state: RootState) => state.darkMode.isDarkMode
26+
);
2627

2728
const { components } = state;
2829
const classes = useStyles();
@@ -32,27 +33,37 @@ const StateManager = (props): JSX.Element => {
3233
setValue(newValue);
3334
};
3435

35-
// add hook here to access which component has been clicked
36-
// then this will re-render the dataTable
36+
// add hook here to access which component has been clicked
37+
// then this will re-render the dataTable
3738

38-
const background_Color = isDarkMode ? '#21262b' : 'white'
39+
const background_Color = isDarkMode ? '#21262b' : 'white';
3940

4041
return (
4142
<React.Fragment>
42-
<div className={classes.contextContainer} style={{backgroundColor: background_Color}}>
43+
<div
44+
className={classes.contextContainer}
45+
style={{ backgroundColor: background_Color }}
46+
>
4347
<Box sx={{ width: '100%', typography: 'body1' }}>
4448
<TabContext value={value}>
4549
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
4650
<TabList onChange={handleChange} centered={true}>
47-
<Tab label="Create/Edit" value="1"/>
48-
<Tab label="Display" value="2" />
51+
<Tab
52+
label="Create/Edit"
53+
value="1"
54+
style={{ color: '#003366' }}
55+
/>
56+
<Tab label="Display" value="2" style={{ color: '#003366' }} />
4957
</TabList>
5058
</Box>
5159
<TabPanel value="1">
52-
<CreateContainer data={components} isThemeLight={props.isThemeLight } />
60+
<CreateContainer
61+
data={components}
62+
isThemeLight={props.isThemeLight}
63+
/>
5364
</TabPanel>
5465
<TabPanel value="2">
55-
<DisplayContainer data={components} props={props.props} />
66+
<DisplayContainer data={components} props={props.props} />
5667
</TabPanel>
5768
</TabContext>
5869
</Box>
@@ -61,4 +72,4 @@ const StateManager = (props): JSX.Element => {
6172
);
6273
};
6374

64-
export default StateManager;
75+
export default StateManager;

‎app/src/components/login/SignIn.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
8080
const [username, setUsername] = useState('');
8181
const [password, setPassword] = useState('');
8282

83-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
83+
const isDarkMode = useSelector(
84+
(store: RootState) => store.darkMode.isDarkMode
85+
);
8486

8587
const [invalidUserMsg, setInvalidUserMsg] = useState('');
8688
const [invalidPassMsg, setInvalidPassMsg] = useState('');
@@ -250,6 +252,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
250252
onChange={handleChange}
251253
helperText={invalidUserMsg}
252254
error={invalidUser}
255+
data-testid="username-input"
253256
/>
254257
<TextField
255258
className={classes.root}
@@ -266,6 +269,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
266269
onChange={handleChange}
267270
helperText={invalidPassMsg}
268271
error={invalidPass}
272+
data-testid="password-input"
269273
/>
270274

271275
<Button

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"dist-linux": "electron-builder --linux",
7878
"dist-windows": "electron-builder --windows",
7979
"dist-all": "npm run prod-build && electron-builder --mac --linux --windows",
80-
"test": "NODE_ENV=test jest --verbose --detectOpenHandles --forceExit",
80+
"test": "NODE_ENV=test jest --verbose --coverage",
8181
"server": "cross-env NODE_ENV=development nodemon server/server.ts",
8282
"start": "node server/server.ts"
8383
},

‎server/routers/passport-setup.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import passport from 'passport';
2-
import passportGithub2 from 'passport-github2';
1+
const passport = require('passport');
2+
const passportGithub2 = require('passport-github2');
33
import user from '../models/Oauth-model';
44
import GoogleStrategy from 'passport-google-oauth20';
55
import config from '../../config';

‎server/server.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ app.use(
6666

6767
// V.15 Team: Github Oauth and Google Oauth works! (starts here)
6868
const passport = require('passport');
69-
import passportSetup from './routers/passport-setup';
69+
const passportSetup = require('./routers/passport-setup');
7070
const session = require('express-session');
7171
import authRoutes from './routers/auth';
7272

0 commit comments

Comments
 (0)