Mock CompetitionInfo and create more Test Competitions (#300)

* Add more Test Competitions * Fix bug where Favourites competition throws an error * Added actual type for teams * fix eslint * Make sure test competitions don't get out of date * add cypress to test file * Add tests and fix issues arisen by tests * Add more tests and fix issues arisen by tests * renamed mock function * add mock function to backend * fix rubocop issues * added base_url * move jwt mock to backend * run rubocop * disable automatic running of frontend tests * remove whitespace
thewca · Nov 22, 2023 · 8fed738 · 8fed738
1 parent 74377e9
commit 8fed738
Show file tree

Hide file tree

Showing 24 changed files with 3,224 additions and 102 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -24,5 +24,5 @@ jobs:
           cd ./Frontend
           npm install
           npm run lint
-      - name: Start containers
-        run: docker compose -f "docker-compose.test.yml" up wca_registration_handler --abort-on-container-exit
+      - name: Backend Tests
+        run: docker compose -f "docker-compose.backend-test.yml" up wca_registration_handler --abort-on-container-exit
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -45,15 +45,11 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "5.0.5",
-    "@types/crypto-js": "4.1.3",
     "@types/node": "20.8.0",
-    "crypto-js": "4.2.0",
     "esbuild": "0.19.5",
     "esbuild-sass-plugin": "2.15.0",
     "eslint": "8.52.0",
     "eslint-kit": "9.5.1",
-    "jose": "5.0.1",
-    "prettier": "2.8.8",
-    "stripe": "14.2.0"
+    "prettier": "2.8.8"
   }
 }
diff --git a/Frontend/src/api/competition/get/get_competition_info.ts b/Frontend/src/api/competition/get/get_competition_info.ts
@@ -1,9 +1,13 @@
 import externalServiceFetch from '../../helper/external_service_fetch'
 import { competitionInfoRoute } from '../../helper/routes'
+import getCompetitionInfoMockWithRealFallback from '../../mocks/get_competition_info'
 import { CompetitionInfo } from '../../types'
 
 export default async function getCompetitionInfo(
   competitionId: string
 ): Promise<CompetitionInfo> {
+  if (process.env.NODE_ENV !== 'production') {
+    return getCompetitionInfoMockWithRealFallback(competitionId)
+  }
   return externalServiceFetch(competitionInfoRoute(competitionId))
 }
diff --git a/Frontend/src/api/helper/context/user_context.ts b/Frontend/src/api/helper/context/user_context.ts
@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 
 export interface UserFull {
-  id: string
+  id: number
   created_at: string
   updated_at: string
   name: string

diff --git a/Frontend/src/api/mocks/fixtures.ts b/Frontend/src/api/mocks/fixtures.ts
diff --git a/Frontend/src/api/mocks/get_competition_info.ts b/Frontend/src/api/mocks/get_competition_info.ts
@@ -0,0 +1,39 @@
+import getCompetitionInfo from '../competition/get/get_competition_info'
+import { CompetitionInfo } from '../types'
+import {
+  CLOSED_COMPETITION,
+  COMMENT_REQUIRED,
+  FAVOURITES_COMPETITION,
+  NOT_YET_OPEN,
+  OPEN_COMPETITION,
+  OPEN_WITH_PAYMENTS,
+} from './fixtures'
+
+export default async function getCompetitionInfoMockWithRealFallback(
+  competitionId: string
+): Promise<CompetitionInfo> {
+  switch (competitionId) {
+    case 'KoelnerKubing2023': {
+      return OPEN_COMPETITION
+    }
+    case 'RheinNeckarAutumn2023': {
+      return OPEN_WITH_PAYMENTS
+    }
+    case 'HessenOpen2023': {
+      return CLOSED_COMPETITION
+    }
+    case 'ManchesterSpring2024': {
+      return NOT_YET_OPEN
+    }
+    case 'FMCFrance2023': {
+      return COMMENT_REQUIRED
+    }
+    case 'PickeringFavouritesAutumn2023': {
+      return FAVOURITES_COMPETITION
+    }
+    default: {
+      // This allows non mocked response when debugging a certain competition
+      return getCompetitionInfo(competitionId)
+    }
+  }
+}
diff --git a/Frontend/src/api/mocks/get_jwt.ts b/Frontend/src/api/mocks/get_jwt.ts
@@ -1,20 +1,8 @@
-import Base64 from 'crypto-js/enc-base64'
-import md5 from 'crypto-js/md5'
-import * as jose from 'jose'
 import { USER_KEY } from '../../ui/providers/UserProvider'
 
 export default async function getJWTMock(): Promise<string> {
   const user = localStorage.getItem(USER_KEY)
-  const secret = new TextEncoder().encode('jwt-test-secret')
-  const alg = 'HS256'
-  const issuedAt = Date.now()
-  const jwt = await new jose.SignJWT({ user_id: user })
-    .setProtectedHeader({ alg })
-    .setIssuedAt(issuedAt)
-    .setJti(Base64.stringify(md5(`${secret}:${issuedAt}`)))
-    .setIssuer('wca-registration-test-frontend')
-    .setAudience('wca-registration-test-backend')
-    .setExpirationTime('30m')
-    .sign(secret)
-  return `Bearer: ${jwt}`
+  const response = await fetch(`http://localhost:3001/test/jwt/${user}`)
+  const data = await response.json()
+  return `Bearer: ${data.token}`
 }
diff --git a/Frontend/src/api/mocks/get_me.ts b/Frontend/src/api/mocks/get_me.ts
@@ -6,7 +6,7 @@ export default function getMeMock(): UserFull | null {
   switch (userId) {
     case '1':
       return {
-        id: '1',
+        id: 1,
         created_at: '-',
         updated_at: '-',
         name: 'Ron van Bruchem',
@@ -32,7 +32,7 @@ export default function getMeMock(): UserFull | null {
       }
     case '2':
       return {
-        id: '2',
+        id: 2,
         created_at: '-',
         updated_at: '-',
         name: 'Sebastien Auroux',
@@ -58,7 +58,7 @@ export default function getMeMock(): UserFull | null {
       }
     case '6427':
       return {
-        id: '6427',
+        id: 6427,
         created_at: '-',
         updated_at: '-',
         name: 'Joey Gouly',
@@ -84,7 +84,7 @@ export default function getMeMock(): UserFull | null {
       }
     case '15073':
       return {
-        id: '15073',
+        id: 15073,
         created_at: '-',
         updated_at: '-',
         name: 'Finn Ickler',
@@ -110,7 +110,7 @@ export default function getMeMock(): UserFull | null {
       }
     case '209943':
       return {
-        id: '209943',
+        id: 209943,
         created_at: '-',
         updated_at: '-',
         name: 'Banny McBannington',
@@ -136,7 +136,7 @@ export default function getMeMock(): UserFull | null {
       }
     case '999999':
       return {
-        id: '999999',
+        id: 999999,
         created_at: '-',
         updated_at: '-',
         name: 'Baby User',

diff --git a/Frontend/src/api/mocks/get_permissions.ts b/Frontend/src/api/mocks/get_permissions.ts
@@ -25,7 +25,7 @@ export default function getPermissionsMock(): Permissions {
           scope: [],
         },
         can_administer_competitions: {
-          scope: [],
+          scope: ['KoelnerKubing2023'],
         },
       }
     case '6427':

diff --git a/Frontend/src/api/types.d.ts b/Frontend/src/api/types.d.ts
@@ -24,18 +24,20 @@ interface CompetitionInfo {
   'refund_policy_percent'?: number
   'event_change_deadline_date'?: string
   'waiting_list_deadline_date'?: string
-  'base_entry_fee_lowest_denomination'?: string
+  'base_entry_fee_lowest_denomination'?: number
   'currency_code'?: string
   'on_the_spot_registration': boolean
-  'on_the_spot_entry_fee_lowest_denomination': string
+  'on_the_spot_entry_fee_lowest_denomination'?: number
   'extra_registration_requirements': string
   'guests_entry_fee_lowest_denomination': number
   'url': string
+  'qualification_results': boolean
+  'event_restrictions': boolean
   'website': string
   'short_name': string
   'city': string
+  'enable_donations': boolean
   'venue': string
-  'competition_events': CompetitionEvent[]
   'venue_address': string
   'force_comment_in_registration': boolean
   'venue_details'?: string
@@ -47,10 +49,10 @@ interface CompetitionInfo {
   'use_wca_registration': boolean
   'uses_qualification?': boolean
   'uses_cutoff?': boolean
-  'using_stripe_payments?': boolean
+  'using_stripe_payments?'?: boolean
   'external_registration_page'?: string
   'event_ids': EventId[]
-  'main_event_id': EventId
+  'main_event_id'?: EventId
   'guests_per_registration_limit'?: number
   'guest_entry_status': 'free' | 'restricted' | 'unclear'
   'allow_registration_edits': boolean
@@ -72,21 +74,36 @@ interface CompetitionEvent {
 }
 
 interface UserFull {
-  id: string
+  id: number
   created_at: string
   updated_at: string
   name: string
-  delegate_status: string
+  delegate_status?: string
   gender: 'm' | 'f' | 'o'
   country_iso2: string
-  email: string
-  region: string
-  senior_delegate_id: number
+  location?: string
+  email?: string
+  region?: string
+  senior_delegate_id?: number
   class: string
-  //TODO
-  teams: object[]
-  wca_id: string
+  url: string
+  teams: {
+    id: number
+    friendly_id: string
+    leader: boolean
+    name: string
+    senior_member: boolean
+    wca_id: string
+    avatar: {
+      url: string
+      thumb: {
+        url: string
+      }
+    }
+  }[]
+  wca_id?: string
   country: {
+    continentId: string
     id: string
     name: string
     iso2: string
@@ -95,5 +112,6 @@ interface UserFull {
     url: string
     pending_url: string
     thumb_url: string
+    is_default: boolean
   }
 }
diff --git a/Frontend/src/pages/register/components/CompetingStep.jsx b/Frontend/src/pages/register/components/CompetingStep.jsx
@@ -2,6 +2,7 @@ import * as currencies from '@dinero.js/currencies'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { EventSelector, UiIcon } from '@thewca/wca-components'
 import { dinero, toDecimal } from 'dinero.js'
+import moment from 'moment'
 import React, { useContext, useEffect, useState } from 'react'
 import {
   Button,
@@ -87,6 +88,9 @@ export default function CompetingStep({ nextStep }) {
         setProcessing(true)
       },
     })
+  const canUpdateRegistration =
+    competitionInfo.allow_registration_edits &&
+    new Date(competitionInfo.event_change_deadline_date) > Date.now()
 
   return isLoading ? (
     <LoadingMessage />
@@ -188,6 +192,7 @@ export default function CompetingStep({ nextStep }) {
               maxLength={180}
               onChange={(_, data) => setComment(data.value)}
               value={comment}
+              id="comment"
             />
             <div className={styles.commentCounter}>{comment.length}/180</div>
           </div>
@@ -219,20 +224,31 @@ export default function CompetingStep({ nextStep }) {
           {registration?.competing?.registration_status ? (
             <div className={styles.registrationButtonWrapper}>
               <div className={styles.registrationWarning}>
-                Your Registration Status:
+                Your Registration Status:{' '}
                 {registration.competing.registration_status}
                 <br />
-                {competitionInfo.allow_registration_edits
+                {canUpdateRegistration
                   ? 'Update Your Registration below'
                   : 'Registration Editing is disabled'}
-                <UiIcon name="circle info" />
+                <Popup
+                  trigger={<UiIcon name="circle info" />}
+                  position="top center"
+                  content={
+                    canUpdateRegistration
+                      ? `You can update your registration until ${moment(
+                          competitionInfo.event_change_deadline_date ??
+                            competitionInfo.end_date
+                        ).format('ll')}`
+                      : 'You can no longer update your registration'
+                  }
+                />
               </div>
               <Button
                 disabled={
                   isUpdating ||
-                  !competitionInfo.allow_registration_edits ||
                   (competitionInfo.force_comment_in_registration &&
-                    comment === '')
+                    comment === '') ||
+                  !canUpdateRegistration
                 }
                 color="blue"
                 onClick={() => {
@@ -283,7 +299,12 @@ export default function CompetingStep({ nextStep }) {
               </div>
               <Button
                 className={styles.registrationButton}
-                disabled={isCreating || selectedEvents.length === 0}
+                disabled={
+                  isCreating ||
+                  selectedEvents.length === 0 ||
+                  (competitionInfo.force_comment_in_registration &&
+                    comment === '')
+                }
                 onClick={async () => {
                   setMessage('Registration is being processed', 'basic')
                   createRegistrationMutation({

diff --git a/Frontend/src/ui/Competition.jsx b/Frontend/src/ui/Competition.jsx
@@ -125,19 +125,21 @@ export default function Competition({ children }) {
                 <span className={styles.eventHeader}>Events:</span>
                 {competitionInfo.event_ids.map((event) => (
                   <span key={`event-header-${event}`} className={styles.event}>
-                    <CubingIcon event={event} selected={true} />
+                    <CubingIcon event={event} selected />
                   </span>
                 ))}
               </div>
-              <div>
-                <span className={styles.eventHeader}>Main Event:</span>
-                <span className={styles.event}>
-                  <CubingIcon
-                    event={competitionInfo.main_event_id}
-                    selected={true}
-                  />
-                </span>
-              </div>
+              {competitionInfo.main_event_id && (
+                <div>
+                  <span className={styles.eventHeader}>Main Event:</span>
+                  <span className={styles.event}>
+                    <CubingIcon
+                      event={competitionInfo.main_event_id}
+                      selected
+                    />
+                  </span>
+                </div>
+              )}
             </div>
           </Container>
           {children}