.gitlab/client.gitlab-ci.yml

 client:setup:
-  image: node:10
+  image: node
   stage: setup
   only:
     refs:
@@ -9,14 +9,14 @@ client:setup:
     - cd client
     - npm install
   artifacts:
-    name: "artifacts"
+    name: 'artifacts'
     untracked: true
     expire_in: 15 mins
     paths:
       - client/.npm/
       - client/node_modules/
   cache:
-    key: "$CI_COMMIT_REF_SLUG"
+    key: '$CI_COMMIT_REF_SLUG'
     paths:
       - client/.npm/
       - client/node_modules/
@@ -24,7 +24,7 @@ client:setup:
 client:linting:
   image: node:10
   stage: test
-  needs: ["client:setup"]
+  needs: ['client:setup']
   allow_failure: true
   only:
     refs:
@@ -39,7 +39,7 @@ client:linting:
 client:test:
   image: node:10
   stage: test
-  needs: ["client:setup"]
+  needs: ['client:setup']
   only:
     refs:
       - dev
@@ -56,7 +56,7 @@ client:test:
 client:report:
   image: python
   stage: report
-  needs: ["client:test"]
+  needs: ['client:test']
   only:
     refs:
       - merge_requests

client/src/__mocks__/axios.js

 export default {
   get: jest.fn().mockImplementation(),
   post: jest.fn().mockImplementation(),
+  defaults: { headers: { common: { Authorization: '' } } },
 }

client/src/actions/cities.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { getCities } from './cities'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+it('dispatches no actions when failing to get cities', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting cities failed'))
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getCities()(store.dispatch)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled()
+})

client/src/actions/communication.ts

-import Types from './types.js'
-
-export function axiosPost(
-  path: any,
-  data: any,
-  config = undefined,
-  startCB = undefined,
-  successCB = undefined,
-  errorCB = undefined
-) {
-  return {
-    type: Types.AXIOS_POST,
-    path,
-    data,
-    config,
-    startCB,
-    successCB,
-    errorCB,
-  }
-}
-
-export function axiosPostSuccess(path: any, data: any, previousAction: any) {
-  return {
-    type: Types.AXIOS_POST_SUCCESS,
-    path,
-    data,
-    previousAction,
-  }
-}
-
-export function axiosPostError(path: any, data: any, previousAction: any) {
-  return {
-    type: Types.AXIOS_POST_ERROR,
-    path,
-    data,
-    previousAction,
-  }
-}
-
-export function axiosGet(
-  path: any,
-  data: any,
-  config = undefined,
-  startCB = undefined,
-  successCB = undefined,
-  errorCB = undefined
-) {
-  return {
-    type: Types.AXIOS_GET,
-    path,
-    data,
-    config,
-    startCB,
-    successCB,
-    errorCB,
-  }
-}
-
-export function axiosGetSuccess(path: any, data: any, previousAction: any) {
-  return {
-    type: Types.AXIOS_GET_SUCCESS,
-    path,
-    data,
-    previousAction,
-  }
-}
-
-export function axiosGetError(path: any, data: any, previousAction: any) {
-  return {
-    type: Types.AXIOS_GET_ERROR,
-    path,
-    data,
-    previousAction,
-  }
-}

client/src/actions/competitions.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { CompetitionFilterParams } from './../interfaces/FilterParams'
+import { getCompetitions, setFilterParams } from './competitions'
+import Types from './types'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+it('dispatches correct actions when getting competitions', async () => {
+  const compRes: any = {
+    data: {
+      items: [
+        {
+          id: 21,
+          name: 'ggff',
+          year: 2021,
+          style_id: 1,
+          city: { name: 'city_name', id: 5 },
+        },
+        {
+          id: 22,
+          name: 'sssss',
+          year: 2021,
+          style_id: 1,
+          city: { name: 'city_name', id: 5 },
+        },
+      ],
+      count: 2,
+      total_count: 3,
+    },
+  }
+
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(compRes)
+  })
+  const expectedActions = [
+    { type: Types.SET_COMPETITIONS, payload: compRes.data.items },
+    { type: Types.SET_COMPETITIONS_TOTAL, payload: compRes.data.total_count },
+    { type: Types.SET_COMPETITIONS_COUNT, payload: compRes.data.count },
+  ]
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getCompetitions()(store.dispatch, store.getState as any)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches correct actions when setting filterParams', () => {
+  const testFilterParams: CompetitionFilterParams = {
+    page: 0,
+    pageSize: 3,
+    name: 'name',
+    cityId: 0,
+    styleId: 0,
+    year: 2000,
+  }
+  const expectedActions = [{ type: Types.SET_COMPETITIONS_FILTER_PARAMS, payload: testFilterParams }]
+  const store = mockStore({})
+  setFilterParams(testFilterParams)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches no actions when failing to get competitions', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting competitions failed'))
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getCompetitions()(store.dispatch, store.getState as any)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled()
+})

client/src/actions/presentation.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { Slide } from '../interfaces/Slide'
+import {
+  getPresentationCompetition,
+  getPresentationTeams,
+  setCurrentSlide,
+  setCurrentSlideNext,
+  setCurrentSlidePrevious,
+} from './presentation'
+import Types from './types'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+it('dispatches no actions when failing to get competitions', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting competitions failed'))
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getPresentationCompetition('0')(store.dispatch)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled()
+})
+
+it('dispatches no actions when failing to get teams', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting teams failed'))
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getPresentationTeams('0')(store.dispatch)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled()
+})
+it('dispatches correct actions when setting slide', () => {
+  const testSlide: Slide = { competition_id: 0, id: 5, order: 5, timer: 20, title: '' }
+  const expectedActions = [{ type: Types.SET_PRESENTATION_SLIDE, payload: testSlide }]
+  const store = mockStore({})
+  setCurrentSlide(testSlide)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches correct actions when setting previous slide', () => {
+  const expectedActions = [{ type: Types.SET_PRESENTATION_SLIDE_PREVIOUS }]
+  const store = mockStore({})
+  setCurrentSlidePrevious()(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches correct actions when setting next slide', () => {
+  const expectedActions = [{ type: Types.SET_PRESENTATION_SLIDE_NEXT }]
+  const store = mockStore({})
+  setCurrentSlideNext()(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})

client/src/actions/roles.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { getRoles } from './roles'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+it('dispatches no actions when failing to get roles', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting roles failed'))
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  await getRoles()(store.dispatch)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled();
+})

client/src/actions/searchUser.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { UserFilterParams } from './../interfaces/FilterParams'
+import { getSearchUsers, setFilterParams } from './searchUser'
+import Types from './types'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+it('dispatches correct actions when getting users', async () => {
+  const userRes: any = {
+    data: {
+      items: [
+        {
+          id: 21,
+          name: 'ggff',
+          email: 'email@test.com',
+          year: 2021,
+          role_id: 1,
+          city_id: 0,
+        },
+        {
+          id: 22,
+          name: 'sssss',
+          email: 'email@test.com',
+          year: 2021,
+          role_id: 1,
+          city_id: 0,
+        },
+      ],
+      count: 2,
+      total_count: 3,
+    },
+  }
+
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(userRes)
+  })
+  const expectedActions = [
+    { type: Types.SET_SEARCH_USERS, payload: userRes.data.items },
+    { type: Types.SET_SEARCH_USERS_TOTAL_COUNT, payload: userRes.data.total_count },
+    { type: Types.SET_SEARCH_USERS_COUNT, payload: userRes.data.count },
+  ]
+  const store = mockStore({ searchUsers: { filterParams: [] } })
+  await getSearchUsers()(store.dispatch, store.getState as any)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches correct actions when setting filterParams', () => {
+  const testFilterParams: UserFilterParams = {
+    page: 0,
+    pageSize: 3,
+    name: 'name',
+    cityId: 0,
+    email: 'email@test.com',
+    roleId: 0,
+  }
+  const expectedActions = [{ type: Types.SET_SEARCH_USERS_FILTER_PARAMS, payload: testFilterParams }]
+  const store = mockStore({})
+  setFilterParams(testFilterParams)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches no actions when failing to get users', async () => {
+  console.log = jest.fn()
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject(new Error('getting users failed'))
+  })
+  const store = mockStore({ searchUsers: { filterParams: [] } })
+  await getSearchUsers()(store.dispatch, store.getState as any)
+  expect(store.getActions()).toEqual([])
+  expect(console.log).toHaveBeenCalled()
+})

client/src/actions/types.ts

@@ -8,7 +8,7 @@ export default {
   SET_SEARCH_USERS_COUNT: 'SET_SEARCH_USERS_COUNT',
   SET_SEARCH_USERS_TOTAL_COUNT: 'SET_SEARCH_USERS_TOTAL_COUNT',
   SET_ERRORS: 'SET_ERRORS',
-  CLEAR_ERRORS: 'SET_ERRORS',
+  CLEAR_ERRORS: 'CLEAR_ERRORS',
   SET_UNAUTHENTICATED: 'SET_UNAUTHENTICATED',
   SET_AUTHENTICATED: 'SET_AUTHENTICATED',
   SET_COMPETITIONS: 'SET_COMPETITIONS',
@@ -23,10 +23,4 @@ export default {
   SET_CITIES: 'SET_CITIES',
   SET_CITIES_TOTAL: 'SET_CITIES_TOTAL',
   SET_CITIES_COUNT: 'SET_CITIES_COUNT',
-  AXIOS_GET: 'AXIOS_GET',
-  AXIOS_GET_SUCCESS: 'AXIOS_GET_SUCCESS',
-  AXIOS_GET_ERROR: 'AXIOS_GET_ERROR',
-  AXIOS_POST: 'AXIOS_POST',
-  AXIOS_POST_SUCCESS: 'AXIOS_POST_SUCCESS',
-  AXIOS_POST_ERROR: 'AXIOS_POST_ERROR',
 }

client/src/actions/user.test.ts

+import mockedAxios from 'axios'
+import expect from 'expect' // You can use any testing library
+import { createMemoryHistory } from 'history'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import Types from './types'
+import { loginUser, logoutUser } from './user'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+it('dispatches correct actions when logging in user', async () => {
+  const loginRes: any = {
+    data: {
+      access_token: 'TEST_ACCESS_TOKEN',
+    },
+  }
+  const userDataRes: any = {
+    data: {
+      name: 'test_name',
+    },
+  }
+  ;(mockedAxios.post as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(loginRes)
+  })
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(userDataRes)
+  })
+  const expectedActions = [
+    { type: Types.LOADING_UI },
+    { type: Types.LOADING_USER },
+    { type: Types.CLEAR_ERRORS },
+    { type: Types.SET_USER, payload: { name: 'test_name' } },
+  ]
+  const store = mockStore({})
+  const history = createMemoryHistory()
+  await loginUser({ email: 'test@email.com', password: 'testpassword' }, history)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+})
+
+it('dispatches correct action when logging out user', async () => {
+  const store = mockStore({})
+  await logoutUser()(store.dispatch)
+  expect(store.getActions()).toEqual([{ type: Types.SET_UNAUTHENTICATED }])
+})
+
+it('dispatches correct action when failing to log in user', async () => {
+  console.log = jest.fn()
+  const errorMessage = 'getting teams failed'
+  ;(mockedAxios.post as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject({ response: { data: errorMessage } })
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  const history = createMemoryHistory()
+  const expectedActions = [{ type: Types.LOADING_UI }, { type: Types.SET_ERRORS, payload: errorMessage }]
+  await loginUser({ email: 'test@email.com', password: 'testpassword' }, history)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+  expect(console.log).toHaveBeenCalled()
+})
+
+it('dispatches correct actions when failing to get user data', async () => {
+  console.log = jest.fn()
+  const loginRes: any = {
+    data: {
+      access_token: 'TEST_ACCESS_TOKEN',
+    },
+  }
+  ;(mockedAxios.post as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(loginRes)
+  })
+  const errorMessage = 'getting teams failed'
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.reject({ response: { data: errorMessage } })
+  })
+  const store = mockStore({ competitions: { filterParams: [] } })
+  const history = createMemoryHistory()
+  const expectedActions = [{ type: Types.LOADING_UI }, { type: Types.LOADING_USER }, { type: Types.CLEAR_ERRORS }]
+  await loginUser({ email: 'test@email.com', password: 'testpassword' }, history)(store.dispatch)
+  expect(store.getActions()).toEqual(expectedActions)
+  expect(console.log).toHaveBeenCalled()
+})

client/src/actions/user.ts

@@ -17,10 +17,10 @@ export const loginUser = (userData: AccountLoginModel, history: History) => asyn
       history.push('/admin') //redirecting to admin page after login success
     })
     .catch((err) => {
-      console.error(err)
+      console.log(err)
       dispatch({
         type: Types.SET_ERRORS,
-        payload: err.response.data,
+        payload: err && err.response && err.response.data,
       })
     })
 }
@@ -30,7 +30,6 @@ export const getUserData = () => async (dispatch: AppDispatch) => {
   await axios
     .get('/users')
     .then((res) => {
-      console.log(res.data)
       dispatch({
         type: Types.SET_USER,
         payload: res.data,

client/src/pages/admin/regions/AddRegion.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import store from '../../../store'
+import AddRegion from './AddRegion'
+
+it('renders add region', () => {
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <AddRegion />
+      </Provider>
+    </BrowserRouter>
+  )
+})

client/src/pages/admin/regions/Regions.test.tsx

+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 RegionManager from './Regions'
+
+it('renders region manager', () => {
+  const cityRes: any = {
+    data: {
+      items: [
+        {
+          id: 1,
+          name: 'Link\u00f6ping',
+        },
+        {
+          id: 2,
+          name: 'Stockholm',
+        },
+      ],
+      count: 2,
+      total_count: 3,
+    },
+  }
+
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(cityRes)
+  })
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <RegionManager />
+      </Provider>
+    </BrowserRouter>
+  )
+})

client/src/pages/admin/users/AddUser.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import store from '../../../store'
+import EditUser from './EditUser'
+
+it('renders edit user', () => {
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <EditUser user={{ id: 0, name: '', email: '', role_id: 0, city_id: 0 }} />
+      </Provider>
+    </BrowserRouter>
+  )
+})

client/src/pages/admin/users/EditUser.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import store from '../../../store'
+import AddUser from './AddUser'
+
+it('renders edit user', () => {
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <AddUser />
+      </Provider>
+    </BrowserRouter>
+  )
+})

client/src/pages/admin/users/UserManager.test.tsx

+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 UserManager from './UserManager'
+
+it('renders user manager', () => {
+  const userRes: any = {
+    data: {
+      items: [
+        {
+          id: 1,
+          name: 'user1',
+          email: 'user1@email.com',
+          role_id: 0,
+          city_id: 0,
+        },
+        {
+          id: 2,
+          name: 'Stockholm',
+          email: 'user2@email.com',
+          role_id: 0,
+          city_id: 0,
+        },
+      ],
+      count: 2,
+      total_count: 3,
+    },
+  }
+
+  ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
+    return Promise.resolve(userRes)
+  })
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <UserManager />
+      </Provider>
+    </BrowserRouter>
+  )
+})

client/src/pages/admin/users/UserManager.tsx

@@ -70,7 +70,6 @@ const UserManager: React.FC = (props: any) => {
   }, [])
 
   useEffect(() => {
-    console.log('asd')
     setEditAnchorEl(null)
     setAnchorEl(null)
   }, [users])

client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx

 import { render } from '@testing-library/react'
 import React from 'react'
-import CompetitionSettings from './CompetitionSettings'
+import ImageComponentDisplay from './ImageComponentDisplay'
 
-it('renders competition settings', () => {
-  render(<CompetitionSettings />)
+it('renders image component display', () => {
+  render(<ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, type: 0, media_id: 0 }} />)
 })

client/src/pages/presentationEditor/components/ImageComponentDisplay.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import ImageComponentDisplay from './ImageComponentDisplay'
+
+it('renders competition settings', () => {
+  render(<ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, media_id: 0, type: 2 }} />)
+})

client/src/pages/presentationEditor/components/TextComponentDisplay.test.tsx

+import { Editor } from '@tinymce/tinymce-react'
+import { mount } from 'enzyme'
+import React from 'react'
+import TextComponentDisplay from './TextComponentDisplay'
+
+it('renders text component display', () => {
+  const testText = 'TEST'
+  const container = mount(
+    <TextComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, text: testText, type: 2, font: '123123' }} />
+  )
+  expect(container.find(Editor).prop('initialValue')).toBe(testText)
+})