added tests to Navbar and Dice

src/components/Navbar/Dice/Dice.jsx

@@ -1,24 +1,28 @@
 import React, { useContext } from 'react';
 import { SocketContext } from '../../../App';
 import images from '../../../constants/diceImages';
+import styles from './Dice.module.css';
 
-const Dice = ({ rolledNumber, nowMoving, color, movingPlayer }) => {
+const Dice = ({ rolledNumber, nowMoving, playerColor, movingPlayer }) => {
     const socket = useContext(SocketContext);
 
-    const handleRoll = () => {
+    const handleClick = () => {
         socket.emit('game:roll');
     };
 
+    const isCurrentPlayer = movingPlayer === playerColor;
+    const hasRolledNumber = rolledNumber !== null;
+
     return (
-        <div className={`dice-container dice-${color}`}>
+        <div className={styles.container}>
-            {movingPlayer === color ? (
+            {isCurrentPlayer &&
-                rolledNumber ? (
+                (hasRolledNumber ? (
-                    <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
+                    <img src={images[rolledNumber - 1]} alt={rolledNumber} />
-                ) : nowMoving ? (
+                ) : (
-                    <img src={images[6]} className='roll' alt='roll' width='100' height='100' onClick={handleRoll} />
+                    nowMoving && <img src={images[6]} alt='roll' onClick={handleClick} />
-                ) : null
+                ))}
-            ) : null}
         </div>
     );
 };
+
 export default Dice;

src/components/Navbar/Dice/Dice.module.css

@@ -0,0 +1,11 @@
+.container {
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 50px;
+    height: 50px;
+}
+.container > img {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}

src/components/Navbar/Dice/Dice.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Dice from './Dice';
+import { SocketContext } from '../../../App';
+
+const mockSocket = {
+    emit: jest.fn(),
+};
+
+describe('Dice component', () => {
+    let props;
+    const MOVING_PLAYER = 'blue';
+    const NOT_MOVING_PLAYER = 'red';
+    const THIS_PLAYER_MOVING = true;
+    
+    beforeEach(() => {
+        props = {
+            rolledNumber: null,
+            nowMoving: false,
+            playerColor: '',
+            movingPlayer: '',
+        };
+    });
+
+    it('should render correct rolledNumber next to moving player', () => {
+        props.rolledNumber = 5;
+        props.movingPlayer = MOVING_PLAYER;
+        props.playerColor = MOVING_PLAYER;
+        render(<Dice {...props} />);
+        expect(screen.queryByAltText(props.rolledNumber)).toBeInTheDocument();
+    });
+
+    it('should not render rolledNumber next to not moving player', () => {
+        props.rolledNumber = 5;
+        props.movingPlayer = MOVING_PLAYER;
+        props.playerColor = NOT_MOVING_PLAYER;
+        render(<Dice {...props} />);
+        expect(screen.queryByAltText(props.rolledNumber)).not.toBeInTheDocument();
+    });
+
+    it('should render roll icon next to moving player', () => {
+        props.rolledNumber = null;
+        props.movingPlayer = MOVING_PLAYER;
+        props.playerColor = MOVING_PLAYER;
+        props.nowMoving = THIS_PLAYER_MOVING;
+        render(<Dice {...props} />);
+        expect(screen.queryByAltText('roll')).toBeInTheDocument();
+    });
+
+    it('should not render roll icon next to not moving player', () => {
+        props.rolledNumber = null;
+        props.movingPlayer = MOVING_PLAYER;
+        props.playerColor = MOVING_PLAYER;
+        props.nowMoving = !THIS_PLAYER_MOVING;
+        render(<Dice {...props} />);
+        expect(screen.queryByAltText('roll')).not.toBeInTheDocument();
+    });
+
+    it('should send data on click', () => {
+        props.rolledNumber = null;
+        props.movingPlayer = MOVING_PLAYER;
+        props.playerColor = MOVING_PLAYER;
+        props.nowMoving = THIS_PLAYER_MOVING;
+        render(
+            <SocketContext.Provider value={mockSocket}>
+                <Dice {...props} />
+            </SocketContext.Provider>
+        );
+        const dice = screen.getByAltText('roll');
+        fireEvent.click(dice);
+        expect(mockSocket.emit).toHaveBeenCalledWith('game:roll');
+    });
+});

src/components/Navbar/Navbar.jsx

@@ -2,26 +2,27 @@ import React from 'react';
 import Dice from './Dice/Dice';
 import NameContainer from './NameContainer/NameContainer';
 import ReadyButton from './ReadyButton/ReadyButton';
-import './Navbar.css';
 import { PLAYER_COLORS } from '../../constants/colors';
 import { useContext } from 'react';
 import { PlayerDataContext } from '../../App';
+import styles from './Navbar.module.css';
 
 const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, movingPlayer }) => {
     const context = useContext(PlayerDataContext);
 
+    const diceProps = {
+        rolledNumber,
+        nowMoving,
+        movingPlayer,
+    };
+
     return (
         <>
             {players.map((player, index) => (
-                <div className={`player-container ${PLAYER_COLORS[index]}`} key={index}>
+                <div className={`${styles.playerContainer} ${styles[PLAYER_COLORS[index]]}`} key={index}>
                     <NameContainer player={player} time={time} />
-                    <Dice
+                    {started ? <Dice playerColor={PLAYER_COLORS[index]} {...diceProps} /> : null}
-                        movingPlayer={movingPlayer}
+                    {context.color === player.color && !started ? <ReadyButton isReady={isReady} /> : null}
-                        rolledNumber={rolledNumber}
-                        nowMoving={nowMoving}
-                        color={PLAYER_COLORS[index]}
-                    />
-                    {context.color === player.color || (!started && <ReadyButton isReady={isReady} />)}
                 </div>
             ))}
         </>

src/components/Navbar/Navbar.module.css

@@ -1,13 +1,4 @@
-.dice-container {
+.playerContainer {
-    margin-left: 20px;
-    margin-right: 20px;
-    width: 50px;
-    height: 50px;
-}
-.roll {
-    cursor: pointer;
-}
-.player-container {
     display: flex;
     align-items: center;
     flex-direction: row;

src/components/Navbar/Navbar.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Navbar from './Navbar';
+import { PlayerDataContext } from '../../App';
+
+const mockPlayers = [
+    { name: 'Player1', color: 'red' },
+    { name: 'Player2', color: 'blue' },
+];
+
+const mockPlayerData = {
+    color: 'red',
+};
+
+jest.mock('./NameContainer/NameContainer.jsx', () => () => {
+    return <mock-name-container data-testid='name-container' />;
+});
+
+jest.mock('./ReadyButton/ReadyButton.jsx', () => () => {
+    return <mock-ready-button data-testid='ready-button' />;
+});
+
+jest.mock('./Dice/Dice.jsx', () => () => {
+    return <mock-dice data-testid='dice-container' />;
+});
+
+const setup = props => {
+    props.players = mockPlayers;
+    return render(
+        <PlayerDataContext.Provider value={mockPlayerData}>
+            <Navbar {...props} />
+        </PlayerDataContext.Provider>
+    );
+};
+
+describe('Navbar component', () => {
+    it('should render NameContainer for each player', () => {
+        setup({
+            started: true,
+        });
+        expect(screen.getAllByTestId('name-container')).toHaveLength(mockPlayers.length);
+    });
+
+    it('should render Dice when started is true', () => {
+        setup({
+            started: true,
+        });
+        expect(screen.getAllByTestId('dice-container')).toHaveLength(mockPlayers.length);
+    });
+
+    it('should not render ReadyButton when started is true', () => {
+        setup({
+            started: true,
+        });
+        expect(screen.queryByTestId('ready-button')).toBeNull();
+    });
+
+    it('should render ReadyButton when started is false', () => {
+        setup({
+            started: false,
+        });
+        expect(screen.getByTestId('ready-button')).toBeInTheDocument();
+    });
+
+    it('does not render Dice when started is false', () => {
+        setup({
+            started: false,
+        });
+        expect(screen.queryByTestId('dice-container')).toBeNull();
+    });
+});

src/index.css

@@ -20,10 +20,6 @@ canvas {
     border-radius: 15px;
     border: 2px solid black;
 }
-.dice-container > img {
-    width: 50px;
-    height: 50px;
-}
 .navbar-container {
     display: flex;
     flex-direction: row;