- {movingPlayer === color ? (
- rolledNumber ? (
- 
- ) : nowMoving ? (
- 
- ) : null
- ) : null}
-
- );
-};
-export default Dice;
diff --git a/src/components/Gameboard/Gameboard.jsx b/src/components/Gameboard/Gameboard.jsx
index 5217304..99384ac 100644
--- a/src/components/Gameboard/Gameboard.jsx
+++ b/src/components/Gameboard/Gameboard.jsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useContext } from 'react';
import ReactLoading from 'react-loading';
import { PlayerDataContext, SocketContext } from '../../App';
+import useSocketData from '../../hooks/useSocketData';
import Map from './Map/Map';
import Navbar from '../Navbar/Navbar';
@@ -11,7 +12,7 @@ const Gameboard = () => {
const [pawns, setPawns] = useState([]);
const [players, setPlayers] = useState([]);
- const [rolledNumber, setRolledNumber] = useState(null);
+ const [rolledNumber, setRolledNumber] = useSocketData('game:roll');
const [time, setTime] = useState();
const [isReady, setIsReady] = useState();
const [nowMoving, setNowMoving] = useState(false);
@@ -48,10 +49,6 @@ const Gameboard = () => {
});
}, [socket]);
- const rolledNumberCallback = number => {
- setRolledNumber(number);
- };
-
return (
<>
{(players[0] && !started) || (time && started) ? (
@@ -64,7 +61,6 @@ const Gameboard = () => {
movingPlayer={movingPlayer}
rolledNumber={rolledNumber}
nowMoving={nowMoving}
- rolledNumberCallback={rolledNumberCallback}
/>
diff --git a/src/components/Gameboard/Map/Map.jsx b/src/components/Gameboard/Map/Map.jsx
index 8f008b2..fdfd211 100644
--- a/src/components/Gameboard/Map/Map.jsx
+++ b/src/components/Gameboard/Map/Map.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
import { PlayerDataContext, SocketContext } from '../../../App';
import mapImage from '../../../images/map.jpg';
-import positions from '../positions';
+import positionMapCoords from '../positions';
import pawnImages from '../../../constants/pawnImages';
import canPawnMove from './canPawnMove';
import getPositionAfterMove from './getPositionAfterMove';
@@ -14,63 +14,56 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
const [hintPawn, setHintPawn] = useState();
- const paintPawn = (context, x, y, color) => {
+ const paintPawn = (context, pawn) => {
+ const { x, y } = positionMapCoords[pawn.position];
const touchableArea = new Path2D();
touchableArea.arc(x, y, 12, 0, 2 * Math.PI);
const image = new Image();
- image.src = pawnImages[color];
- // image.onload = function () {
- context.drawImage(image, x - 17, y - 14, 35, 30);
+ image.src = pawnImages[pawn.color];
+ image.onload = function () {
+ context.drawImage(image, x - 17, y - 15, 35, 30);
+ };
return touchableArea;
};
const handleCanvasClick = event => {
- if (hintPawn) {
- const canvas = canvasRef.current;
- const ctx = canvas.getContext('2d');
- const rect = canvas.getBoundingClientRect(),
- cursorX = event.clientX - rect.left,
- cursorY = event.clientY - rect.top;
- for (const pawn of pawns) {
- if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
- socket.emit('game:move', pawn._id);
- }
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext('2d');
+ const rect = canvas.getBoundingClientRect(),
+ cursorX = event.clientX - rect.left,
+ cursorY = event.clientY - rect.top;
+ for (const pawn of pawns) {
+ if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
+ if (canPawnMove(pawn, rolledNumber)) socket.emit('game:move', pawn._id);
}
- setHintPawn(null);
}
+ setHintPawn(null);
};
const handleMouseMove = event => {
- if (nowMoving && rolledNumber) {
- const canvas = canvasRef.current;
- const ctx = canvas.getContext('2d');
- const rect = canvas.getBoundingClientRect(),
- x = event.clientX - rect.left,
- y = event.clientY - rect.top;
- canvas.style.cursor = 'default';
- for (const pawn of pawns) {
- if (pawn.touchableArea) {
- if (
- ctx.isPointInPath(pawn.touchableArea, x, y) &&
- player.color === pawn.color &&
- canPawnMove(pawn, rolledNumber)
- ) {
- const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
- if (pawnPosition) {
- canvas.style.cursor = 'pointer';
- setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' });
- break;
- }
- } else {
- setHintPawn(null);
- }
- } else {
- setHintPawn(null);
+ if (!nowMoving || !rolledNumber) return;
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext('2d');
+ const rect = canvas.getBoundingClientRect(),
+ x = event.clientX - rect.left,
+ y = event.clientY - rect.top;
+ canvas.style.cursor = 'default';
+ for (const pawn of pawns) {
+ if (
+ ctx.isPointInPath(pawn.touchableArea, x, y) &&
+ player.color === pawn.color &&
+ canPawnMove(pawn, rolledNumber)
+ ) {
+ const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
+ if (pawnPosition) {
+ canvas.style.cursor = 'pointer';
+ if (hintPawn && hintPawn.id === pawn._id) return;
+ setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' });
+ return;
}
}
- } else {
- setHintPawn(null);
}
+ setHintPawn(null);
};
useEffect(() => {
@@ -82,15 +75,10 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
image.onload = function () {
ctx.drawImage(image, 0, 0);
pawns.forEach((pawn, index) => {
- pawns[index].touchableArea = paintPawn(
- ctx,
- positions[pawn.position].x,
- positions[pawn.position].y,
- pawn.color
- );
+ pawns[index].touchableArea = paintPawn(ctx, pawn);
});
if (hintPawn) {
- paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
+ paintPawn(ctx, hintPawn);
}
};
};
diff --git a/src/components/HOC/withLoading.jsx b/src/components/HOC/withLoading.jsx
new file mode 100644
index 0000000..d68ecd3
--- /dev/null
+++ b/src/components/HOC/withLoading.jsx
@@ -0,0 +1,14 @@
+import ReactLoading from 'react-loading';
+
+const withLoading = Component => {
+ return function WithLoading({ isLoading, ...props }) {
+ if (!isLoading) {
+ return
-
+
+ );
+ expect(screen.getByText('Host A Server')).toBeInTheDocument();
+ });
+
+ it('should handles form submission with valid data when private', () => {
+ render(
+
+
+ );
+
+ const serverNameInput = screen.getByPlaceholderText('Server Name');
+ fireEvent.change(serverNameInput, { target: { value: 'Test Server' } });
+
+ const privateSwitch = screen.getByRole('checkbox');
+ fireEvent.click(privateSwitch);
+
+ const passwordInput = screen.getByPlaceholderText('password');
+ fireEvent.change(passwordInput, { target: { value: 'TestPassword' } });
+
+ const hostButton = screen.getByText('Host');
+ fireEvent.click(hostButton);
+
+ expect(mockSocket.emit).toHaveBeenCalledWith('room:create', {
+ name: 'Test Server',
+ password: 'TestPassword',
+ private: true,
+ });
+ });
+
+ it('should handles form submission with valid data when not private', () => {
+ render(
+
+
+ );
+
+ const serverNameInput = screen.getByPlaceholderText('Server Name');
+ fireEvent.change(serverNameInput, { target: { value: 'Test Server' } });
+
+ const hostButton = screen.getByText('Host');
+ fireEvent.click(hostButton);
+
+ expect(mockSocket.emit).toHaveBeenCalledWith('room:create', {
+ name: 'Test Server',
+ password: '',
+ private: false,
+ });
+ });
+
+ it('should handles form submission with missing server name', () => {
+ render(
+
+
+ );
+
+ const hostButton = screen.getByText('Host');
+ fireEvent.click(hostButton);
+
+ expect(mockSocket.emit).not.toHaveBeenCalled();
+
+ const serverNameInput = screen.getByPlaceholderText('Server Name');
+ expect(serverNameInput).toHaveStyle('border: 1px solid red');
+ });
+});
diff --git a/src/components/LoginPage/JoinServer/JoinServer.jsx b/src/components/LoginPage/JoinServer/JoinServer.jsx
new file mode 100644
index 0000000..c267007
--- /dev/null
+++ b/src/components/LoginPage/JoinServer/JoinServer.jsx
@@ -0,0 +1,66 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { SocketContext } from '../../../App';
+import refresh from '../../../images/login-page/refresh.png';
+import NameInput from '../NameInput/NameInput';
+import Overlay from '../../Overlay/Overlay';
+import WindowLayout from '../WindowLayout/WindowLayout';
+import ServersTable from './ServersTable/ServersTable';
+import withLoading from '../../HOC/withLoading';
+import useSocketData from '../../../hooks/useSocketData';
+import styles from './JoinServer.module.css';
+
+const JoinServer = () => {
+ const socket = useContext(SocketContext);
+ const [rooms, setRooms] = useSocketData('room:rooms');
+
+ const [joining, setJoining] = useState(false);
+ const [clickedRoom, setClickedRoom] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ socket.emit('room:rooms');
+ socket.on('room:rooms', () => {
+ setIsLoading(false);
+ });
+ }, [socket]);
+
+ const getRooms = () => {
+ setRooms([]);
+ socket.emit('room:rooms');
+ };
+
+ const handleJoinClick = room => {
+ setClickedRoom(room);
+ setJoining(true);
+ };
+
+ const ServersTableWithLoading = withLoading(ServersTable);
+
+ return (
+ <>
+
+ 
+
+ }
+ content={
+
-
- Host A Server
-
-
+ }
+ />
);
};
diff --git a/src/components/LoginPage/AddServer/AddServer.module.css b/src/components/LoginPage/AddServer/AddServer.module.css
new file mode 100644
index 0000000..7c91a94
--- /dev/null
+++ b/src/components/LoginPage/AddServer/AddServer.module.css
@@ -0,0 +1,15 @@
+.formContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+.privateContainer {
+ margin-left: 10px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+}
diff --git a/src/components/LoginPage/AddServer/AddServer.test.js b/src/components/LoginPage/AddServer/AddServer.test.js
new file mode 100644
index 0000000..3602cb4
--- /dev/null
+++ b/src/components/LoginPage/AddServer/AddServer.test.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SocketContext } from '../../../App';
+import AddServer from './AddServer';
+
+const mockSocket = {
+ emit: jest.fn(),
+};
+
+describe('AddServer component', () => {
+ it('should renders without crashing', () => {
+ render(
+
+
+ }
+ />
+ {joining ? (
+ | + | Server | +#/# | +Status | ++ |
|---|---|---|---|---|
| {room.private ? |
+ {room.name} | +{`${room.players.length}/4`} | +{room.isStarted ? 'started' : 'waiting'} | ++ + | +
-
-
+
+
);
};
diff --git a/src/components/LoginPage/LoginPage.module.css b/src/components/LoginPage/LoginPage.module.css
new file mode 100644
index 0000000..b15dd68
--- /dev/null
+++ b/src/components/LoginPage/LoginPage.module.css
@@ -0,0 +1,8 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+ height: 50%;
+ width: 100%;
+}
diff --git a/src/components/LoginPage/LoginPage.test.js b/src/components/LoginPage/LoginPage.test.js
new file mode 100644
index 0000000..d165830
--- /dev/null
+++ b/src/components/LoginPage/LoginPage.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LoginPage from './LoginPage';
+
+jest.mock('./JoinServer/JoinServer', () => () => );
+jest.mock('./AddServer/AddServer', () => () => );
+
+describe('LoginPage component', () => {
+ it('should renders JoinServer component ', () => {
+ render(
-
+
+ );
+ expect(screen.getByPlaceholderText('Room password')).toBeInTheDocument();
+ });
+
+ it('should not renders password field when room is not private', () => {
+ render(
+
+
+ );
+ expect(screen.queryByPlaceholderText('Room password')).not.toBeInTheDocument();
+ });
+
+ it('should handles input change', () => {
+ render(
+
+
+ );
+ const nicknameInput = screen.getByPlaceholderText('Nickname');
+ fireEvent.change(nicknameInput, { target: { value: 'TestName' } });
+ expect(nicknameInput.value).toBe('TestName');
+ });
+
+ it('should handles password change', () => {
+ render(
+
+
+ );
+ const passwordInput = screen.getByPlaceholderText('Room password');
+ fireEvent.change(passwordInput, { target: { value: 'TestPassword' } });
+ expect(passwordInput.value).toBe('TestPassword');
+ });
+
+ it('should handles button click', () => {
+ render(
+
+
+ );
+ const nicknameInput = screen.getByPlaceholderText('Nickname');
+ fireEvent.change(nicknameInput, { target: { value: 'TestName' } });
+ const passwordInput = screen.getByPlaceholderText('Room password');
+ fireEvent.change(passwordInput, { target: { value: 'TestPassword' } });
+ const button = screen.getByText('JOIN');
+ fireEvent.click(button);
+ expect(mockSocket.emit).toHaveBeenCalledWith('player:login', {
+ name: 'TestName',
+ password: 'TestPassword',
+ roomId: 123,
+ });
+ });
+
+ it('should handles Enter key press', () => {
+ render(
+
+
+ );
+ const nicknameInput = screen.getByPlaceholderText('Nickname');
+ fireEvent.change(nicknameInput, { target: { value: 'TestName' } });
+ const passwordInput = screen.getByPlaceholderText('Room password');
+ fireEvent.change(passwordInput, { target: { value: 'TestPassword' } });
+ fireEvent.keyDown(nicknameInput, { key: 'Enter' });
+ expect(mockSocket.emit).toHaveBeenCalledWith('player:login', {
+ name: 'TestName',
+ password: 'TestPassword',
+ roomId: 123,
+ });
+ });
+});
diff --git a/src/components/LoginPage/ServerList/ServerList.css b/src/components/LoginPage/ServerList/ServerList.css
deleted file mode 100644
index 318a008..0000000
--- a/src/components/LoginPage/ServerList/ServerList.css
+++ /dev/null
@@ -1,51 +0,0 @@
-th {
- text-align: left;
-}
-img {
- margin-right: 5px;
- width: 20px;
- height: 20px;
-}
-th,
-td {
- padding: 8px;
- text-align: left;
- height: 50px;
-}
-tr {
- max-height: 50px;
-}
-
-table {
- border-collapse: collapse;
- width: 100%;
-}
-.server-container {
- display: flex;
- height: 500px;
- overflow: scroll;
-}
-.room-name {
- max-width: 150px;
- overflow: hidden;
-}
-/* Firefox */
-* {
- scrollbar-width: auto;
- scrollbar-color: #ffffff rgba(0, 0, 0, 0.1);
-}
-
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
- background: rgba(0, 0, 0, 0);
- width: 10px;
-}
-
-*::-webkit-scrollbar-track {
- background: rgba(0, 0, 0, 0);
-}
-
-*::-webkit-scrollbar-thumb {
- background-color: #ffffff;
- border-radius: 10px;
-}
diff --git a/src/components/LoginPage/ServerList/ServerList.jsx b/src/components/LoginPage/ServerList/ServerList.jsx
deleted file mode 100644
index 16eb46e..0000000
--- a/src/components/LoginPage/ServerList/ServerList.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { SocketContext } from '../../../App';
-import lock from '../../../images/login-page/lock.png';
-import refresh from '../../../images/login-page/refresh.png';
-import ReactLoading from 'react-loading';
-
-import './ServerList.css';
-import NameInput from '../NameInput/NameInput';
-
-const ServerList = () => {
- const socket = useContext(SocketContext);
- const [rooms, setRooms] = useState([]);
- const [joining, setJoining] = useState(false);
- const [clickedRoom, setClickedRoom] = useState(null);
- useEffect(() => {
- socket.emit('room:rooms');
- socket.on('room:rooms', data => {
- data = JSON.parse(data);
- setRooms(data);
- });
- }, [socket]);
-
- const getRooms = () => {
- setRooms(null);
- socket.emit('room:rooms');
- };
-
- const handleJoinClick = room => {
- setClickedRoom(room);
- setJoining(true);
- };
-
- return (
- Test Title Component
}
+ content={
-
- {isRoomPrivate ? (
-
- ) : null}
-
-
+
+
+ {isRoomPrivate ? (
+
+ ) : null}
+
);
};
diff --git a/src/components/LoginPage/NameInput/NameInput.module.css b/src/components/LoginPage/NameInput/NameInput.module.css
new file mode 100644
index 0000000..a55980e
--- /dev/null
+++ b/src/components/LoginPage/NameInput/NameInput.module.css
@@ -0,0 +1,20 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ padding: 10px 20px 60px 20px;
+ width: 300px;
+ background: radial-gradient(circle, rgba(0, 138, 255, 1) 5%, rgba(9, 9, 121, 1) 81%);
+ border: 1px solid white;
+ border-radius: 8px;
+ margin: 20px;
+ z-index: 2;
+}
+.container > button {
+ margin-top: 5px;
+ text-align: center;
+ width: 100px;
+ align-self: center;
+}
+.container > input {
+ margin-top: 10px;
+}
diff --git a/src/components/LoginPage/NameInput/NameInput.test.js b/src/components/LoginPage/NameInput/NameInput.test.js
new file mode 100644
index 0000000..44e2702
--- /dev/null
+++ b/src/components/LoginPage/NameInput/NameInput.test.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NameInput from './NameInput';
+import { SocketContext } from '../../../App';
+
+const mockSocket = {
+ on: jest.fn(),
+ emit: jest.fn(),
+};
+
+describe('NameInput component', () => {
+ it('should renders password field when room is private', () => {
+ render(
+
-
- );
-};
-export default ServerList;
diff --git a/src/components/LoginPage/WindowLayout/WindowLayout.jsx b/src/components/LoginPage/WindowLayout/WindowLayout.jsx
new file mode 100644
index 0000000..ee85e85
--- /dev/null
+++ b/src/components/LoginPage/WindowLayout/WindowLayout.jsx
@@ -0,0 +1,15 @@
+import styles from './WindowLayout.module.css';
+
+const WindowLayout = ({ title, titleComponent, content }) => {
+ return (
+
-
- Server List
-
-
-
-
- {rooms ? (
-
-
-
- ) : (
-
- {joining ? | - | Server | -#/# | -Status | -- |
|---|---|---|---|---|
| {room.private ? |
- {room.name} | -{`${room.players.length}/4`} | -{room.isStarted ? 'started' : 'waiting'} | -- - | -
-
- )}
-
+
+ );
+};
+
+export default WindowLayout;
diff --git a/src/components/LoginPage/LoginPage.css b/src/components/LoginPage/WindowLayout/WindowLayout.module.css
similarity index 76%
rename from src/components/LoginPage/LoginPage.css
rename to src/components/LoginPage/WindowLayout/WindowLayout.module.css
index 3376c6f..ca9f74e 100644
--- a/src/components/LoginPage/LoginPage.css
+++ b/src/components/LoginPage/WindowLayout/WindowLayout.module.css
@@ -1,25 +1,14 @@
-.login-page-container {
- display: flex;
- flex-direction: row;
-
- justify-content: center;
- align-items: flex-start;
- height: 50%;
- width: 100%;
-}
-
-.lp-container {
+.container {
margin: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 500px;
- padding: 20px;
color: white;
}
-.title-container {
+.title {
display: flex;
flex-direction: row;
justify-content: center;
@@ -34,17 +23,21 @@
text-align: center;
}
-.title-container > h1 {
+.title > h1 {
width: 100%;
margin: 0;
padding: 0;
}
-.content-container {
+.content {
display: flex;
flex-direction: column;
+ justify-content: center;
+ align-items: center;
width: 100%;
- padding: 10px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-top: 10px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-left: 1px solid black;
diff --git a/src/components/LoginPage/WindowLayout/WindowLayout.test.js b/src/components/LoginPage/WindowLayout/WindowLayout.test.js
new file mode 100644
index 0000000..2bd1827
--- /dev/null
+++ b/src/components/LoginPage/WindowLayout/WindowLayout.test.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import WindowLayout from './WindowLayout';
+
+jest.mock('./WindowLayout', () => ({ title, titleComponent, content }) => (
+
+
+ {title}
+ {titleComponent} +{content}
+
+
+));
+
+describe('WindowLayout component', () => {
+ it('should render without crashing', () => {
+ render(
+ {title}
+ {titleComponent}
+ {content}
+ Test Content
}
+ />
+ );
+ expect(screen.getByTestId('mocked-window-layout')).toBeInTheDocument();
+ expect(screen.getByTestId('mocked-title')).toHaveTextContent('Test Title');
+ expect(screen.getByTestId('mocked-title-component')).toHaveTextContent('Test Title Component');
+ expect(screen.getByTestId('mocked-content')).toHaveTextContent('Test Content');
+ });
+});
diff --git a/src/components/Navbar/Dice/Dice.jsx b/src/components/Navbar/Dice/Dice.jsx
new file mode 100644
index 0000000..ff5a4d5
--- /dev/null
+++ b/src/components/Navbar/Dice/Dice.jsx
@@ -0,0 +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, playerColor, movingPlayer }) => {
+ const socket = useContext(SocketContext);
+
+ const handleClick = () => {
+ socket.emit('game:roll');
+ };
+
+ const isCurrentPlayer = movingPlayer === playerColor;
+ const hasRolledNumber = rolledNumber !== null;
+
+ return (
+
+ {isCurrentPlayer &&
+ (hasRolledNumber ? (
+
+ ) : (
+ nowMoving &&
+ ))}
+
+ );
+};
+
+export default Dice;
diff --git a/src/components/Navbar/Dice/Dice.module.css b/src/components/Navbar/Dice/Dice.module.css
new file mode 100644
index 0000000..ce20014
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Navbar/Dice/Dice.test.js b/src/components/Navbar/Dice/Dice.test.js
new file mode 100644
index 0000000..5de3150
--- /dev/null
+++ b/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(
+
{player.name}
{player.nowMoving ?
+
+
+ );
+};
+
+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();
+ });
+});
diff --git a/src/components/Navbar/ReadyButton/ReadyButton.jsx b/src/components/Navbar/ReadyButton/ReadyButton.jsx
index 86d40ed..4d5a2b2 100644
--- a/src/components/Navbar/ReadyButton/ReadyButton.jsx
+++ b/src/components/Navbar/ReadyButton/ReadyButton.jsx
@@ -1,8 +1,7 @@
import React, { useState, useContext } from 'react';
import { SocketContext } from '../../../App';
import Switch from '@mui/material/Switch';
-import '../Navbar.css';
-import '../NameContainer/AnimatedOverlay/TimerAnimation';
+import styles from './ReadyButton.module.css';
const ReadyButton = ({ isReady }) => {
const socket = useContext(SocketContext);
@@ -13,7 +12,7 @@ const ReadyButton = ({ isReady }) => {
setChecked(!checked);
};
return (
-
+
+
+ );
+ });
+
+ it('emits "player:ready" event and toggles switch on change', () => {
+ render(
+
+
+ );
+
+ const switchElement = screen.getByRole('checkbox');
+ fireEvent.click(switchElement);
+
+ expect(mockSocket.emit).toHaveBeenCalledWith('player:ready');
+ expect(switchElement).toBeChecked();
+ });
+
+ it('displays correct label when switch is checked', () => {
+ render(
+
+
+ );
+
+ const labelElement = screen.getByText('I want to play');
+ expect(labelElement).toBeInTheDocument();
+ });
+
+ it('displays correct label when switch is not checked', () => {
+ render(
+
+
+ );
+
+ const labelElement = screen.getByText('Im waiting');
+ expect(labelElement).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Overlay/Overlay.jsx b/src/components/Overlay/Overlay.jsx
new file mode 100644
index 0000000..30164d3
--- /dev/null
+++ b/src/components/Overlay/Overlay.jsx
@@ -0,0 +1,9 @@
+import styles from './Overlay.module.css';
+import useKeyPress from '../../hooks/useKeyPress';
+
+const Overlay = ({ children, handleOverlayClose }) => {
+ useKeyPress('Escape', handleOverlayClose);
+
+ return {}} />);
+ expect(container).toBeInTheDocument();
+ });
+
+ it('renders children inside Overlay', () => {
+ const { getByTestId } = render(
+ {}}>
+
+
+ );
+ expect(getByTestId('test-child')).toBeInTheDocument();
+ });
+
+ it('calls handleOverlayClose on Escape key press', async () => {
+ const handleOverlayCloseMock = jest.fn();
+ render(
{children}
;
+};
+export default Overlay;
diff --git a/src/components/Overlay/Overlay.module.css b/src/components/Overlay/Overlay.module.css
new file mode 100644
index 0000000..115d2ae
--- /dev/null
+++ b/src/components/Overlay/Overlay.module.css
@@ -0,0 +1,13 @@
+.container {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1;
+ cursor: pointer;
+}
diff --git a/src/components/Overlay/Overlay.test.js b/src/components/Overlay/Overlay.test.js
new file mode 100644
index 0000000..c7907be
--- /dev/null
+++ b/src/components/Overlay/Overlay.test.js
@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import Overlay from './Overlay';
+import userEvent from '@testing-library/user-event';
+
+describe('Overlay component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders Overlay component', () => {
+ const { container } = render(