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();