web: Components: Added id, className and style property for Badge component. Added tests.
This commit is contained in:
parent
8918d311a9
commit
51e0aee7ff
@ -24,14 +24,17 @@ import { Badge } from "asc-web-components";
|
|||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
| Props | Type | Required | Values | Default | Description |
|
||||||
| ----------------- | :------: | :------: | :----: | :-------: | -------------------- |
|
| ----------------- | :------------: | :------: | :----: | :-------: | -------------------- |
|
||||||
| `number` | `number` | - | - | `0` | Number value |
|
| `backgroundColor` | `string` | - | - | `#ED7309` | CSS background-color |
|
||||||
| `backgroundColor` | `string` | - | - | `#ED7309` | CSS background-color |
|
| `borderRadius` | `string` | - | - | `11px` | CSS border-radius |
|
||||||
| `color` | `string` | - | - | `#FFFFFF` | CSS color |
|
| `className` | `string` | - | - | - | Accepts class |
|
||||||
| `fontSize` | `string` | - | - | `11px` | CSS font-size |
|
| `color` | `string` | - | - | `#FFFFFF` | CSS color |
|
||||||
| `fontWeight` | `number` | - | - | `800` | CSS font-weight |
|
| `fontSize` | `string` | - | - | `11px` | CSS font-size |
|
||||||
| `borderRadius` | `string` | - | - | `11px` | CSS border-radius |
|
| `fontWeight` | `number` | - | - | `800` | CSS font-weight |
|
||||||
| `padding` | `string` | - | - | `0 5px` | CSS padding |
|
| `id` | `string` | - | - | - | Accepts id |
|
||||||
| `maxWidth` | `string` | - | - | `50px` | CSS max-width |
|
| `maxWidth` | `string` | - | - | `50px` | CSS max-width |
|
||||||
| `onClick` | `func` | - | - | - | onClick event |
|
| `number` | `number` | - | - | `0` | Number value |
|
||||||
|
| `onClick` | `func` | - | - | - | onClick event |
|
||||||
|
| `padding` | `string` | - | - | `0 5px` | CSS padding |
|
||||||
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||||
|
@ -10,4 +10,57 @@ describe('<Badge />', () => {
|
|||||||
|
|
||||||
expect(wrapper).toExist();
|
expect(wrapper).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('displays number', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge number={10} />
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('number')).toBe(10);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('call onClick()', () => {
|
||||||
|
const onClick = jest.fn();
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge onClick={onClick} />
|
||||||
|
);
|
||||||
|
|
||||||
|
wrapper.simulate('click');
|
||||||
|
|
||||||
|
expect(onClick).toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('call onClick() without wrapper', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge />
|
||||||
|
);
|
||||||
|
|
||||||
|
wrapper.simulate('click');
|
||||||
|
|
||||||
|
expect(wrapper).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts id', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge id="testId" />
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('id')).toEqual('testId');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts className', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge className="test" />
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('className')).toEqual('test');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts style', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<Badge style={{ color: 'red' }} />
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -40,7 +40,10 @@ Badge.propTypes = {
|
|||||||
borderRadius: PropTypes.string,
|
borderRadius: PropTypes.string,
|
||||||
padding: PropTypes.string,
|
padding: PropTypes.string,
|
||||||
maxWidth: PropTypes.string,
|
maxWidth: PropTypes.string,
|
||||||
onClick: PropTypes.func
|
onClick: PropTypes.func,
|
||||||
|
className: PropTypes.string,
|
||||||
|
id: PropTypes.string,
|
||||||
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||||
};
|
};
|
||||||
|
|
||||||
Badge.defaultProps = {
|
Badge.defaultProps = {
|
||||||
|
Loading…
Reference in New Issue
Block a user