-
{questions[numQuestion].getQuestion()}
+
{questions[numQuestion].getQuestion()}
@@ -145,6 +202,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
) : (
<>
+
{t("questionView.finished_game")}
{points} {t("questionView.point")}
< RecordList record={creationHistoricalRecord.getRecord().game}/>
diff --git a/webapp/src/components/questionView/QuestionView.test.js b/webapp/src/components/questionView/QuestionView.test.js
index 25392c62..a3a34531 100644
--- a/webapp/src/components/questionView/QuestionView.test.js
+++ b/webapp/src/components/questionView/QuestionView.test.js
@@ -10,12 +10,34 @@ import MockAdapter from 'axios-mock-adapter';
import {configure} from '@testing-library/dom';
+// Función para configurar el mock de global.Audio
+const setupAudioMock = () => {
+ jest.spyOn(global, 'Audio').mockImplementation(() => ({
+ play: jest.fn(),
+ pause: jest.fn(),
+ loop: true
+ }));
+};
+
+// Mock the SpeechSynthesisUtterance and window.speechSynthesis APIs
+global.SpeechSynthesisUtterance = jest.fn(() => ({
+ lang: '',
+ text: '',
+ addEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+}));
+
+global.window.speechSynthesis = {
+ getVoices: jest.fn(() => []),
+ speak: jest.fn(),
+};
+
configure({
testIdAttribute: 'data-value',
});
const mockAxios = new MockAdapter(axios);
-
+jest.setTimeout(10000);
i18en.use(initReactI18next).init({
@@ -40,6 +62,26 @@ describe('Question View component', () => {
// Wait for questions to load
});
+
+ // Test for sound functionality
+ it('speaks the question when the speaker button is clicked', async () => {
+ const questionText = "What is the population of Oviedo?";
+ mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
+ [{question: questionText,
+ answers: ["225089","272357","267855","231841"]}]);
+
+ await act(async () => {
+ render(
);
+ });
+
+ fireEvent.click(screen.getByText('🔊'));
+
+ // Check if the SpeechSynthesisUtterance is called with the correct text
+ expect(global.SpeechSynthesisUtterance).toHaveBeenCalledWith();
+
+
+ });
+
it('shows a question and answers',async () => {
mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
@@ -60,7 +102,8 @@ describe('Question View component', () => {
expect(screen.getByText('231841')).toBeInTheDocument()
});
- it('shows colors to reveal correct answer', async () => {
+ it('shows colors to reveal correct answer and it sounds', async () => {
+ setupAudioMock();
mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
[{question: "What is the population of Oviedo?",
answers: ["225089","272357","267855","231841"]}]);
@@ -70,6 +113,8 @@ describe('Question View component', () => {
})
await waitFor(() => expect(screen.getByText('What is the population of Oviedo?')).toBeInTheDocument());
fireEvent.click(screen.getByTestId('true'));//clicamos en la respuesta correcta
+ expect(global.Audio).toHaveBeenCalledWith('/correct.mp3');
+
// Esperar un segundo antes de continuar
await waitFor(() => {
// Clic en un botón de respuesta con data-value=true
@@ -78,7 +123,8 @@ describe('Question View component', () => {
expect(correctAnswerButton).toHaveStyle('background-color: #6EF26E');
}, { timeout: 1000 }); // Esperar 1 segundo
});
- it('shows colors to reveal false answer', async () => {
+ it('shows colors to reveal false answer and it sounds', async () => {
+ setupAudioMock()
mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
[{question: "What is the population of Oviedo?",
answers: ["225089","272357","267855","231841"]}]);
@@ -87,16 +133,19 @@ describe('Question View component', () => {
})
await waitFor(() => expect(screen.getByText('What is the population of Oviedo?')).toBeInTheDocument());
- fireEvent.click(screen.getAllByTestId('false')[0]);
+ fireEvent.click(screen.getAllByTestId('false')[1]);//clicamos en la respuesta incorrecta
+ expect(global.Audio).toHaveBeenCalledWith('/incorrect.mp3');
// Esperar un segundo antes de continuar
await waitFor(() => {
// Clic en un botón de respuesta con data-value=true
- const incorrectAnswerButton = screen.getAllByTestId('false')[0];
+ const incorrectAnswerButton = screen.getAllByTestId('false')[1];
// Verificar que el botón tenga el color esperado
expect(incorrectAnswerButton).toHaveStyle('background-color: #FF6666');
}, { timeout: 1000 }); // Esperar 1 segundo
});
- it('shows timer', async () => {
+
+ it('shows timer and tiktak sound', async () => {
+ setupAudioMock()
mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
[{question: "What is the population of Oviedo?",
answers: ["225089","272357","267855","231841"]}]);
@@ -105,8 +154,32 @@ describe('Question View component', () => {
})
await waitFor(() => expect(screen.getByText('What is the population of Oviedo?')).toBeInTheDocument());
+ expect(global.Audio).toHaveBeenCalledWith('/tictac.mp3');
+
const timerElement = screen.getByText(new RegExp(`(\\d+) ${i18en.t('questionView.seconds')}`));
expect(timerElement).toBeInTheDocument(); // Verificar que el temporizador esté presente en el DOM
- });
+ });
+
+
+ // it('renders end message when countdown completes', async() => {
+
+ // setupAudioMock()
+ // mockAxios.onGet('http://localhost:8000/questions/en').reply(200,
+ // [{question: "What is the population of Oviedo?",
+ // answers: ["225089","272357","267855","231841"]}]);
+ // await act(async () =>{
+ // await render(
);
+
+ // })
+ // await waitFor(() => expect(screen.getByText('What is the population of Oviedo?')).toBeInTheDocument());
+
+ // const timerElement = screen.getByText(new RegExp(`(\\d+) ${i18en.t('questionView.seconds')}`));
+ // expect(timerElement).toBeInTheDocument(); // Verificar que el temporizador esté presente en el DOM
+
+
+ // await waitFor(() => {
+ // expect(screen.getByText("Time's up!")).toBeInTheDocument();
+ // }, { timeout: 9800 }); // Esperar 10 segundos
+ // });
});
\ No newline at end of file
diff --git a/webapp/src/custom.css b/webapp/src/custom.css
index 7abd6447..4718020d 100644
--- a/webapp/src/custom.css
+++ b/webapp/src/custom.css
@@ -272,6 +272,80 @@ button[type="submit"]:hover {
box-shadow: inset 0px 0px 25px #3700ff;
}
+.button-back {
+ display: block;
+ position: relative;
+ width: 56px;
+ height: 56px;
+ margin: 0;
+ overflow: hidden;
+ outline: none;
+ background-color: transparent;
+ cursor: pointer;
+ border: 0;
+}
+
+.button-back:before,
+.button-back:after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ inset: 7px;
+}
+
+.button-back:before {
+ border: 4px solid #f0eeef;
+ transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
+ transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
+}
+
+.button-back:after {
+ border: 4px solid #96daf0;
+ transform: scale(1.3);
+ transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
+ transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ opacity: 0;
+}
+
+.button-back:hover:before,
+.button-back:focus:before {
+ opacity: 0;
+ transform: scale(0.7);
+ transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
+ transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.button-back:hover:after,
+.button-back:focus:after {
+ opacity: 1;
+ transform: scale(1);
+ transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
+ transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
+}
+
+.button-box {
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.button-elem {
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin: 17px 18px 0 18px;
+ transform: rotate(180deg);
+ fill: #f0eeef;
+}
+
+.button-back :hover .button-box,
+.button-back :focus .button-box {
+ transition: 0.4s;
+ transform: translateX(-56px);
+}
+
+
/*---------------------------Instructions---------------------------*/
.instructions_title {
font-size: 35px;
@@ -1242,6 +1316,21 @@ svg {
max-width: 200px;
}
+.altavoz {
+ margin-right: 10px;
+ background: #000000;
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px #9f97ff;
+ cursor: pointer;
+ font-size: 21px;
+ color: black;
+ font-weight: 700;
+ margin: 0.5em;
+ max-width: 200px;
+}
+
.questionContainer p, span{
font-size: 20px;
}
;
+ return (
+
+