@woosmap/ui 3.166.0 → 3.168.0

package/package.json

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

package/src/components/Demo/DistanceDemo.js

@@ -49,14 +49,14 @@ export default class DistanceDemo extends Component {
         const defaultLang = languages.find((item) => lang.startsWith(item.value));
 
         this.defaultOrigin = {
-            public_id: 'amsterdam',
-            description: 'Amsterdam, Netherlands',
-            location: { lat: 52.37276, lng: 4.8936043 },
+            public_id: 'milano',
+            description: 'Milan, Milano, Italie',
+            location: { lat: 45.46419429317345, lng: 9.189634535335927 },
         };
         this.defaultDestination = {
-            public_id: 'milano',
-            description: 'Milano, Italia',
-            location: { lat: 45.4668, lng: 9.1905 },
+            public_id: 'linate',
+            description: 'Linate, Peschiera Borromeo, Italie',
+            location: { lat: 45.446776949835964, lng: 9.272510686783079 },
         };
 
         this.state = {
@@ -147,29 +147,27 @@ export default class DistanceDemo extends Component {
 
     requestDistance = () => {
         const instance = axios.create();
-        instance.interceptors.response.use((response) =>
-            response.data.status !== 'OK' ? Promise.reject(response) : response
-        );
+
+        const processSuccess = (routes) => {
+            if (this.mounted) this.setState({ routes, error: null }, () => this.displayOnMap());
+        };
+
+        const processError = (errorMessage) => {
+            const message = errorMessage || 'Unhandled error';
+
+            if (this.mounted) this.setState({ error: { message } });
+        };
+
         instance
             .get(this.requestUrl, { params: this.getRequestparams() })
             .then((response) => {
-                if (this.mounted) {
-                    this.setState(
-                        {
-                            routes: response.data.routes,
-                            error: null,
-                        },
-                        () => {
-                            this.displayOnMap();
-                        }
-                    );
-                }
+                const isOk = response?.data?.status === 'OK' && response?.data?.routes;
+
+                if (!isOk) processError(response?.data?.error_message);
+                else processSuccess(response.data.routes);
             })
             .catch((error) => {
-                const errorResult = error?.data?.error_message ?? 'Unhandled error';
-                if (this.mounted) {
-                    this.setState({ error: errorResult });
-                }
+                processError(error?.data?.error_message);
             });
     };
 
@@ -249,6 +247,7 @@ export default class DistanceDemo extends Component {
                         woosmapKey={Constants.woosmapKey}
                         defaultLocality={this.defaultOrigin}
                         language={language.value}
+                        types="locality|postal_code|airport"
                         callback={this.localitiesOnChangeCallBack('origin')}
                     />
                 </>
@@ -263,6 +262,7 @@ export default class DistanceDemo extends Component {
                         woosmapKey={Constants.woosmapKey}
                         defaultLocality={this.defaultDestination}
                         language={language.value}
+                        types="locality|postal_code|airport"
                         callback={this.localitiesOnChangeCallBack('destination')}
                     />
                 </>

package/src/components/Demo/DistanceDemo.test.js

@@ -1,9 +1,20 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import axios from 'axios';
+
 import DistanceDemo from './DistanceDemo';
 
+const API_ERROR_MESSAGE = 'Some handled error message';
+
+jest.mock('axios', () => {
+    const get = () => Promise.resolve({ data: { status: 'ERROR', error_message: API_ERROR_MESSAGE }, status: 200 });
+    return { get, create: () => ({ get }) };
+});
+
+beforeEach(() => {
+    jest.resetModules();
+});
+
 it('render distance demo', () => {
     const { container } = render(<DistanceDemo />);
     expect(container.firstChild).toHaveClass('demo');
@@ -45,23 +56,22 @@ it('test alternative route checkbox', () => {
     expect(screen.getByText('alternatives=true"')).toBeVisible();
 });
 
-it('catches 200 with error', async () => {
-    const backup = axios.create;
-    axios.create = () => ({
-        ...backup(),
-        get: () =>
-            Promise.resolve({
-                data: { status: 'ERROR', error_message: 'Some handled error message' },
-                status: 200,
-            }),
-    });
-    const rejectSpy = jest.spyOn(Promise, 'reject');
-    const ref = React.createRef();
-    render(<DistanceDemo ref={ref} />);
-
-    await waitFor(() => {
-        expect(rejectSpy).toHaveBeenCalled();
-    });
-    axios.create = backup;
-    rejectSpy.mockRestore();
+it('Response with statusCode === 200 and status !== "OK" should be processed as error', async () => {
+    // mocking woosmap
+    const backup = { ...(global?.woosmap || {}) };
+    function Map() {}
+
+    global.woosmap = { map: { config: { setApiKey: () => ({}) }, Map } };
+
+    // We only mount the component because axios.get() is called at componentDidMount().
+    // axios.get() is mocked and returns 200 with status !== 'OK' by default for this testsuite
+    render(<DistanceDemo />);
+
+    // wait for re-rendering
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    expect(screen.getByText(API_ERROR_MESSAGE, { exact: false })).toBeInTheDocument();
+
+    // set back woosmap backup
+    global.woosmap = backup;
 });

package/src/components/Popover/Popover.js

@@ -15,8 +15,9 @@ class Popover extends Component {
     };
 
     render() {
-        const { children, content, renderLayer, isOpen, layerProps, triggerProps, arrowProps } = this.props;
-
+        const { children, content, renderLayer, isOpen, layerProps, triggerProps, arrowProps, contentClassName } =
+            this.props;
+        const popOverContentClassname = contentClassName ? `popover__content ${contentClassName}` : 'popover__content';
         return (
             <>
                 <div className="popover__child" {...triggerProps}>
@@ -25,7 +26,11 @@ class Popover extends Component {
                 {renderLayer(
                     <AnimatePresence>
                         {isOpen && (
-                            <Animate data-testid="popover-content" className="popover__content" layerProps={layerProps}>
+                            <Animate
+                                data-testid="popover-content"
+                                className={popOverContentClassname}
+                                layerProps={layerProps}
+                            >
                                 {content}
                                 <Arrow
                                     borderColor="rgba(27, 31, 35, 0.15)"
@@ -51,7 +56,13 @@ Popover.propTypes = {
     layerProps: PropTypes.object.isRequired,
     triggerProps: PropTypes.object.isRequired,
     arrowProps: PropTypes.object.isRequired,
+    contentClassName: PropTypes.string,
+};
+
+Popover.defaultProps = {
+    contentClassName: undefined,
 };
+
 function withLayer(MyComponent) {
     function WrappedComponent(props) {
         const [isOpen, setOpen] = React.useState(false);