Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Closed
wants to merge 12 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
af0db3d
Refactor how labels/text are passed to FormHelpButton.
abrie Apr 1, 2020
0bc1add
Remove react-children-utilities dependency.
abrie Apr 1, 2020
2ded2c9
Apply yarn lint:fix.
abrie Apr 1, 2020
9a9794c
Merge remote-tracking branch 'upstream/master'
abrie Apr 1, 2020
aff2ba4
Rename HelpParams 'text' -> 'content' and allow ReactNode type.
abrie Apr 1, 2020
45727eb
Add missing content param to help helper.
abrie Apr 1, 2020
aef1621
Use help helper in SeverityCard help attribute.
abrie Apr 2, 2020
0b8bf77
Add missing 'content' parameter to help helper.
abrie Apr 2, 2020
44676e4
Handle undefined help attribute by showing message.
abrie Apr 2, 2020
547521b
Fix broken code typo.
abrie Apr 2, 2020
30fc208
Remove unused FormHelpButton label attribute.
abrie Apr 2, 2020
d2bdeaa
eslint --fix
abrie Apr 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions src/components/Form/FormHelpButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,21 @@ import FormHelpButton, { help } from './FormHelpButton'

describe('FormHelpButton', () => {
it('renders', () => {
const { getByLabelText } = render(<FormHelpButton identifier="abc" help={help('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" help={help('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" help={help('def')} />)
const { getByLabelText, findByText, queryByText } = render(
<FormHelpButton identifier="abc" help={help('def', 'hij')} />,
)

fireEvent.click(getByLabelText('help'))

Expand All @@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gj262 Here's a unit test for setting HelpParams content to a ReactNode

it('closes inside', async () => {
const { getByLabelText, findByText, queryByText } = render(<FormHelpButton identifier="abc" help={help('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()
Expand All @@ -50,7 +65,7 @@ describe('FormHelpButton', () => {
it('closes outside', async () => {
const { getByLabelText, findByText, getByText, queryByText } = render(
<div>
<FormHelpButton identifier="abc" help={help('def')} />
<FormHelpButton identifier="abc" help={help('def', 'hij')} />
<span>click outside</span>
</div>,
)
Expand Down
10 changes: 5 additions & 5 deletions src/components/Form/FormHelpButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ function safeId(id: string) {

export interface HelpProps {
label: string
text: string
content: string | React.ReactNode
}

export function help(label = '', text = ''): HelpProps {
return { label, text }
export function help(label: string, content: string | React.ReactNode): HelpProps {
return { label, content }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gj262 text renamed to content, and it allows React.ReactNode.

}

export interface FormHelpButtonProps {
identifier: string
help?: HelpProps
help: HelpProps
}

export default function FormHelpButton({ identifier, help }: FormHelpButtonProps) {
Expand All @@ -43,7 +43,7 @@ export default function FormHelpButton({ identifier, help }: FormHelpButtonProps
<Card className="card--help">
<CardBody>
<h4>{help.label}</h4>
<p>{help.text}</p>
<p>{help.content}</p>
</CardBody>
</Card>
</UncontrolledPopover>
Expand Down