Merge pull request #117 from CodeYourFuture/feature/655-add-employer

Select or add employer to the form

Author: pkijowska

e2e/integration/journey.test.js

@@ -123,6 +123,26 @@ it('requires employee selection', () => {
   })
 })
 
+it('can create a new employer', () => {
+  cy.findByRole('combobox', { name: /hear about code your future/i }).select(
+    'Employer'
+  )
+  cy.findByRole('combobox', { name: /who is your employer/i }).type(
+    'Weyland Yutani{enter}'
+  )
+  cy.findByText('Weyland Yutani').should('exist')
+  cy.findByText(/Make sure you typed it correctly\./).should('exist')
+  cy.visit('/')
+  cy.findByRole('combobox', { name: /hear about code your future/i }).select(
+    'Employer'
+  )
+  cy.findByRole('combobox', { name: /who is your employer/i }).type(
+    'yutani{enter}'
+  )
+  cy.findByText('Weyland Yutani').should('exist')
+  cy.findByText(/Make sure you typed it correctly\./).should('exist')
+})
+
 const setExperience = (topic, level) => {
   cy.findByRole('checkbox', { name: new RegExp(topic, 'i') })
     .check()

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/index.css

@@ -200,6 +200,10 @@
   padding: 10px;
   font-size: 20px;
 }
+.reminder {
+  color: darkgreen;
+  font-weight: bold;
+}
 @media screen and (max-width: 1000px) {
   .media {
     display: block;

src/Components/forms/inputs/EmployerDropDown.js

@@ -1,31 +1,75 @@
-import React from 'react'
+import { useMemo } from 'react'
 import { Label } from 'reactstrap'
-import Select from 'react-select'
+import Select from 'react-select/creatable'
+
+import useSession from '../../../hooks/useSession'
+
+const EmployerDropDown = ({
+  arrayList: employers,
+  isEmpty,
+  onChange,
+  value
+}) => {
+  const [options, setOptions] = useSession('cyfEmployerList', () =>
+    employers.map(({ _id, name }) => ({
+      value: _id,
+      label: name
+    }))
+  )
+
+  const isCustomEntry = useMemo(
+    () => value !== '' && !employers.some(({ name }) => name === value),
+    [employers, value]
+  )
+
+  const selectedOption = useMemo(
+    () => options.find(employer => employer.value === value),
+    [options, value]
+  )
+
+  const handleChange = value =>
+    onChange({ target: { name: 'employer', type: 'text', value } })
 
-const EmployerDropDown = ({ onChange, isEmpty, arrayList }) => {
-  const employersList = arrayList.map(({ _id, name }) => ({
-    value: _id,
-    label: name
-  }))
   return (
     <div className="form-group">
       <Label htmlFor="employer">Who is your employer? *</Label>
       <Select
         className={isEmpty ? 'is-empty' : ''}
-        noOptionsMessage={() => 'Employer not found? Please select "Other".'}
         inputId="employer"
+        isClearable
         isSearchable
-        options={employersList}
-        onChange={e =>
-          onChange({
-            target: { name: 'employer', type: 'text', value: e.value }
-          })
-        }
         name="employer"
+        onChange={event => handleChange(event?.value ?? '')}
+        onCreateOption={newEmployer => {
+          setOptions(oldOptions => insertedInto(oldOptions, newEmployer))
+          handleChange(newEmployer)
+        }}
+        options={options}
         placeholder="Type your employer name here"
+        value={selectedOption}
       />
+      {isCustomEntry && (
+        <p className="reminder">
+          This employer will be added to our list. Make sure you typed it
+          correctly.
+        </p>
+      )}
     </div>
   )
 }
 
+const insertedInto = (oldOptions, newEmployer) => {
+  const options = [...oldOptions]
+  const canonical = newEmployer.toLowerCase()
+  const entry = { label: newEmployer, value: newEmployer }
+  for (let index = 0; index < options.length; index++) {
+    if (canonical < options[index].value.toLowerCase()) {
+      options.splice(index, 0, entry)
+      return options
+    }
+  }
+  options.push(entry)
+  return options
+}
+
 export default EmployerDropDown

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

@@ -1,11 +1,14 @@
-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', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
   it('shows the label value and place holder value', async () => {
     renderInForm({ employers: ['Arnold Clark'] })
     expect(screen.getByTestId('form')).toHaveTextContent(
@@ -47,12 +50,81 @@ 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('adds the new employer to the list', async () => {
+    const { user } = renderInForm({ employers: ['ABC', 'BBC', 'CBC'] })
+    await user.type(
+      screen.getByRole('combobox', { name: /employer/i }),
+      'Google'
+    )
+    await user.click(screen.getByText('Create "Google"'))
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'BBC'
+    )
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'Google'
+    )
+  })
+
+  it('keeps the list in alphabetical order', async () => {
+    const { container, user } = renderInForm({
+      employers: ['ABC', 'BBC', 'CBC']
+    })
+    for (const employer of ['Boggle', 'Google', 'Aardvark']) {
+      await user.type(
+        screen.getByRole('combobox', { name: /employer/i }),
+        `${employer}{enter}`
+      )
+    }
+    await user.type(
+      screen.getByRole('combobox', { name: /employer/i }),
+      '{delete}'
+    )
+    expect(renderedItems(container)).toEqual([
+      'Aardvark',
+      'ABC',
+      'BBC',
+      'Boggle',
+      'CBC',
+      'Google'
+    ])
+  })
+
+  describe('reminder', () => {
+    const reminder =
+      'This employer will be added to our list. Make sure you typed it correctly.'
+
+    it('does not show message when no value is entered', () => {
+      renderInForm({ employers: ['ABC', 'BBC', 'CBC'], value: '' })
+      expect(screen.queryByText(reminder)).not.toBeInTheDocument()
+    })
+
+    it('does not show message when employer is in list', () => {
+      renderInForm({ employers: ['ABC', 'BBC', 'CBC'], value: 'BBC' })
+      expect(screen.queryByText(reminder)).not.toBeInTheDocument()
+    })
+
+    it('shows message when employer is custom entry', () => {
+      renderInForm({ employers: ['ABC', 'BBC', 'CBC'], value: 'Google' })
+      expect(screen.queryByText(reminder)).toBeInTheDocument()
+    })
   })
 
   it('shows the expected values in AC', async () => {
@@ -96,11 +168,31 @@ describe('EmployerDropDown', () => {
       expect(screen.getByText(employer)).toBeInTheDocument()
     )
   })
+
+  it('can be cleared', async () => {
+    const onChange = jest.fn()
+    renderInForm({ employers: ['ABC', 'BBC', 'CBC'], onChange, value: 'BBC' })
+    await selectEvent.clearAll(screen.getByLabelText(/who is your employer/i))
+    expect(onChange).toHaveBeenCalledWith({
+      target: { name: 'employer', type: 'text', value: '' }
+    })
+  })
+
+  /**
+   * @param {HTMLElement} container
+   */
+  const renderedItems = container => {
+    const divs = Array.from(container.getElementsByTagName('div'))
+    return divs
+      .filter(el => el.getAttribute('aria-disabled') === 'false')
+      .map(el => el.textContent)
+  }
 })
 const renderInForm = ({
   employers = [],
   isEmpty = false,
-  onChange = () => {}
+  onChange = () => {},
+  value = ''
 }) => {
   const user = userEvent.setup()
   const wrapper = render(
@@ -110,6 +202,7 @@ const renderInForm = ({
         isEmpty={isEmpty}
         name="employer"
         onChange={onChange}
+        value={value}
       />
     </form>
   )

src/Components/forms/inputs/index.js

@@ -29,7 +29,8 @@ export default class VolunteerForm extends Component {
       onChangeCheckList,
       guidePeople,
       techSkill,
-      otherSkill
+      otherSkill,
+      employer
     } = this.props
 
     return (
@@ -122,9 +123,10 @@ export default class VolunteerForm extends Component {
         />
         {hearAboutCYFFromEmployer && (
           <EmployerDropDown
-            onChange={onChange}
             arrayList={ListsData.employerList}
             isEmpty={errors.employer}
+            onChange={onChange}
+            value={employer}
           />
         )}
         <span className="contact-interested">

src/hooks/useSession.js

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Behaves like useState but with the value retained in sessionStorage.
+ *
+ * @template T
+ * @param {string} key
+ * @param {(T | (() => T))=} initialValue
+ * @returns {[T | null, (newValue: T | ((oldValue: T) => T)) => void]}
+ */
+export default function useSession(key, initialValue) {
+  const [data, setData] = useState(startValue(key, initialValue))
+  const updateData = useCallback(
+    newData => {
+      setData(oldData => stored(key, callIfFunc(newData, oldData)))
+    },
+    [key]
+  )
+  return [data, updateData]
+}
+
+const callIfFunc = (maybeFunc, ...args) =>
+  typeof maybeFunc === 'function' ? maybeFunc(...args) : maybeFunc
+
+const retrieved = key => {
+  return JSON.parse(sessionStorage.getItem(key))
+}
+
+const startValue = (key, initialValue) => {
+  return retrieved(key) ?? stored(key, callIfFunc(initialValue))
+}
+
+const stored = (key, value = null) => {
+  sessionStorage.setItem(key, JSON.stringify(value))
+  return value
+}