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 LinkWithDropdown component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 14:31:25 +03:00
parent d7b3262e1e
commit 560d9df87a
3 changed files with 102 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/ASC.Web.Components/src/components/link-with-dropdown/README.md
View File

@ -20,13 +20,15 @@ import { LinkWithDropdown } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------- | :------: | :------: | :------------------------------------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `title` | `string` | - | - | - | Title of link | |
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
| Props | Type | Required | Values | Default | Description |
| ------------------- | :------------: | :------: | :------------------------------------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
| `id` | `string` | - | - | - | Accepts id |
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `title` | `string` | - | - | - | Title of link | |

14
web/ASC.Web.Components/src/components/link-with-dropdown/index.js
View File

@ -27,7 +27,7 @@ SimpleLinkWithDropdown.propTypes = {
const color = props => props.color;
// eslint-disable-next-line react/prop-types
// eslint-disable-next-line react/prop-types, no-unused-vars
const ExpanderDownIcon = ({ isSemitransparent, dropdownType, isOpen, ...props }) => (<Icons.ExpanderDownIcon {...props} />);
const Caret = styled(ExpanderDownIcon)`
@ -171,14 +171,18 @@ class LinkWithDropdown extends React.Component {
color,
isBold,
title,
isOpen,
className,
data,
id,
style,
...rest
} = this.props;
return (
<StyledSpan
className={className}>
className={className}
id={id}
style={style}
>
<span
ref={this.ref}
onClick={this.clickToDropdown}
@ -238,7 +242,9 @@ LinkWithDropdown.propTypes = {
title: PropTypes.string,
isOpen: PropTypes.bool,
children: PropTypes.any,
className: PropTypes.string
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
LinkWithDropdown.defaultProps = {

80
web/ASC.Web.Components/src/components/link-with-dropdown/link-with-dropdown.test.js
View File

@ -92,4 +92,84 @@ describe('<LinkWithDropdown />', () => {
});
it('accepts id', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} id="testId">Link with dropdown</LinkWithDropdown>
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} className="test">Link with dropdown</LinkWithDropdown>
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
it('componentDidUpdate() state lifecycle test', () => {
const wrapper = shallow(<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>);
const instance = wrapper.instance();
wrapper.setState({ isOpen: false });
instance.componentDidUpdate(wrapper.props(), wrapper.state());
wrapper.setState({ isOpen: true });
instance.componentDidUpdate(wrapper.props(), wrapper.state());
expect(wrapper.state()).toBe(wrapper.state());
});
it('componentDidUpdate() prop lifecycle test', () => {
const wrapper = shallow(<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>);
const instance = wrapper.instance();
instance.componentDidUpdate({isOpen: true, dropdownType: 'appearDashedAfterHover'}, wrapper.state());
expect(wrapper.state()).toBe(wrapper.state());
});
it('accepts prop dropdownType', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} dropdownType="appearDashedAfterHover">Link with dropdown</LinkWithDropdown>
);
expect(wrapper.prop('dropdownType')).toEqual('appearDashedAfterHover');
});
it('accepts prop isOpen', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} isOpen>Link with dropdown</LinkWithDropdown>
);
expect(wrapper.prop('isOpen')).toEqual(true);
});
it('accepts prop isSemitransparent', () => {
const wrapper = mount(
<LinkWithDropdown color="#333333" isBold={true} data={[]} isSemitransparent>Link with dropdown</LinkWithDropdown>
);
expect(wrapper.prop('isSemitransparent')).toEqual(true);
});
it('componentWillUnmount() lifecycle test', () => {
const wrapper = mount(<LinkWithDropdown color="#333333" isBold={true} data={[]}>Link with dropdown</LinkWithDropdown>);
const componentWillUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
wrapper.unmount();
expect(componentWillUnmount).toHaveBeenCalled();
});
});