web: Components: Added id, className and style property for RadioButtonGroup component. Added tests.
This commit is contained in:
parent
f79e785173
commit
0dc033b977
@ -22,11 +22,14 @@ import { RadioButtonGroup } from "asc-web-components";
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | :-------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- |
|
||||
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
|
||||
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
|
||||
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
|
||||
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
|
||||
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | :------------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
|
||||
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
|
||||
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
|
||||
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component |
|
||||
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton |
|
||||
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
|
@ -34,7 +34,11 @@ class RadioButtonGroup extends React.Component {
|
||||
render() {
|
||||
const options = this.props.options;
|
||||
return (
|
||||
<StyledDiv className={this.props.className}>
|
||||
<StyledDiv
|
||||
id={this.props.id}
|
||||
className={this.props.className}
|
||||
style={this.props.style}
|
||||
>
|
||||
{options.map(option => {
|
||||
return (
|
||||
<RadioButton
|
||||
@ -70,7 +74,10 @@ RadioButtonGroup.propTypes = {
|
||||
disabled: PropTypes.bool
|
||||
})).isRequired,
|
||||
selected: PropTypes.string.isRequired,
|
||||
spacing: PropTypes.number
|
||||
spacing: PropTypes.number,
|
||||
className: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
}
|
||||
|
||||
RadioButtonGroup.defaultProps = {
|
||||
|
@ -2,20 +2,54 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import RadioButtonGroup from '.';
|
||||
|
||||
const baseProps = {
|
||||
name: 'fruits',
|
||||
selected: 'banana',
|
||||
options: [
|
||||
{ value: 'apple', label: 'Sweet apple' },
|
||||
{ value: 'banana', label: 'Banana' },
|
||||
{ value: 'Mandarin' }
|
||||
]
|
||||
}
|
||||
|
||||
describe('<RadioButtonGroup />', () => {
|
||||
it('renders without error', () => {
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup
|
||||
name='fruits'
|
||||
selected='banana'
|
||||
options={[
|
||||
{ value: 'apple', label: 'Sweet apple'},
|
||||
{ value: 'banana', label: 'Banana'},
|
||||
{ value: 'Mandarin'}
|
||||
]}
|
||||
/>
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup {...baseProps} />
|
||||
);
|
||||
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it('accepts id', () => {
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup {...baseProps} id="testId" />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('id')).toEqual('testId');
|
||||
});
|
||||
|
||||
it('accepts className', () => {
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup {...baseProps} className="test" />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('className')).toEqual('test');
|
||||
});
|
||||
|
||||
it('accepts style', () => {
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup {...baseProps} style={{ color: 'red' }} />
|
||||
);
|
||||
|
||||
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
|
||||
});
|
||||
|
||||
it('accepts isDisabled prop', () => {
|
||||
const wrapper = mount(
|
||||
<RadioButtonGroup {...baseProps} isDisabled />
|
||||
);
|
||||
|
||||
expect(wrapper.prop('isDisabled')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user