Even more tests (#8)

* starting RTL tests

* fix provider wrap

* first integration test

* add shell

.github/actions/verify/jest-client/action.yml

@@ -0,0 +1,11 @@
+name: Run Jest Client Tests
+
+runs:
+  using: composite
+  steps:
+  - uses: actions/checkout@v4
+  - uses: ./.github/actions/setup-node
+  - run: |
+      cd client
+      pnpm test
+    shell: bash

.github/actions/verify/jest-server/action.yml

@@ -5,7 +5,12 @@ runs:
   steps:
   - uses: actions/checkout@v4
   - uses: ./.github/actions/setup-node
+  - run: sudo apt-get install -y redis-tools redis-server
+    shell: bash
+  - run: redis-cli ping
+    shell: bash
   - run: |
       cd server
-      pnpm jest
+      pnpm add -g concurrently wait-on
+      pnpm concurrently --kill-others --success first "pnpm dev" "pnpm wait-on tcp:8008 && pnpm jest"
     shell: bash

.github/workflows/verify.yml

@@ -17,3 +17,8 @@ jobs:
     steps:
     - uses: actions/checkout@v4
     - uses: ./.github/actions/verify/jest-server
+  jest-client:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: ./.github/actions/verify/jest-client

client/package.json

@@ -8,9 +8,9 @@
     "@fontsource/roboto": "^5.0.14",
     "@mui/icons-material": "^6.0.1",
     "@mui/material": "^6.0.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.106",
     "@types/react": "^18.3.5",
@@ -52,8 +52,10 @@
     ]
   },
   "devDependencies": {
+    "@types/chance": "^1.1.6",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
+    "chance": "^1.1.12",
     "globals": "^15.9.0",
     "typescript-eslint": "^8.5.0"
   }

client/src/components/App.tsx

@@ -1,18 +1,18 @@
-import { Route, Routes } from 'react-router-dom';
-import { Link, Typography } from '@mui/material';
-import JoinGame from './pages/JoinGame';
-import CreateGame from './pages/CreateGame';
-import Home from './pages/Home';
-import Game from './pages/Game';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import './App.css';
-import { GameStateContextProvider } from '../context/GameStateContext';
-import { MaterialThemeContextProvider } from '../context/MaterialThemeContext';
-import ColorModeToggle from './ColorModeToggle';
-import Rules from './Rules';
+import { Route, Routes } from 'react-router-dom'
+import { Link, Typography } from '@mui/material'
+import JoinGame from './pages/JoinGame'
+import CreateGame from './pages/CreateGame'
+import Home from './pages/Home'
+import Game from './pages/Game'
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+import './App.css'
+import { GameStateContextProvider } from '../context/GameStateContext'
+import { MaterialThemeContextProvider } from '../context/MaterialThemeContext'
+import ColorModeToggle from './ColorModeToggle'
+import Rules from './Rules'
 
 function App() {
   return (
@@ -42,7 +42,7 @@ function App() {
         </Routes>
       </MaterialThemeContextProvider>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

client/src/components/utilities/ColoredTypography.spec.tsx

@@ -0,0 +1,45 @@
+import ColoredTypography from "./ColoredTypography"
+import { render, getRandomGameState, getCurrentColorMode } from '../../../tests/utilities/render'
+import { ActionAttributes, Actions, InfluenceAttributes, Influences } from "../../shared/types/game"
+
+describe('ColoredTypography', () => {
+  it('should render a single element when no matches', async () => {
+    const { findByText } = render(<ColoredTypography>text to color</ColoredTypography>)
+
+    await findByText('text to color')
+  })
+
+  it('should render a single element when no matches', async () => {
+    const gameState = getRandomGameState()
+
+    gameState.players[0].name = 'David'
+    gameState.players[1].name = 'Dаvid'
+
+    const { findByText } = render(
+      <>
+        <ColoredTypography>David is trying to use Coup on Dаvid</ColoredTypography>
+        <ColoredTypography>someone has lost their Contessa</ColoredTypography>
+      </>,
+      { gameState }
+    )
+
+    const colorMode = await getCurrentColorMode()
+
+    const expectedSegments = [
+      { text: 'David', color: gameState.players[0].color },
+      { text: ' is trying to use ' },
+      { text: 'Coup', color: ActionAttributes[Actions.Coup].color[colorMode] },
+      { text: ' on ' },
+      { text: 'Dаvid', color: gameState.players[1].color },
+      { text: 'someone has lost their ' },
+      { text: 'Contessa', color: InfluenceAttributes[Influences.Contessa].color[colorMode] }
+    ]
+
+    for (const expectedSegment of expectedSegments) {
+      const segment = await findByText(expectedSegment.text, { trim: false })
+      if (expectedSegment.color) {
+        expect(segment).toHaveStyle({ color: expectedSegment.color })
+      }
+    }
+  })
+})