Skip to content

Commit 5785b9c

Browse files
youssef-910youssef-910
committed
fix failing wrong tests and add new tests
1 parent d2b1f69 commit 5785b9c

File tree

1 file changed

+82
-107
lines changed

1 file changed

+82
-107
lines changed

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

Lines changed: 82 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -7,105 +7,80 @@ import EmployerDropDown from './EmployerDropDown'
77

88
describe('EmployerDropDown', () => {
99
it('shows the label value and place holder value', async () => {
10-
render(
11-
<EmployerDropDown
12-
arrayList={[
13-
{ name: 'Beamery', _id: 'Beamery' },
14-
{ name: 'American Express', _id: 'American Express ' },
15-
{ name: 'Capgemini', _id: 'Capgemini' }
16-
]}
17-
onChange={() => {}}
18-
isEmpty={false}
19-
/>
20-
)
21-
expect(screen.getByTestId('form-group')).toHaveTextContent(
10+
renderInForm({ employers: ['Arnold Clark'] })
11+
expect(screen.getByTestId('form')).toHaveTextContent(
2212
'Who is your employer? *'
2313
)
24-
expect(screen.getByTestId('form-group')).toHaveTextContent(
14+
expect(screen.getByTestId('form')).toHaveTextContent(
2515
'Type your employer name here'
2616
)
2717
})
28-
it('shows the selected value', async () => {
29-
render(
30-
<EmployerDropDown
31-
arrayList={[
32-
{ name: 'Beamery', _id: 'Beamery' },
33-
{ name: 'American Express ', _id: 'American Express ' },
34-
{ name: 'Capgemini', _id: 'Capgemini' },
35-
{ name: 'Carnall Farrar', _id: 'Carnall Farrar' }
36-
]}
37-
onChange={() => {}}
38-
isEmpty={false}
39-
/>
40-
)
41-
18+
it('renders an input', async () => {
19+
renderInForm({ employers: ['Arnold Clark', 'Bankifi', 'Capgemini'] })
4220
await selectEvent.select(
43-
screen.getByLabelText(/Who is your employer/i),
21+
screen.getByLabelText(/who is your employer/i),
4422
'Capgemini'
4523
)
46-
expect(screen.getByTestId('form-group')).toHaveTextContent('Capgemini')
47-
expect(screen.getByTestId('form-group')).not.toHaveTextContent(
48-
'Carnall Farrar'
49-
)
24+
expect(screen.getByTestId('form')).toHaveFormValues({
25+
employer: 'Capgemini'
26+
})
5027
})
51-
it('shows the Options when typing', async () => {
52-
const user = userEvent.setup()
53-
render(
54-
<EmployerDropDown
55-
arrayList={[
56-
{ name: 'Beamery', _id: 'Beamery' },
57-
{ name: 'American Express ', _id: 'American Express ' },
58-
{ name: 'Capgemini', _id: 'Capgemini' },
59-
{ name: 'Capital', _id: 'Capital' }
60-
]}
61-
onChange={() => {}}
62-
isEmpty={false}
63-
/>,
64-
{ hidden: true }
28+
29+
it('updates the rest of the form', async () => {
30+
const onChange = jest.fn()
31+
renderInForm({ employers: ['Deloitte', 'EDF', 'FlexJobs'], onChange })
32+
await selectEvent.select(
33+
screen.getByLabelText(/who is your employer/i),
34+
'EDF'
6535
)
66-
await user.type(screen.getByRole('combobox', { id: 'employer' }), 'cap')
67-
expect(screen.getByTestId('form-group')).toHaveTextContent('Capgemini')
68-
expect(screen.getByTestId('form-group')).toHaveTextContent('Capital')
69-
expect(screen.getByTestId('form-group')).not.toHaveTextContent('Beamery')
36+
expect(onChange).toHaveBeenCalledWith({
37+
target: expect.objectContaining({
38+
name: 'employer',
39+
type: 'text',
40+
value: 'EDF'
41+
})
42+
})
7043
})
71-
it('finds characters within words', async () => {
72-
const user = userEvent.setup()
73-
render(
74-
<EmployerDropDown
75-
arrayList={[
76-
{ name: 'BBC', _id: 'BBC' },
77-
{ name: 'Bet365', _id: 'Bet365' },
78-
{ name: 'Blue Frontier', _id: 'Blue Frontier' },
79-
{ name: 'EngineerBetter', _id: 'EngineerBetter' },
80-
{ name: 'Brandwatch', _id: 'Brandwatch' },
81-
{ name: 'Equal Experts', _id: 'Equal Experts' },
82-
{ name: 'Infobip', _id: 'Infobip' },
83-
{ name: 'Synaptik Digital', _id: 'Synaptik Digital' },
84-
{
85-
name: 'Tata Consultancy services',
86-
_id: 'Tata Consultancy services'
87-
},
88-
{ name: 'Tamarix Tech', _id: 'Tamarix Tech' },
89-
{ name: 'Inspired Gaming Group', _id: 'Inspired Gaming Group' },
90-
{ name: 'EPAM System', _id: 'EPAM System' },
91-
{ name: 'Blueprint Gaming', _id: 'Blueprint Gaming' },
92-
{ name: 'Beamery', _id: 'Beamery' },
93-
{ name: 'American Express ', _id: 'American Express ' },
94-
{ name: 'Capgemini', _id: 'Capgemini' },
95-
{
96-
name: 'Amazon Web Services (AWS)',
97-
_id: 'Amazon Web Services (AWS)'
98-
},
99-
{ name: 'Alpha FX Group', _id: 'Alpha FX Group' },
100-
{ name: 'Amazon', _id: 'Amazon' },
101-
{ name: 'Anaplan', _id: 'Anaplan' },
102-
{ name: 'Alfa Financial Software', _id: 'Alfa Financial Software' }
103-
]}
104-
employerOnChange={() => {}}
105-
isEmpty={false}
106-
/>,
107-
{ hidden: true }
108-
)
44+
45+
it('applies the right class when empty', async () => {
46+
const { container } = renderInForm({ isEmpty: true })
47+
expect(container.getElementsByClassName('is-empty')).toHaveLength(1)
48+
})
49+
50+
it('asks user to select "Other" if no matches', async () => {
51+
const { user } = renderInForm({ employers: ['G-Research'] })
52+
await user.type(screen.getByRole('combobox', { name: /employer/i }), 'cap')
53+
expect(
54+
screen.getByText('Employer not found? Please select "Other".')
55+
).toBeInTheDocument()
56+
})
57+
58+
it('shows the expected values in AC', async () => {
59+
const { user } = renderInForm({
60+
employers: [
61+
'BBC',
62+
'Bet365',
63+
'Blue Frontier',
64+
'EngineerBetter',
65+
'Brandwatch',
66+
'Equal Experts',
67+
'Infobip',
68+
'Synaptik Digital',
69+
'Tata Consultancy services',
70+
'Tamarix Tech',
71+
'Inspired Gaming Group',
72+
'EPAM System',
73+
'Blueprint Gaming',
74+
'Beamery',
75+
'American Express ',
76+
'Capgemini',
77+
'Amazon Web Services (AWS)',
78+
'Alpha FX Group',
79+
'Amazon',
80+
'Anaplan'
81+
]
82+
})
83+
await user.type(screen.getByRole('combobox', { name: /employer/i }), 'am')
10984
const appearingEmployers = [
11085
'Amazon',
11186
'Amazon Web Services (AWS)',
@@ -116,27 +91,27 @@ describe('EmployerDropDown', () => {
11691
'Inspired Gaming Group',
11792
'Tamarix Tech'
11893
]
119-
const notAppearingApplicants = [
120-
'Alpha FX Group',
121-
'Anaplan',
122-
'BBC',
123-
'Bet365',
124-
'Brandwatch',
125-
'Blue Frontier',
126-
'EngineerBetter',
127-
'Equal Experts',
128-
'Infobip',
129-
'Tata Consultancy services',
130-
'Synaptik Digital'
131-
]
132-
133-
await user.type(screen.getByRole('combobox', { id: 'employer' }), 'am')
13494

13595
appearingEmployers.forEach(employer =>
136-
expect(screen.getByTestId('form-group')).toHaveTextContent(employer)
137-
)
138-
notAppearingApplicants.forEach(employer =>
139-
expect(screen.getByTestId('form-group')).not.toHaveTextContent(employer)
96+
expect(screen.getByText(employer)).toBeInTheDocument()
14097
)
14198
})
14299
})
100+
const renderInForm = ({
101+
employers = [],
102+
isEmpty = false,
103+
onChange = () => {}
104+
}) => {
105+
const user = userEvent.setup()
106+
const wrapper = render(
107+
<form data-testid="form">
108+
<EmployerDropDown
109+
arrayList={employers.map(name => ({ _id: name, name }))}
110+
isEmpty={isEmpty}
111+
name="employer"
112+
onChange={onChange}
113+
/>
114+
</form>
115+
)
116+
return { user, ...wrapper }
117+
}

0 commit comments

Comments
 (0)