mirror of https://github.com/grafana/grafana
Grafana-UI: Add id to Select to make it easier to test (#31230)
* Prettier formatting * Grafana-UI: Add support for id and inputId props to Select * Grafana-UI: Add aria-label to Select * Grafana-UI: InlineField and Field get ID from inputId prop For Select * Fix tests using TagFilter * Update Select prop documentation * Update Field tests to use screen instead * Fix the last few testspull/31254/head
Josh Hunt
4 years ago
committed by
GitHub
parent
4f61edd28d
commit
85e186cf10
@ -0,0 +1,37 @@ |
||||
import React from 'react'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import { Input } from '../Input/Input'; |
||||
import { Field } from './Field'; |
||||
import { Select } from '../Select/Select'; |
||||
|
||||
describe('Field', () => { |
||||
it('renders the label', () => { |
||||
render( |
||||
<Field label="My label"> |
||||
<Input id="my-text-input" /> |
||||
</Field> |
||||
); |
||||
|
||||
expect(screen.getByText('My label')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders with the id of its children', () => { |
||||
render( |
||||
<Field label="My label"> |
||||
<Input id="my-text-input" /> |
||||
</Field> |
||||
); |
||||
|
||||
expect(screen.getByLabelText('My label')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders with the inputId of its children', () => { |
||||
render( |
||||
<Field label="My other label"> |
||||
<Select inputId="my-select-input" onChange={() => {}} /> |
||||
</Field> |
||||
); |
||||
|
||||
expect(screen.getByLabelText('My other label')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,37 @@ |
||||
import React from 'react'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import { Input } from '../Input/Input'; |
||||
import { InlineField } from './InlineField'; |
||||
import { Select } from '../Select/Select'; |
||||
|
||||
describe('InlineField', () => { |
||||
it('renders the label', () => { |
||||
render( |
||||
<InlineField label="My label"> |
||||
<Input id="my-text-input" /> |
||||
</InlineField> |
||||
); |
||||
|
||||
expect(screen.getByText('My label')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders with the id of its children', () => { |
||||
render( |
||||
<InlineField label="My label"> |
||||
<Input id="my-text-input" /> |
||||
</InlineField> |
||||
); |
||||
|
||||
expect(screen.getByLabelText('My label')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders with the inputId of its children', () => { |
||||
render( |
||||
<InlineField label="My other label"> |
||||
<Select inputId="my-select-input" onChange={() => {}} /> |
||||
</InlineField> |
||||
); |
||||
|
||||
expect(screen.getByLabelText('My other label')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,19 @@ |
||||
import React, { ReactElement } from 'react'; |
||||
|
||||
/** Returns the ID value of the first, and only, child element */ |
||||
export function getChildId(children: ReactElement): string | undefined { |
||||
let inputId: unknown; |
||||
|
||||
// Get the first, and only, child to retrieve form input's id
|
||||
const child = React.Children.only(children); |
||||
|
||||
// Retrieve input's id to apply on the label for correct click interaction
|
||||
// For some components (like Select), we want to get the ID from a different prop
|
||||
if ('id' in child?.props) { |
||||
inputId = child.props.id; |
||||
} else if ('inputId' in child.props) { |
||||
inputId = child?.props.inputId; |
||||
} |
||||
|
||||
return typeof inputId === 'string' ? inputId : undefined; |
||||
} |
||||
Loading…
Reference in new issue