Integrate jest test

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    ["@babel/preset-react", {"runtime": "automatic"}],
+    "@babel/preset-typescript"
   ]
 }

.env.example

@@ -1,7 +1,7 @@
 NODE_PATH=./src
 NODE_ENV=local
 
-REACT_APP_VERSION=0.2.17
+REACT_APP_VERSION=0.2.18
 REACT_APP_SM="1"
 REACT_APP_API_SERVER_HOST=""
 REACT_APP_SERVER_HOST=""

.husky/pre-push

@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npm run test --silent -- --watchAll=false --passWithNoTests
+
 BUMP=none npm run build
-# npm run test --silent -- --watchAll=false --passWithNoTests
+
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "watchparty-frontend",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "private": true,
   "dependencies": {
     "@date-io/moment": "^2.15.0",
@@ -12,7 +12,6 @@
     "@mui/x-date-pickers": "^5.0.2",
     "@pubnub/react-chat-components": "^0.12.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
     "chalk": "^5.0.1",
@@ -48,7 +47,7 @@
     "prebuild:demo": "node ./scripts/inject-version.mjs",
     "build": "env-cmd -f .env.development.local react-scripts build",
     "build:demo": "env-cmd -f .env-demo react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest --env=jsdom",
     "eject": "react-scripts eject",
     "lint:check": "eslint src/**/*.{tsx,ts,js}",
     "lint:fix": "eslint src/**/*.{tsx,ts,js} --fix",
@@ -75,18 +74,26 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.0.3",
     "@types/pubnub": "^7.2.0",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",
+    "babel-jest": "^27.5.1",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-webpack-plugin": "^3.2.0",
     "husky": "^8.0.1",
+    "jest": "^27.5.1",
     "prettier": "2.7.1",
+    "react-test-renderer": "^18.2.0",
     "red5pro-webrtc-sdk": "^10.3.0",
     "replace-in-file": "^6.3.5",
     "tss-react": "^3.7.1"

src/components/HostAPartyFlow/StartParty/StartParty.tsx

@@ -69,11 +69,7 @@ const StartParty = (props: IStartPartyProps) => {
           <SetupPartyForm onActions={onActions} data={data} setData={setData} account={account} />
         </Box>
       )}
-      <img
-        className={classes.image}
-        alt="Start Party Main Image"
-        src={require('../../../assets/images/BoxMainImage.png')}
-      ></img>
+      <img className={classes.image} alt="Start Party Main Image" src={'../../../assets/images/BoxMainImage.png'}></img>
     </Box>
   )
 }

src/components/HostAPartyFlow/ViewEvents/ViewEvents.tsx

@@ -45,7 +45,7 @@ const ViewEvents = (props: IViewEventsProps) => {
     <Box
       className={classes.root}
       sx={{
-        backgroundImage: !error ? `url(${require('../../../assets/images/BoxMainImage.png')})` : '',
+        backgroundImage: !error ? `url('../../../assets/images/BoxMainImage.png')` : '',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: '40% 100%',
       }}

src/components/VIPSubscriber/VIPSubscriber.tsx

@@ -30,7 +30,7 @@ const VIPSubscriber = (props: VIPSubscriber) => {
           width="100%"
           height="100%"
           alt="Logo Placeholder"
-          src={require('../../assets/logos/sponsor-placeholder-logo.png')}
+          src={'../../assets/logos/sponsor-placeholder-logo.png'}
           style={{
             borderRadius: '6px',
             backdropFilter: 'contrast(0.5)',

src/components/VipFlow/VipView/VipView.tsx

@@ -35,7 +35,7 @@ const VipView = (props: IVipViewProps) => {
       <Box sx={{ width: '45%' }}>
         <img
           alt="Vip View Main Image"
-          src={require('../../../assets/images/BoxingSession.png')}
+          src={'../../../assets/images/BoxingSession.png'}
           style={{ maxWidth: '70%' }}
         ></img>
       </Box>

src/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+}

src/pages/Admin/AdminPage.test.js

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { SERIES_API_CALLS } from '../../services/api/serie-api-calls'
+import { STATS_API_CALLS } from '../../services/api/stats-api-calls'
+
+import AdminPage from './AdminPage'
+
+jest.mock('../../hooks/useCookies', () => {
+  return () => ({
+    getCookies: () => ({
+      userAccount: { role: 'ADMIN', username: 'admin', isVerified: true },
+      account: { username: 'admin', password: 'admin' },
+    }),
+  })
+})
+
+jest.clearAllMocks()
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => jest.fn(),
+}))
+jest.mock('../../services/api/serie-api-calls')
+jest.mock('../../services/api/stats-api-calls')
+
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+describe('render AdminPage', () => {
+  test('Loading', () => {
+    render(<AdminPage />)
+
+    expect(screen.getByText('Watch Party Admin')).toBeInTheDocument()
+    expect(document.cookie).toBe('')
+  })
+
+  xtest('Call to get Stats', () => {
+    const response = {
+      curConferences: 6,
+      totalConferences: 0,
+      maxConferences: 0,
+      curParticipants: 0,
+      totalParticipants: 0,
+      maxParticipants: 0,
+      avgParticipants: 0.0,
+      devParticipants: 0.0,
+      totalViewTimeS: 2730,
+      maxViewTimeS: 2049,
+      avgViewTimeS: 455,
+      devViewTimeS: 318,
+    }
+
+    jest.spyOn(STATS_API_CALLS, 'getAllConferenceStats').mockReturnValue(Promise.resolve(response))
+
+    render(<AdminPage />)
+    expect(screen.getByText('Number of active main feed viewers')).toBeInTheDocument()
+
+    expect(STATS_API_CALLS.getAllConferenceStats).toBeCalledTimes(1)
+  })
+
+  xtest('Call to get Series', () => {
+    const response = {}
+
+    SERIES_API_CALLS.getSeriesList.mockResolvedValueOnce(Promise.resolve(response))
+
+    render(<AdminPage />)
+    expect(screen.getByText('Watch Party Admin')).toBeInTheDocument()
+
+    expect(SERIES_API_CALLS.getSeriesList).toBeCalledTimes(1)
+  })
+})

src/pages/Home/Home.test.js

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+
+import Home from './Home'
+import JoinContext from '../../components/JoinContext/JoinContext'
+
+const currEpisode = {
+  description:
+    'He may go by many different names, but to the boxing world, he\'s often referred to as simply "Canelo." A native of Guadalajara, Mexico, Canelo Alvarez had accrued an impressive 42-0-1 heading into arguably the biggest fight of his career at the time, a 2013 bout against none other than Floyd Mayweather Jr.',
+  displayName: 'Saúl Álvarez vs Gennady Golovkin',
+  endTime: 1693540574459,
+  episodeId: 1,
+  seriesId: 1,
+  startTime: 1663001739719,
+  streamGuid: 'live/demo-stream',
+}
+
+const singleSerie = {
+  displayName: 'New serie from fx',
+  episodes: [
+    {
+      displayName: 'Serie 1',
+      endTime: 1667250000000,
+      episodeId: 3,
+      seriesId: 7,
+      startTime: 1667242800000,
+    },
+  ],
+  maxParticipants: 8,
+  seriesId: 7,
+}
+
+Object.defineProperty(global.self, 'crypto', {
+  value: {
+    randomUUID: (arr) => arr,
+  },
+})
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => jest.fn(),
+  useHref: () => jest.fn(),
+}))
+
+jest.mock('react-google-recaptcha-v3', () => ({
+  GoogleReCaptchaProvider: () => <div>{'This is the home page'}</div>,
+}))
+
+jest.mock('../../services/conference/conference', () => {
+  const currentSerie = singleSerie
+  const currentEpisode = currEpisode
+  const nextEpisodes = []
+
+  return {
+    getCurrentEpisode: jest.fn(() => Promise.resolve([currentEpisode, currentSerie, nextEpisodes])),
+  }
+})
+
+describe('render HomePage', () => {
+  test('render content', async () => {
+    const values = {
+      loading: true,
+    }
+    render(
+      <JoinContext.Provider value={values}>
+        <Home />
+      </JoinContext.Provider>
+    )
+
+    expect(await screen.findByText('This is the home page')).toBeInTheDocument()
+  })
+})

src/pages/JoinPage/JoinPage.tsx

@@ -202,7 +202,7 @@ const JoinPage = () => {
         <Box sx={{ width: '50%', position: 'absolute', right: 0, bottom: 0 }}>
           <img
             alt="Join a Party Main Image"
-            src={require('../../assets/images/BoxMainImage.png')}
+            src={'../../assets/images/BoxMainImage.png'}
             style={{
               width: '100%',
               opacity: currentSection === Section.Nickname ? 0.5 : 1,
@@ -225,7 +225,7 @@ const JoinPage = () => {
                 <img
                   height="70px"
                   alt="Logo Placeholder"
-                  src={require('../../assets/logos/sponsor-placeholder-2-logo.png')}
+                  src={'../../assets/logos/sponsor-placeholder-2-logo.png'}
                 ></img>
               </Box>
             </Stack>

src/pages/Landing/Landing.tsx

@@ -7,7 +7,7 @@ import WbcLogo from '../../assets/logos/WbcLogo'
 import CustomButton, { BUTTONSIZE, BUTTONTYPE } from '../../components/Common/CustomButton/CustomButton'
 import useStyles from './Landing.module'
 
-const Home = () => {
+const Landing = () => {
   const { classes } = useStyles()
   const [partyCode, setPartyCode] = React.useState<string>('')
   const [error, setError] = React.useState<string>('')
@@ -78,12 +78,12 @@ const Home = () => {
           <img
             className={classes.image}
             alt="Landing Page Image"
-            src={require('../../assets/images/LandingPageImage.png')}
+            src={'../../assets/images/LandingPageImage.png'}
           ></img>
         </Box>
       </Box>
     </Box>
   )
 }
 
-export default Home
+export default Landing

src/pages/PartyEndedPage/PartyEndedPage.tsx

@@ -64,7 +64,7 @@ const PartyEndedPage = () => {
         />
       )}
       <Box sx={{ width: '50%', position: 'absolute', right: 0, bottom: 0 }}>
-        <img alt="Party Ended Main Image" src={require('../../assets/images/BoxMainImage.png')}></img>
+        <img alt="Party Ended Main Image" src={'../../assets/images/BoxMainImage.png'}></img>
       </Box>
     </Box>
   )