Allow new employer entry

Author: textbook

src/Components/forms/data.json

@@ -120,8 +120,7 @@
     { "name": "The Developer Society", "_id": "The Developer Society" },
     { "name": "University of Arts", "_id": "University of Arts" },
     { "name": "Venditan", "_id": "Venditan" },
-    { "name": "Yoti", "_id": "Yoti" },
-    { "name": "Other", "_id": "Other" }
+    { "name": "Yoti", "_id": "Yoti" }
   ],
 
   "radioButtonList": [

src/Components/forms/inputs/EmployerDropDown.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Label } from 'reactstrap'
-import Select from 'react-select'
+import Select from 'react-select/creatable'
 
 const EmployerDropDown = ({ onChange, isEmpty, arrayList }) => {
   const employersList = arrayList.map(({ _id, name }) => ({
@@ -12,7 +12,6 @@ const EmployerDropDown = ({ onChange, isEmpty, arrayList }) => {
       <Label htmlFor="employer">Who is your employer? *</Label>
       <Select
         className={isEmpty ? 'is-empty' : ''}
-        noOptionsMessage={() => 'Employer not found? Please select "Other".'}
         inputId="employer"
         isSearchable
         options={employersList}

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

@@ -1,8 +1,7 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
-import selectEvent from 'react-select-event'
-import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
+import selectEvent from 'react-select-event'
+
 import EmployerDropDown from './EmployerDropDown'
 
 describe('EmployerDropDown', () => {
@@ -47,12 +46,20 @@ describe('EmployerDropDown', () => {
     expect(container.getElementsByClassName('is-empty')).toHaveLength(1)
   })
 
-  it('asks user to select "Other" if no matches', async () => {
-    const { user } = renderInForm({ employers: ['G-Research'] })
-    await user.type(screen.getByRole('combobox', { name: /employer/i }), 'cap')
-    expect(
-      screen.getByText('Employer not found? Please select "Other".')
-    ).toBeInTheDocument()
+  it('allows the user to enter their own employer', async () => {
+    const onChange = jest.fn()
+    const { user } = renderInForm({
+      employers: ['ABC', 'BBC', 'CBC'],
+      onChange
+    })
+    await user.type(
+      screen.getByRole('combobox', { name: /employer/i }),
+      'Google'
+    )
+    await user.click(screen.getByText('Create "Google"'))
+    expect(onChange).toHaveBeenCalledWith({
+      target: { name: 'employer', type: 'text', value: 'Google' }
+    })
   })
 
   it('shows the expected values in AC', async () => {