Fixes for the tests added

Arquisoft · Apr 23, 2024 · e3ef786 · e3ef786
1 parent aaa2968
commit e3ef786
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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) => {
                     <h1 className="font-bold text-3xl text-gray-800 pl-8">{questions[currentQuestion].question}</h1>
                     <div class="relative h-5 rounded-full overflow-hidden bg-gray-300 mt-20 mx-10">
                         <div class="absolute top-0 bottom-0 left-0 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"
-                            style={{ width: counter + "%" }}></div>
+                            style={{ width: counter + "%" }}
+                            data-testid="time-bar"></div>
                     </div>
                     <div className="grid grid-cols-2 mt-10 item">
                         {questions[currentQuestion].images.map(image => (

diff --git 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(<Question type="imgs" category="flags"/>);