From 42fda1ff421849fe3f13b9f998893f310081f5a9 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Thu, 29 Apr 2021 13:08:05 +0200
Subject: [PATCH] Fix tests
---
client/src/pages/admin/AdminPage.tsx | 2 -
.../PresentationEditorPage.tsx | 28 ++++----
.../src/pages/presentationEditor/styled.tsx | 18 ++---
.../src/pages/views/AudienceViewPage.test.tsx | 16 ++++-
client/src/pages/views/JudgeViewPage.tsx | 2 +-
.../src/pages/views/OperatorViewPage.test.tsx | 67 ++++++++++---------
client/src/pages/views/OperatorViewPage.tsx | 54 +++++++--------
client/src/pages/views/TeamViewPage.test.tsx | 4 +-
client/src/sockets.ts | 1 -
client/src/utils/checkAuthenticationAdmin.ts | 1 -
10 files changed, 99 insertions(+), 94 deletions(-)
diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx
index c206cfdd..1b543083 100644
--- a/client/src/pages/admin/AdminPage.tsx
+++ b/client/src/pages/admin/AdminPage.tsx
@@ -16,7 +16,6 @@ import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import LocationCityIcon from '@material-ui/icons/LocationCity'
import PeopleIcon from '@material-ui/icons/People'
import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan'
-import axios from 'axios'
import React, { useEffect } from 'react'
import { Link, Route, Switch, useRouteMatch } from 'react-router-dom'
import { getCities } from '../../actions/cities'
@@ -74,7 +73,6 @@ const AdminView: React.FC = () => {
dispatch(getRoles())
dispatch(getTypes())
dispatch(getStatistics())
- axios.get('/api/competitions/1/codes').then((res) => console.log(res.data.items))
}, [])
const menuAdminItems = [
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 6d9bc119..886f8d19 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -1,4 +1,4 @@
-import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
+import { Button, CircularProgress, Divider, Menu, MenuItem } from '@material-ui/core'
import CssBaseline from '@material-ui/core/CssBaseline'
import ListItemText from '@material-ui/core/ListItemText'
import AddOutlinedIcon from '@material-ui/icons/AddOutlined'
@@ -17,21 +17,21 @@ import SlideDisplay from './components/SlideDisplay'
import {
AppBarEditor,
CenteredSpinnerContainer,
+ CompetitionName,
+ FillLeftContainer,
+ FillRightContainer,
HomeIcon,
LeftDrawer,
- RightDrawer,
+ PositionBottom,
PresentationEditorContainer,
+ RightDrawer,
+ RightPanelScroll,
SlideList,
SlideListItem,
ToolBarContainer,
+ ToolbarMargin,
ViewButton,
ViewButtonGroup,
- ToolbarMargin,
- FillLeftContainer,
- PositionBottom,
- FillRightContainer,
- CompetitionName,
- RightPanelScroll,
} from './styled'
const initialState = {
@@ -113,7 +113,7 @@ const PresentationEditorPage: React.FC = () => {
return (
<PresentationEditorContainer>
<CssBaseline />
- <AppBarEditor leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth} position="fixed">
+ <AppBarEditor $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={rightDrawerWidth} position="fixed">
<ToolBarContainer>
<Button component={Link} to="/admin/tävlingshanterare" style={{ padding: 0 }}>
<HomeIcon src="/t8.png" />
@@ -142,8 +142,8 @@ const PresentationEditorPage: React.FC = () => {
</ViewButtonGroup>
</ToolBarContainer>
</AppBarEditor>
- <LeftDrawer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined} variant="permanent" anchor="left">
- <FillLeftContainer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined}>
+ <LeftDrawer $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={undefined} variant="permanent" anchor="left">
+ <FillLeftContainer $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={undefined}>
<ToolbarMargin />
<SlideList>
{competition.slides &&
@@ -166,13 +166,13 @@ const PresentationEditorPage: React.FC = () => {
<SlideListItem divider button onClick={() => createNewSlide()}>
<ListItemText primary="Ny sida" />
<AddOutlinedIcon />
- </SlideListItem>
+ </SlideListItem>
</PositionBottom>
</FillLeftContainer>
</LeftDrawer>
<ToolbarMargin />
- <RightDrawer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right">
- <FillRightContainer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth}>
+ <RightDrawer $leftDrawerWidth={undefined} $rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right">
+ <FillRightContainer $leftDrawerWidth={undefined} $rightDrawerWidth={rightDrawerWidth}>
<RightPanelScroll>
{!competitionLoading ? (
<SettingsPanel />
diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
index c0205409..4f830687 100644
--- a/client/src/pages/presentationEditor/styled.tsx
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -6,8 +6,8 @@ interface ViewButtonProps {
}
interface DrawerSizeProps {
- leftDrawerWidth: number | undefined
- rightDrawerWidth: number | undefined
+ $leftDrawerWidth: number | undefined
+ $rightDrawerWidth: number | undefined
}
const AppBarHeight = 64
@@ -66,22 +66,22 @@ export const HomeIcon = styled.img`
`
export const LeftDrawer = styled(Drawer)<DrawerSizeProps>`
- width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+ width: ${(props) => (props ? props.$leftDrawerWidth : 0)}px;
flex-shrink: 0;
position: relative;
z-index: 1;
`
export const RightDrawer = styled(Drawer)<DrawerSizeProps>`
- width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+ width: ${(props) => (props ? props.$rightDrawerWidth : 0)}px;
flex-shrink: 0;
`
export const AppBarEditor = styled(AppBar)<DrawerSizeProps>`
- width: calc(100% - ${(props) => (props ? props.rightDrawerWidth : 0)}px);
+ width: calc(100% - ${(props) => (props ? props.$rightDrawerWidth : 0)}px);
left: 0;
- margin-left: leftDrawerWidth;
- margin-right: rightDrawerWidth;
+ margin-left: $leftDrawerWidth;
+ margin-right: $rightDrawerWidth;
`
// Necessary for content to be below app bar
@@ -90,13 +90,13 @@ export const ToolbarMargin = styled.div`
`
export const FillLeftContainer = styled.div<DrawerSizeProps>`
- width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+ width: ${(props) => (props ? props.$leftDrawerWidth : 0)}px;
height: calc(100% - ${SlideListHeight}px);
overflow: hidden;
`
export const FillRightContainer = styled.div<DrawerSizeProps>`
- width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+ width: ${(props) => (props ? props.$rightDrawerWidth : 0)}px;
height: 100%;
overflow-y: auto;
background: #e9e9e9;
diff --git a/client/src/pages/views/AudienceViewPage.test.tsx b/client/src/pages/views/AudienceViewPage.test.tsx
index d00d4277..be17ab74 100644
--- a/client/src/pages/views/AudienceViewPage.test.tsx
+++ b/client/src/pages/views/AudienceViewPage.test.tsx
@@ -1,13 +1,23 @@
import { render } from '@testing-library/react'
+import mockedAxios from 'axios'
import React from 'react'
import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
import store from '../../store'
import AudienceViewPage from './AudienceViewPage'
it('renders audience view page', () => {
+ const typeRes: any = {
+ data: { id: 5, slides: [{ id: 2 }] },
+ }
+ ;(mockedAxios.get as jest.Mock).mockImplementation(() => {
+ return Promise.resolve(typeRes)
+ })
render(
- <Provider store={store}>
- <AudienceViewPage />
- </Provider>
+ <BrowserRouter>
+ <Provider store={store}>
+ <AudienceViewPage />
+ </Provider>
+ </BrowserRouter>
)
})
diff --git a/client/src/pages/views/JudgeViewPage.tsx b/client/src/pages/views/JudgeViewPage.tsx
index c6e1a79d..81f70edb 100644
--- a/client/src/pages/views/JudgeViewPage.tsx
+++ b/client/src/pages/views/JudgeViewPage.tsx
@@ -57,7 +57,7 @@ const JudgeViewPage: React.FC = () => {
}
useEffect(() => {
socketConnect()
- dispatch(getPresentationCompetition(competitionId.toString()))
+ dispatch(getPresentationCompetition(competitionId))
}, [])
return (
diff --git a/client/src/pages/views/OperatorViewPage.test.tsx b/client/src/pages/views/OperatorViewPage.test.tsx
index e658fe3b..3259fcfc 100644
--- a/client/src/pages/views/OperatorViewPage.test.tsx
+++ b/client/src/pages/views/OperatorViewPage.test.tsx
@@ -1,43 +1,46 @@
import { render } from '@testing-library/react'
import mockedAxios from 'axios'
import React from 'react'
+import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import store from '../../store'
import OperatorViewPage from './OperatorViewPage'
-it('renders presenter view page', () => {
- const compRes: any = {
- data: {
- slides: [{ id: 0, title: '' }],
- },
- }
- const teamsRes: any = {
- data: {
- items: [
- {
- id: 1,
- name: 'team1',
- },
- {
- id: 2,
- name: 'team2',
- },
- ],
- count: 2,
- total_count: 3,
- },
- }
+it('renders operator view page', async () => {
+ await act(async () => {
+ const compRes: any = {
+ data: {
+ slides: [{ id: 0, title: '' }],
+ },
+ }
+ const teamsRes: any = {
+ data: {
+ items: [
+ {
+ id: 1,
+ name: 'team1',
+ },
+ {
+ id: 2,
+ name: 'team2',
+ },
+ ],
+ count: 2,
+ total_count: 3,
+ },
+ }
- ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
- if (path.endsWith('/teams')) return Promise.resolve(teamsRes)
- else return Promise.resolve(compRes)
+ ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+ if (path.endsWith('/teams')) return Promise.resolve(teamsRes)
+ else return Promise.resolve(compRes)
+ })
+ render(
+ <BrowserRouter>
+ <Provider store={store}>
+ <OperatorViewPage />
+ </Provider>
+ </BrowserRouter>
+ )
})
- render(
- <BrowserRouter>
- <Provider store={store}>
- <OperatorViewPage />
- </Provider>
- </BrowserRouter>
- )
})
diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index 97e348cd..e92dc1b9 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/client/src/pages/views/OperatorViewPage.tsx
@@ -15,8 +15,6 @@ import {
Theme,
Tooltip,
Typography,
- useMediaQuery,
- useTheme,
} from '@material-ui/core'
import AssignmentIcon from '@material-ui/icons/Assignment'
import BackspaceIcon from '@material-ui/icons/Backspace'
@@ -25,10 +23,12 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import FileCopyIcon from '@material-ui/icons/FileCopy'
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
import TimerIcon from '@material-ui/icons/Timer'
+import axios from 'axios'
import React, { useEffect } from 'react'
import { useHistory, useParams } from 'react-router-dom'
import { getPresentationCompetition } from '../../actions/presentation'
import { useAppDispatch, useAppSelector } from '../../hooks'
+import { Team } from '../../interfaces/ApiModels'
import { ViewParams } from '../../interfaces/ViewParams'
import {
socketConnect,
@@ -51,8 +51,6 @@ import {
SlideCounter,
ToolBarContainer,
} from './styled'
-import axios from 'axios'
-import { Team } from '../../interfaces/ApiModels'
/**
* Description:
@@ -175,7 +173,6 @@ const OperatorViewPage: React.FC = () => {
await axios
.get(`/api/competitions/${activeId}/codes`)
.then((response) => {
- console.log(response.data)
setCodes(response.data.items)
})
.catch(console.log)
@@ -185,7 +182,6 @@ const OperatorViewPage: React.FC = () => {
await axios
.get(`/api/competitions/${activeId}/teams`)
.then((response) => {
- console.log(response.data.items)
setTeams(response.data.items)
})
.catch((err) => {
@@ -197,7 +193,6 @@ const OperatorViewPage: React.FC = () => {
await axios
.get(`/api/competitions/${activeId}`)
.then((response) => {
- console.log(response.data.name)
setCompetitionName(response.data.name)
})
.catch((err) => {
@@ -247,28 +242,29 @@ const OperatorViewPage: React.FC = () => {
</DialogTitle>
<DialogContent>
{/* <DialogContentText>Här visas tävlingskoderna till den valda tävlingen.</DialogContentText> */}
- {codes.map((code) => (
- <ListItem key={code.id} style={{ display: 'flex' }}>
- <ListItemText primary={`${getTypeName(code)}: `} />
- <Typography component="div">
- <ListItemText style={{ textAlign: 'right', marginLeft: '10px' }}>
- <Box fontFamily="Monospace" fontWeight="fontWeightBold">
- {code.code}
- </Box>
- </ListItemText>
- </Typography>
- <Tooltip title="Kopiera kod" arrow>
- <Button
- margin-right="0px"
- onClick={() => {
- navigator.clipboard.writeText(code.code)
- }}
- >
- <FileCopyIcon fontSize="small" />
- </Button>
- </Tooltip>
- </ListItem>
- ))}
+ {codes &&
+ codes.map((code) => (
+ <ListItem key={code.id} style={{ display: 'flex' }}>
+ <ListItemText primary={`${getTypeName(code)}: `} />
+ <Typography component="div">
+ <ListItemText style={{ textAlign: 'right', marginLeft: '10px' }}>
+ <Box fontFamily="Monospace" fontWeight="fontWeightBold">
+ {code.code}
+ </Box>
+ </ListItemText>
+ </Typography>
+ <Tooltip title="Kopiera kod" arrow>
+ <Button
+ margin-right="0px"
+ onClick={() => {
+ navigator.clipboard.writeText(code.code)
+ }}
+ >
+ <FileCopyIcon fontSize="small" />
+ </Button>
+ </Tooltip>
+ </ListItem>
+ ))}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
diff --git a/client/src/pages/views/TeamViewPage.test.tsx b/client/src/pages/views/TeamViewPage.test.tsx
index 10574f7e..33f7014d 100644
--- a/client/src/pages/views/TeamViewPage.test.tsx
+++ b/client/src/pages/views/TeamViewPage.test.tsx
@@ -1,14 +1,14 @@
import { render } from '@testing-library/react'
+import mockedAxios from 'axios'
import React from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import store from '../../store'
import TeamViewPage from './TeamViewPage'
-import mockedAxios from 'axios'
it('renders participant view page', () => {
const res = {
- data: {},
+ data: { slides: [{ id: 5 }] },
}
;(mockedAxios.get as jest.Mock).mockImplementation(() => {
return Promise.resolve(res)
diff --git a/client/src/sockets.ts b/client/src/sockets.ts
index e5addeb8..97e0b0e3 100644
--- a/client/src/sockets.ts
+++ b/client/src/sockets.ts
@@ -21,7 +21,6 @@ let socket: SocketIOClient.Socket
export const socketConnect = () => {
if (!socket) {
const token = localStorage.competitionToken
- console.log(token)
socket = io('localhost:5000', {
transportOptions: {
polling: {
diff --git a/client/src/utils/checkAuthenticationAdmin.ts b/client/src/utils/checkAuthenticationAdmin.ts
index f8f94e2d..3565f8e3 100644
--- a/client/src/utils/checkAuthenticationAdmin.ts
+++ b/client/src/utils/checkAuthenticationAdmin.ts
@@ -9,7 +9,6 @@ const UnAuthorized = async () => {
}
export const CheckAuthenticationAdmin = async () => {
- console.log('checkAuthenticationAdmin')
const authToken = localStorage.token
if (authToken) {
const decodedToken: any = jwtDecode(authToken)
--
GitLab