@woosmap/ui 2.39.0 → 2.43.0

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,
 };

package/src/components/Icon/Icon.js

@@ -19,10 +19,12 @@ import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
 import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
 import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
+import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Bank } from '../../icons/bank.svg';
 import { ReactComponent as Beaker } from '../../icons/beaker.svg';
 import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
+import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
@@ -54,6 +56,7 @@ import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
+import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Globe } from '../../icons/globe.svg';
 import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
@@ -75,17 +78,25 @@ import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Position } from '../../icons/position.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
 import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
+import { ReactComponent as Quote } from '../../icons/quote.svg';
 import { ReactComponent as Receipt } from '../../icons/receipt.svg';
+import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
 import { ReactComponent as Shield } from '../../icons/shield.svg';
+import { ReactComponent as Star } from '../../icons/star.svg';
+import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
+import { ReactComponent as Stores } from '../../icons/stores.svg';
+import { ReactComponent as Support } from '../../icons/support.svg';
+import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
 import { ReactComponent as Time } from '../../icons/time.svg';
 import { ReactComponent as Tool } from '../../icons/tool.svg';
@@ -95,18 +106,14 @@ import { ReactComponent as ViewList } from '../../icons/view-list.svg';
 import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
-import { ReactComponent as Localities } from '../../icons/localities.svg';
-import { ReactComponent as Traffic } from '../../icons/traffic.svg';
-import { ReactComponent as Map } from '../../icons/map.svg';
+import { ReactComponent as World } from '../../icons/world.svg';
+import { ReactComponent as Address } from '../../icons/address.svg';
 import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
-import { ReactComponent as Address } from '../../icons/address.svg';
-import { ReactComponent as Star } from '../../icons/star.svg';
-import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
-import { ReactComponent as Stores } from '../../icons/stores.svg';
-import { ReactComponent as Support } from '../../icons/support.svg';
-import { ReactComponent as Switch } from '../../icons/switch.svg';
+import { ReactComponent as Localities } from '../../icons/localities.svg';
+import { ReactComponent as Map } from '../../icons/map.svg';
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
+import { ReactComponent as Traffic } from '../../icons/traffic.svg';
 
 const Icons = {
     access: Access,
@@ -127,10 +134,12 @@ const Icons = {
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,
+    autocomplete: Autocomplete,
     bank: Bank,
     beaker: Beaker,
     bell: Bell,
     bookmark: Bookmark,
+    buildings: Buildings,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
@@ -163,6 +172,7 @@ const Icons = {
     export: Export,
     flag: Flag,
     globe: Globe,
+    github: Github,
     home: Home,
     'home-user': HomeUser,
     import: Import,
@@ -183,17 +193,25 @@ const Icons = {
     organizations: Organizations,
     phone: Phone,
     platform: Platform,
+    position: Position,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
     puzzle: Puzzle,
-    receipt: Receipt,
     question: Question,
+    quote: Quote,
+    receipt: Receipt,
+    'save-money': SaveMoney,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
     shield: Shield,
+    star: Star,
+    'star-filled': StarFilled,
+    stores: Stores,
+    support: Support,
+    switch: Switch,
     team: Team,
     time: Time,
     tool: Tool,
@@ -203,25 +221,29 @@ const Icons = {
     'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
-    localities: Localities,
-    traffic: Traffic,
-    maps: Map,
+    world: World,
+    address: Address,
     distance: Distance,
     geolocation: Geolocation,
-    address: Address,
-    star: Star,
-    'star-filled': StarFilled,
-    stores: Stores,
-    support: Support,
-    switch: Switch,
+    localities: Localities,
+    maps: Map,
     merchant: Merchant,
+    traffic: Traffic,
 };
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, title } = this.props;
+        const { icon, size, className, title, testId } = this.props;
         const IconComponent = Icons[icon];
-        return <IconComponent className={cl('icon', className)} width={size} height={size} title={title} />;
+        return (
+            <IconComponent
+                className={cl('icon', className)}
+                data-testid={testId}
+                width={size}
+                height={size}
+                title={title}
+            />
+        );
     }
 }
 
@@ -229,6 +251,7 @@ Icon.defaultProps = {
     size: 24,
     className: null,
     title: null,
+    testId: 'icon',
 };
 
 Icon.propTypes = {
@@ -236,6 +259,7 @@ Icon.propTypes = {
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
     title: PropTypes.string,
+    testId: PropTypes.string,
 };
 export default Object.assign(Icon, {
     Icons,

package/src/components/Icon/Icon.test.js

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom/extend-expect';
 import Icon from './Icon';
 
 it('renders an icon component', () => {
-    const { container } = render(<Icon icon="home" size={64} />);
-    expect(container.firstChild).toHaveClass('icon');
-    expect(container.firstChild).toHaveAttribute('width', '64');
-    expect(container.firstChild).toHaveTextContent('home');
+    const { getByTestId } = render(<Icon icon="home" size={64} />);
+    expect(getByTestId('icon')).toHaveClass('icon');
+    expect(getByTestId('icon')).toHaveAttribute('width', '64');
+    expect(getByTestId('icon')).toHaveTextContent('home');
 });
 /*
 it('renders all icon components', () => {

package/src/components/InfoMessage/InfoMessage.js

@@ -10,7 +10,7 @@ export default class InfoMessage extends Component {
     }
 
     render() {
-        const { modalProps, actionLabel, children, ...rest } = this.props;
+        const { modalProps, actionLabel, children, testId, ...rest } = this.props;
         return (
             <>
                 <Button
@@ -19,8 +19,9 @@ export default class InfoMessage extends Component {
                     type="link-flex-info"
                     {...rest}
                     onClick={() => this.modalRef.current.open()}
+                    testId={`${testId}-button`}
                 />
-                <Modal ref={this.modalRef} footer={false} {...modalProps}>
+                <Modal ref={this.modalRef} footer={false} testId={`${testId}-modal`} {...modalProps}>
                     {children}
                 </Modal>
             </>
@@ -30,8 +31,10 @@ export default class InfoMessage extends Component {
 InfoMessage.defaultProps = {
     actionLabel: '',
     modalProps: {},
+    testId: 'info-message',
 };
 InfoMessage.propTypes = {
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     actionLabel: PropTypes.string,
     modalProps: PropTypes.object,

package/src/components/InfoMessage/InfoMessage.test.js

@@ -14,12 +14,12 @@ it('renders a InfoMessage component ', () => {
 it('opens a modal with the content when clicking the button ', () => {
     const { container } = render(<InfoMessage actionLabel="action">Content</InfoMessage>);
     try {
-        screen.getByTestId('modal');
+        screen.getByTestId('info-message-modal');
         expect('Modal displayed').toBeFalsy();
     } catch (e) {
         // nothink
     }
     userEvent.click(container.firstChild);
-    const modal = screen.getByTestId('modal');
+    const modal = screen.getByTestId('info-message-modal');
     expect(modal).toHaveClass('modal');
 });

package/src/components/Input/Input.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Input from './Input';
+
+it('renders an input component ', () => {
+    const { container } = render(<Input>input</Input>);
+    expect(container.firstChild).toHaveClass('input');
+});
+
+it('should call func if Enter key is pressed', () => {
+    const fakeFunc = jest.fn();
+    const { container } = render(<Input onPressEnter={fakeFunc}>input</Input>);
+    const [input] = container.querySelectorAll('input');
+    fireEvent.keyDown(input, { keyCode: 13 });
+    expect(fakeFunc).toHaveBeenCalled();
+});
+
+it('should not accept input if disabled', () => {
+    const { container } = render(<Input disabled>input</Input>);
+    expect(container.firstChild).toHaveClass('input--disabled');
+    const [input] = container.querySelectorAll('input');
+    fireEvent.click(input);
+    expect(input).not.toHaveFocus();
+});

package/src/components/Label/Label.js

@@ -18,6 +18,7 @@ export default class Label extends Component {
             isPill,
             noWrap,
             plan,
+            testId,
             ...rest
         } = this.props;
         const classes = cl(
@@ -33,9 +34,21 @@ export default class Label extends Component {
             className
         );
         return (
-            <span className={classes} {...rest}>
-                {label && <span className="label__name">{label}</span>}
-                {closable && <Button type="link-flex" iconSize={12} icon="close-thick" onClick={closeCb} />}
+            <span className={classes} data-testid={testId} {...rest}>
+                {label && (
+                    <span className="label__name" data-testid={`${testId}-label`}>
+                        {label}
+                    </span>
+                )}
+                {closable && (
+                    <Button
+                        type="link-flex"
+                        iconSize={12}
+                        icon="close-thick"
+                        onClick={closeCb}
+                        testId={`${testId}-button`}
+                    />
+                )}
             </span>
         );
     }
@@ -54,10 +67,12 @@ Label.defaultProps = {
     isPill: null,
     noWrap: null,
     plan: undefined,
+    testId: 'label',
 };
 
 Label.propTypes = {
     label: PropTypes.string,
+    testId: PropTypes.string,
     color: PropTypes.oneOf(['bleu', 'mauve', 'green', 'grey', 'orange', 'red', 'white', undefined, '']),
     className: PropTypes.string,
     product: PropTypes.oneOf([

package/src/components/Label/Label.styl

@@ -77,7 +77,7 @@
 	&--merchants
 		background-color $merchant
 	&--TRAFFIC
-	&--merchant
+	&--traffic
 		background-color $traffic
 	&--free
 		background-color $free

package/src/components/Modal/ConfirmationModal.js

@@ -24,7 +24,7 @@ export default class ConfirmationModal extends Component {
     };
 
     render() {
-        const { text, title, defaultIsOpen } = this.props;
+        const { text, title, defaultIsOpen, testId } = this.props;
         return (
             <Modal
                 ref={this.modalRef}
@@ -32,6 +32,7 @@ export default class ConfirmationModal extends Component {
                 title={title || tr('Beware...')}
                 validateBtnProps={{ type: 'important' }}
                 validateCb={this.confirm}
+                testId={testId}
             >
                 <div>{text}</div>
             </Modal>
@@ -42,6 +43,7 @@ export default class ConfirmationModal extends Component {
 ConfirmationModal.defaultProps = {
     title: '',
     defaultIsOpen: false,
+    testId: 'confirmation-modal',
 };
 
 ConfirmationModal.propTypes = {
@@ -49,4 +51,5 @@ ConfirmationModal.propTypes = {
     text: PropTypes.string.isRequired,
     title: PropTypes.string,
     confirmCb: PropTypes.func.isRequired,
+    testId: PropTypes.string,
 };

package/src/components/Modal/Modal.js

@@ -51,7 +51,7 @@ class Modal extends Component {
     };
 
     renderFooter = () => {
-        const { footer, labelValidate, errorLabel, validateCb, validateBtnProps, mainButtonType } = this.props;
+        const { footer, labelValidate, errorLabel, validateCb, validateBtnProps, mainButtonType, testId } = this.props;
         const { isLoading } = this.state;
 
         if (footer === false) {
@@ -63,11 +63,16 @@ class Modal extends Component {
                     <div className="modal__footer__error">{errorLabel}</div>
                     <>
                         {validateCb && (
-                            <Button data-testid="cancel" label={tr('Cancel')} type="transparent" onClick={this.close} />
+                            <Button
+                                testId={`${testId}-cancel-button`}
+                                label={tr('Cancel')}
+                                type="transparent"
+                                onClick={this.close}
+                            />
                         )}
                         <Button
                             type={mainButtonType}
-                            data-testid="validate"
+                            testId={`${testId}-validate-button`}
                             label={labelValidate || tr('Validate')}
                             onClick={this.validate}
                             isLoading={isLoading}
@@ -83,7 +88,7 @@ class Modal extends Component {
     render() {
         const { open } = this.state;
 
-        const { title, children, className, isFull, header, disableCloseOutside } = this.props;
+        const { title, children, className, isFull, header, disableCloseOutside, testId } = this.props;
         const tit = open && title;
         return ReactDOM.createPortal(
             <AnimatePresence>
@@ -92,7 +97,7 @@ class Modal extends Component {
                         className={cl('modal', className, {
                             'modal--full': isFull,
                         })}
-                        data-testid="modal"
+                        data-testid={testId}
                     >
                         <Animate className="modal__wrapper">
                             <div ref={this.modalRef} className="modal__content">
@@ -100,7 +105,7 @@ class Modal extends Component {
                                     {header || <h1 className="title">{tit}</h1>}
                                     {!disableCloseOutside && (
                                         <Button
-                                            data-testid="close"
+                                            testId={`${testId}-close-button`}
                                             className="modal__close"
                                             icon="close"
                                             type="link-flex"
@@ -135,6 +140,7 @@ Modal.defaultProps = {
     defaultIsOpen: false,
     validateBtnProps: {},
     mainButtonType: 'primary',
+    testId: 'modal',
 };
 
 Modal.propTypes = {
@@ -153,6 +159,7 @@ Modal.propTypes = {
     labelValidate: PropTypes.string,
     validateBtnProps: PropTypes.object,
     mainButtonType: PropTypes.string,
+    testId: PropTypes.string,
 };
 
 export default withClickOutside(Modal, '.ignore-click-outside-modal');

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

@@ -26,7 +26,7 @@ it('is hidden after clicking close', () => {
     const modal = screen.getByTestId('modal');
     expect(modal).toHaveClass('modal');
 
-    const close = screen.getByTestId('close');
+    const close = screen.getByTestId('modal-close-button');
     userEvent.click(close);
     try {
         screen.getByTestId('modal');
@@ -46,7 +46,7 @@ it('is hidden after clicking cancel', () => {
     act(() => {
         modalRef.current.open();
     });
-    const cancel = screen.getByTestId('cancel');
+    const cancel = screen.getByTestId('modal-cancel-button');
     userEvent.click(cancel);
     try {
         screen.getByTestId('modal');
@@ -68,7 +68,7 @@ it('is hidden after clicking cancel', () => {
         modalRef.current.open();
     });
     expect(validateCb.mock.calls.length).toBe(0);
-    const validate = screen.getByTestId('validate');
+    const validate = screen.getByTestId('modal-validate-button');
     userEvent.click(validate);
     expect(validateCb.mock.calls.length).toBe(1);
 });

package/src/components/Panel/Panel.js

@@ -50,13 +50,13 @@ class Panel extends Component {
 
     render() {
         const { open } = this.state;
-        const { children, position, header, disableCloseOutside, ...rest } = this.props;
+        const { children, position, header, disableCloseOutside, testId, ...rest } = this.props;
         return (
             <AnimatePresence>
                 {open && (
                     <motion.div
                         ref={this.clickOutsideRef}
-                        data-testid="panel"
+                        data-testid={testId}
                         className={cl('panel', `panel--${position}`)}
                         initial={{ right: -300 }}
                         animate={{ right: 0 }}
@@ -76,7 +76,7 @@ class Panel extends Component {
                                     icon="close"
                                     type="link-flex"
                                     onClick={this.close}
-                                    data-testid="close"
+                                    testId={`${testId}-close-button`}
                                 />
                             </div>
                         </div>
@@ -94,10 +94,12 @@ Panel.defaultProps = {
     closeCb: null,
     header: null,
     disableCloseOutside: false,
+    testId: 'panel',
 };
 
 Panel.propTypes = {
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
     defaultIsOpen: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
     children: PropTypes.node.isRequired,

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

@@ -26,7 +26,7 @@ it('is hidden after clicking close', () => {
     const panel = screen.getByTestId('panel');
     expect(panel).toHaveClass('panel');
 
-    const close = screen.getByTestId('close');
+    const close = screen.getByTestId('panel-close-button');
     userEvent.click(close);
     try {
         screen.getByTestId('panel');
@@ -34,4 +34,4 @@ it('is hidden after clicking close', () => {
     } catch (e) {
         // nothink
     }
-});
+});

package/src/components/Popover/ConfirmationPopover.js

@@ -25,13 +25,13 @@ export default class ConfirmationPopover extends Component {
     };
 
     renderContent = () => {
-        const { text } = this.props;
+        const { text, testId } = this.props;
         return (
             <div className="popover__content-box">
                 <div className="popover__message">{text}</div>
                 <div className="popover__footer ignore-click-outside">
-                    <Button label={tr('Cancel')} type="link" onClick={this.close} />
-                    <Button label={tr('Confirm')} onClick={this.confirm} />
+                    <Button label={tr('Cancel')} testId={`${testId}-cancel-button`} type="link" onClick={this.close} />
+                    <Button label={tr('Confirm')} testId={`${testId}-confirm-button`} onClick={this.confirm} />
                 </div>
             </div>
         );
@@ -48,12 +48,14 @@ export default class ConfirmationPopover extends Component {
 }
 
 ConfirmationPopover.defaultProps = {
+    testId: 'confirm-popover',
     container: null,
     placement: 'bottom-center',
 };
 
 ConfirmationPopover.propTypes = {
     text: PropTypes.string.isRequired,
+    testId: PropTypes.string,
     placement: PropTypes.string,
     children: PropTypes.node.isRequired,
     container: PropTypes.string,

package/src/components/ScrollBar/ScrollBar.js

@@ -110,12 +110,13 @@ export default class ScrollBar extends Component {
             component,
             onSync,
             children,
+            testId,
             ...rest
         } = this.props;
         const Comp = component;
 
         return (
-            <Comp className={className} style={style} ref={this.containerRef} {...rest}>
+            <Comp className={className} style={style} ref={this.containerRef} data-testid={testId} {...rest}>
                 {children}
             </Comp>
         );
@@ -123,6 +124,7 @@ export default class ScrollBar extends Component {
 }
 
 ScrollBar.defaultProps = {
+    testId: 'scrollbar',
     className: '',
     style: {},
     options: undefined,
@@ -142,6 +144,7 @@ ScrollBar.defaultProps = {
 
 ScrollBar.propTypes = {
     component: PropTypes.string,
+    testId: PropTypes.string,
     style: PropTypes.object,
     options: PropTypes.object,
     className: PropTypes.string,

package/src/components/ScrollBar/ScrollBar.test.js

@@ -5,6 +5,6 @@ import '@testing-library/jest-dom/extend-expect';
 import ScrollBar from './ScrollBar';
 
 it('renders a ScrollBar component ', () => {
-    const { container } = render(<ScrollBar>content</ScrollBar>);
-    expect(container.firstChild).toHaveClass('scrollbar-container');
+    const { getByTestId } = render(<ScrollBar>content</ScrollBar>);
+    expect(getByTestId('scrollbar')).toHaveClass('scrollbar-container');
 });

package/src/components/ServiceMessage/ServiceMessage.js

@@ -18,14 +18,16 @@ export default class ServiceMessage extends Component {
     };
 
     render() {
-        const { type, text, ...rest } = this.props;
+        const { type, text, testId, ...rest } = this.props;
         const { open } = this.state;
         const classes = cl('service-message', type ? `service-message--${type}` : null);
         return (
             open && (
-                <div data-testid="servicemessage" className={classes} {...rest}>
-                    <div className="service-message__text">{text}</div>
-                    <Button icon="close" type="link-flex" onClick={this.close} />
+                <div data-testid={testId} className={classes} {...rest}>
+                    <div className="service-message__text" data-testid={`${testId}-text`}>
+                        {text}
+                    </div>
+                    <Button icon="close" type="link-flex" onClick={this.close} testId={`${testId}-close-button`} />
                 </div>
             )
         );
@@ -35,9 +37,11 @@ export default class ServiceMessage extends Component {
 ServiceMessage.defaultProps = {
     type: 'error',
     text: '',
+    testId: 'service-message',
 };
 
 ServiceMessage.propTypes = {
     type: PropTypes.oneOf([undefined, 'success', 'error', 'warning', 'info']),
     text: PropTypes.string,
+    testId: PropTypes.string,
 };

package/src/components/SnackBar/SnackBar.test.js

@@ -14,11 +14,11 @@ class SomeChildComponent extends React.Component {
         return (
             <div>
                 <Button
-                    data-testid="open"
+                    testId="open"
                     label="Open"
                     onClick={() => openSnackBar('This is the content of the Snackbar.')}
                 />
-                <Button data-testid="close" label="Close" onClick={closeSnackBar} />
+                <Button testId="close" label="Close" onClick={closeSnackBar} />
             </div>
         );
     }