Volunteer-team-preference

Author: H-BAHDON

src/Components/forms/helper.js

@@ -10,6 +10,7 @@ export const initialState = {
   interestedInCYF: '',
   industry: '',
   hearAboutCYF: '',
+  teamId: '',
   hearAboutCYFFromEmployer: false,
   employer: '',
   guidePeople: ListsData.guidePeopleSkillList,
@@ -33,6 +34,7 @@ export const initialState = {
     email: false,
     city: false,
     cityId: false,
+    teamId: false,
     interestedInVolunteer: false,
     interestedInCYF: false,
     agreeToTOU: false,

src/Components/forms/index.js

@@ -11,7 +11,27 @@ import './index.css'
 
 const path = `${domain()}${appPath}`
 class Forms extends Component {
-  state = initialState
+  state = {
+    teamOptions: [],
+    ...initialState
+  }
+
+  componentDidMount() {
+    this.fetchTeamData()
+    this.props.loadCities()
+  }
+
+  fetchTeamData = async () => {
+    try {
+      const response = await axios.get(`${domain()}/teams`)
+      const teamData = response.data.teams
+      teamData.sort((a, b) => a.name.localeCompare(b.name))
+
+      this.setState({ teamOptions: teamData })
+    } catch (error) {
+      console.error('Error fetching team data:', error)
+    }
+  }
 
   handleMagicLinkRequest = async e => {
     e.preventDefault()
@@ -88,17 +108,24 @@ class Forms extends Component {
     const { name, value, type, checked } = e.target
     const { errors } = this.state
     errors[name] = false
-    if (e && e.target) {
+
+    // Handle teamId separately
+    if (name === 'teamId') {
+      this.setState({ teamId: value })
+    } else {
+      // Handle other form fields
       this.setState({
         [name]: type === 'checkbox' ? checked : value,
         submitted: false,
         errors,
         formInComplete: false,
         err: null
       })
-    }
-    if (name === 'hearAboutCYF') {
-      this.setState({ hearAboutCYFFromEmployer: value === 'Employer' })
+
+      // Check for special case where name is 'hearAboutCYF'
+      if (name === 'hearAboutCYF') {
+        this.setState({ hearAboutCYFFromEmployer: value === 'Employer' })
+      }
     }
   }
 
@@ -150,6 +177,7 @@ class Forms extends Component {
       email,
       tel,
       cityId,
+      teamId,
       interestedInVolunteer,
       interestedInCYF,
       industry,
@@ -169,6 +197,7 @@ class Forms extends Component {
       lastName,
       email,
       cityId,
+      teamId,
       employer: hearAboutCYFFromEmployer ? employer : true,
       interestedInVolunteer,
       tel,
@@ -190,6 +219,7 @@ class Forms extends Component {
         email,
         tel,
         cityId,
+        teamId,
         interestedInVolunteer,
         interestedInCYF,
         industry,
@@ -361,6 +391,7 @@ class Forms extends Component {
                 onChange={this.onChange}
                 telOnChange={this.telOnChange}
                 onChangeCheckList={this.onChangeCheckList}
+                teamOptions={this.state.teamOptions}
                 {...this.props}
                 {...this.state}
               />

src/Components/forms/inputs/index.js

@@ -17,6 +17,8 @@ export default class VolunteerForm extends Component {
       tel,
       cities,
       cityId,
+      teamId,
+      teamOptions,
       email,
       telOnChange,
       errors,
@@ -104,6 +106,28 @@ export default class VolunteerForm extends Component {
           placeholder="Just one or two sentences as required..."
           type="textarea"
         />
+        <DropDown
+          data-testid="testId"
+          onChange={onChange}
+          value={teamId}
+          name="teamId"
+          arrayList={teamOptions}
+          isEmpty={errors.teamId}
+          label={
+            <span>
+              Please select the team you want to volunteer for. You can read
+              about the teams on this
+              <a
+                href="https://codeyourfuture.io/volunteers/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {' '}
+                page
+              </a>
+            </span>
+          }
+        />
         <DropDown
           onChange={onChange}
           value={industry}

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

@@ -0,0 +1,114 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import DropDown from './dropDown'
+
+const teamOptions = [
+  { _id: 'team0', name: 'Select here' },
+  { _id: 'team1', name: 'Education' },
+  { _id: 'team2', name: 'Mentorship' },
+  { _id: 'team3', name: 'Outreach' },
+  { _id: 'team4', name: 'Personal Development' },
+  { _id: 'team5', name: 'Tech Project' }
+].map(team => ({ ...team, name: team.name.toLowerCase() }))
+
+const errors = {
+  teamId: false
+}
+
+const VolunteerForm = ({ teamOptions }) => {
+  return (
+    <form data-testid="testId">
+      <DropDown
+        onChange={() => {}}
+        value=""
+        name="teamId"
+        arrayList={teamOptions}
+        isEmpty={errors.teamId}
+        label={
+          <span>
+            Please select the team you want to volunteer for. You can read about
+            the teams on this
+            <a
+              href="https://codeyourfuture.io/volunteers/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {' '}
+              page
+            </a>
+          </span>
+        }
+      />
+    </form>
+  )
+}
+
+describe('Volunteer-team-preference', () => {
+  // Testing form content
+  it('testing form', () => {
+    render(<VolunteerForm teamOptions={teamOptions} />)
+    expect(screen.getByTestId('testId')).toHaveTextContent(
+      'Please select the team you want to volunteer for.'
+    )
+  })
+
+  // Test to see if we can open a new tab
+  it('Opening CYF page in a new tab/page', () => {
+    render(<VolunteerForm teamOptions={teamOptions} />)
+    const linkElement = screen.getByText('page')
+    expect(linkElement).toHaveAttribute(
+      'href',
+      'https://codeyourfuture.io/volunteers/'
+    )
+    expect(linkElement).toHaveAttribute('target', '_blank')
+  })
+
+  it('team options are correctly displayed in the dropdown', () => {
+    render(<VolunteerForm teamOptions={teamOptions} />)
+    teamOptions.forEach(option => {
+      const selectOptions = screen.queryAllByText(option.name)
+      selectOptions.forEach(selectOption => {
+        expect(selectOption).toBeInTheDocument()
+      })
+    })
+  })
+
+  it('new volunteer cannot skip this question', () => {
+    render(<VolunteerForm teamOptions={teamOptions} />)
+    const selectElement = screen.getByLabelText(
+      /Please select the team you want to volunteer for/i
+    )
+    fireEvent.change(selectElement, { target: { value: '' } })
+    fireEvent.blur(selectElement)
+    expect(screen.getByTestId('testId')).toHaveTextContent(
+      'Please select the team you want to volunteer for.'
+    )
+  })
+
+  // Check if the teams are in alphabetical order
+  it('form updates with new team', () => {
+    const newTeam = { _id: 'team6', name: 'New Team' }
+    const updatedTeamOptions = [...teamOptions, newTeam]
+    render(<VolunteerForm teamOptions={updatedTeamOptions} />)
+    const selectElement = screen.getByLabelText(
+      /Please select the team you want to volunteer for/i
+    )
+    expect(selectElement).toContainHTML(
+      '<option value="team6">New Team</option>'
+    )
+  })
+
+  it('form updates with deleted team', () => {
+    const deletedTeam = { _id: 'team1', name: 'Education' }
+    const updatedTeamOptions = teamOptions.filter(
+      team => team._id !== deletedTeam._id
+    )
+    render(<VolunteerForm teamOptions={updatedTeamOptions} />)
+    const selectElement = screen.getByLabelText(
+      /Please select the team you want to volunteer for/i
+    )
+    expect(selectElement).not.toContainHTML(
+      '<option value="team1">Education</option>'
+    )
+  })
+})