From 33d4975b3dd96cd9c391748d825c05cb254533f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Tue, 23 Apr 2024 17:13:20 +0200 Subject: [PATCH 1/6] Question fetching time significantly reduced and now player cannot answer if time is not running --- webapp/src/components/Question.jsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx index 6d143cb..7d03623 100644 --- a/webapp/src/components/Question.jsx +++ b/webapp/src/components/Question.jsx @@ -49,12 +49,18 @@ const Question = (props) => { const fetchQuestions = async () => { try { setRenderedImages(0) - let auxQuestions = [] + let promises = [] + let questions = [] for (let i = 0; i < questionsPerGame; i++) { - let question = ((await axios.get(`${apiEndpoint}/${props.type}/${props.category}/question`)).data) - auxQuestions.push(question) + let question = axios.get(`${apiEndpoint}/${props.type}/${props.category}/question`) + promises.push(question) } - setQuestions(auxQuestions) + let responses = await Promise.all(promises) + for (let i = 0; i < questionsPerGame; i++) { + let question = responses.pop().data + questions.push(question) + } + setQuestions(questions) setLoading(false) } catch (error) { console.error('Error fetching question:', error); @@ -62,6 +68,9 @@ const Question = (props) => { }; const answerQuestion = async (answer, question) => { + if(counter==0){ + return + } try { setLoading(true); setRenderedImages(0) From bc6dc4c2291ac1c0446c69a32f8f3e2406db7d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Tue, 23 Apr 2024 17:33:36 +0200 Subject: [PATCH 2/6] Fixed question-service test to adapt to the new answer in question-service --- questionservice/question-service.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/questionservice/question-service.test.js b/questionservice/question-service.test.js index a416657..9f9454e 100644 --- a/questionservice/question-service.test.js +++ b/questionservice/question-service.test.js @@ -113,7 +113,7 @@ describe('Question Service', () => { }); //Test /imgs/answer endpoint (Incorrect answer) - it('should inform the answer is incorrect and what is the element associated to the answer', async () => { + it('should inform the answer is incorrect and what is the correct answer', async () => { //First I ask a question const response = await request(app).get('/imgs/foods/question'); regex = new RegExp(`Which of the following images corresponds to (\\w+)\\?`); @@ -135,7 +135,7 @@ describe('Question Service', () => { .set('Content-Type', 'application/json') .send({answer:incorrectImageAnswer, question:question, username:"username", category:"foods"}) expect(responseAnswer.body.correct).toBe("false") - expect(responseAnswer.body.associate).toBe(imgsToAssociatesMap.get(incorrectImageAnswer)) + expect(responseAnswer.body.correctImg).toBe([...imgsToAssociatesMap].find(([key, val]) => val == correctAnswerLabel)[0]) }); }); From aaa2968ea281bbf160cbb75d51ec500cbf782225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Tue, 23 Apr 2024 17:41:24 +0200 Subject: [PATCH 3/6] Fixed issue in mock --- questionservice/question-service.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/questionservice/question-service.test.js b/questionservice/question-service.test.js index 9f9454e..39a0dc9 100644 --- a/questionservice/question-service.test.js +++ b/questionservice/question-service.test.js @@ -18,8 +18,8 @@ jest.spyOn(global, 'fetch').mockImplementation(() => { let result = { results: {bindings: []} } for(let i=1;i<=100;i++){ //Simulating there is maximum number of repeated itemLabels (between the valid ones) - result.results.bindings.push({itemLabel: {value: "itemName1"} , image:{value: "imageUrl1_"+i}}) - imgsToAssociatesMap.set("imageUrl1_"+i, "itemName1") + result.results.bindings.push({itemLabel: {value: "itemName"+i} , image:{value: "imageUrl1_"+i}}) + imgsToAssociatesMap.set("imageUrl1_"+i, "itemName"+i) } for(let i=101;i<=195;i++){ //Simulating there are invalid itemLabels From e3ef7863262eef2dd102a19e3949b706643e3f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Tue, 23 Apr 2024 18:30:19 +0200 Subject: [PATCH 4/6] Fixes for the tests added --- webapp/src/components/Login.test.js | 4 ++-- webapp/src/components/Question.jsx | 4 +++- webapp/src/components/Question.test.js | 18 +++++++++++++++++- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login.test.js index af02d63..5eba7a5 100644 --- a/webapp/src/components/Login.test.js +++ b/webapp/src/components/Login.test.js @@ -32,7 +32,7 @@ describe('Login component', () => { const usernameInput = screen.getByLabelText(/Username/i); const passwordInput = screen.getByLabelText(/Password/i); - const loginButton = screen.getByRole('button', { name: /Login/i }); + const loginButton = screen.getByRole('button', { name: /Log In/i }); const mock = jest.fn(); jest.mock('react-router-dom', () => ({ useNavigate: () => mock, @@ -73,7 +73,7 @@ describe('Login component', () => { const usernameInput = screen.getByLabelText(/Username/i); const passwordInput = screen.getByLabelText(/Password/i); - const loginButton = screen.getByRole('button', { name: /Login/i }); + const loginButton = screen.getByRole('button', { name: /Log In/i }); // Mock the axios.post request to simulate an error response mockAxios.onPost('http://localhost:8000/login').reply(401, { error: 'Unauthorized' }); diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx index 7d03623..8465344 100644 --- a/webapp/src/components/Question.jsx +++ b/webapp/src/components/Question.jsx @@ -26,6 +26,7 @@ const Question = (props) => { }, []); useEffect(() => { + console.log("Hmmm") const interval = setInterval(() => { if (renderedImages === imagesPerQuestion) { setCounter((prevCounter) => prevCounter + 0.4); @@ -133,7 +134,8 @@ const Question = (props) => {

{questions[currentQuestion].question}

+ style={{ width: counter + "%" }} + data-testid="time-bar">
{questions[currentQuestion].images.map(image => ( diff --git a/webapp/src/components/Question.test.js b/webapp/src/components/Question.test.js index 7cd653f..4ce0480 100644 --- a/webapp/src/components/Question.test.js +++ b/webapp/src/components/Question.test.js @@ -95,6 +95,22 @@ describe('Question page', () => { expect(screen.getByText(/Which of the following/i)).toBeInTheDocument(); }); + await act(async () => { + fireEvent.load(screen.getAllByRole("img")[0]) + fireEvent.load(screen.getAllByRole("img")[1]) + fireEvent.load(screen.getAllByRole("img")[2]) + fireEvent.load(screen.getAllByRole("img")[3]) + }); + + // Wait for the component to render + await waitFor(() => { + const time_bar = screen.getByTestId('time-bar'); + expect(time_bar).toBeInTheDocument(); + const widthStyle = time_bar.style.width; + const widthValue = parseFloat(widthStyle); + expect(widthValue).toBeGreaterThan(0); + }); + await act(async () => { fireEvent.click(screen.getAllByRole("img")[0]); }); @@ -119,7 +135,7 @@ describe('Question page', () => { mockAxios.onPost('http://localhost:8000/imgs/answer').reply(200, { correct: "false", - associate: "Poland" + correctImg: "https://commons.wikimedia.org/wiki/File:Flag_of_Spain.svg" }); render(); From 997a930cdf14ba6182641f97cfbbacfe2f95bd7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Wed, 24 Apr 2024 10:52:26 +0200 Subject: [PATCH 5/6] Extended question-service test to include Timeout case --- questionservice/question-service.test.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/questionservice/question-service.test.js b/questionservice/question-service.test.js index 39a0dc9..7c4fee4 100644 --- a/questionservice/question-service.test.js +++ b/questionservice/question-service.test.js @@ -113,7 +113,7 @@ describe('Question Service', () => { }); //Test /imgs/answer endpoint (Incorrect answer) - it('should inform the answer is incorrect and what is the correct answer', async () => { + it('should inform the answer is incorrect and what is the correct answer if answering incorrectly', async () => { //First I ask a question const response = await request(app).get('/imgs/foods/question'); regex = new RegExp(`Which of the following images corresponds to (\\w+)\\?`); @@ -137,6 +137,23 @@ describe('Question Service', () => { expect(responseAnswer.body.correct).toBe("false") expect(responseAnswer.body.correctImg).toBe([...imgsToAssociatesMap].find(([key, val]) => val == correctAnswerLabel)[0]) }); + + //Test /imgs/answer endpoint (Timeout) + it('should inform the answer is incorrect and what is the correct answer if a timeout happens', async () => { + //First I ask a question + const response = await request(app).get('/imgs/foods/question'); + regex = new RegExp(`Which of the following images corresponds to (\\w+)\\?`); + const match = response.body.question.match(regex); + const correctAnswerLabel = match && match[1]; + + question = response.body.question + const responseAnswer = await request(app) + .post("/imgs/answer") + .set('Content-Type', 'application/json') + .send({answer:"TimeOut1234;", question:question, username:"username", category:"foods"}) + expect(responseAnswer.body.correct).toBe("false") + expect(responseAnswer.body.correctImg).toBe([...imgsToAssociatesMap].find(([key, val]) => val == correctAnswerLabel)[0]) + }); }); function getItemLabelsIfDifferent(images) { From 03dadd52a84ad0f8ba9de05efbf3c6f78587bda8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Wed, 24 Apr 2024 11:27:55 +0200 Subject: [PATCH 6/6] Removed log --- webapp/src/components/Question.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/Question.jsx index 8465344..697b85c 100644 --- a/webapp/src/components/Question.jsx +++ b/webapp/src/components/Question.jsx @@ -26,7 +26,6 @@ const Question = (props) => { }, []); useEffect(() => { - console.log("Hmmm") const interval = setInterval(() => { if (renderedImages === imagesPerQuestion) { setCounter((prevCounter) => prevCounter + 0.4);