Added tests for filter input field in Team

src/views/Home.test.js

@@ -34,7 +34,7 @@ describe('A Home page', () => {
     expect(getByText(callData[2].name)).toBeInTheDocument()
   })
 
-  it('should display correct filtered results', async () => {
+  it('should display correct filtered teams', async () => {
     let callData = [
       { name: 'Mock team 1', id: 1 },
       { name: 'Mock team 2', id: 2 },
@@ -53,10 +53,11 @@ describe('A Home page', () => {
     const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
 
     fireEvent.change(resolved, { target: { value: '2' } })
+
     expect(getByText(callData[1].name)).toBeInTheDocument()
   })
 
-  it('should not display filtered out results', async () => {
+  it('should not display filtered out teams', async () => {
     let callData = [
       { name: 'Mock team 1', id: 1 },
       { name: 'Mock team 2', id: 2 },
@@ -75,6 +76,7 @@ describe('A Home page', () => {
     const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
 
     fireEvent.change(resolved, { target: { value: '2' } })
+
     expect(getByTestId('content')).not.toHaveTextContent(callData[0].name)
     expect(getByTestId('content')).not.toHaveTextContent(callData[2].name)
     expect(getByTestId('content')).not.toHaveTextContent(callData[3].name)

src/views/Team.jsx

@@ -97,7 +97,7 @@ export default function Team({ props }) {
 
           <FilterForm filterCallback={filterCallback} />
 
-          <div>
+          <div data-testid="content">
             <h2>Team lead</h2>
 
             <button data-testid="resolved-lead" className="selector-btn" onClick={() => selectUser(team.lead)}>

src/views/Team.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitForElement } from '@testing-library/react'
+import { fireEvent, render, waitForElement } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import '@testing-library/react/cleanup-after-each'
 import axiosMock from 'axios'
@@ -53,4 +53,49 @@ describe('A team page', () => {
     expect(resolvedList).toContain(getByText(mockProps.users[1].name))
     expect(resolvedList).toContain(getByText(mockProps.users[2].name))
   })
+
+  it('should display correct filtered 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 { getByPlaceholderText, getByText, getAllByTestId } = render(<Team props={mockProps} />)
+    const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
+    const resolvedList = await waitForElement(() => getAllByTestId('resolved-list'))
+
+    fireEvent.change(resolved, { target: { value: 'First' } })
+
+    expect(resolvedList).toContain(getByText(mockProps.users[0].name))
+    expect(resolvedList).not.toContain(mockProps.users[1].name)
+  })
+
+  it('should not display filtered out 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 { getByPlaceholderText, getByTestId } = render(<Team props={mockProps} />)
+    const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
+
+    fireEvent.change(resolved, { target: { value: 'First' } })
+
+    expect(getByTestId('content')).not.toHaveTextContent(mockProps.users[1].name)
+    expect(getByTestId('content')).not.toHaveTextContent(mockProps.users[2].name)
+  })
 })