Merge pull request #112 from CodeYourFuture/feature/Change-searching-of-employer-names-on-Volunteer-form-to-auto-fill#595

Feature/change searching of employer names on volunteer form to auto fill#595 [STAGING]

Author: SaadiaELF

.circleci/config.yml

@@ -43,6 +43,7 @@ jobs:
             - ~/.cache
       - run: yarn lint
       - run: yarn e2e:prod
+      - run: yarn test
   build:
     docker:
       - image: cimg/node:16.17.1

e2e/integration/journey.test.js

@@ -112,9 +112,8 @@ it('requires employee selection', () => {
   )
   cy.findByRole('button', { name: /submit/i }).click()
   cy.findByText(/form is incomplete/i).should('exist')
-
-  cy.findByRole('combobox', { name: /who is your employer/i }).select(
-    'Capgemini'
+  cy.findByRole('combobox', { name: /who is your employer/i }).type(
+    'Cap{enter}'
   )
   cy.findByRole('button', { name: /submit/i }).click()
 

package.json

@@ -12,6 +12,7 @@
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "react-select": "^5.7.0",
     "reactstrap": "^8.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0"
@@ -61,6 +62,9 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "^8.0.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "concurrently": "^7.4.0",
     "cypress": "^10.9.0",
     "eslint-config-prettier": "^8.5.0",
@@ -70,6 +74,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
+    "react-select-event": "^5.5.1",
     "serve": "^14.0.1",
     "wait-on": "^6.0.1"
   },

src/Components/forms/data.json

@@ -53,6 +53,7 @@
     { "name": "And Digital", "_id": "And Digital" },
     { "name": "Apolitical", "_id": "Apolitical" },
     { "name": "Arnold Clark", "_id": "Arnold Clark" },
+    { "name": "Avaloq", "_id": "Avaloq" },
     { "name": "Avanade", "_id": "Avanade" },
     { "name": "Bankifi", "_id": "Bankifi" },
     { "name": "BJSS", "_id": "BJSS" },
@@ -66,7 +67,9 @@
     { "name": "Cord", "_id": "Cord" },
     { "name": "Covatic", "_id": "Covatic" },
     { "name": "DAI", "_id": "DAI" },
+    { "name": "Deliveroo", "_id": "Deliveroo" },
     { "name": "Deloitte", "_id": "Deloitte" },
+    { "name": "DF Capital", "_id": "DF Capital" },
     { "name": "Digital Cabinet Office", "_id": "Digital Cabinet Office" },
     { "name": "EDF", "_id": "EDF" },
     { "name": "EY (SA)", "_id": "EY (SA)" },
@@ -75,17 +78,23 @@
     { "name": "FourKites", "_id": "FourKites" },
     { "name": "Free Agent", "_id": "Free Agent" },
     { "name": "G-Research", "_id": "G-Research" },
+    { "name": "Google", "_id": "Google" },
     { "name": "Hackajob", "_id": "Hackajob" },
+    { "name": "Hippo Digital", "_id": "Hippo Digital" },
     { "name": "Hired", "_id": "Hired" },
     { "name": "Holoxica", "_id": "Holoxica" },
+    { "name": "Hudson River Trading", "_id": "Hudson River Trading" },
     { "name": "Infinity Works", "_id": "Infinity Works" },
     { "name": "Jaguar LandRover", "_id": "Jaguar LandRover" },
     { "name": "K+C", "_id": "K+C" },
     { "name": "KrakenFlex", "_id": "KrakenFlex" },
     { "name": "Lush", "_id": "Lush" },
     { "name": "LVNDR", "_id": "LVNDR" },
+    { "name": "Made", "_id": "Made" },
     { "name": "MadeTech", "_id": "MadeTech" },
     { "name": "Makers", "_id": "Makers" },
+    { "name": "Meta", "_id": "Meta" },
+    { "name": "Microsoft", "_id": "Microsoft" },
     { "name": "Multitudes", "_id": "Multitudes" },
     { "name": "Multiverse", "_id": "Multiverse" },
     { "name": "MVF", "_id": "MVF" },
@@ -103,6 +112,7 @@
     { "name": "RoundCorp", "_id": "RoundCorp" },
     { "name": "Scottish Power", "_id": "Scottish Power" },
     { "name": "Shopify", "_id": "Shopify" },
+    { "name": "Slack", "_id": "Slack" },
     { "name": "Sopra Steria", "_id": "Sopra Steria" },
     { "name": "Stitch", "_id": "Stitch" },
     { "name": "Substakt", "_id": "Substakt" },

src/Components/forms/inputs/EmployerDropDown.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Label } from 'reactstrap'
+import Select from 'react-select'
+
+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"
+        isSearchable
+        options={employersList}
+        onChange={e =>
+          onChange({
+            target: { name: 'employer', type: 'text', value: e.value }
+          })
+        }
+        name="employer"
+        placeholder="Type your employer name here"
+      />
+    </div>
+  )
+}
+
+export default EmployerDropDown

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

@@ -0,0 +1,117 @@
+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 EmployerDropDown from './EmployerDropDown'
+
+describe('EmployerDropDown', () => {
+  it('shows the label value and place holder value', async () => {
+    renderInForm({ employers: ['Arnold Clark'] })
+    expect(screen.getByTestId('form')).toHaveTextContent(
+      'Who is your employer? *'
+    )
+    expect(screen.getByTestId('form')).toHaveTextContent(
+      'Type your employer name here'
+    )
+  })
+  it('renders an input', async () => {
+    renderInForm({ employers: ['Arnold Clark', 'Bankifi', 'Capgemini'] })
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'Capgemini'
+    )
+    expect(screen.getByTestId('form')).toHaveFormValues({
+      employer: 'Capgemini'
+    })
+  })
+
+  it('updates the rest of the form', async () => {
+    const onChange = jest.fn()
+    renderInForm({ employers: ['Deloitte', 'EDF', 'FlexJobs'], onChange })
+    await selectEvent.select(
+      screen.getByLabelText(/who is your employer/i),
+      'EDF'
+    )
+    expect(onChange).toHaveBeenCalledWith({
+      target: expect.objectContaining({
+        name: 'employer',
+        type: 'text',
+        value: 'EDF'
+      })
+    })
+  })
+
+  it('applies the right class when empty', async () => {
+    const { container } = renderInForm({ isEmpty: true })
+    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('shows the expected values in AC', async () => {
+    const { user } = renderInForm({
+      employers: [
+        'BBC',
+        'Bet365',
+        'Blue Frontier',
+        'EngineerBetter',
+        'Brandwatch',
+        'Equal Experts',
+        'Infobip',
+        'Synaptik Digital',
+        'Tata Consultancy services',
+        'Tamarix Tech',
+        'Inspired Gaming Group',
+        'EPAM System',
+        'Blueprint Gaming',
+        'Beamery',
+        'American Express ',
+        'Capgemini',
+        'Amazon Web Services (AWS)',
+        'Alpha FX Group',
+        'Amazon',
+        'Anaplan'
+      ]
+    })
+    await user.type(screen.getByRole('combobox', { name: /employer/i }), 'am')
+    const appearingEmployers = [
+      'Amazon',
+      'Amazon Web Services (AWS)',
+      'American Express',
+      'Beamery',
+      'Blueprint Gaming',
+      'EPAM System',
+      'Inspired Gaming Group',
+      'Tamarix Tech'
+    ]
+
+    appearingEmployers.forEach(employer =>
+      expect(screen.getByText(employer)).toBeInTheDocument()
+    )
+  })
+})
+const renderInForm = ({
+  employers = [],
+  isEmpty = false,
+  onChange = () => {}
+}) => {
+  const user = userEvent.setup()
+  const wrapper = render(
+    <form data-testid="form">
+      <EmployerDropDown
+        arrayList={employers.map(name => ({ _id: name, name }))}
+        isEmpty={isEmpty}
+        name="employer"
+        onChange={onChange}
+      />
+    </form>
+  )
+  return { user, ...wrapper }
+}

src/Components/forms/inputs/index.js

@@ -6,6 +6,7 @@ import TextInput from './textInput'
 import TextArea from './textArea'
 import CheckListB from './checkListB'
 import CheckListH from './checkListH'
+import EmployerDropDown from './EmployerDropDown'
 
 export default class VolunteerForm extends Component {
   render() {
@@ -28,8 +29,7 @@ export default class VolunteerForm extends Component {
       onChangeCheckList,
       guidePeople,
       techSkill,
-      otherSkill,
-      employer
+      otherSkill
     } = this.props
 
     return (
@@ -121,13 +121,10 @@ export default class VolunteerForm extends Component {
           label="Where did you hear about Code Your Future?"
         />
         {hearAboutCYFFromEmployer && (
-          <DropDown
+          <EmployerDropDown
             onChange={onChange}
-            value={employer}
-            name="employer"
             arrayList={ListsData.employerList}
             isEmpty={errors.employer}
-            label="Who is your employer? *"
           />
         )}
         <span className="contact-interested">

src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'