mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Merge pull request #208 from ets-cfuhrman-pfe/JubaAzul/issue207
Some checks failed
CI/CD Pipeline for Backend / build_and_push_backend (push) Failing after 1m10s
CI/CD Pipeline for Nginx Router / build_and_push_nginx (push) Failing after 50s
CI/CD Pipeline for Frontend / build_and_push_frontend (push) Failing after 17s
Tests / tests (client) (push) Failing after 1m26s
Tests / tests (server) (push) Failing after 1m1s
Some checks failed
CI/CD Pipeline for Backend / build_and_push_backend (push) Failing after 1m10s
CI/CD Pipeline for Nginx Router / build_and_push_nginx (push) Failing after 50s
CI/CD Pipeline for Frontend / build_and_push_frontend (push) Failing after 17s
Tests / tests (client) (push) Failing after 1m26s
Tests / tests (server) (push) Failing after 1m1s
Indiquer le numéro de la question dans l'affichage enseignant
This commit is contained in:
Christopher (Cris) Fuhrman
GitHub
commit
4b7e93a199
6 changed files with 364 additions and 84 deletions
114
client/package-lock.json
generated
114
client/package-lock.json
generated
|
|
@ -14,7 +14,7 @@
|
|||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@mui/icons-material": "^6.1.0",
|
||||
"@mui/icons-material": "^6.4.1",
|
||||
"@mui/lab": "^5.0.0-alpha.153",
|
||||
"@mui/material": "^6.1.0",
|
||||
"@types/uuid": "^9.0.7",
|
||||
|
|
@ -2093,15 +2093,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@emotion/serialize": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
|
||||
"integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
|
||||
"integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/hash": "^0.9.2",
|
||||
"@emotion/memoize": "^0.9.0",
|
||||
"@emotion/unitless": "^0.10.0",
|
||||
"@emotion/utils": "^1.4.1",
|
||||
"@emotion/utils": "^1.4.2",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
|
|
@ -3355,9 +3355,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
|
||||
"integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.1.tgz",
|
||||
"integrity": "sha512-SfDLWMV5b5oXgDf3NTa2hCTPC1d2defhDH2WgFKmAiejC4mSfXYbyi+AFCLzpizauXhgBm8OaZy9BHKnrSpahQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -3365,9 +3365,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/icons-material": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
|
||||
"integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.1.tgz",
|
||||
"integrity": "sha512-wsxFcUTQxt4s+7Bg4GgobqRjyaHLmZGNOs+HJpbwrwmLbT6mhIJxhpqsKzzWq9aDY8xIe7HCjhpH7XI5UD6teA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0"
|
||||
|
|
@ -3380,7 +3380,7 @@
|
|||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^6.1.6",
|
||||
"@mui/material": "^6.4.1",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
|
|
@ -3464,22 +3464,22 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
|
||||
"integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz",
|
||||
"integrity": "sha512-MFBfia6UiKxyoLeGkAh8M15bkeDmfnsUTMRJd/vTQue6YQ8AQ6lw9HqDthyYghzDEWIvZO/lQQzLrZE8XwNJLA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/core-downloads-tracker": "^6.1.6",
|
||||
"@mui/system": "^6.1.6",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"@mui/core-downloads-tracker": "^6.4.1",
|
||||
"@mui/system": "^6.4.1",
|
||||
"@mui/types": "^7.2.21",
|
||||
"@mui/utils": "^6.4.1",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@types/react-transition-group": "^4.4.11",
|
||||
"@types/react-transition-group": "^4.4.12",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.3.1",
|
||||
"react-is": "^19.0.0",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
|
|
@ -3492,7 +3492,7 @@
|
|||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@mui/material-pigment-css": "^6.1.6",
|
||||
"@mui/material-pigment-css": "^6.4.1",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
|
|
@ -3513,13 +3513,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/private-theming": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
|
||||
"integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.1.tgz",
|
||||
"integrity": "sha512-DcT7mwK89owwgcEuiE7w458te4CIjHbYWW6Kn6PiR6eLtxBsoBYphA968uqsQAOBQDpbYxvkuFLwhgk4bxoN/Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"@mui/utils": "^6.4.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
|
|
@ -3540,14 +3540,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/styled-engine": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
|
||||
"integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.0.tgz",
|
||||
"integrity": "sha512-ek/ZrDujrger12P6o4luQIfRd2IziH7jQod2WMbLqGE03Iy0zUwYmckRTVhRQTLPNccpD8KXGcALJF+uaUQlbg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@emotion/cache": "^11.13.1",
|
||||
"@emotion/serialize": "^1.3.2",
|
||||
"@emotion/cache": "^11.13.5",
|
||||
"@emotion/serialize": "^1.3.3",
|
||||
"@emotion/sheet": "^1.4.0",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
|
|
@ -3574,16 +3574,16 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/system": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
|
||||
"integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.1.tgz",
|
||||
"integrity": "sha512-rgQzgcsHCTtzF9MZ+sL0tOhf2ZBLazpjrujClcb4Siju5lTrK0xX4PsiropActzCemNfM+mOu+0jezAVnfRK8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/private-theming": "^6.1.6",
|
||||
"@mui/styled-engine": "^6.1.6",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"@mui/private-theming": "^6.4.1",
|
||||
"@mui/styled-engine": "^6.4.0",
|
||||
"@mui/types": "^7.2.21",
|
||||
"@mui/utils": "^6.4.1",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
|
|
@ -3614,17 +3614,17 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/utils": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
|
||||
"integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.1.tgz",
|
||||
"integrity": "sha512-iQUDUeYh87SvR4lVojaRaYnQix8BbRV51MxaV6MBmqthecQoxwSbS5e2wnbDJUeFxY2ppV505CiqPLtd0OWkqw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@types/prop-types": "^15.7.13",
|
||||
"@mui/types": "^7.2.21",
|
||||
"@types/prop-types": "^15.7.14",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.3.1"
|
||||
"react-is": "^19.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
|
|
@ -3643,6 +3643,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/react-is": {
|
||||
"version": "19.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
|
||||
"integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@mui/private-theming": {
|
||||
"version": "5.16.14",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz",
|
||||
|
|
@ -3743,9 +3749,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/types": {
|
||||
"version": "7.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
|
||||
"integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
|
||||
"version": "7.2.21",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
|
||||
"integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
|
|
@ -4682,9 +4688,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
|
||||
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
|
||||
"version": "15.7.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
|
||||
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
|
|
@ -4718,11 +4724,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
|
||||
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
|
||||
"version": "4.4.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
|
||||
"integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"peerDependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@mui/icons-material": "^6.1.0",
|
||||
"@mui/icons-material": "^6.4.1",
|
||||
"@mui/lab": "^5.0.0-alpha.153",
|
||||
"@mui/material": "^6.1.0",
|
||||
"@types/uuid": "^9.0.7",
|
||||
|
|
|
|||
253
client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx
Normal file
253
client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
import React from 'react';
|
||||
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { MemoryRouter, useNavigate, useParams } from 'react-router-dom';
|
||||
import ManageRoom from 'src/pages/Teacher/ManageRoom/ManageRoom';
|
||||
import { StudentType } from 'src/Types/StudentType';
|
||||
import { QuizType } from 'src/Types/QuizType';
|
||||
import webSocketService, { AnswerReceptionFromBackendType } from 'src/services/WebsocketService';
|
||||
import ApiService from 'src/services/ApiService';
|
||||
import { Socket } from 'socket.io-client';
|
||||
|
||||
jest.mock('src/services/WebsocketService');
|
||||
jest.mock('src/services/ApiService');
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn(),
|
||||
useParams: jest.fn(),
|
||||
}));
|
||||
|
||||
const mockSocket = {
|
||||
on: jest.fn(),
|
||||
off: jest.fn(),
|
||||
emit: jest.fn(),
|
||||
connect: jest.fn(),
|
||||
disconnect: jest.fn(),
|
||||
} as unknown as Socket;
|
||||
|
||||
const mockQuiz: QuizType = {
|
||||
_id: 'test-quiz-id',
|
||||
title: 'Test Quiz',
|
||||
content: ['::Q1:: Question 1 { =Answer1 ~Answer2 }', '::Q2:: Question 2 { =Answer1 ~Answer2 }'],
|
||||
folderId: 'folder-id',
|
||||
folderName: 'folder-name',
|
||||
userId: 'user-id',
|
||||
created_at: new Date(),
|
||||
updated_at: new Date()
|
||||
};
|
||||
|
||||
const mockStudents: StudentType[] = [
|
||||
{ id: '1', name: 'Student 1', answers: [] },
|
||||
{ id: '2', name: 'Student 2', answers: [] },
|
||||
];
|
||||
|
||||
const mockAnswerData: AnswerReceptionFromBackendType = {
|
||||
answer: 'Answer1',
|
||||
idQuestion: 1,
|
||||
idUser: '1',
|
||||
username: 'Student 1',
|
||||
};
|
||||
|
||||
describe('ManageRoom', () => {
|
||||
const navigate = jest.fn();
|
||||
const useParamsMock = useParams as jest.Mock;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(useNavigate as jest.Mock).mockReturnValue(navigate);
|
||||
useParamsMock.mockReturnValue({ id: 'test-quiz-id' });
|
||||
(ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
|
||||
(webSocketService.connect as jest.Mock).mockReturnValue(mockSocket);
|
||||
});
|
||||
|
||||
test('prepares to launch quiz and fetches quiz data', async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
|
||||
});
|
||||
|
||||
const launchButton = screen.getByText('Lancer');
|
||||
fireEvent.click(launchButton);
|
||||
|
||||
const rythmeButton = screen.getByText('Rythme du professeur');
|
||||
fireEvent.click(rythmeButton);
|
||||
|
||||
const secondLaunchButton = screen.getAllByText('Lancer');
|
||||
fireEvent.click(secondLaunchButton[1]);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Quiz')).toBeInTheDocument();
|
||||
expect(screen.getByText('Salle: test-room-name')).toBeInTheDocument();
|
||||
expect(screen.getByText('0/60')).toBeInTheDocument();
|
||||
expect(screen.getByText('Question 1/2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test('handles create-success event', async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Salle: test-room-name')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test('handles user-joined event', async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
|
||||
userJoinedCallback(mockStudents[0]);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Student 1')).toBeInTheDocument();
|
||||
|
||||
});
|
||||
|
||||
const launchButton = screen.getByText('Lancer');
|
||||
fireEvent.click(launchButton);
|
||||
|
||||
const rythmeButton = screen.getByText('Rythme du professeur');
|
||||
fireEvent.click(rythmeButton);
|
||||
|
||||
const secondLaunchButton = screen.getAllByText('Lancer');
|
||||
fireEvent.click(secondLaunchButton[1]);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('1/60')).toBeInTheDocument();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
test('handles submit-answer-room event', async () => {
|
||||
const consoleSpy = jest.spyOn(console, 'log');
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
const launchButton = screen.getByText('Lancer');
|
||||
fireEvent.click(launchButton);
|
||||
|
||||
const rythmeButton = screen.getByText('Rythme du professeur');
|
||||
fireEvent.click(rythmeButton);
|
||||
|
||||
const secondLaunchButton = screen.getAllByText('Lancer');
|
||||
fireEvent.click(secondLaunchButton[1]);
|
||||
|
||||
await act(async () => {
|
||||
const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
|
||||
userJoinedCallback(mockStudents[0]);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1];
|
||||
submitAnswerCallback(mockAnswerData);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(consoleSpy).toHaveBeenCalledWith('Received answer from Student 1 for question 1: Answer1');
|
||||
});
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
test('handles next question', async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
const launchButton = screen.getByText('Lancer');
|
||||
fireEvent.click(launchButton);
|
||||
|
||||
const rythmeButton = screen.getByText('Rythme du professeur');
|
||||
fireEvent.click(rythmeButton);
|
||||
|
||||
const secondLaunchButton = screen.getAllByText('Lancer');
|
||||
fireEvent.click(secondLaunchButton[1]);
|
||||
|
||||
const nextQuestionButton = screen.getByText('Prochaine question');
|
||||
fireEvent.click(nextQuestionButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Question 2/2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test('handles disconnect', async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageRoom />
|
||||
</MemoryRouter>
|
||||
);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
|
||||
createSuccessCallback('test-room-name');
|
||||
});
|
||||
|
||||
const disconnectButton = screen.getByText('Quitter');
|
||||
fireEvent.click(disconnectButton);
|
||||
|
||||
const confirmButton = screen.getAllByText('Confirmer');
|
||||
fireEvent.click(confirmButton[1]);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(webSocketService.disconnect).toHaveBeenCalled();
|
||||
expect(navigate).toHaveBeenCalledWith('/teacher/dashboard');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -47,10 +47,10 @@ const LaunchQuizDialog: React.FC<Props> = ({ open, handleOnClose, launchQuiz, se
|
|||
|
||||
<DialogActions>
|
||||
<Button variant="outlined" onClick={handleOnClose}>
|
||||
Annuler
|
||||
<div>Annuler</div>
|
||||
</Button>
|
||||
<Button variant="contained" onClick={launchQuiz}>
|
||||
Lancer
|
||||
<div>Lancer</div>
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import LiveResultsComponent from 'src/components/LiveResults/LiveResults';
|
|||
// import { QuestionService } from '../../../services/QuestionService';
|
||||
import webSocketService, { AnswerReceptionFromBackendType } from '../../../services/WebsocketService';
|
||||
import { QuizType } from '../../../Types/QuizType';
|
||||
import GroupIcon from '@mui/icons-material/Group';
|
||||
|
||||
import './manageRoom.css';
|
||||
import { ENV_VARIABLES } from 'src/constants';
|
||||
|
|
@ -33,7 +34,8 @@ const ManageRoom: React.FC = () => {
|
|||
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
|
||||
const [connectingError, setConnectingError] = useState<string>('');
|
||||
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
|
||||
|
||||
const [quizStarted, setQuizStarted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (quizId.id) {
|
||||
const fetchquiz = async () => {
|
||||
|
|
@ -145,7 +147,7 @@ const ManageRoom: React.FC = () => {
|
|||
console.log('Quiz questions not found (cannot update answers without them).');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Update the students state using the functional form of setStudents
|
||||
setStudents((prevStudents) => {
|
||||
// print the list of current student names
|
||||
|
|
@ -153,7 +155,7 @@ const ManageRoom: React.FC = () => {
|
|||
prevStudents.forEach((student) => {
|
||||
console.log(student.name);
|
||||
});
|
||||
|
||||
|
||||
let foundStudent = false;
|
||||
const updatedStudents = prevStudents.map((student) => {
|
||||
console.log(`Comparing ${student.id} to ${idUser}`);
|
||||
|
|
@ -173,7 +175,7 @@ const ManageRoom: React.FC = () => {
|
|||
updatedAnswers = [...student.answers, newAnswer];
|
||||
}
|
||||
return { ...student, answers: updatedAnswers };
|
||||
}
|
||||
}
|
||||
return student;
|
||||
});
|
||||
if (!foundStudent) {
|
||||
|
|
@ -316,13 +318,18 @@ const ManageRoom: React.FC = () => {
|
|||
if (!socket || !roomName || !quiz?.content || quiz?.content.length === 0) {
|
||||
// TODO: This error happens when token expires! Need to handle it properly
|
||||
console.log(`Error launching quiz. socket: ${socket}, roomName: ${roomName}, quiz: ${quiz}`);
|
||||
setQuizStarted(true);
|
||||
|
||||
return;
|
||||
}
|
||||
switch (quizMode) {
|
||||
case 'student':
|
||||
setQuizStarted(true);
|
||||
return launchStudentMode();
|
||||
case 'teacher':
|
||||
setQuizStarted(true);
|
||||
return launchTeacherMode();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -427,9 +434,19 @@ const ManageRoom: React.FC = () => {
|
|||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter?`} />
|
||||
|
||||
<div className='centerTitle'>
|
||||
<div className='title'>Salle: {roomName}</div>
|
||||
<div className='userCount subtitle'>Utilisateurs: {students.length}/60</div>
|
||||
|
||||
|
||||
|
||||
<div className='headerContent' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
|
||||
<div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<div className='title'>Salle: {roomName}</div>
|
||||
</div>
|
||||
{quizStarted && (
|
||||
<div className='userCount subtitle smallText' style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<GroupIcon style={{ marginRight: '5px' }} />
|
||||
{students.length}/60
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='dumb'></div>
|
||||
|
|
@ -441,8 +458,12 @@ const ManageRoom: React.FC = () => {
|
|||
{quizQuestions ? (
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
<div className="title center-h-align mb-2">{quiz?.title}</div>
|
||||
{!isNaN(Number(currentQuestion?.question.id)) && (
|
||||
<strong className='number of questions'>
|
||||
Question {Number(currentQuestion?.question.id)}/{quizQuestions?.length}
|
||||
</strong>
|
||||
)}
|
||||
|
||||
{quizMode === 'teacher' && (
|
||||
|
||||
|
|
@ -479,23 +500,23 @@ const ManageRoom: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{quizMode === 'teacher' && (
|
||||
<div className="questionNavigationButtons" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div className="previousQuestionButton">
|
||||
<Button onClick={previousQuestion}
|
||||
variant="contained"
|
||||
disabled={Number(currentQuestion?.question.id) <= 1}>
|
||||
Question précédente
|
||||
</Button>
|
||||
</div>
|
||||
<div className="nextQuestionButton">
|
||||
<Button onClick={nextQuestion}
|
||||
variant="contained"
|
||||
disabled={Number(currentQuestion?.question.id) >=quizQuestions.length}
|
||||
>
|
||||
Prochaine question
|
||||
</Button>
|
||||
</div>
|
||||
</div> )}
|
||||
<div className="questionNavigationButtons" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div className="previousQuestionButton">
|
||||
<Button onClick={previousQuestion}
|
||||
variant="contained"
|
||||
disabled={Number(currentQuestion?.question.id) <= 1}>
|
||||
Question précédente
|
||||
</Button>
|
||||
</div>
|
||||
<div className="nextQuestionButton">
|
||||
<Button onClick={nextQuestion}
|
||||
variant="contained"
|
||||
disabled={Number(currentQuestion?.question.id) >= quizQuestions.length}
|
||||
>
|
||||
Prochaine question
|
||||
</Button>
|
||||
</div>
|
||||
</div>)}
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue