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
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :------: | :------: | :----: | :-------: | -------------------- |
|
||||
| `number` | `number` | - | - | `0` | Number value |
|
||||
| `backgroundColor` | `string` | - | - | `#ED7309` | CSS background-color |
|
||||
| `color` | `string` | - | - | `#FFFFFF` | CSS color |
|
||||
| `fontSize` | `string` | - | - | `11px` | CSS font-size |
|
||||
| `fontWeight` | `number` | - | - | `800` | CSS font-weight |
|
||||
| `borderRadius` | `string` | - | - | `11px` | CSS border-radius |
|
||||
| `padding` | `string` | - | - | `0 5px` | CSS padding |
|
||||
| `maxWidth` | `string` | - | - | `50px` | CSS max-width |
|
||||
| `onClick` | `func` | - | - | - | onClick event |
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :------------: | :------: | :----: | :-------: | -------------------- |
|
||||
| `backgroundColor` | `string` | - | - | `#ED7309` | CSS background-color |
|
||||
| `borderRadius` | `string` | - | - | `11px` | CSS border-radius |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `color` | `string` | - | - | `#FFFFFF` | CSS color |
|
||||
| `fontSize` | `string` | - | - | `11px` | CSS font-size |
|
||||
| `fontWeight` | `number` | - | - | `800` | CSS font-weight |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `maxWidth` | `string` | - | - | `50px` | CSS max-width |
|
||||
| `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();
|
||||
});
|
||||
|
||||
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,
|
||||
padding: 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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user