@woosmap/ui 2.42.0 → 2.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "2.42.0",
+  "version": "2.46.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/DistanceDemo.js

@@ -16,6 +16,7 @@ import WalkingImg from '../../images/walk.png';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -209,7 +210,7 @@ export default class DistanceDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestDistance();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/GeolocationDemo.js

@@ -6,12 +6,12 @@ import Demo from './SkeletonDemo';
 
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
-import markerIcon from '../../images/marker.png';
-import markerIconAlt from '../../images/marker-alt.png';
+import markerIcon from '../../images/marker-dot.svg';
+import markerGeolocationIcon from '../../images/marker-alt.png';
 import Script from '../utils/Script';
 import Input from '../Input/Input';
 
-import { WoosmapMapBoundingBox, woosmapBoundsFromViewport } from '../Map/drawOnMap';
+import { WoosmapMapBoundingBox, woosmapBoundsFromViewport, createWoosmapMap } from '../Map/drawOnMap';
 
 export default class GeolocationDemo extends Component {
     constructor(props) {
@@ -56,20 +56,17 @@ export default class GeolocationDemo extends Component {
     getRequestparams = () => ({
         key: Constants.geolocationWoosmapSearchKey,
         radius: 200000,
+        limit: 20,
     });
 
-    processMarker = (latLng, icon, forceMap = null) => {
+    processMarker = (latLng, icon, forceMap = null, scaledSize = { height: 24, width: 24 }) => {
         const { showStores } = this.state;
 
         let map;
         if (!forceMap) map = showStores ? this.map : null;
         else map = forceMap;
 
-        return new window.woosmap.map.Marker({
-            icon: { url: icon, scaledSize: { height: 46, width: 30 } },
-            position: latLng,
-            map,
-        });
+        return new window.woosmap.map.Marker({ icon: { url: icon, scaledSize }, position: latLng, map });
     };
 
     displayOnMap = () => {
@@ -93,8 +90,6 @@ export default class GeolocationDemo extends Component {
                 this.overlay = null;
             }
 
-            this.marker = this.processMarker(location, markerIconAlt, this.map);
-
             if (geolocation?.stores?.features) {
                 geolocation.stores.features.forEach((feature) => {
                     const [lng, lat] = feature.geometry.coordinates;
@@ -102,6 +97,8 @@ export default class GeolocationDemo extends Component {
                 });
             }
 
+            this.marker = this.processMarker(location, markerGeolocationIcon, this.map, { height: 46, width: 30 });
+
             const bounds = woosmapBoundsFromViewport(geolocation.viewport);
 
             this.overlay = new WoosmapMapBoundingBox(bounds, { top: 55, left: 30, bottom: 10, right: 30 });
@@ -182,7 +179,7 @@ export default class GeolocationDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestGeolocation();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -10,6 +10,7 @@ import { tr } from '../utils/locale';
 import Input from '../Input/Input';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
 
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
@@ -326,7 +327,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestAddress();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/LocalitiesDemo.js

@@ -13,7 +13,7 @@ import Constants from '../../Constants';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import Script from '../utils/Script';
-import { WoosmapMapBoundingBox } from '../Map/drawOnMap';
+import { WoosmapMapBoundingBox, createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -195,7 +195,7 @@ export default class LocalitiesDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestLocalities();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);

package/src/components/Demo/SearchDemo.js

@@ -11,6 +11,8 @@ import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import markerIconAlt from '../../images/marker-alt.png';
 import Script from '../utils/Script';
+import { createWoosmapMap } from '../Map/drawOnMap';
+import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
 export default class SearchDemo extends Component {
     constructor(props) {
@@ -188,7 +190,7 @@ export default class SearchDemo extends Component {
         if (this.timeoutMap) clearTimeout(this.timeoutMap);
 
         if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
-            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.map = createWoosmapMap(this.mapDivRef.current);
             this.requestSearch();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);