Merge pull request #134 from CodeYourFuture/692-volunteer-should-identify-which-team-they-want-to-be-part-in

Volunteer-team-preference [Staging]

Author: H-BAHDON

e2e/fixtures/teams.json

@@ -0,0 +1,13 @@
+{
+  "teams": [
+    {
+      "_id": "5e863b833150f6001b34627d",
+      "global": "false",
+      "name": "Education",
+      "cityId": "5cefa67c071d210018e3dccf",
+      "description": "EDU",
+      "__v": 0,
+      "leaderEmail": "[email protected]"
+    }
+  ]
+}

e2e/integration/journey.test.js

@@ -4,6 +4,9 @@ beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/cities?visibleIn=VOLUNTEER_FORM`, {
     fixture: 'cities.json'
   })
+  cy.intercept('GET', `${mockServerURL}/teams`, {
+    fixture: 'teams.json'
+  })
   cy.visit('/')
 })
 
@@ -25,6 +28,9 @@ it('can submit a minimal form', () => {
   cy.findByRole('textbox', { name: /first name/i }).type(initialData.firstName)
   cy.findByRole('textbox', { name: /last name/i }).type(initialData.lastName)
   cy.findByRole('combobox', { name: /city/i }).select('London')
+  cy.findByRole('combobox', {
+    name: /select the team you want to volunteer for/i
+  }).select('Education')
   cy.findByRole('textbox', { name: /email/i }).type(initialData.email)
   cy.findByRole('textbox', { name: /phone number/i }).type(initialData.tel)
   cy.findByRole('textbox', { name: /interested in volunteering/i }).type(
@@ -98,6 +104,9 @@ it('requires employee selection', () => {
   cy.findByRole('textbox', { name: /first name/i }).type('Laura')
   cy.findByRole('textbox', { name: /last name/i }).type('Olsen')
   cy.findByRole('combobox', { name: /city/i }).select('London')
+  cy.findByRole('combobox', {
+    name: /select the team you want to volunteer for/i
+  }).select('5e863b833150f6001b34627d')
   cy.findByRole('textbox', { name: /email/i }).type('[email protected]')
   cy.findByRole('textbox', { name: /phone number/i }).type('96838503')
   cy.findByRole('textbox', { name: /interested in volunteering/i }).type('just')

e2e/integration/withCode.test.js

@@ -4,6 +4,9 @@ beforeEach(() => {
   cy.intercept('GET', `${mockServerURL}/cities?visibleIn=VOLUNTEER_FORM`, {
     fixture: 'cities.json'
   })
+  cy.intercept('GET', `${mockServerURL}/teams`, {
+    fixture: 'teams.json'
+  })
 })
 
 it('shows success message', () => {
@@ -25,6 +28,9 @@ it('includes the user ID when resubmitting', () => {
   cy.findByRole('textbox', { name: /email/i }).type(
     '[email protected]'
   )
+  cy.findByRole('combobox', {
+    name: /select the team you want to volunteer for/i
+  }).select('Education')
   cy.findByRole('textbox', { name: /phone number/i }).type('0158-8969905')
   cy.findByRole('textbox', { name: /interested in volunteering/i }).type('just')
   cy.findByRole('textbox', { name: /interested in code your future/i }).type(

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,28 @@ import './index.css'
 
 const path = `${domain()}${appPath}`
 class Forms extends Component {
-  state = initialState
+  state = {
+    teamOptions: [],
+    ...initialState
+  }
+
+  componentDidMount() {
+    this.fetchTeamData()
+  }
+
+  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 (err) {
+      return this.setState({
+        err: 'Sorry, we are currently experiencing technical issues, please try again later.'
+      })
+    }
+  }
 
   handleMagicLinkRequest = async e => {
     e.preventDefault()
@@ -88,17 +109,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 +178,7 @@ class Forms extends Component {
       email,
       tel,
       cityId,
+      teamId,
       interestedInVolunteer,
       interestedInCYF,
       industry,
@@ -169,6 +198,7 @@ class Forms extends Component {
       lastName,
       email,
       cityId,
+      teamId,
       employer: hearAboutCYFFromEmployer ? employer : true,
       interestedInVolunteer,
       tel,
@@ -190,6 +220,7 @@ class Forms extends Component {
         email,
         tel,
         cityId,
+        teamId,
         interestedInVolunteer,
         interestedInCYF,
         industry,
@@ -361,6 +392,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,27 @@ export default class VolunteerForm extends Component {
           placeholder="Just one or two sentences as required..."
           type="textarea"
         />
+        <DropDown
+          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>'
+    )
+  })
+})