web: Components: Added id, className and style property for LinkWithDropdown component. Added tests.
This commit is contained in:
parent
d7b3262e1e
commit
560d9df87a
@ -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 | |
|
||||
|
@ -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 = {
|
||||
|
@ -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();
|
||||
});
|
||||
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user