-
Notifications
You must be signed in to change notification settings - Fork 354
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#336/Fix broken unit tests caused by react-children-utilities dependency. #352
Changes from all commits
af0db3d
0bc1add
2ded2c9
9a9794c
aff2ba4
45727eb
aef1621
0b8bf77
44676e4
547521b
30fc208
d2bdeaa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,24 @@ | ||
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', 'hij')} />) | ||
|
||
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', 'hij')} />) | ||
|
||
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', 'hij')} />, | ||
) | ||
|
||
fireEvent.click(getByLabelText('help')) | ||
|
||
|
@@ -26,7 +28,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')) | ||
|
@@ -35,8 +37,21 @@ describe('FormHelpButton', () => { | |
expect(queryByText('some help')).toBeTruthy() | ||
}) | ||
|
||
it('it displays a ReactNode', async () => { | ||
const { getByLabelText, findByText, queryByText } = render( | ||
<FormHelpButton identifier="abc" help={help('def', <span>Hello, ReactNode</span>)} />, | ||
) | ||
|
||
fireEvent.click(getByLabelText('help')) | ||
|
||
await findByText('Hello, ReactNode') | ||
expect(queryByText('Hello, ReactNode')).toBeTruthy() | ||
}) | ||
|
||
Comment on lines
+40
to
+50
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @gj262 Here's a unit test for setting HelpParams content to a |
||
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', 'hij')} />, | ||
) | ||
fireEvent.click(getByLabelText('help')) | ||
await findByText('def') | ||
expect(queryByText('def')).not.toBeNull() | ||
|
@@ -50,7 +65,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', 'hij')} /> | ||
<span>click outside</span> | ||
</div>, | ||
) | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,18 @@ | ||
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) { | ||
return ( | ||
<div className="d-flex align-items-center"> | ||
<span className="my-auto text-truncate">{label}</span> | ||
<FormHelpButton identifier={`${identifier}_help`} label={label} help={help} /> | ||
<FormHelpButton identifier={`${identifier}_help`} help={help} /> | ||
</div> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'))} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This pattern is repeated throughout all elements that have a 'help' attribute. The attribute receives a HelpParams object, created by the |
||
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} | ||
/> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'))} | ||
Comment on lines
43
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here is an example of a label that renders a React node. Note that we pass both a label and help text to the help() method, which generates a HelpParams object. The label is duplicated in both the label= attribute and the help() function. |
||
options={scenarioOptions} | ||
value={scenarioOptions.find((s) => s.label === scenarioState.current)} | ||
onValueChange={handleChangeScenario} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove dependency.