new tests added

webapp/src/components/AddUser/AddUser.test.js

@@ -3,6 +3,7 @@ import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import AddUser from './AddUser';
+import '@testing-library/jest-dom'
 
 const mockAxios = new MockAdapter(axios);
 

webapp/src/components/Answer/AnswerItem.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import AnswerItem from './AnswerItem';
+import '@testing-library/jest-dom'
+
+describe('AnswerItem component', () => {
+  it('renders with correct class based on selected and correct answers', () => {
+    const correctId = 'correct_id';
+    const selectedId = 'selected_id';
+    const answer = { id: 'answer_id' };
+    const onSelectAnswerMock = jest.fn();
+
+    // Render AnswerItem with different props combinations
+    const { container, rerender } = render(
+      <AnswerItem
+        answer={answer}
+        selected={{ correctId, selectedId }}
+        btnDisabled={false}
+        onSelectAnswer={onSelectAnswerMock}
+      >
+        Answer
+      </AnswerItem>
+    );
+
+    // Initial render should not have any class
+    expect(container.firstChild).toHaveClass('answer-item');
+
+    // Re-render with correctId to simulate correct answer
+    rerender(
+      <AnswerItem
+        answer={{ id: correctId }}
+        selected={{ correctId, selectedId }}
+        btnDisabled={false}
+        onSelectAnswer={onSelectAnswerMock}
+      >
+        Answer
+      </AnswerItem>
+    );
+    expect(container.firstChild).toHaveClass('answer-item success');
+
+    // Re-render with selectedId to simulate selected answer
+    rerender(
+      <AnswerItem
+        answer={{ id: selectedId }}
+        selected={{ correctId, selectedId }}
+        btnDisabled={false}
+        onSelectAnswer={onSelectAnswerMock}
+      >
+        Answer
+      </AnswerItem>
+    );
+    expect(container.firstChild).toHaveClass('answer-item error');
+  });
+
+  it('calls onSelectAnswer prop when answer item is clicked', () => {
+    const answer = { id: 'answer_id' };
+    const onSelectAnswerMock = jest.fn();
+    const { getByText } = render(
+      <AnswerItem
+        answer={answer}
+        selected={{ correctId: 'correct_id', selectedId: 'selected_id' }}
+        btnDisabled={false}
+        onSelectAnswer={onSelectAnswerMock}
+      >
+        Answer
+      </AnswerItem>
+    );
+    const answerItem = getByText('Answer');
+    fireEvent.click(answerItem);
+    expect(onSelectAnswerMock).toHaveBeenCalledWith(answer.id);
+  });
+
+  it('does not call onSelectAnswer prop when button is disabled', () => {
+    const answer = { id: 'answer_id' };
+    const onSelectAnswerMock = jest.fn();
+    const { getByText } = render(
+      <AnswerItem
+        answer={answer}
+        selected={{ correctId: 'correct_id', selectedId: 'selected_id' }}
+        btnDisabled={true}
+        onSelectAnswer={onSelectAnswerMock}
+      >
+        Answer
+      </AnswerItem>
+    );
+    const answerItem = getByText('Answer');
+    fireEvent.click(answerItem);
+    expect(onSelectAnswerMock).not.toHaveBeenCalled();
+  });
+});

webapp/src/components/Answer/AnswerList.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AnswerList from './AnswerList';
+import '@testing-library/jest-dom'
+
+describe('AnswerList component', () => {
+  it('renders correctly with list of answers', () => {
+    const answers = [
+      { id: 'answer1', text: 'Answer 1' },
+      { id: 'answer2', text: 'Answer 2' },
+      { id: 'answer3', text: 'Answer 3' },
+      { id: 'answer4', text: 'Answer 4' },
+    ];
+    const onSelectAnswerMock = jest.fn();
+    const selected = { correctId: 'answer1', selectedId: 'answer2' };
+    const { getAllByRole } = render(
+      <AnswerList
+        answers={answers}
+        onSelectAnswer={onSelectAnswerMock}
+        selected={selected}
+        btnDisabled={false}
+      />
+    );
+
+    // Check if correct number of answer items are rendered
+    const answerItems = getAllByRole('listitem');
+    expect(answerItems.length).toBe(answers.length);
+
+    // Check if each answer item is rendered with correct text
+    answers.forEach((answer, index) => {
+      expect(answerItems[index]).toHaveTextContent(answer.text);
+    });
+  });
+
+});

webapp/src/components/Login/Login.test.js

@@ -3,6 +3,7 @@ import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Login from './Login';
+import '@testing-library/jest-dom'
 
 const mockAxios = new MockAdapter(axios);
 

webapp/src/pages/Home/Home.test.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import Home from './Home';
+import '@testing-library/jest-dom'
 
 test('renders learn react link', () => {
     render(<Home />);