Skip to content

Commit 6d0cb6c

Browse files
youssef-910youssef-910
committed
fix failing tests after adding react-select
1 parent b32c4d2 commit 6d0cb6c

File tree

1 file changed

+124
-91
lines changed

1 file changed

+124
-91
lines changed

‎src/Components/forms/inputs/EmployerDropDown.test.js

Lines changed: 124 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,151 @@
1-
import '@testing-library/jest-dom'
1+
import React from 'react'
2+
import Select from 'react-select'
23
import { render, screen } from '@testing-library/react'
4+
import selectEvent from 'react-select-event'
5+
import '@testing-library/jest-dom'
36
import userEvent from '@testing-library/user-event'
47
import EmployerDropDown from './EmployerDropDown'
5-
const employerList = [
6-
{ name: 'BBC', _id: 'BBC' },
7-
{ name: 'Bet365', _id: 'Bet365' },
8-
{ name: 'Blue Frontier', _id: 'Blue Frontier' },
9-
{ name: 'EngineerBetter', _id: 'EngineerBetter' },
10-
{ name: 'Brandwatch', _id: 'Brandwatch' },
11-
{ name: 'Equal Experts', _id: 'Equal Experts' },
12-
{ name: 'Infobip', _id: 'Infobip' },
13-
{ name: 'Synaptik Digital', _id: 'Synaptik Digital' },
14-
{ name: 'Tata Consultancy services', _id: 'Tata Consultancy services' },
15-
{ name: 'Tamarix Tech', _id: 'Tamarix Tech' },
16-
{ name: 'Inspired Gaming Group', _id: 'Inspired Gaming Group' },
17-
{ name: 'EPAM System', _id: 'EPAM System' },
18-
{ name: 'Blueprint Gaming', _id: 'Blueprint Gaming' },
19-
{ name: 'Beamery', _id: 'Beamery' },
20-
{ name: 'American Express ', _id: 'American Express ' },
21-
{ name: 'Capgemini', _id: 'Capgemini' },
22-
{
23-
name: 'Amazon Web Services (AWS)',
24-
_id: 'Amazon Web Services (AWS)'
25-
},
26-
{ name: 'Alpha FX Group', _id: 'Alpha FX Group' },
27-
{ name: 'Amazon', _id: 'Amazon' },
28-
{ name: 'Anaplan', _id: 'Anaplan' },
29-
{ name: 'Alfa Financial Software', _id: 'Alfa Financial Software' }
30-
]
8+
319
describe('EmployerDropDown', () => {
32-
it('shows a matching option for specific word', async () => {
10+
it('shows the label value and place holder value', async () => {
3311
const user = userEvent.setup()
3412
render(
3513
<EmployerDropDown
3614
arrayList={[
3715
{ name: 'Beamery', _id: 'Beamery' },
38-
{ name: 'American Express ', _id: 'American Express ' },
16+
{ name: 'American Express', _id: 'American Express ' },
3917
{ name: 'Capgemini', _id: 'Capgemini' }
4018
]}
4119
employerOnChange={() => {}}
4220
isEmpty={false}
4321
/>
4422
)
23+
expect(screen.getByTestId('form-group')).toHaveTextContent(
24+
'Who is your employer?'
25+
)
26+
expect(screen.getByTestId('form-group')).toHaveTextContent(
27+
'Type your employer name here'
28+
)
29+
})
30+
it('shows the selected value', async () => {
31+
const user = userEvent.setup()
32+
render(
33+
<EmployerDropDown
34+
arrayList={[
35+
{ name: 'Beamery', _id: 'Beamery' },
36+
{ name: 'American Express ', _id: 'American Express ' },
37+
{ name: 'Capgemini', _id: 'Capgemini' },
38+
{ name: 'Carnall Farrar', _id: 'Carnall Farrar' }
39+
]}
40+
employerOnChange={() => {}}
41+
isEmpty={false}
42+
/>
43+
)
4544

46-
await user.type(screen.getByRole('textbox', { name: /employer/i }), 'cap')
47-
48-
expect(
49-
screen.getByRole('option', { name: /capgemini/i })
50-
).toBeInTheDocument()
51-
expect(
52-
screen.queryByRole('option', { name: /Carnall Farrar/i })
53-
).not.toBeInTheDocument()
45+
await selectEvent.select(
46+
screen.getByLabelText(/Who is your employer/i),
47+
'Capgemini'
48+
)
49+
expect(screen.getByTestId('form-group')).toHaveTextContent('Capgemini')
50+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
51+
'Carnall Farrar'
52+
)
53+
})
54+
it('shows the Options when typing', async () => {
55+
const user = userEvent.setup()
56+
render(
57+
<EmployerDropDown
58+
arrayList={[
59+
{ name: 'Beamery', _id: 'Beamery' },
60+
{ name: 'American Express ', _id: 'American Express ' },
61+
{ name: 'Capgemini', _id: 'Capgemini' },
62+
{ name: 'Capnga', _id: 'Capnga' }
63+
]}
64+
employerOnChange={() => {}}
65+
isEmpty={false}
66+
/>
67+
)
68+
await user.type(screen.getByRole('combobox', { id: 'employer' }), 'cap')
69+
expect(screen.getByTestId('form-group')).toHaveTextContent('Capgemini')
70+
expect(screen.getByTestId('form-group')).toHaveTextContent('Capnga')
71+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Beamery')
5472
})
5573
it('finds characters within words', async () => {
5674
const user = userEvent.setup()
5775
render(
5876
<EmployerDropDown
59-
arrayList={employerList}
77+
arrayList={[
78+
{ name: 'BBC', _id: 'BBC' },
79+
{ name: 'Bet365', _id: 'Bet365' },
80+
{ name: 'Blue Frontier', _id: 'Blue Frontier' },
81+
{ name: 'EngineerBetter', _id: 'EngineerBetter' },
82+
{ name: 'Brandwatch', _id: 'Brandwatch' },
83+
{ name: 'Equal Experts', _id: 'Equal Experts' },
84+
{ name: 'Infobip', _id: 'Infobip' },
85+
{ name: 'Synaptik Digital', _id: 'Synaptik Digital' },
86+
{
87+
name: 'Tata Consultancy services',
88+
_id: 'Tata Consultancy services'
89+
},
90+
{ name: 'Tamarix Tech', _id: 'Tamarix Tech' },
91+
{ name: 'Inspired Gaming Group', _id: 'Inspired Gaming Group' },
92+
{ name: 'EPAM System', _id: 'EPAM System' },
93+
{ name: 'Blueprint Gaming', _id: 'Blueprint Gaming' },
94+
{ name: 'Beamery', _id: 'Beamery' },
95+
{ name: 'American Express ', _id: 'American Express ' },
96+
{ name: 'Capgemini', _id: 'Capgemini' },
97+
{
98+
name: 'Amazon Web Services (AWS)',
99+
_id: 'Amazon Web Services (AWS)'
100+
},
101+
{ name: 'Alpha FX Group', _id: 'Alpha FX Group' },
102+
{ name: 'Amazon', _id: 'Amazon' },
103+
{ name: 'Anaplan', _id: 'Anaplan' },
104+
{ name: 'Alfa Financial Software', _id: 'Alfa Financial Software' }
105+
]}
60106
employerOnChange={() => {}}
61107
isEmpty={false}
62108
/>
63109
)
64-
65-
await user.type(screen.getByRole('textbox', { name: /employer/i }), 'am')
66-
67-
expect(
68-
screen.getByRole('option', { name: 'Amazon Web Services (AWS)' })
69-
).toBeInTheDocument()
70-
expect(screen.getByRole('option', { name: 'Amazon' })).toBeInTheDocument()
71-
expect(
72-
screen.getByRole('option', { name: /American/i })
73-
).toBeInTheDocument()
74-
expect(screen.getByRole('option', { name: 'Beamery' })).toBeInTheDocument()
75-
expect(
76-
screen.getByRole('option', { name: 'Blueprint Gaming' })
77-
).toBeInTheDocument()
78-
expect(screen.getByRole('option', { name: /EPAM/i })).toBeInTheDocument()
79-
expect(
80-
screen.getByRole('option', { name: /Inspired Gaming /i })
81-
).toBeInTheDocument()
82-
expect(
83-
screen.getByRole('option', { name: 'Tamarix Tech' })
84-
).toBeInTheDocument()
85-
86-
expect(
87-
screen.queryByRole('option', { name: 'bmc' })
88-
).not.toBeInTheDocument()
89-
expect(
90-
screen.queryByRole('option', { name: 'Alpha FX Group' })
91-
).not.toBeInTheDocument()
92-
expect(
93-
screen.queryByRole('option', { name: 'BBC' })
94-
).not.toBeInTheDocument()
95-
expect(
96-
screen.queryByRole('option', { name: 'Blue Frontier' })
97-
).not.toBeInTheDocument()
98-
99-
expect(
100-
screen.queryByRole('option', { name: 'Brandwatch' })
101-
).not.toBeInTheDocument()
102-
expect(
103-
screen.queryByRole('option', { name: 'EngineerBetter' })
104-
).not.toBeInTheDocument()
105-
expect(
106-
screen.queryByRole('option', { name: 'Equal Experts' })
107-
).not.toBeInTheDocument()
108-
expect(
109-
screen.queryByRole('option', { name: 'Infobip' })
110-
).not.toBeInTheDocument()
111-
expect(
112-
screen.queryByRole('option', { name: 'Synaptik Digital' })
113-
).not.toBeInTheDocument()
114-
expect(
115-
screen.queryByRole('option', { name: 'Tata Consultancy services' })
116-
).not.toBeInTheDocument()
110+
await user.type(screen.getByRole('combobox', { id: 'employer' }), 'am')
111+
expect(screen.getByTestId('form-group')).toHaveTextContent('Amazon')
112+
expect(screen.getByTestId('form-group')).toHaveTextContent(
113+
'Amazon Web Services (AWS)'
114+
)
115+
expect(screen.getByTestId('form-group')).toHaveTextContent(
116+
'American Express'
117+
)
118+
expect(screen.getByTestId('form-group')).toHaveTextContent('Beamery')
119+
expect(screen.getByTestId('form-group')).toHaveTextContent(
120+
'Blueprint Gaming'
121+
)
122+
expect(screen.getByTestId('form-group')).toHaveTextContent('EPAM System')
123+
expect(screen.getByTestId('form-group')).toHaveTextContent(
124+
'Inspired Gaming Group'
125+
)
126+
expect(screen.getByTestId('form-group')).toHaveTextContent('Tamarix Tech')
127+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
128+
'Alpha FX Group'
129+
)
130+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Anaplan')
131+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('BBC')
132+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Bet365')
133+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
134+
'Blue Frontier'
135+
)
136+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Brandwatch')
137+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
138+
'EngineerBetter'
139+
)
140+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
141+
'Equal Experts'
142+
)
143+
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Infobip')
144+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
145+
'Synaptik Digital'
146+
)
147+
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
148+
'Tata Consultancy services'
149+
)
117150
})
118151
})

0 commit comments

Comments
 (0)