From b506e3774e2f3c559947ca3ac3e9a889e145c069 Mon Sep 17 00:00:00 2001 From: Pablo Barrero Cruz Date: Sat, 27 Apr 2024 13:11:46 +0200 Subject: [PATCH 1/2] Updating Backgrounds --- webapp/src/index.css | 1 + webapp/src/pages/GroupDetails.js | 25 +++++++++++++++++++++++++ webapp/src/pages/Groups.js | 22 ++++++++++++++++++++++ webapp/src/pages/Instructions.js | 2 -- webapp/src/pages/Ranking.js | 19 +++++++++++++++++++ webapp/src/pages/Statistics.js | 22 ++++++++++++++++++++++ 6 files changed, 89 insertions(+), 2 deletions(-) diff --git a/webapp/src/index.css b/webapp/src/index.css index d0d08a2c..5bcaa367 100644 --- a/webapp/src/index.css +++ b/webapp/src/index.css @@ -1,4 +1,5 @@ body { + background-image: url('../public/hurta2.jpg'); background-size: cover; background-repeat: no-repeat; margin: 0; diff --git a/webapp/src/pages/GroupDetails.js b/webapp/src/pages/GroupDetails.js index 621fa121..f84a2ff5 100644 --- a/webapp/src/pages/GroupDetails.js +++ b/webapp/src/pages/GroupDetails.js @@ -35,9 +35,31 @@ const GroupDetails = () => { navigate(`/statistics/${name}`); }; + //Video settings + const styles = { + video: { + position: "absolute", + top: "50%", + left: "50%", + width: "100%", + height: "100%", + transform: "translate(-50%, -50%)", + objectFit: "cover", + zIndex: '-1', + userSelect: 'none', + pointerEvents: 'none' + }, + }; + + const videoRef = React.useRef(null); + React.useEffect(() => {if (videoRef.current) {videoRef.current.playbackRate = 0.85;}}, []); + if (error || !groupInfo) { return ( + {error} ) @@ -50,6 +72,9 @@ const GroupDetails = () => { // Returns all group data including the creator, the creation date and the members list return ( + {groupInfo.name} diff --git a/webapp/src/pages/Groups.js b/webapp/src/pages/Groups.js index e30383fd..25b28419 100644 --- a/webapp/src/pages/Groups.js +++ b/webapp/src/pages/Groups.js @@ -95,8 +95,30 @@ const Groups = () => { navigate(`/group/${groupName}`); }; + //Video settings + const styles = { + video: { + position: "absolute", + top: "50%", + left: "50%", + width: "100%", + height: "100%", + transform: "translate(-50%, -50%)", + objectFit: "cover", + zIndex: '-1', + userSelect: 'none', + pointerEvents: 'none' + }, + }; + const videoRef = React.useRef(null); + React.useEffect(() => {if (videoRef.current) {videoRef.current.playbackRate = 0.85;}}, []); + return ( + + { t("Groups.title") } diff --git a/webapp/src/pages/Instructions.js b/webapp/src/pages/Instructions.js index 0308bef6..c2f22c68 100644 --- a/webapp/src/pages/Instructions.js +++ b/webapp/src/pages/Instructions.js @@ -54,8 +54,6 @@ const Instructions = () => { pointerEvents: 'none', top:'0', left:'0', - opacity:'0.5', - }, gameDisplayRow:{ diff --git a/webapp/src/pages/Ranking.js b/webapp/src/pages/Ranking.js index a26ec4c5..b231dbab 100644 --- a/webapp/src/pages/Ranking.js +++ b/webapp/src/pages/Ranking.js @@ -47,6 +47,21 @@ const Ranking = () => { { field: 'totalGamesPlayed', headerName: 'TOTAL GAMES', flex: 1, align: 'center', headerAlign: 'center' } ]; + //Video settings + const styles = { + video:{ + position: "absolute", + width: "100%", + height: "100%", + objectFit: "cover", + zIndex:'-1', + userSelect:'none', + pointerEvents: 'none' + }, + }; + const videoRef = React.useRef(null); + React.useEffect(() => {if (videoRef.current) {videoRef.current.playbackRate = 0.85;}}, []); + return ( { flexGrow: 1 }}> +< video data-testid="video" ref={videoRef} autoPlay muted loop style={{ ...styles.video}}> + + + RANKING diff --git a/webapp/src/pages/Statistics.js b/webapp/src/pages/Statistics.js index 79b90b51..83b6b14c 100644 --- a/webapp/src/pages/Statistics.js +++ b/webapp/src/pages/Statistics.js @@ -273,8 +273,30 @@ const Statistics = () => { } }; + //Video settings + const styles = { + video: { + position: "absolute", + top: "50%", + left: "50%", + width: "100%", + height: "100%", + transform: "translate(-50%, -50%)", + objectFit: "cover", + zIndex: '-1', + userSelect: 'none', + pointerEvents: 'none' + }, + }; + + const videoRef = React.useRef(null); + React.useEffect(() => {if (videoRef.current) {videoRef.current.playbackRate = 0.85;}}, []); + return ( + { t("Statistics.title") } From f2c6261d58783771ae6a3348a7a3fd699bd77433 Mon Sep 17 00:00:00 2001 From: Pablo Barrero Cruz Date: Sat, 27 Apr 2024 13:11:59 +0200 Subject: [PATCH 2/2] Testing Backgrounds --- .../src/__tests__/pages/GroupDetails.test.js | 21 +++++++++++++++++-- webapp/src/__tests__/pages/Groups.test.js | 8 +++++++ webapp/src/__tests__/pages/Ranking.test.js | 11 ++++++++++ webapp/src/__tests__/pages/Statistics.test.js | 14 +++++++++++++ 4 files changed, 52 insertions(+), 2 deletions(-) diff --git a/webapp/src/__tests__/pages/GroupDetails.test.js b/webapp/src/__tests__/pages/GroupDetails.test.js index 8add14e0..507e5368 100644 --- a/webapp/src/__tests__/pages/GroupDetails.test.js +++ b/webapp/src/__tests__/pages/GroupDetails.test.js @@ -1,12 +1,12 @@ import React from 'react'; -import { render, waitFor } from '@testing-library/react'; +import { render, waitFor, screen } from '@testing-library/react'; import { BrowserRouter as Router, useParams } from 'react-router-dom'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import GroupDetails from '../../pages/GroupDetails'; import '../../localize/i18n'; import { SessionContext } from '../../SessionContext'; - + const mockAxios = new MockAdapter(axios); jest.mock('react-router-dom', () => ({ @@ -51,6 +51,23 @@ describe('GroupDetails component', () => { }); }); + it('debe reproducir el video a una velocidad de 0.85', async () => { + render( + + + + + + ); + + await waitFor(() => { + const videoElement = screen.getByTestId('video'); + expect(videoElement).toBeInTheDocument(); + expect(videoElement.playbackRate).toBe(0.85); + }); + + }); + it('should render error message when failed to fetch group information', async () => { mockAxios.onGet(`http://localhost:8000/group/NonExistentGroup`).reply(404); diff --git a/webapp/src/__tests__/pages/Groups.test.js b/webapp/src/__tests__/pages/Groups.test.js index 1b131899..3f90b486 100644 --- a/webapp/src/__tests__/pages/Groups.test.js +++ b/webapp/src/__tests__/pages/Groups.test.js @@ -31,6 +31,14 @@ describe('Groups component', () => { }); }; + it('debe reproducir el video a una velocidad de 0.85', async () => { + renderGroupsComponent(); + const videoElement = screen.getByTestId('video'); + expect(videoElement).toBeInTheDocument(); + expect(videoElement.playbackRate).toBe(0.85); + + }); + it('should render groups list and creation elements', async () => { // It mocks a succesful request getting two groups from the database. mockAxios.onGet('http://localhost:8000/group').reply(200, { groups: [{ name: 'Group 1' }, { name: 'Group 2' }] }); diff --git a/webapp/src/__tests__/pages/Ranking.test.js b/webapp/src/__tests__/pages/Ranking.test.js index 76a32d0f..bebeab4c 100644 --- a/webapp/src/__tests__/pages/Ranking.test.js +++ b/webapp/src/__tests__/pages/Ranking.test.js @@ -32,6 +32,17 @@ describe('Ranking Component', () => { }); + it('debe reproducir el video a una velocidad de 0.85', async () => { + render(); + + setTimeout(() => { + const videoElement = screen.getByTestId('video'); + expect(videoElement).toBeInTheDocument(); + expect(videoElement.playbackRate).toBe(0.85); + }, 15); + + }); + it('should display group ranking when "GROUPS" button is clicked', async () => { const groupRanking = { data: { rank: [ diff --git a/webapp/src/__tests__/pages/Statistics.test.js b/webapp/src/__tests__/pages/Statistics.test.js index ed24cbd5..9600c720 100644 --- a/webapp/src/__tests__/pages/Statistics.test.js +++ b/webapp/src/__tests__/pages/Statistics.test.js @@ -136,6 +136,20 @@ describe('Statistics component', () => { expect(screen.getByText('2')).toBeInTheDocument(); }); + it('debe reproducir el video a una velocidad de 0.85', async () => { + render( + + + + + + ); + const videoElement = screen.getByTestId('video'); + expect(videoElement).toBeInTheDocument(); + expect(videoElement.playbackRate).toBe(0.85); + + }); + it('should render Statistics component with correct user statistics for Wise Men Stack mode', async () => { render(