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

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

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-22 15:33:41 +03:00
parent 35d1b707ab
commit fa7e651472
3 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/ASC.Web.Components/src/components/avatar/README.md
View File

@ -14,20 +14,23 @@ import { Avatar } from "asc-web-components";
role="admin"
source=""
userName=""
editing={false}
/>
editing={false}
/>
```
If you want to create an avatar with initials, only _first letter of first two words_ of line is used.
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------ | :------: | :------: | :-------------------------------: | :----------: | -------------------------------------------------------- |
| `size` | `oneOf` | - | `max`, `big`, `medium`, `small` | `medium` | Size of avatar |
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | `user` | Adds a user role table |
| `source` | `string` | - | - | - | The address of the image for an image avatar |
| `userName` | `string` | - | - | - | Need to create an avatar with initials |
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
| `editLabel` | `string` | - | - | `Edit photo` | Label for editing layer |
| `editAction` | `func` | - | - | - | Function called when the avatar change button is pressed |
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :-------------------------------: | :----------: | -------------------------------------------------------- |
| `size` | `oneOf` | - | `max`, `big`, `medium`, `small` | `medium` | Size of avatar |
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | `user` | Adds a user role table |
| `source` | `string` | - | - | - | The address of the image for an image avatar |
| `userName` | `string` | - | - | - | Need to create an avatar with initials |
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |
| `editLabel` | `string` | - | - | `Edit photo` | Label for editing layer |
| `editAction` | `func` | - | - | - | Function called when the avatar change button is pressed |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |

39
web/ASC.Web.Components/src/components/avatar/avatar.test.js
View File

@ -96,29 +96,28 @@ describe('<Avatar />', () => {
expect(wrapper.prop('editing')).toEqual(true);
});
/*
it('not re-render test', () => {
const wrapper = shallow(<Avatar {...baseProps} />).instance();
it('accepts id', () => {
const wrapper = mount(
<Avatar {...baseProps} id="testId" />
);
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props, wrapper.state);
expect(shouldUpdate).toBe(false);
expect(wrapper.prop('id')).toEqual('testId');
});
it('re-render test', () => {
const wrapper = shallow(<Avatar {...baseProps} />).instance();
it('accepts className', () => {
const wrapper = mount(
<Avatar {...baseProps} className="test" />
);
const shouldUpdate = wrapper.shouldComponentUpdate({
size: 'max',
role: 'admin',
source: '',
editLabel: 'Edit',
userName: 'Demo User',
editing: false,
editAction: () => jest.fn()
}, wrapper.state);
expect(shouldUpdate).toBe(true);
expect(wrapper.prop('className')).toEqual('test');
});
*/
it('accepts style', () => {
const wrapper = mount(
<Avatar {...baseProps} style={{width: '100px'}} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('width', '100px');
});
});

6
web/ASC.Web.Components/src/components/avatar/index.js
View File

@ -204,7 +204,11 @@ Avatar.propTypes = {
editLabel: PropTypes.string,
userName: PropTypes.string,
editing: PropTypes.bool,
editAction: PropTypes.func
editAction: PropTypes.func,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
Avatar.defaultProps = {