#336/Fix broken unit tests caused by react-children-utilities dependency.

package.json

@@ -82,7 +82,6 @@
     "prop-types": "15.7.2",
     "raf": "3.4.1",
     "react": "16.13.0",
-    "react-children-utilities": "2.0.12",
     "react-dates": "21.8.0",
     "react-dom": "16.13.0",
     "react-error-boundary": "1.2.5",

src/components/Form/FormDatePicker.tsx

@@ -7,6 +7,7 @@ import Media from 'react-media'
 import { Col, FormGroup, Row } from 'reactstrap'
 
 import FormLabel from './FormLabel'
+import {HelpProps} from './FormHelpButton'
 
 import { DateRange } from '../../algorithms/types/Param.types'
 
@@ -21,7 +22,7 @@ function getNumberOfMonthsCount(media: { tiny: boolean; small: boolean; medium:
 export interface FormDatePickerProps {
   identifier: string
   label: string
-  help?: string | React.ReactNode
+  help?: HelpProps
   allowPast?: boolean
 }
 

src/components/Form/FormDropdown.tsx

@@ -3,6 +3,8 @@ import React from 'react'
 import { Field, FieldProps, FormikErrors, FormikTouched, FormikValues } from 'formik'
 import FormDropdownStateless from './FormDropdownStateless'
 
+import HelpProps from './FormHelpButton'
+
 export interface FormDropdownOption<ValueType extends string | number> {
   value: ValueType
   label: string
@@ -11,7 +13,7 @@ export interface FormDropdownOption<ValueType extends string | number> {
 export interface FormDropdownProps<ValueType extends string | number> {
   identifier: string
   label: string
-  help?: string | React.ReactNode
+  help?: HelpProps
   options: FormDropdownOption<ValueType>[]
   errors?: FormikErrors<FormikValues>
   touched?: FormikTouched<FormikValues>

src/components/Form/FormDropdownStateless.tsx

@@ -5,11 +5,12 @@ import { Col, FormGroup, Row } from 'reactstrap'
 
 import { FormDropdownOption } from './FormDropdownOption'
 import FormLabel from './FormLabel'
+import HelpProps from './FormHelpButton'
 
 export interface FormDropdownProps<ValueType extends string | number> {
   identifier: string
   label: string | React.ReactNode
-  help?: string | React.ReactNode
+  help?: HelpProps
   options: FormDropdownOption<ValueType>[]
   defaultOption?: FormDropdownOption<ValueType>
   value?: FormDropdownOption<ValueType>

src/components/Form/FormHelpButton.test.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 import { render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react'
-import FormHelpButton from './FormHelpButton'
+import FormHelpButton, {help} from './FormHelpButton'
 
 describe('FormHelpButton', () => {
   it('renders', () => {
-    const { getByLabelText } = render(<FormHelpButton identifier="abc" label="def" />)
+    const { getByLabelText } = render(<FormHelpButton identifier="abc" help={help("def")} />)
 
     expect(getByLabelText('help')).not.toBeNull()
   })
 
   it('initially hides help', () => {
-    const { queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+    const { queryByText } = render(<FormHelpButton identifier="abc" help={help("def")} />)
 
     expect(queryByText('def')).toBeNull()
   })
 
   it('opens', async () => {
-    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" help={help("def")} />)
 
     fireEvent.click(getByLabelText('help'))
 
@@ -26,7 +26,7 @@ describe('FormHelpButton', () => {
 
   it('displays help', async () => {
     const { getByLabelText, findByText, queryByText } = render(
-      <FormHelpButton identifier="abc" label="def" help="some help" />,
+      <FormHelpButton identifier="abc" help={help("def", "some help")} />,
     )
 
     fireEvent.click(getByLabelText('help'))
@@ -36,7 +36,7 @@ describe('FormHelpButton', () => {
   })
 
   it('closes inside', async () => {
-    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" label="def" />)
+    const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" help={help("def")} />)
     fireEvent.click(getByLabelText('help'))
     await findByText('def')
     expect(queryByText('def')).not.toBeNull()
@@ -50,7 +50,7 @@ describe('FormHelpButton', () => {
   it('closes outside', async () => {
     const { getByLabelText, findByText, getByText, queryByText } = render(
       <div>
-        <FormHelpButton identifier="abc" label="def" />
+        <FormHelpButton identifier="abc" help={help("def")} />
         <span>click outside</span>
       </div>,
     )

src/components/Form/FormHelpButton.tsx

@@ -2,8 +2,6 @@ import React from 'react'
 
 import { Button, Card, CardBody, UncontrolledPopover } from 'reactstrap'
 
-import { onlyText } from 'react-children-utilities'
-
 import { FaQuestion } from 'react-icons/fa'
 
 import './FormHelpButton.scss'
@@ -12,13 +10,21 @@ function safeId(id: string) {
   return id.replace('.', '-')
 }
 
+export interface HelpProps {
+  label: string
+  text: string
+}
+
+export function help(label:string = "", text:string = "") : HelpProps {
+  return { label, text }
+}
+
 export interface FormHelpButtonProps {
   identifier: string
-  label: string | React.ReactNode
-  help?: string | React.ReactNode
+  help?: HelpProps
 }
 
-export default function FormHelpButton({ identifier, label, help }: FormHelpButtonProps) {
+export default function FormHelpButton({ identifier, help }: FormHelpButtonProps) {
   return (
     <>
       <Button
@@ -36,8 +42,8 @@ export default function FormHelpButton({ identifier, label, help }: FormHelpButt
       <UncontrolledPopover placement="right" target={safeId(identifier)} trigger="legacy" hideArrow>
         <Card className="card--help">
           <CardBody>
-            {label && <h4>{onlyText(label)}</h4>}
-            <p>{help}</p>
+            <h4>{help.label}</h4>
+            <p>{help.text}</p>
           </CardBody>
         </Card>
       </UncontrolledPopover>

src/components/Form/FormLabel.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import FormLabel from './FormLabel'
+import {help} from './FormHelpButton'
 
 const findLabelInTree = (el: HTMLElement | null): HTMLElement | null => {
   if (!el) {
@@ -18,7 +19,7 @@ describe('FormLabel', () => {
     // element tree that shows the label text. And that <label> should be for
     // the identifier.
 
-    const { getByText } = render(<FormLabel identifier="abc" label="def" />)
+    const { getByText } = render(<FormLabel identifier="abc" label="def" help={help('hij')} />)
 
     const labelElement = findLabelInTree(getByText('def')) as HTMLLabelElement
 

src/components/Form/FormLabel.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 
 import HelpLabel from './HelpLabel'
+import {HelpProps} from './FormHelpButton'
 
 export interface LabelWithHelpButtonProps {
   identifier: string
   label: string | React.ReactNode
-  help?: string | React.ReactNode
+  help?: HelpProps
 }
 
 export default function FormLabel({ identifier, label, help }: LabelWithHelpButtonProps) {

src/components/Form/FormSpinBox.tsx

@@ -6,11 +6,12 @@ import { Field, FormikErrors, FormikTouched } from 'formik'
 import { Col, FormGroup, Row } from 'reactstrap'
 
 import FormLabel from './FormLabel'
+import HelpProps from './FormHelpButton'
 
 export interface FormSpinBoxProps<T> {
   identifier: string
   label: string
-  help?: string | React.ReactNode
+  help?: HelpProps
   step?: number | string
   min?: number
   max?: number

src/components/Form/FormSwitch.tsx

@@ -3,11 +3,12 @@ import React from 'react'
 import { CustomInput } from 'reactstrap'
 
 import FormLabel from './FormLabel'
+import HelpProps from './FormHelpButton'
 
 export interface FormSwitchProps {
   identifier: string
   label: string
-  help?: string
+  help?: HelpProps
   checked: boolean
   hidden?: boolean
   onValueChanged(checked: boolean): void

src/components/Form/HelpLabel.test.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import HelpLabel from './HelpLabel'
+import {help} from './FormHelpButton'
 
 describe('HelpLabel', () => {
   it('displays the label', () => {
-    const { getByText } = render(<HelpLabel identifier="abc" label="def" />)
+    const { getByText } = render(<HelpLabel identifier="abc" label="def" help={help("hij")} />)
 
     expect(getByText('def')).not.toBeNull()
   })
 
   it('displays a help button', () => {
-    const { getByLabelText } = render(<HelpLabel identifier="abc" label="def" />)
+    const { getByLabelText } = render(<HelpLabel identifier="abc" label="def" help={help("hij")} />)
 
     expect(getByLabelText('help')).not.toBeNull()
   })

src/components/Form/HelpLabel.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import FormHelpButton from './FormHelpButton'
+import FormHelpButton, {HelpProps} from './FormHelpButton'
 
 export interface HelpLabelProps {
   identifier: string
   label: string | React.ReactNode
-  help?: string | React.ReactNode
+  help?: HelpProps
 }
 
 export default function HelpLabel({ identifier, label, help }: HelpLabelProps) {

src/components/Main/Results/ResultsCard.tsx

@@ -4,6 +4,7 @@ import { Button, Col, Row } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import ExportSimulationDialog from './ExportSimulationDialog'
 import FormSwitch from '../../Form/FormSwitch'
+import { help } from '../../Form/FormHelpButton'
 import LocalStorage, { LOCAL_STORAGE_KEYS } from '../../../helpers/localStorage'
 import processUserResult from '../../../algorithms/utils/userResult'
 import { AgeBarChart } from './AgeBarChart'
@@ -106,7 +107,7 @@ function ResultsCardFunction({
             {t('Results')}
           </h2>
         }
-        help={t('This section contains simulation results')}
+        help={help(t('Results'), t('This section contains simulation results'))}
         defaultCollapsed={false}
       >
         <Row className="mb-4">
@@ -159,7 +160,7 @@ function ResultsCardFunction({
             <FormSwitch
               identifier="logScale"
               label={t('Log scale')}
-              help={t('Toggle between logarithmic and linear scale on vertical axis of the plot')}
+              help={help(t('Log scale'), t('Toggle between logarithmic and linear scale on vertical axis of the plot'))}
               checked={logScale}
               onValueChanged={setPersistLogScale}
             />
@@ -168,7 +169,7 @@ function ResultsCardFunction({
             <FormSwitch
               identifier="showHumanized"
               label={t('Show humanized results')}
-              help={t('Show numerical results in a human friendly format')}
+              help={help(t('Show humanized results'), t('Show numerical results in a human friendly format'))}
               checked={showHumanized}
               onValueChanged={setPersistShowHumanized}
             />

src/components/Main/Scenario/ScenarioCard.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 
 import { CardWithDropdown } from '../../Form/CardWithDropdown'
 import { stringsToOptions } from '../../Form/FormDropdownOption'
+import { help } from '../../Form/FormHelpButton'
 
 import { setScenario } from '../state/actions'
 import { State } from '../state/state'
@@ -40,7 +41,7 @@ function ScenarioCard({ severity, scenarioState, errors, touched, setSeverity, s
     <CardWithDropdown
       identifier="scenarioName"
       label={<h2 className="p-0 m-0 d-inline text-truncate">{t('Scenario')}</h2>}
-      help={t('Combination of population, epidemiology, and mitigation scenarios')}
+      help={help(t('Scenario'), t('Combination of population, epidemiology, and mitigation scenarios'))}
       options={scenarioOptions}
       value={scenarioOptions.find((s) => s.label === scenarioState.current)}
       onValueChange={handleChangeScenario}

src/components/Main/Scenario/ScenarioCardContainment.tsx

@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next'
 
 import { CardWithoutDropdown } from '../../Form/CardWithoutDropdown'
 import { FormSpinBox } from '../../Form/FormSpinBox'
+import { help } from '../../Form/FormHelpButton'
+
 import { ContainmentGraph } from '../Containment/ContainmentGraph'
 
 import { setContainmentData } from '../state/actions'
@@ -33,14 +35,12 @@ function ScenarioCardContainment({ scenarioState, errors, touched, scenarioDispa
     <CardWithoutDropdown
       identifier="containmentScenario"
       label={<h3 className="p-0 d-inline text-truncate">{t('Mitigation')}</h3>}
-      help={t(
-        'Reduction of transmission through mitigation measures over time. Different presets with variable degree of reduction can be selected from the dropdown.',
-      )}
+      help={help(t('Mitigation'), t('Reduction of transmission through mitigation measures over time. Different presets with variable degree of reduction can be selected from the dropdown.'))}
     >
       <FormSpinBox
         identifier="containment.numberPoints"
         label={t('Number of points')}
-        help={t('Number of controllable points on the mitigation curve')}
+        help={help(t('Number of points'), t('Number of controllable points on the mitigation curve'))}
         step={1}
         min={5}
         max={100}