From 469a60871af6edc613690bdae2ffb79df027fe2b Mon Sep 17 00:00:00 2001
From: Wenszel <wiktor.smaga13@gmail.com>
Date: Tue, 12 Dec 2023 20:13:13 +0100
Subject: [PATCH] added tests and css modules for NameContainer components

---
 .../AnimatedOverlay/AnimatedOverlay.jsx       | 11 +---
 .../AnimatedOverlay.module.css                | 10 ++++
 .../AnimatedOverlay/AnimatedOverlay.test.js   | 20 +++++++
 .../AnimatedOverlay/TimerAnimation.js         | 19 +++---
 .../Navbar/NameContainer/NameContainer.jsx    |  7 +--
 .../NameContainer/NameContainer.module.css    | 13 +++++
 .../NameContainer/NameContainer.test.js       | 58 +++++++++++++++++++
 src/constants/colors.js                       |  2 +
 src/index.css                                 | 13 -----
 9 files changed, 118 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.module.css
 create mode 100644 src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.test.js
 create mode 100644 src/components/Navbar/NameContainer/NameContainer.module.css
 create mode 100644 src/components/Navbar/NameContainer/NameContainer.test.js
 create mode 100644 src/constants/colors.js

diff --git a/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.jsx b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.jsx
index ba0558a..7c19fa2 100644
--- a/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.jsx
+++ b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.jsx
@@ -1,19 +1,12 @@
 import React, { useMemo } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import './TimerAnimation.js';
-
 const AnimatedOverlay = ({ time }) => {
     const animationDelay = useMemo(() => 15 - Math.ceil((time - Date.now()) / 1000), [time]);
 
     return (
-        <CSSTransition
-            in={true}
-            timeout={0}
-            classNames='overlay'
-            style={{ animationDelay: `-${animationDelay}s` }}
-            unmountOnExit
-        >
-            <div className='overlay'></div>
+        <CSSTransition in={true} timeout={0} style={{ animationDelay: `-${animationDelay}s` }} unmountOnExit>
+            <div className='overlay' data-testid='animated-overlay'></div>
         </CSSTransition>
     );
 };
diff --git a/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.module.css b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.module.css
new file mode 100644
index 0000000..23f87f4
--- /dev/null
+++ b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.module.css
@@ -0,0 +1,10 @@
+.overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.9;
+    animation: timerAnimation 15s linear infinite;
+    transition-duration: 15s;
+}
diff --git a/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.test.js b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.test.js
new file mode 100644
index 0000000..77b8d9e
--- /dev/null
+++ b/src/components/Navbar/NameContainer/AnimatedOverlay/AnimatedOverlay.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AnimatedOverlay from './AnimatedOverlay';
+
+describe('AnimatedOverlay component', () => {
+    it('renders without crashing', () => {
+        render(<AnimatedOverlay time={0} />);
+    });
+
+    it('applies animation delay based on time prop', () => {
+        const timeNow = Date.now();
+        const time = timeNow + 5000;
+        render(<AnimatedOverlay time={time} />);
+        const overlay = screen.getByTestId('animated-overlay');
+        const expectedDelay = 15 - Math.ceil((time - timeNow) / 1000);
+
+        expect(overlay).toHaveStyle({ animationDelay: `-${expectedDelay}s` });
+    });
+});
diff --git a/src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js b/src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js
index a8742a4..084300a 100644
--- a/src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js
+++ b/src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js
@@ -4,20 +4,20 @@ const steps = 86;
 let count = 0;
 let s = 'polygon(50% 50%, 50% 0%, 50% 0%';
 
-for (let i = 50; i <= 100; i += 5) {
+for (let i = 50; i < 100; i += 5) {
     s += `, ${i}% 0%`;
     handle();
 }
-for (let i = 0; i <= 100; i += 5) {
+for (let i = 0; i < 100; i += 5) {
     s += `, 100% ${i}%`;
     handle();
 }
-for (let i = 100; i >= 0; i -= 5) {
+for (let i = 100; i > 0; i -= 5) {
     s += `, ${i}% 100%`;
     handle();
 }
 
-for (let i = 100; i >= 0; i -= 5) {
+for (let i = 100; i > 0; i -= 5) {
     s += `, 0% ${i}%`;
     handle();
 }
@@ -52,12 +52,13 @@ function handle() {
     keyframes.push(step);
     count++;
 }
-
-document.styleSheets[0].insertRule(
-    `
+if (document && document.styleSheets && document.styleSheets[0]) {
+    document.styleSheets[0].insertRule(
+        `
   @keyframes timerAnimation {
     ${keyframes.join('\n')}
   }
 `,
-    document.styleSheets[0].cssRules.length
-);
+        document.styleSheets[0].cssRules.length
+    );
+}
diff --git a/src/components/Navbar/NameContainer/NameContainer.jsx b/src/components/Navbar/NameContainer/NameContainer.jsx
index 14981ee..53ba65d 100644
--- a/src/components/Navbar/NameContainer/NameContainer.jsx
+++ b/src/components/Navbar/NameContainer/NameContainer.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import AnimatedOverlay from './AnimatedOverlay/AnimatedOverlay';
+import styles from './NameContainer.module.css';
 
 const NameContainer = ({ player, time }) => {
     return (
-        <div
-            className='name-container'
-            style={player.ready ? { backgroundColor: player.color } : { backgroundColor: 'lightgrey' }}
-        >
+        <div className={styles.container} style={{ backgroundColor: player.ready ? player.color : 'lightgrey' }}>
             <p>{player.name}</p>
             {player.nowMoving ? <AnimatedOverlay time={time} /> : null}
         </div>
@@ -17,6 +15,7 @@ const NameContainer = ({ player, time }) => {
 NameContainer.propTypes = {
     player: PropTypes.object,
     time: PropTypes.number,
+    testId: PropTypes.string,
 };
 
 export default NameContainer;
diff --git a/src/components/Navbar/NameContainer/NameContainer.module.css b/src/components/Navbar/NameContainer/NameContainer.module.css
new file mode 100644
index 0000000..b5ef2f2
--- /dev/null
+++ b/src/components/Navbar/NameContainer/NameContainer.module.css
@@ -0,0 +1,13 @@
+.container {
+    position: relative;
+    min-width: 100px;
+    min-height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid white;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+}
diff --git a/src/components/Navbar/NameContainer/NameContainer.test.js b/src/components/Navbar/NameContainer/NameContainer.test.js
new file mode 100644
index 0000000..030f9af
--- /dev/null
+++ b/src/components/Navbar/NameContainer/NameContainer.test.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NameContainer from './NameContainer';
+import { NOT_READY_COLOR } from '../../../constants/colors';
+
+jest.mock('./AnimatedOverlay/AnimatedOverlay.jsx', () => () => {
+    return <mock-animated-overlay data-testid='animated-overlay' />;
+});
+
+describe('NameContainer component', () => {
+    let player;
+    let time;
+
+    beforeEach(() => {
+        player = {
+            name: 'TestPlayer',
+            ready: false,
+            color: 'blue',
+            nowMoving: false,
+        };
+        time = 0;
+    });
+
+    it('renders without crashing', () => {
+        render(<NameContainer player={player} time={time} />);
+    });
+
+    it('renders player name', () => {
+        render(<NameContainer player={player} time={time} />);
+        expect(screen.getByText(player.name)).toBeInTheDocument();
+    });
+
+    it('applies grey color when player is not ready', () => {
+        player.ready = false;
+        render(<NameContainer player={player} time={time} testId='name-container' />);
+        const container = screen.getByText(player.name).closest('div');
+        expect(container).toHaveStyle({ backgroundColor: NOT_READY_COLOR });
+    });
+
+    it('applies player colors as background when player is ready', () => {
+        player.ready = true;
+        render(<NameContainer player={player} time={time} testId='name-container' />);
+        const container = screen.getByText(player.name).closest('div');
+        expect(container).toHaveStyle({ backgroundColor: player.color });
+    });
+
+    it('renders AnimatedOverlay when player is nowMoving', () => {
+        const movingPlayer = { ...player, nowMoving: true };
+        render(<NameContainer player={movingPlayer} time={time} />);
+        expect(screen.getByTestId('animated-overlay')).toBeInTheDocument();
+    });
+
+    it('does not render AnimatedOverlay when player is not nowMoving', () => {
+        render(<NameContainer player={player} time={time} />);
+        expect(screen.queryByTestId('animated-overlay')).toBeNull();
+    });
+});
diff --git a/src/constants/colors.js b/src/constants/colors.js
new file mode 100644
index 0000000..1e1034e
--- /dev/null
+++ b/src/constants/colors.js
@@ -0,0 +1,2 @@
+export const NOT_READY_COLOR = 'lightgrey';
+export const PLAYER_COLORS = ['red', 'blue', 'green', 'yellow'];
diff --git a/src/index.css b/src/index.css
index 1346031..f4893af 100644
--- a/src/index.css
+++ b/src/index.css
@@ -29,19 +29,6 @@ canvas {
     flex-direction: row;
 }
 
-.name-container {
-    position: relative;
-    min-width: 100px;
-    min-height: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 2px solid white;
-    border-radius: 5px;
-    color: white;
-    font-weight: bold;
-    text-align: center;
-}
 .timer {
     background-color: darkblue;
     color: white;