IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Added id, className and style property for RadioButtonGroup component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 15:45:13 +03:00
parent f79e785173
commit 0dc033b977
3 changed files with 64 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/ASC.Web.Components/src/components/radio-button-group/README.md
View File

@ -22,11 +22,14 @@ import { RadioButtonGroup } from "asc-web-components";
### Properties ### Properties
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ------------ | :-------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- | | ------------ | :------------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup | | `className` | `string` | - | - | - | Accepts class |
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton | | `id` | `string` | - | - | - | Accepts id |
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component | | `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group |
| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton | | `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup |
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group | | `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component |
| `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 |

11
web/ASC.Web.Components/src/components/radio-button-group/index.js
View File

@ -34,7 +34,11 @@ class RadioButtonGroup extends React.Component {
render() { render() {
const options = this.props.options; const options = this.props.options;
return ( return (
<StyledDiv className={this.props.className}> <StyledDiv
id={this.props.id}
className={this.props.className}
style={this.props.style}
>
{options.map(option => { {options.map(option => {
return ( return (
<RadioButton <RadioButton
@ -70,7 +74,10 @@ RadioButtonGroup.propTypes = {
disabled: PropTypes.bool disabled: PropTypes.bool
})).isRequired, })).isRequired,
selected: PropTypes.string.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 = { RadioButtonGroup.defaultProps = {

54
web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.test.js
View File

@ -2,20 +2,54 @@ import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import RadioButtonGroup from '.'; import RadioButtonGroup from '.';
const baseProps = {
name: 'fruits',
selected: 'banana',
options: [
{ value: 'apple', label: 'Sweet apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'Mandarin' }
]
}
describe('<RadioButtonGroup />', () => { describe('<RadioButtonGroup />', () => {
it('renders without error', () => { it('renders without error', () => {
const wrapper = mount( const wrapper = mount(
<RadioButtonGroup <RadioButtonGroup {...baseProps} />
name='fruits'
selected='banana'
options={[
{ value: 'apple', label: 'Sweet apple'},
{ value: 'banana', label: 'Banana'},
{ value: 'Mandarin'}
]}
/>
); );
expect(wrapper).toExist(); 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);
});
}); });