Add a behavior test on game happy path

Author: rouliane

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "crokinolesque",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -12,8 +12,10 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",

package.json

@@ -0,0 +1,73 @@
+import {render, screen} from "@testing-library/react";
+import userEvent from '@testing-library/user-event';
+import App from "./App";
+
+test('the app is rendered', () => {
+    render(<App />);
+    expect(screen.getByText('Crokinolesque')).toBeInTheDocument();
+});
+
+test('happy path', async () => {
+    render(<App />);
+
+    await player1WillBeCalled('Player 1');
+    await player2WillBeCalled('Player 2');
+
+    await userEvent.click(screen.getByRole('button', {name: 'Commencer'}));
+
+    expect(screen.getByText(/Le premier joueur sera Player [1,2]/i)).toBeInTheDocument();
+
+    await userScoresPoints('Player 1', 20);
+    gameScoreShouldNowBe(20, 0);
+
+    await userScoresPoints('Player 2', 40);
+    gameScoreShouldNowBe(20, 40);
+
+    await userEvent.click(screen.getByRole('button', {name: 'Egalité'}));
+    gameScoreShouldNowBe(20, 40);
+
+    await userScoresPoints('Player 1', 80);
+
+    expect(screen.getByText(/Player 1 a gagné 100 - 40/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Rejouer'})).toBeInTheDocument();
+    expect(screen.getAllByTestId('roundHistoryEntry').length).toBe(4);
+
+    displayedRoundHistoryShouldBe([
+        '1 20 0',
+        '2 20 40',
+        '3 20 40',
+        '4 100 40'
+    ]);
+});
+
+async function player1WillBeCalled(playerName: string) {
+    const player1Input = screen.getByLabelText('Joueur 1');
+    await userEvent.click(player1Input);
+    await userEvent.type(player1Input, playerName);
+}
+
+async function player2WillBeCalled(playerName: string) {
+    const player2Input = screen.getByLabelText('Joueur 2');
+    await userEvent.click(player2Input);
+    await userEvent.type(player2Input, playerName);
+}
+
+async function userScoresPoints(playerName: string, points: number) {
+    const playerButton = screen.getByRole('button', {name: playerName});
+    await userEvent.click(playerButton);
+    const scoreInput = screen.getByLabelText('Points');
+    await userEvent.click(scoreInput);
+    await userEvent.type(scoreInput, points.toString());
+    await userEvent.click(screen.getByRole('button', {name: 'Valider'}));
+}
+
+function gameScoreShouldNowBe(player1Score: number, player2Score: number) {
+    expect(screen.getByText(`Player 1 : ${player1Score}`)).toBeInTheDocument();
+    expect(screen.getByText(`Player 2 : ${player2Score}`)).toBeInTheDocument();
+}
+
+function displayedRoundHistoryShouldBe(expected: string[]) {
+    const roundHistoryFromDOM = screen.getAllByTestId('roundHistoryEntry').map(entry => entry.textContent as string);
+    const expectedFormatted = expected.map(entry => entry.replace(/\s/g, ''));
+    expect(roundHistoryFromDOM).toMatchObject(expectedFormatted);
+}

src/App.test.tsx

@@ -5,8 +5,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 import IconButton from '@mui/material/IconButton';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
-import Game from './Game';
-import {GameProvider} from "../contexts/gameContext";
+import Game from './components/Game';
+import {GameProvider} from "./contexts/gameContext";
 
 type PaletteMode = 'light' | 'dark';
 

src/components/App.tsx src/App.tsx

@@ -24,7 +24,7 @@ export default function RoundsHistory({ rounds, player1Name, player2Name }: Prop
             </TableHead>
             <TableBody>
                 {rounds.map((round, index) => (
-                    <TableRow key={index} sx={index % 2 !== 0 ? { backgroundColor: 'action.hover' } : {}}>
+                    <TableRow key={index} sx={index % 2 !== 0 ? { backgroundColor: 'action.hover' } : {}} data-testid="roundHistoryEntry">
                         <TableCell align="center">{index + 1}</TableCell>
                         <TableCell align="center">{round.player1Score}</TableCell>
                         <TableCell align="center">{round.player2Score}</TableCell>

src/components/RoundsHistory.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './components/App';
+import App from './App';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement