@woosmap/ui 2.42.0 → 2.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Button/Button.js

@@ -24,6 +24,7 @@ export default class Button extends Component {
             isLoading,
             active,
             children,
+            testId,
             ...rest
         } = this.props;
         const classes = cl(
@@ -51,6 +52,7 @@ export default class Button extends Component {
                 onClick={isLoading || disabled ? undefined : onClick}
                 {...rest}
                 className={classes}
+                data-testid={testId}
             >
                 {iconComponent}
                 {label && <span className="btn__label">{isLoading ? tr('Loading...') : label}</span>}
@@ -61,6 +63,7 @@ export default class Button extends Component {
 }
 
 Button.defaultProps = {
+    testId: 'button',
     isBtnIcon: false,
     disabled: false,
     children: null,
@@ -76,6 +79,7 @@ Button.defaultProps = {
 };
 
 Button.propTypes = {
+    testId: PropTypes.string,
     isBtnIcon: PropTypes.bool,
     disabled: PropTypes.bool,
     size: PropTypes.oneOf(['large', 'small', 'mini', undefined]),

package/src/components/Button/Button.test.js

@@ -12,8 +12,8 @@ it('renders a Button component ', () => {
 });
 
 it('renders a small Button', () => {
-    const { container } = render(<Button label="label" size="small" />);
-    expect(container.firstChild).toHaveClass('btn--small');
+    const { getByTestId } = render(<Button label="label" size="small" />);
+    expect(getByTestId('button')).toHaveClass('btn--small');
 });
 
 it('renders a mini Button', () => {
@@ -23,7 +23,7 @@ it('renders a mini Button', () => {
 
 it('renders a loading Button', () => {
     const { container } = render(<Button label="label" isLoading />);
-    expect(container.firstChild).toHaveClass('btn--loading');;
+    expect(container.firstChild).toHaveClass('btn--loading');
     expect(container.firstChild.firstChild).toHaveClass('icon');
 });
 

package/src/components/Button/ButtonGroup.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 export default class ButtonGroup extends Component {
     render() {
-        const { children, isLight, isTooltipBtn, ...rest } = this.props;
+        const { children, isLight, isTooltipBtn, testId, ...rest } = this.props;
         return (
             <div
                 className={cl(
@@ -13,6 +13,7 @@ export default class ButtonGroup extends Component {
                     { 'btn--group-container--btn-tooltip': isTooltipBtn }
                 )}
                 {...rest}
+                data-testid={testId}
             >
                 {children}
             </div>
@@ -21,12 +22,14 @@ export default class ButtonGroup extends Component {
 }
 
 ButtonGroup.defaultProps = {
+    testId: 'button-group',
     children: null,
     isLight: false,
     isTooltipBtn: false,
 };
 
 ButtonGroup.propTypes = {
+    testId: PropTypes.string,
     children: PropTypes.array,
     isLight: PropTypes.bool,
     isTooltipBtn: PropTypes.bool,

package/src/components/Button/ButtonSwitch.js

@@ -4,13 +4,14 @@ import Button from './Button';
 
 export default class ButtonSwitch extends Component {
     render() {
-        const { active, icon, activeIcon, iconSize } = this.props;
+        const { active, icon, activeIcon, iconSize, testId } = this.props;
         const iconToDisplay = active && activeIcon ? activeIcon : icon;
-        return <Button iconSize={iconSize} type="switch" {...this.props} icon={iconToDisplay} />;
+        return <Button iconSize={iconSize} type="switch" {...this.props} icon={iconToDisplay} testId={testId} />;
     }
 }
 
 ButtonSwitch.defaultProps = {
+    testId: 'button-switch',
     isBtnIcon: false,
     disabled: false,
     children: null,
@@ -26,6 +27,7 @@ ButtonSwitch.defaultProps = {
 };
 
 ButtonSwitch.propTypes = {
+    testId: PropTypes.string,
     isBtnIcon: PropTypes.bool,
     disabled: PropTypes.bool,
     size: PropTypes.oneOf(['large', 'small', 'mini', undefined]),

package/src/components/Button/ButtonWithDropdown.js

@@ -9,30 +9,40 @@ class ButtonWithDropdown extends Component {
         const { dropdownItems } = this.props;
         return dropdownItems.map((item) => (
             <React.Fragment key={`dropdown-${item.type || 'item'}-${uniqueid('')}`}>
-                {item.separatorTop && <Dropdown.Separator />}
+                {item.separatorTop && <Dropdown.Separator testId={item.testId} />}
                 {item.type === 'confirm' && (
                     <Dropdown.ConfirmButtonItem
                         btnIcon={item.icon}
                         btnLabel={item.label}
                         confirmLabel={item.confirmLabel}
                         onConfirm={item.onConfirm}
+                        testId={item.testId}
                     />
                 )}
                 {item.type === 'button' && (
-                    <Dropdown.ButtonItem btnIcon={item.icon} btnLabel={item.label} onClick={item.onClick} />
+                    <Dropdown.ButtonItem
+                        btnIcon={item.icon}
+                        btnLabel={item.label}
+                        onClick={item.onClick}
+                        testId={item.testId}
+                    />
+                )}
+                {(item.type === 'item' || !item.type) && (
+                    <Dropdown.Item testId={item.testId}>{item.label}</Dropdown.Item>
                 )}
-                {(item.type === 'item' || !item.type) && <Dropdown.Item>{item.label}</Dropdown.Item>}
             </React.Fragment>
         ));
     };
 
     render() {
-        const { btnProps, dropdownProps, dropdownDirection, disabled } = this.props;
+        const { btnProps, dropdownProps, dropdownDirection, testId, disabled } = this.props;
         return (
             <div className="btn--multi-options">
-                <Button disabled={disabled} {...btnProps} />
-                <Dropdown disabled={disabled} {...dropdownProps}>
-                    <Dropdown.Menu direction={dropdownDirection}>{this.renderDropdown()}</Dropdown.Menu>
+                <Button disabled={disabled} {...btnProps} testId={`${testId}-button`} />
+                <Dropdown disabled={disabled} {...dropdownProps} testId={`${testId}-dropdown`}>
+                    <Dropdown.Menu direction={dropdownDirection} testId={`${testId}-menu`}>
+                        {this.renderDropdown()}
+                    </Dropdown.Menu>
                 </Dropdown>
             </div>
         );
@@ -40,6 +50,7 @@ class ButtonWithDropdown extends Component {
 }
 
 ButtonWithDropdown.propTypes = {
+    testId: PropTypes.string,
     btnProps: PropTypes.object,
     dropdownProps: PropTypes.object,
     dropdownDirection: PropTypes.string,
@@ -48,6 +59,7 @@ ButtonWithDropdown.propTypes = {
 };
 
 ButtonWithDropdown.defaultProps = {
+    testId: 'button-with-dropdown',
     btnProps: {},
     dropdownProps: {},
     dropdownItems: [],

package/src/components/Button/ButtonWithDropdown.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import 'resize-observer-polyfill/dist/ResizeObserver.global';
+
+import ButtonWithDropdown from './ButtonWithDropdown';
+
+it('renders a small Button', () => {
+    const args = {
+        btnProps: {
+            label: 'Button',
+        },
+        dropdownProps: {
+            btnFace: 'primary',
+        },
+        dropdownItems: [
+            {
+                label: 'dropdown item',
+                type: 'item',
+            },
+            {
+                label: 'dropdown confirm button',
+                confirmLabel: 'Are you sure?',
+                type: 'confirm',
+            },
+            {
+                label: 'dropdown button',
+                type: 'button',
+            },
+        ],
+        dropdownDirection: 'se',
+    };
+    const { getByTestId } = render(<ButtonWithDropdown {...args} />);
+    expect(getByTestId('button-with-dropdown-dropdown')).toBeInTheDocument();
+});

package/src/components/Card/Card.js

@@ -59,6 +59,7 @@ const productImgSm = {
     TRAFFIC: trafficImgSm,
     MERCHANTS: merchantImgSm,
 };
+
 class Header extends Component {
     render() {
         const { children, ...rest } = this.props;
@@ -118,6 +119,7 @@ class Card extends Component {
             onClick,
             useIcon,
             size,
+            testId,
             isNew,
             ...rest
         } = this.props;
@@ -154,6 +156,7 @@ class Card extends Component {
                 onClick={onClick}
                 onKeyDown={onClick}
                 tabIndex="0"
+                data-testid={testId}
             >
                 <div className={itemClass}>
                     {useIcon ? (
@@ -184,10 +187,12 @@ Card.defaultProps = {
     isClickable: false,
     noBorder: false,
     isNew: false,
+    testId: 'card',
 };
 
 Card.propTypes = {
     size: PropTypes.oneOf(['small', 'large', 'normal']),
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     useIcon: PropTypes.bool,
     className: PropTypes.string,

package/src/components/Card/Card.test.js

@@ -5,15 +5,15 @@ import '@testing-library/jest-dom/extend-expect';
 import Card from './Card';
 
 it('renders a Card component ', () => {
-    const { container } = render(
+    const { getByTestId } = render(
         <Card>
             <Card.Header>header</Card.Header>
             <Card.Body>body</Card.Body>
             <Card.Footer>footer</Card.Footer>
         </Card>
     );
-    expect(container.firstChild).toHaveClass('card');
-    expect(container.firstChild.firstChild).toHaveClass('card__image');
+    expect(getByTestId('card')).toHaveClass('card');
+    expect(getByTestId('card').firstChild).toHaveClass('card__image');
     expect(screen.getByText('header')).toHaveClass('card__header');
     expect(screen.getByText('body')).toHaveClass('card__body');
     expect(screen.getByText('footer')).toHaveClass('card__footer');

package/src/components/Card/SimpleCard.js

@@ -7,7 +7,7 @@ import { tr } from '../utils/locale';
 
 class SimpleCard extends Component {
     render() {
-        const { title, subtitle, className, children, isSelected, isActive, isDisabled, isFavorite, ...rest } =
+        const { title, subtitle, className, testId, children, isSelected, isActive, isDisabled, isFavorite, ...rest } =
             this.props;
         return (
             <div
@@ -18,14 +18,32 @@ class SimpleCard extends Component {
                     { 'simplecard--selected': isSelected },
                     className
                 )}
+                data-testid={testId}
                 {...rest}
             >
-                {title && <div className="simplecard__title">{title}</div>}
+                {title && (
+                    <div className="simplecard__title" data-testid={`${testId}-title`}>
+                        {title}
+                    </div>
+                )}
                 {isFavorite && (
-                    <Icon className="simplecard__favorite" title={tr('Favorite project')} icon="star-filled" />
+                    <Icon
+                        className="simplecard__favorite"
+                        title={tr('Favorite project')}
+                        icon="star-filled"
+                        data-testid={`${testId}-icon`}
+                    />
+                )}
+                {subtitle && (
+                    <div className="simplecard__subtitle" data-testid={`${testId}-subtitle`}>
+                        {subtitle}
+                    </div>
+                )}
+                {children && (
+                    <div className="simplecard__content" data-testid={`${testId}-content`}>
+                        {children}
+                    </div>
                 )}
-                {subtitle && <div className="simplecard__subtitle">{subtitle}</div>}
-                {children && <div className="simplecard__content">{children}</div>}
             </div>
         );
     }
@@ -35,6 +53,7 @@ SimpleCard.defaultProps = {
     title: '',
     subtitle: '',
     className: '',
+    testId: 'simple-card',
     children: null,
     isSelected: false,
     isActive: false,
@@ -50,6 +69,7 @@ SimpleCard.propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
     className: PropTypes.string,
+    testId: PropTypes.string,
     isFavorite: PropTypes.bool,
 };
 

package/src/components/Card/SimpleCard.test.js

@@ -5,12 +5,12 @@ import '@testing-library/jest-dom/extend-expect';
 import SimpleCard from './SimpleCard';
 
 it('renders a SimpleCard component ', () => {
-    const { container } = render(
+    const { getByTestId } = render(
         <SimpleCard title="title" subtitle="subtitle">
             Content
         </SimpleCard>
     );
-    expect(container.firstChild).toHaveClass('simplecard');
+    expect(getByTestId('simple-card')).toHaveClass('simplecard');
     expect(screen.getByText('title')).toHaveClass('simplecard__title');
     expect(screen.getByText('subtitle')).toHaveClass('simplecard__subtitle');
     expect(screen.getByText('Content')).toHaveClass('simplecard__content');

package/src/components/CopyClipboardButton/CopyClipboardButton.js

@@ -29,7 +29,7 @@ export default class CopyClipboardButton extends Component {
     };
 
     render() {
-        const { type, noLabel, label, copiedLabel, copiedIcon, icon, getText, ...rest } = this.props;
+        const { type, noLabel, label, copiedLabel, copiedIcon, icon, getText, testId, ...rest } = this.props;
         const { copied } = this.state;
         return (
             <Button
@@ -38,6 +38,7 @@ export default class CopyClipboardButton extends Component {
                 icon={copied ? copiedIcon : icon}
                 onClick={this.copy}
                 {...rest}
+                testId={testId}
             />
         );
     }
@@ -52,10 +53,12 @@ CopyClipboardButton.defaultProps = {
     icon: 'copy',
     text: null,
     getText: null,
+    testId: 'copy-clipboard-button',
 };
 
 CopyClipboardButton.propTypes = {
     text: PropTypes.string,
+    testId: PropTypes.string,
     getText: PropTypes.func,
     type: PropTypes.string,
     label: PropTypes.string,

package/src/components/CopyClipboardButton/CopyToClipboard.test.js

@@ -6,8 +6,8 @@ import '@testing-library/jest-dom/extend-expect';
 import CopyClipboardButton from './CopyClipboardButton';
 
 it('renders a CopyClipboardButton component ', () => {
-    const { container } = render(<CopyClipboardButton text="Text" />);
-    expect(container.firstChild).toHaveClass('btn');
+    const { getByTestId } = render(<CopyClipboardButton text="Text" />);
+    expect(getByTestId('copy-clipboard-button')).toHaveClass('btn');
 });
 
 it('copies the content', () => {

package/src/components/Demo/SearchDemo.js

@@ -11,6 +11,7 @@ import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import markerIconAlt from '../../images/marker-alt.png';
 import Script from '../utils/Script';
+import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 export default class SearchDemo extends Component {
     constructor(props) {

package/src/components/Dropdown/Dropdown.js

@@ -45,11 +45,11 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, ...rest } = this.props;
+        const { direction, children, closeCb, testId, ...rest } = this.props;
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
 
         return (
-            <ul role="menu" className={cl('dropdown__menu', direction)} {...rest}>
+            <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
                 {childrenWithProps}
             </ul>
         );
@@ -59,25 +59,36 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    testId: 'dropdown-menu',
 };
 
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
 };
 
 class DropdownSeparator extends Component {
     render() {
-        return <li className={cl('dropdown__separator')} />;
+        const { testId } = this.props;
+        return <li className={cl('dropdown__separator')} data-testid={testId} />;
     }
 }
 
+DropdownSeparator.defaultProps = {
+    testId: 'dropdown-separator',
+};
+
+DropdownSeparator.propTypes = {
+    testId: PropTypes.string,
+};
+
 class DropdownItem extends Component {
     render() {
-        const { children, closeCb, ...rest } = this.props;
+        const { children, closeCb, testId, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')} {...rest}>
+            <li className={cl('dropdown__item')} data-testid={testId} {...rest}>
                 {children}
             </li>
         );
@@ -86,11 +97,13 @@ class DropdownItem extends Component {
 
 DropdownItem.defaultProps = {
     closeCb: null,
+    testId: 'dropdown-item',
 };
 
 DropdownItem.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
 };
 
 class DropdownButtonItem extends Component {
@@ -125,6 +138,7 @@ DropdownButtonItem.defaultProps = {
     onClick: null,
     btnIcon: null,
     btnLabel: '',
+    testId: 'dropdown-button-item',
     isImportant: false,
     closeCb: null,
 };
@@ -133,6 +147,7 @@ DropdownButtonItem.propTypes = {
     onClick: PropTypes.func,
     btnIcon: PropTypes.string,
     btnLabel: PropTypes.string,
+    testId: PropTypes.string,
     isImportant: PropTypes.bool,
     closeCb: PropTypes.func,
 };
@@ -183,6 +198,7 @@ class DropdownConfirmButtonItem extends Component {
 }
 
 DropdownConfirmButtonItem.defaultProps = {
+    testId: 'dropdown-confirm-button-item',
     onConfirm: null,
     btnIcon: null,
     closeCb: null,
@@ -195,6 +211,7 @@ DropdownConfirmButtonItem.defaultProps = {
 DropdownConfirmButtonItem.propTypes = {
     onConfirm: PropTypes.func,
     btnIcon: PropTypes.string,
+    testId: PropTypes.string,
     confirmLabel: PropTypes.string,
     btnLabel: PropTypes.string,
     closeCb: PropTypes.func,
@@ -255,6 +272,7 @@ class Dropdown extends Component {
             btnFaceIconSize,
             closeCb,
             disableCloseOutside,
+            testId,
             ...rest
         } = this.props;
         const { open } = this.state;
@@ -275,6 +293,7 @@ class Dropdown extends Component {
                     size={btnSize}
                     iconSize={btnFaceIconSize}
                     label={label}
+                    testId={testId}
                 />
                 {childrenWithProps}
             </div>
@@ -295,6 +314,7 @@ Dropdown.defaultProps = {
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
+    testId: 'dropdown',
 };
 
 Dropdown.propTypes = {
@@ -304,6 +324,7 @@ Dropdown.propTypes = {
     disabled: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
     label: PropTypes.string,
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     btnFace: PropTypes.oneOf(['link-flex', 'primary', 'secondary', 'important', 'transparent', 'link']),

package/src/components/Dropdown/Dropdown.test.js

@@ -7,14 +7,14 @@ import 'resize-observer-polyfill/dist/ResizeObserver.global';
 import Dropdown from './Dropdown';
 
 it('renders a Dropdown component ', () => {
-    const { container } = render(
+    const { getByTestId } = render(
         <Dropdown label="My dropdown">
             <Dropdown.Menu>
                 <Dropdown.Item>Item 1</Dropdown.Item>
             </Dropdown.Menu>
         </Dropdown>
     );
-    expect(container.firstChild).toHaveClass('dropdown');
+    expect(getByTestId('dropdown').parentElement).toHaveClass('dropdown');
     const menu = screen.getByRole('menu');
     expect(menu).toHaveClass('dropdown__menu');
 });

package/src/components/DynamicTag/DynamicTag.js

@@ -50,7 +50,7 @@ export default class DynamicTag extends Component {
 
     renderInput = () => {
         const { inputValue, error } = this.state;
-        const { placeholder } = this.props;
+        const { placeholder, testId } = this.props;
 
         return (
             <>
@@ -61,17 +61,18 @@ export default class DynamicTag extends Component {
                     onBlur={this.handleInputConfirm}
                     onPressEnter={this.handleInputConfirm}
                     error={error}
+                    testId={`${testId}-input`}
                 />
-                <Button label={tr('Add')} onClick={this.handleInputConfirm} />
+                <Button label={tr('Add')} onClick={this.handleInputConfirm} testId={`${testId}-button`} />
             </>
         );
     };
 
     render() {
         const { tags } = this.state;
-        const { color } = this.props;
+        const { color, testId } = this.props;
         return (
-            <div className={cl('dynamic-tag')}>
+            <div className={cl('dynamic-tag')} data-testid={testId}>
                 <div className={cl('dynamic-tag__input')}>{this.renderInput()}</div>
                 <div className={cl('dynamic-tag__tags')}>
                     {tags.map((item) => (
@@ -83,6 +84,7 @@ export default class DynamicTag extends Component {
                             closeCb={() => {
                                 this.handleTagRemove(item);
                             }}
+                            testId={`${testId}-label`}
                         />
                     ))}
                 </div>
@@ -95,10 +97,12 @@ DynamicTag.defaultProps = {
     defaultTags: [],
     placeholder: '',
     color: '',
+    testId: 'dynamic-tag',
 };
 
 DynamicTag.propTypes = {
     defaultTags: PropTypes.array,
     placeholder: PropTypes.string,
     color: PropTypes.string,
+    testId: PropTypes.string,
 };

package/src/components/Flash/Flash.js

@@ -5,7 +5,7 @@ import Icon from '../Icon/Icon';
 
 export default class Flash extends Component {
     render() {
-        const { children, icon, inverse, fill, type, shadowed, ...rest } = this.props;
+        const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
         const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
         return (
             <div
@@ -17,6 +17,7 @@ export default class Flash extends Component {
                     { 'flash--fill': fill },
                     { 'flash--shadowed': shadowed && !inverse }
                 )}
+                data-testid={testId}
                 {...rest}
             >
                 {iconComponent}
@@ -32,6 +33,7 @@ Flash.defaultProps = {
     inverse: false,
     fill: false,
     shadowed: false,
+    testId: 'flash',
 };
 
 Flash.propTypes = {
@@ -41,4 +43,5 @@ Flash.propTypes = {
     inverse: PropTypes.bool,
     fill: PropTypes.bool,
     shadowed: PropTypes.bool,
+    testId: PropTypes.string,
 };