Completed Team tests

src/views/Team.jsx

@@ -100,7 +100,7 @@ export default function Team({ props }) {
           <div>
             <h2>Team lead</h2>
 
-            <button data-testid="resolved" className="selector-btn" onClick={() => selectUser(team.lead)}>
+            <button data-testid="resolved-lead" className="selector-btn" onClick={() => selectUser(team.lead)}>
               {userData(team.lead)}
             </button>
 
@@ -109,7 +109,7 @@ export default function Team({ props }) {
             <ul className="list">
               {filteredMembers.map((member, index) => (
                 <li className="list-item" key={index}>
-                  <button className="selector-btn" onClick={() => selectUser(member.id)}>
+                  <button data-testid="resolved-list" className="selector-btn" onClick={() => selectUser(member.id)}>
                     {member.name}
                   </button>
                 </li>

src/views/Team.test.js

@@ -12,7 +12,7 @@ describe('A team page', () => {
     expect(getByTestId('loading')).toHaveTextContent('Loading...')
   })
 
-  it('should fetch and display data', async () => {
+  it('should fetch data and display team lead', async () => {
     const callData = { lead: 1, id: 2, name: 'Awesome Tricksters', members: [2, 3, 4] }
 
     axiosMock.get.mockResolvedValueOnce({ data: callData })
@@ -26,9 +26,32 @@ describe('A team page', () => {
       ]
     }
 
-    const { getByTestId } = render(<Team props={mockProps} />)
+    const { getByTestId, getByText } = render(<Team props={mockProps} />)
-    const resolvedSpan = await waitForElement(() => getByTestId('resolved'))
 
-    expect(resolvedSpan).toHaveTextContent(mockProps.users[0].name)
+    const resolvedLead = await waitForElement(() => getByTestId('resolved-lead'))
+
+    expect(resolvedLead).toHaveTextContent(mockProps.users[0].name)
+    expect(getByText(mockProps.users[2].name)).toBeInTheDocument()
+  })
+
+  it('should fetch data and display team members', async () => {
+    const callData = { lead: 1, id: 2, name: 'Awesome Tricksters', members: [2, 3, 4] }
+
+    axiosMock.get.mockResolvedValueOnce({ data: callData })
+
+    const mockProps = {
+      users: [
+        { id: 2, name: 'First Member', username: 'first member' },
+        { id: 3, name: 'Second Member', username: 'second member' },
+        { id: 4, name: 'Third Member', username: 'third member' }
+      ]
+    }
+
+    const { getAllByTestId, getByText } = render(<Team props={mockProps} />)
+    const resolvedList = await waitForElement(() => getAllByTestId('resolved-list'))
+
+    expect(resolvedList).toContain(getByText(mockProps.users[0].name))
+    expect(resolvedList).toContain(getByText(mockProps.users[1].name))
+    expect(resolvedList).toContain(getByText(mockProps.users[2].name))
   })
 })