Merge pull request #186 from daithihearn/unit-testing

test: adding unit tests

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.4.0",
+    "version": "7.4.1",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",
@@ -15,12 +15,12 @@
         "@emotion/styled": "11.11.0",
         "@mui/icons-material": "5.14.11",
         "@mui/material": "5.14.11",
-        "@mui/x-data-grid": "6.15.0",
+        "@mui/x-data-grid": "6.16.0",
         "@popperjs/core": "2.11.8",
         "@reduxjs/toolkit": "1.9.6",
         "@types/jest": "29.5.5",
-        "@types/node": "20.7.1",
-        "@types/react": "18.2.23",
+        "@types/node": "20.8.0",
+        "@types/react": "18.2.24",
         "@types/react-avatar-editor": "13",
         "@types/react-dom": "18.2.8",
         "@types/react-router-dom": "5.3.3",
@@ -40,7 +40,7 @@
         "react-chartjs-2": "5",
         "react-confetti": "6.1.0",
         "react-dom": "18.2.0",
-        "react-redux": "8.1.2",
+        "react-redux": "8.1.3",
         "react-router": "6.16.0",
         "react-router-config": "5.1.1",
         "react-router-dom": "6.16.0",
@@ -53,6 +53,7 @@
         "uuid-random": "1.3.2"
     },
     "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@types/crypto-js": "4.1.2",
         "@types/enzyme": "3.10.14",
         "@types/enzyme-adapter-react-16": "1.0.7",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "7.4.0",
+  "version": "7.4.1",
   "icons": [
     {
       "src": "./assets/favicon.png",

src/caches/MyCardsSlice.ts

@@ -1,10 +1,10 @@
 import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { CardName, EMPTY, SelectableCard } from "model/Cards"
+import { CardName, EMPTY, Card } from "model/Cards"
 import { processOrderedCardsAfterGameUpdate } from "utils/GameUtils"
 import { RootState } from "./caches"
 
 export interface MyCardsState {
-    cards: SelectableCard[]
+    cards: Card[]
 }
 
 const initialState: MyCardsState = {
@@ -23,7 +23,7 @@ export const myCardsSlice = createSlice({
                 ),
             }
         },
-        replaceMyCards: (_, action: PayloadAction<SelectableCard[]>) => {
+        replaceMyCards: (_, action: PayloadAction<Card[]>) => {
             return {
                 cards: action.payload,
             }
@@ -32,22 +32,22 @@ export const myCardsSlice = createSlice({
             const idx = state.cards.findIndex(c => c.name === action.payload)
             if (idx > 0) state.cards[idx] = { ...EMPTY, selected: false }
         },
-        selectCard: (state, action: PayloadAction<SelectableCard>) => {
+        selectCard: (state, action: PayloadAction<Card>) => {
             state.cards.forEach(c => {
                 if (c.name === action.payload.name) c.selected = true
             })
         },
-        selectCards: (state, action: PayloadAction<SelectableCard[]>) => {
+        selectCards: (state, action: PayloadAction<Card[]>) => {
             state.cards.forEach(c => {
                 if (action.payload.some(a => a.name === c.name))
                     c.selected = true
             })
         },
-        toggleSelect: (state, action: PayloadAction<SelectableCard>) =>
+        toggleSelect: (state, action: PayloadAction<Card>) =>
             state.cards.forEach(c => {
                 if (c.name === action.payload.name) c.selected = !c.selected
             }),
-        toggleUniqueSelect: (state, action: PayloadAction<SelectableCard>) =>
+        toggleUniqueSelect: (state, action: PayloadAction<Card>) =>
             state.cards.forEach(c => {
                 if (c.name === action.payload.name) c.selected = !c.selected
                 else c.selected = false

src/components/Game/Actions/Buying.tsx

@@ -17,7 +17,7 @@ import {
 } from "caches/GameSlice"
 import { pickBestCards, riskOfMistakeBuyingCards } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
-import { SelectableCard } from "model/Cards"
+import { Card } from "model/Cards"
 import { Button } from "@mui/material"
 import { getSettings } from "caches/SettingsSlice"
 
@@ -48,7 +48,7 @@ const Buying = () => {
     }, [readyToBuy])
 
     const buyCards = useCallback(
-        (sel: SelectableCard[]) => {
+        (sel: Card[]) => {
             if (!gameId) return
             dispatch(GameService.buyCards(gameId, sel)).catch(console.error)
         },

src/components/Game/Actions/SelectSuit.tsx

@@ -8,7 +8,7 @@ import { useSnackbar } from "notistack"
 import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
 import { removeAllFromHand } from "utils/GameUtils"
 import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
-import { CardName, SelectableCard } from "model/Cards"
+import { CardName, Card } from "model/Cards"
 import parseError from "utils/ErrorUtils"
 import { Button } from "@mui/material"
 
@@ -59,7 +59,7 @@ const SelectSuit = () => {
     )
 
     const selectFromDummyCallback = useCallback(
-        (sel: SelectableCard[], suit?: Suit) => {
+        (sel: Card[], suit?: Suit) => {
             if (!gameId) throw Error("Must be in a game")
             if (!suit) throw Error("Must provide a suit")
             dispatch(GameService.chooseFromDummy(gameId, sel, suit)).catch(

src/components/Game/Actions/ThrowCardsWarningModal.tsx

@@ -5,20 +5,20 @@ import {
     DialogContent,
     Button,
     ButtonGroup,
-    Card,
+    Card as MuiCard,
     CardMedia,
     CardContent,
 } from "@mui/material"
 import { useAppSelector } from "caches/hooks"
 import { getMyCardsWithoutBlanks, getSelectedCards } from "caches/MyCardsSlice"
-import { SelectableCard } from "model/Cards"
+import { Card } from "model/Cards"
 import { Suit } from "model/Suit"
 import { getTrumpCards, removeAllFromHand } from "utils/GameUtils"
 
 interface ModalOpts {
     modalVisible: boolean
     cancelCallback: () => void
-    continueCallback: (sel: SelectableCard[], suit?: Suit) => void
+    continueCallback: (sel: Card[], suit?: Suit) => void
     suit: Suit
 }
 
@@ -52,7 +52,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
                 Are you sure you want to throw these cards away?
             </DialogTitle>
             <DialogContent className="called-modal">
-                <Card className="gameModalCardGroup">
+                <MuiCard className="gameModalCardGroup">
                     <CardContent className="card-area">
                         {cardsToBeThrown.map(card => (
                             <img
@@ -80,7 +80,7 @@ const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
                             </Button>
                         </ButtonGroup>
                     </CardContent>
-                </Card>
+                </MuiCard>
             </DialogContent>
         </Dialog>
     )

src/components/Game/MyCards.tsx

@@ -5,7 +5,7 @@ import {
     Droppable,
     DropResult,
 } from "react-beautiful-dnd"
-import { EMPTY, SelectableCard } from "model/Cards"
+import { EMPTY, Card } from "model/Cards"
 import { RoundStatus } from "model/Round"
 import {
     getGameId,
@@ -90,10 +90,7 @@ const MyCards: React.FC = () => {
     )
 
     const handleSelectCard = useCallback(
-        (
-            card: SelectableCard,
-            event: React.MouseEvent<HTMLImageElement, MouseEvent>,
-        ) => {
+        (card: Card, event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
             if (!cardsSelectable || card.name === EMPTY.name) {
                 return
             }
@@ -150,7 +147,7 @@ const MyCards: React.FC = () => {
     )
 
     const getStyleForCard = useCallback(
-        (card: SelectableCard) => {
+        (card: Card) => {
             let classes = "thumbnail-size"
 
             if (cardsSelectable && card.name !== EMPTY.name) {