Test unitaires pour App, Board et Cell

connect4/src/App.js

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Board from './components/Board';
 import './styles.scss';
 import confettis from './assets/confetti-4.gif'
@@ -13,6 +13,7 @@ const App = () => {
   const [winner, setWinner] = useState(0)
   const [gameStatus,setGameStatus] = useState(null)
   const [reversed, setReversed]=useState(null)
+  const [percentage, setPercentage] = useState(20)
 
   function ResetGame(){
     setBoard(() => (
@@ -78,22 +79,20 @@ const App = () => {
       if (isBoardFull(newBoard))
         setGameStatus('draw')
     }
-  
     setBoard(newBoard)
-    if (Math.random() < 0.2) {
+    if (Math.random() < percentage/100) {
       const randomIndex = Math.floor(Math.random() * 7)
       reverseColumn(randomIndex)
       setReversed(randomIndex)
     }
     setCurrentPlayer(currentPlayer === 1 ? -1 : 1)
-  };
+  }
 
   function reverseColumn(colIndex) {
     const newBoard = [...board]
     let column = newBoard.map(row => row[colIndex]).reverse().filter(element=>element !== 0);
     while(column.length < 6)
       column.push(0)
-    console.log(column)
     for (let i = 0; i < 6; i++)
       newBoard[i][colIndex] = column[i]
     setBoard(newBoard)
@@ -102,6 +101,8 @@ const App = () => {
   return (
     <div className="app">
       <h1>Puissance 4</h1>
+      <div>Pourcentage de chance que le reverse s'applique : {percentage}%</div>
+      <input type="range" min="0" max="100" value={percentage} onChange={(e)=>{setPercentage(e.target.value)}}/>
       {
         gameStatus === 'win' || gameStatus === 'draw' ? (
         <>
@@ -110,7 +111,7 @@ const App = () => {
             gameStatus === 'win' ? (<h1>Gagnant : joueur {winner===1? '1':'2'}</h1>) : (<h1>Egalité</h1>)
           }
 
-          <button onClick={()=>{ResetGame()}}>Recommencer</button>
+          <button data-testid={'restart'} onClick={()=>{ResetGame()}}>Recommencer</button>
         </>) :  (
             <>
               <div>Au tour du joueur {currentPlayer===1? '1':'2'}</div>

connect4/src/App.test.js

-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, fireEvent, screen, queryByText, getByTestId  } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+const { getAllByTestId, getByText } = screen;
+
+test('handles player click and resets the game', () => {
+  const { getAllByTestId } = screen;
+  const { getByText, getByTestId } = render(<App />);
+  expect(getByText('Puissance 4')).toBeInTheDocument();
+  fireEvent.click(getAllByTestId('cell')[0]);
+  const recommencerButton = queryByText(document.body, 'Recommencer');
+  if (recommencerButton) {
+    fireEvent.click(recommencerButton);
+  }
+
+});
+
+test('handles winning scenario', () => {
+  render(<App />);
+  
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[1]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[1]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[1]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+
+  expect(getByText('Gagnant : joueur 1')).toBeInTheDocument();
+});
+
+test('handles draw scenario', () => {
+  render(<App />);
+
+  fireEvent.change(screen.getByRole('slider'), { target: { value: 0 } });
+
+  for(let i = 0; i < 3; i++) {
+    fireEvent.click(getAllByTestId('cell')[0]);
+    fireEvent.click(getAllByTestId('cell')[1]);
+    fireEvent.click(getAllByTestId('cell')[2]);
+    fireEvent.click(getAllByTestId('cell')[3]);
+    fireEvent.click(getAllByTestId('cell')[4]);
+    fireEvent.click(getAllByTestId('cell')[5]);
+    fireEvent.click(getAllByTestId('cell')[6]);
+  }
+  for(let i = 0; i < 2; i++) {
+    fireEvent.click(getAllByTestId('cell')[1]);
+    fireEvent.click(getAllByTestId('cell')[2]);
+    fireEvent.click(getAllByTestId('cell')[3]);
+    fireEvent.click(getAllByTestId('cell')[4]);
+    fireEvent.click(getAllByTestId('cell')[5]);
+    fireEvent.click(getAllByTestId('cell')[6]);
+  }
+  fireEvent.click(getAllByTestId('cell')[6]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[5]);
+  fireEvent.click(getAllByTestId('cell')[4]);
+  fireEvent.click(getAllByTestId('cell')[3]);
+  fireEvent.click(getAllByTestId('cell')[2]);
+  fireEvent.click(getAllByTestId('cell')[1]);
+  fireEvent.click(getAllByTestId('cell')[0]);
+
+  expect(getByText('Egalité')).toBeInTheDocument();
+});
+
+test('handles reverse column scenario', () => {
+  render(<App />);
+  
+  fireEvent.change(screen.getByRole('slider'), { target: { value: 100 } });
+
+  fireEvent.click(getAllByTestId('cell')[0]);
+
+  expect(getByText(/Reverse sur la colonne/)).toBeInTheDocument();
+});
+
+
+test('changes reversibility percentage', () => {
+  const { getByRole, getByText } = screen;
+  render(<App />);
+
+  fireEvent.change(getByRole('slider'), { target: { value: 50 } });
+
+  expect(getByText('Pourcentage de chance que le reverse s\'applique : 50%')).toBeInTheDocument();
+});
+
+test('alternates player turns', () => {
+  render(<App />);
+
+  fireEvent.click(getAllByTestId('cell')[0]);
+  fireEvent.click(getAllByTestId('cell')[1]);
+  fireEvent.click(getAllByTestId('cell')[2]);
+
+  expect(getByText('Au tour du joueur 2')).toBeInTheDocument();
+});
+
+test('handles click on a full column', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+
+  for (let i = 0; i < 6; i++) {
+    fireEvent.click(getAllByTestId('cell')[0]);
+  }
+  fireEvent.click(getAllByTestId('cell')[0]);
+
+  expect(getByText('Au tour du joueur 1')).toBeInTheDocument();
+});
+
+test('does not display messages during the game', () => {
+  render(<App />);
+  expect(queryByText(document.body,'Gagnant : joueur 1')).toBeNull();
+  expect(queryByText(document.body,'Egalité')).toBeNull();
+});
+
+test('handles extreme reversibility percentages', () => {
+  const { getByRole, getByText } = screen;
+  render(<App />);
+
+  fireEvent.change(getByRole('slider'), { target: { value: 0 } });
+  fireEvent.click(getAllByTestId('cell')[0]);
+  expect(queryByText(document.body,/Reverse sur la colonne/)).toBeNull();
+
+  fireEvent.change(getByRole('slider'), { target: { value: 100 } });
+  fireEvent.click(getAllByTestId('cell')[0]);
+  expect(getByText(/Reverse sur la colonne/)).toBeInTheDocument();
 });

connect4/src/components/Board.js

@@ -21,4 +21,3 @@ const Board = ({ board, handleClick }) => {
   };
   
   export default Board;
-  

connect4/src/components/Board.scss

@@ -7,4 +7,14 @@
         flex-direction: row;
 
     }
+
+    &.updated{
+        .row{
+            .cell{
+                .jeton{
+                    transform: translateY(-100px);
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

connect4/src/components/Cell.js

 import React from 'react';
 import './Cell.scss'
-import player1 from '../assets/jetonchad.png'
-import player2 from '../assets/punaise-lit-monaco.jpeg'
+import player1 from '../assets/gettyimages-165727231-612x612.jpg'
+import player2 from '../assets/sticker-poker-jeton-jaune.jpg'
 
 const Cell = ({ value, onClick }) => {
   return (
-    <div className="cell" onClick={onClick}>
+    <div className="cell" onClick={onClick} data-testid="cell">
         {
             value !==0 && <img className='jeton' src={value===1 ? player1 : player2} />
         }

connect4/src/components/Cell.scss

@@ -6,10 +6,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    transition: all 0.1s;
+    transition: transform 0.3s ease;
     .jeton{
         width: 100%;
         border-radius: 50%;
         height: 100%;
+        object-fit: cover;
+        pointer-events: none;
     }
 }
\ No newline at end of file

connect4/src/styles.scss

-.App {
+.app {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  height: 100vh;
 }

connect4/src/test/Board.test.js

+// Board.test.js
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Board from '../components/Board';
+
+// Exemple de test simple
+test('renders Board component', () => {
+  const board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]]; // Exemple de tableau
+  render(<Board board={board} handleClick={() => {}} />);
+});
+
+// Exemple de test avec interaction utilisateur
+test('calls handleClick prop when a cell is clicked', () => {
+  const handleClickMock = jest.fn();
+  const board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]]; // Exemple de tableau
+  const { container } = render(<Board board={board} handleClick={handleClickMock} />);
+
+  // Simule un clic sur une cellule
+  fireEvent.click(container.querySelector('.cell'));
+
+  // Vérifie que la fonction handleClick a été appelée
+  expect(handleClickMock).toHaveBeenCalledTimes(1);
+});
+
+// Ajoutez d'autres tests en fonction de la complexité de votre composant

connect4/src/test/Cell.test.js

+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Cell from '../components/Cell';
+
+test('renders Cell component', () => {
+  render(<Cell value={0} onClick={() => {}} />);
+});
+
+test('calls onClick prop when clicked', () => {
+  const onClickMock = jest.fn();
+  const { container } = render(<Cell value={0} onClick={onClickMock} />);
+  fireEvent.click(container.firstChild);
+
+  expect(onClickMock).toHaveBeenCalledTimes(1);
+});
+