@woosmap/ui 4.229.0 → 4.230.0

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -27,28 +27,36 @@ it('render distance demo', () => {
 it('test transport button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('mode=driving&\\')).toBeVisible();
-    fireEvent.click(screen.getByAltText('Cycling'));
+    act(() => {
+        fireEvent.click(screen.getByAltText('Cycling'));
+    });
     expect(screen.getByText('mode=cycling&\\')).toBeVisible();
 });
 
 it('test metrics button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('units=metric&\\')).toBeVisible();
-    fireEvent.click(screen.getByLabelText('Imperial'));
+    act(() => {
+        fireEvent.click(screen.getByText('Imperial'));
+    });
     expect(screen.getByText('units=imperial&\\')).toBeVisible();
 });
 
 it('test method button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('method=distance&\\')).toBeVisible();
-    fireEvent.click(screen.getByLabelText('Fastest'));
+    act(() => {
+        fireEvent.click(screen.getByText('Fastest'));
+    });
     expect(screen.getByText('method=time&\\')).toBeVisible();
 });
 
 it('test language button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('language=en&\\')).toBeVisible();
-    fireEvent.click(screen.getByTitle('Italian'));
+    act(() => {
+        fireEvent.click(screen.getByTitle('Italian'));
+    });
     expect(screen.getByText('language=it&\\')).toBeVisible();
 });
 
@@ -56,7 +64,9 @@ it('test alternative route checkbox', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('alternatives=false"')).toBeVisible();
     const [checkbox] = screen.getByText('Alternative routes').parentElement.querySelectorAll('input');
-    fireEvent.click(checkbox);
+    act(() => {
+        fireEvent.click(checkbox);
+    });
     expect(screen.getByText('alternatives=true"')).toBeVisible();
 });
 

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

@@ -35,7 +35,7 @@ it('calls navigator.clipboard.writeText function when click on copy button if if
             id="skeleton-test"
         />,
     );
-    fireEvent.click(screen.getByLabelText('Copy'));
+    fireEvent.click(screen.getByText('Copy'));
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
         'curl "https://api.woosmap.com/localities/autocomplete/?input=paris"',
     );
@@ -45,7 +45,7 @@ it('calls navigator.clipboard.writeText function when click on copy button if if
 it('calls copy exec command when click on copy button if navigator.clipboard not supported', () => {
     render(<SkeletonDemo noheader id="skeleton-test" />);
     document.execCommand = jest.fn();
-    fireEvent.click(screen.getByLabelText('Copy'));
+    fireEvent.click(screen.getByText('Copy'));
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
 

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

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { act } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
-import { act } from 'react-dom/test-utils';
 import Dropdown from './Dropdown';
 
 it('renders a Dropdown component ', () => {

package/src/components/DynamicTag/DynamicTag.test.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen, getByRole, fireEvent } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
 
 import DynamicTag from './DynamicTag';

package/src/components/Input/Input.js

@@ -9,7 +9,7 @@ export default class Input extends Component {
         super(props);
         this.inputId = uniqueId();
         this.inputRef = React.createRef();
-        this.state = { showPassword: false, value: null };
+        this.state = { showPassword: false, value: '' };
     }
 
     componentDidMount() {
@@ -146,7 +146,7 @@ export default class Input extends Component {
                     onFocus,
                     onKeyDown: this.onKeyDown,
                     type: type === 'password' && showPassword ? 'text' : type,
-                    value: value !== undefined ? value : stateValue,
+                    value: value !== undefined ? value : stateValue || '',
                     size: length,
                     disabled,
                     onChange: this.onChange,
@@ -172,7 +172,7 @@ export default class Input extends Component {
                         <Icon
                             icon={showPassword ? 'eye-crossed-out' : 'eye'}
                             size={iconSize}
-                            className={{ showed: showPassword }}
+                            className={showPassword ? 'showed' : ''}
                         />
                     </span>
                 )}

package/src/components/Modal/Modal.test.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 
 import Modal from './Modal';
 

package/src/components/Panel/Panel.test.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
 
 import Panel from './Panel';

package/src/components/PasswordStrengthBar/PasswordStrengthBar.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -23,23 +23,33 @@ const barColors = [grey, red, orange, blue, green];
 describe('PasswordStrengthBar', () => {
     describe('Color changing / complexity', () => {
         it('renders all bars in grey when password is too short', async () => {
-            render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.tooShort} barColors={barColors} />);
+            });
         });
 
         it('renders the first bar in red and the others in grey when password is weak', async () => {
-            render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.weak} barColors={barColors} />);
+            });
         });
 
         it('renders the two first bars in orange and others in grey when password is okay', async () => {
-            render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.okay} barColors={barColors} />);
+            });
         });
 
         it('renders the three first bars in blue and the last in grey when password is good', async () => {
-            render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.good} barColors={barColors} />);
+            });
         });
 
         it('renders all bars in green when password is strong', async () => {
-            render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            act(() => {
+                render(<PasswordStrengthBar password={password.strong} barColors={barColors} />);
+            });
         });
     });
 });

package/src/components/Popover/Popover.js

@@ -65,11 +65,17 @@ Popover.defaultProps = {
 
 function withLayer(MyComponent) {
     function WrappedComponent(props) {
+        const {
+            forwardedRef,
+            container = null,
+            placement = 'bottom-center',
+            disableClickOutside = false,
+            ...rest
+        } = props;
         const [isOpen, setOpen] = React.useState(false);
         function close() {
             setOpen(false);
         }
-        const { forwardedRef, container, placement, disableClickOutside, ...rest } = props;
         const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
             isOpen,
             container,
@@ -95,17 +101,17 @@ function withLayer(MyComponent) {
             />
         );
     }
-    WrappedComponent.defaultProps = {
-        container: null,
-        placement: 'bottom-center',
-        disableClickOutside: false,
-    };
     WrappedComponent.propTypes = {
         forwardedRef: PropTypes.object.isRequired,
         container: PropTypes.string,
         placement: PropTypes.string,
         disableClickOutside: PropTypes.bool,
     };
+    WrappedComponent.defaultProps = {
+        container: null,
+        placement: 'bottom-center',
+        disableClickOutside: false,
+    };
     return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }
 

package/src/components/Popover/Popover.test.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { act } from 'react-dom/test-utils';
 
 import Button from '../Button/Button';
 import Popover from './Popover';
@@ -32,11 +31,13 @@ it('renders a Popover component ', () => {
 it('Button click should make it visible', () => {
     const ref = React.createRef();
     const testId = 'popover-content';
-    render(
-        <Popover content="My popover" ref={ref}>
-            <Button onClick={() => {}} label="my button" />
-        </Popover>,
-    );
+    act(() => {
+        render(
+            <Popover content="My popover" ref={ref}>
+                <Button onClick={() => {}} label="my button" />
+            </Popover>,
+        );
+    });
     try {
         screen.getByTestId(testId);
         expect('Popover displayed').toBeFalsy();

package/src/components/ServiceMessage/ServiceMessage.test.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { act } from 'react';
 import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import '@testing-library/jest-dom/extend-expect';
 import ServiceMessage from './ServiceMessage';
 

package/src/components/withFormValidation/withFormValidation.test.js

@@ -41,7 +41,7 @@ it('renders a withFormValidation component ', () => {
 
 it('validates min length', () => {
     let error = validationStrategy('minLength', { minLength: 6 }, 'short');
-    expect(error).toEqual('Should be at least 6 char long');
+    expect(error).toEqual('Should be at least 6 char long__plural');
     error = validationStrategy('minLength', { minLength: 6 }, 'longvalue');
     expect(error).toBeFalsy();
 });
@@ -50,7 +50,7 @@ it('validates max length', () => {
     let error = validationStrategy('maxLength', { maxLength: 6 }, 'short');
     expect(error).toBeFalsy();
     error = validationStrategy('maxLength', { maxLength: 6 }, 'tooolong');
-    expect(error).toEqual('Should be at most 6 char long');
+    expect(error).toEqual('Should be at most 6 char long__plural');
 });
 
 it('validates required', () => {