Rodrigoplp/react-hooks-unit-tests
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added tests for filter input field in Team

Browse source
This commit is contained in:
Rodrigo Pedroso 2019-08-29 23:00:58 -04:00
commit 4cbcf4a667
3 changed files with 51 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/views/Home.test.js
View file

@ -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)

2
src/views/Team.jsx
View file

@ -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)}>

47
src/views/Team.test.js
View file

@ -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)
})
})