Show reminder for custom employers

Author: textbook

e2e/integration/journey.test.js

@@ -131,6 +131,7 @@ it('can create a new employer', () => {
     'Weyland Yutani{enter}'
   )
   cy.findByText('Weyland Yutani').should('exist')
+  cy.findByText(/Make sure you typed it correctly\./).should('exist')
 })
 
 const setExperience = (topic, level) => {

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

@@ -3,7 +3,9 @@ import { Label } from 'reactstrap'
 import Select from 'react-select/creatable'
 
 const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
+  const [customEntry, setCustomEntry] = useState(false)
   const [employersList, setEmployersList] = useState([])
+
   useEffect(() => {
     setEmployersList(
       arrayList.map(({ _id, name }) => ({
@@ -12,10 +14,18 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
       }))
     )
   }, [arrayList])
+
+  useEffect(() => {
+    setCustomEntry(
+      value !== '' && !arrayList.some(({ name }) => name === value)
+    )
+  }, [arrayList, value])
+
   const handleChange = e =>
     onChange({
       target: { name: 'employer', type: 'text', value: e.value }
     })
+
   return (
     <div className="form-group">
       <Label htmlFor="employer">Who is your employer? *</Label>
@@ -33,6 +43,12 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
         placeholder="Type your employer name here"
         value={employersList.find(employer => employer.value === value)}
       />
+      {customEntry && (
+        <p className="reminder">
+          This employer will be added to our list. Make sure you typed it
+          correctly.
+        </p>
+      )}
     </div>
   )
 }

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

@@ -103,6 +103,26 @@ describe('EmployerDropDown', () => {
     ])
   })
 
+  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 () => {
     const { user } = renderInForm({
       employers: [
@@ -158,7 +178,8 @@ describe('EmployerDropDown', () => {
 const renderInForm = ({
   employers = [],
   isEmpty = false,
-  onChange = () => {}
+  onChange = () => {},
+  value = ''
 }) => {
   const user = userEvent.setup()
   const wrapper = render(
@@ -168,6 +189,7 @@ const renderInForm = ({
         isEmpty={isEmpty}
         name="employer"
         onChange={onChange}
+        value={value}
       />
     </form>
   )