@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

package/components/Form/Builder/stylePresets.js

@@ -1,8 +1,4 @@
-import { themeConfig } from '@shopgate/engage';
 import { responsiveMediaQuery } from '@shopgate/engage/styles';
-const {
-  colors
-} = themeConfig;
 export const TWO_COLUMN_LAYOUT = {
   [responsiveMediaQuery('>=md', {
     webOnly: false
@@ -38,9 +34,8 @@ export const getOutlinedFormFields = theme => ({
       position: 'relative',
       textOverflow: 'unset',
       whiteSpace: 'unset',
-      lineHeight: '15px',
       bottom: 'unset',
-      padding: '8px 8px 8px 16px'
+      padding: '6px 8px 6px 16px'
     }
   },
   ' .formBuilderField': {
@@ -57,34 +52,34 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker': {
     paddingBottom: 8,
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     padding: 0,
     marginBottom: 32,
     borderTopLeftRadius: 4,
     borderTopRightRadius: 4,
-    borderBottom: `1px solid ${colors.shade12}`
+    borderBottom: `1px solid ${theme.components.border.medium}`
   },
   ' .phonePickerError': {
     borderBottom: `2px solid ${theme.palette.error.main}`
   },
   ' .phonePickerFocused:not(.phonePickerError)': {
-    borderBottom: '2px solid var(--color-primary)'
+    borderBottom: `2px solid ${theme.palette.primary.main}`
   },
   ' .formElement:not(.radioGroup) label': {
     paddingLeft: 24,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     transform: 'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'
   },
   ' .textField label': {
     paddingLeft: 17,
-    color: 'var(--color-text-low-emphasis)',
+    color: theme.palette.text.secondary,
     '&.floating': {
       transform: 'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'
     }
   },
   ' .formElement:not(.radioGroup) select, .formElement .info-field': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .formElement:not(.radioGroup):not(.checkbox) svg': {
     marginTop: 8,
@@ -92,7 +87,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .formElement:not(.radioGroup) .placeholder': {
     paddingLeft: 20,
-    color: 'var(--color-text-low-emphasis)'
+    color: theme.palette.text.secondary
   },
   ' .formElement.disabled, .textField.disabled': {
     ' input, select, svg': {
@@ -104,7 +99,7 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .textField input': {
     paddingLeft: 16,
-    color: 'var(--color-text-high-emphasis)'
+    color: theme.palette.text.primary
   },
   ' .underline': {
     marginBottom: 0,
@@ -133,12 +128,12 @@ export const getOutlinedFormFields = theme => ({
   },
   ' .phonePicker .PhoneInputInput': {
     borderBottom: 'none',
-    color: 'var(--color-text-high-emphasis)',
+    color: theme.palette.text.primary,
     '&:focus': {
       borderBottom: 'none'
     },
     '::placeholder': {
-      color: 'var(--color-text-low-emphasis)'
+      color: theme.palette.text.secondary
     }
   },
   ' .phonePicker .errorText': {
@@ -154,6 +149,6 @@ export const getOutlinedFormFields = theme => ({
     marginBottom: 8
   },
   ' .placeholder': {
-    color: colors.shade12
+    color: theme.palette.grey.medium
   }
 });

package/components/Logo/connector.js

@@ -1,5 +1,7 @@
 import { connect } from 'react-redux';
-import { hasWebBridge, makeGetShopSettingByKey, SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/core';
+import { hasWebBridge } from '@shopgate/engage/core';
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_SHOW_SHOP_LOGO_IN_APP, SHOP_SETTING_SHOW_SHOP_LOGO_IN_WEB } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/components/Logo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QA2BY,GAAG;;;;;;;;;;;;;;;;;;;sBA1BO,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Logo/index.jsx"],"names":[],"mappings":";;;;;QAyBY,GAAG;;;;;;;;;;;;;;;;;;;sBAxBO,YAAY"}

package/components/Logo/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import noop from 'lodash/noop';
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     alignItems: 'center',
@@ -16,8 +13,8 @@ const useStyles = makeStyles()(theme => ({
   },
   image: {
     margin: '0 auto',
-    maxHeight: variables.navigator.height,
-    maxWidth: `calc(var(--page-content-width) - ${variables.navigator.height * 3 + theme.spacing(4)}px)`,
+    maxHeight: theme.components.navigator.height,
+    maxWidth: `calc(var(--page-content-width) - (${theme.components.navigator.height} * 3) - ${theme.spacing(4)}px)`,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'

package/components/Menu/components/Item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBA/EG,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Menu/components/Item/index.jsx"],"names":[],"mappings":";AAyBA;;;;GAIG;AACH,wDAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CA+BvB;;;;;;;;;;QAUY,oCAAQ;;QACV,kCAAQ;;;;sBArEG,YAAY"}

package/components/Menu/components/Item/index.js

@@ -2,22 +2,17 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import compose from 'lodash/fp/compose';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
-import Color from 'color';
-import { makeStyles, getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  background
-}) => ({
+const useStyles = makeStyles()(theme => ({
   item: {
     position: 'relative',
     whiteSpace: 'nowrap',
-    padding: theme.spacing(1.75, 2.75),
-    lineHeight: 1,
+    padding: theme.spacing(1.3, 2.75),
     zIndex: 1,
     cursor: 'pointer',
     ':hover': {
-      background
+      background: theme.alpha(theme.palette.primary.main, 0.04)
     }
   }
 }));
@@ -38,16 +33,9 @@ const Item = ({
   closeMenu,
   onClick
 }) => {
-  let background = themeConfig.colors.shade8;
-  const customPropColor = getCSSCustomProp('--color-primary');
-  if (customPropColor) {
-    background = Color(customPropColor).alpha(0.04).toString();
-  }
   const {
     classes
-  } = useStyles({
-    background
-  });
+  } = useStyles();
   const handleClick = compose(onClick, () => setTimeout(closeMenu, CLOSE_DELAY));
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {

package/components/Menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AAgCA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAQ;;;;iBAzFF,mBAAmB;sBANd,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Menu/index.jsx"],"names":[],"mappings":";AA+BA;;;;GAIG;AACH,kEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAgDvB;;;;;;;;;;;;;;;;QAeU,kCAAS;;;;iBAzFH,mBAAmB;sBALd,YAAY"}

package/components/Menu/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ConnectedReactPortal } from '@shopgate/engage/components';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Position from "./components/Position";
 import Item from "./components/Item";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,9 +21,9 @@ const useStyles = makeStyles()(theme => ({
     left: 0,
     padding: theme.spacing(1, 0),
     minWidth: 130,
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 2,
-    boxShadow: themeConfig.shadows.contextMenu
+    boxShadow: '0 2px 6px rgba(0, 0, 0, .4)'
   }
 }));
 

package/components/MessageBar/MessageBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA8IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlJD,YAAY;uBADX,OAAO"}
+{"version":3,"file":"MessageBar.d.ts","sourceRoot":"","sources":["../../../components/MessageBar/MessageBar.jsx"],"names":[],"mappings":";mDA2IW,MAAM,GAKL,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/ID,YAAY;uBADX,OAAO"}

package/components/MessageBar/MessageBar.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Color from 'color';
-import { makeStyles, responsiveMediaQuery, getCSSCustomProp } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { i18n, errorBehavior } from '@shopgate/engage/core/helpers';
 import StopIcon from '@shopgate/pwa-ui-shared/icons/StopIcon';
 import InfoIcon from '@shopgate/pwa-ui-shared/icons/InfoIcon';
@@ -13,22 +12,18 @@ const iconMapping = {
   warning: WarningIcon,
   error: StopIcon
 };
-
-/**
- * @param {string} sourceColor Source color.
- * @param {string} [textColor] Optional text color.
- * @returns {{ background: string, color: string, borderColor: string }}
- */
-const getMessageColors = (sourceColor, textColor) => ({
-  background: Color(sourceColor).fade(0.9).toString(),
-  color: textColor || 'var(--color-text-high-emphasis)',
-  borderColor: `${sourceColor}!important`
-});
-const useStyles = makeStyles()((theme, {
-  secondaryColor
-}) => {
+const useStyles = makeStyles()(theme => {
+  /**
+   * @param {string} sourceColor Source color.
+   * @param {string} [textColor] Optional text color.
+   * @returns {{ background: string, color: string, borderColor: string }}
+   */
+  const getMessageColors = (sourceColor, textColor) => ({
+    background: theme.alpha(sourceColor, 0.1),
+    color: textColor || theme.palette.text.primary,
+    borderColor: `${sourceColor}!important`
+  });
   const containerBase = {
-    background: themeColors.background,
     display: 'flex',
     flexDirection: 'column',
     flexShrink: 0,
@@ -36,7 +31,7 @@ const useStyles = makeStyles()((theme, {
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
-      fontWeight: 'normal',
+      fontWeight: theme.typography.fontWeightRegular,
       border: 'none',
       borderRadius: 'inherit',
       margin: theme.spacing(2),
@@ -46,14 +41,13 @@ const useStyles = makeStyles()((theme, {
   };
   const messageBase = {
     padding: theme.spacing(2, 2),
-    fontSize: '0.875rem',
     lineHeight: 1.3,
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     ':not(:last-child)': {
       marginBottom: theme.spacing(0.5)
     },
     ' > svg': {
-      fontSize: '1.5rem !important'
+      fontSize: `${theme.components.icon.medium} !important`
     }
   };
   return {
@@ -69,17 +63,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     info: {
       ...messageBase,
-      background: 'var(--color-secondary)',
-      color: 'var(--color-secondary-contrast)',
+      background: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(secondaryColor),
+        ...getMessageColors(theme.palette.secondary.main),
         ' > svg': {
-          color: 'var(--color-secondary)'
+          color: theme.palette.secondary.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -90,17 +84,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     error: {
       ...messageBase,
-      background: themeColors.error,
-      color: themeColors.light,
+      background: theme.palette.error.main,
+      color: theme.palette.error.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(themeColors.error),
+        ...getMessageColors(theme.palette.error.main),
         ' > svg': {
-          color: themeColors.error
+          color: theme.palette.error.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -111,17 +105,17 @@ const useStyles = makeStyles()((theme, {
     // eslint-disable-next-line tss-unused-classes/unused-classes
     warning: {
       ...messageBase,
-      background: themeColors.warning,
-      color: themeColors.light,
+      background: theme.palette.warning.main,
+      color: theme.palette.warning.contrastText,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {
-        ...getMessageColors(themeColors.warning),
+        ...getMessageColors(theme.palette.warning.main),
         ' > svg': {
-          color: themeColors.warning
+          color: theme.palette.warning.main
         },
         padding: theme.spacing(1.5, 2),
-        fontWeight: 'normal',
+        fontWeight: theme.typography.fontWeightRegular,
         border: '1px solid',
         borderRadius: 4,
         ':not(:last-child)': {
@@ -160,13 +154,10 @@ const MessageBar = ({
   raised,
   showIcons
 }) => {
-  const secondaryColor = getCSSCustomProp('--color-secondary');
   const {
     classes,
     cx
-  } = useStyles({
-    secondaryColor
-  });
+  } = useStyles();
   const containerClass = React.useMemo(() => {
     if (raised) {
       return cx(classes.containerRaised, classNames.containerRaised, 'ui-shared__message-bar');
@@ -200,7 +191,9 @@ const MessageBar = ({
         }), /*#__PURE__*/_jsx("span", {
           className: "sr-only",
           children: `${i18n.text(`cart.message_type_${type}`)}: ${messageOutput}`
-        }), /*#__PURE__*/_jsx("span", {
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
           "aria-hidden": true,
           className: Icon ? classes.messageToIcon : null,
           children: messageOutput

package/components/NavigationHandler/index.d.ts

@@ -1,15 +1,15 @@
 declare const _default: import("react-redux").ConnectedComponent<typeof NavigationHandler, {
+    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
-    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
     store?: import("redux").Store | undefined;
 } | {
+    children: NonNullable<PropTypes.ReactNodeLike>;
     pop?: ((...args: any[]) => any) | null | undefined;
     push?: ((...args: any[]) => any) | null | undefined;
-    children: NonNullable<PropTypes.ReactNodeLike>;
     reset?: ((...args: any[]) => any) | null | undefined;
     replace?: ((...args: any[]) => any) | null | undefined;
     store?: import("redux").Store | undefined;

package/components/Picker/components/Button/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     display: 'block',
     width: '100%',
@@ -14,9 +14,9 @@ const useStyles = makeStyles()({
   },
   value: {
     display: 'block',
-    fontWeight: 'bold'
+    fontWeight: theme.typography.fontWeightBold
   }
-});
+}));
 
 /**
  * The default button for the Picker component.

package/components/Picker/components/List/index.js

@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     display: 'block',
     width: '100%',
@@ -15,10 +15,10 @@ const useStyles = makeStyles()({
   },
   active: {
     button: {
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     }
   }
-});
+}));
 
 /**
  * The default button for the Picker component.

package/components/Picker/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Picker/components/Modal/index.jsx"],"names":[],"mappings":";AAkEA;;;;GAIG;AACH,4DAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CA+C5B;;;;;;;;sBAjHqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/Picker/components/Modal/index.jsx"],"names":[],"mappings":";AAiEA;;;;GAIG;AACH,4DAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CA+C5B;;;;;;;;sBAhHqB,YAAY"}

package/components/Picker/components/Modal/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, keyframes } from '@shopgate/engage/styles';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FADE_DURATION = 150;
 const SLIDE_DURATION = 150;
@@ -39,7 +38,7 @@ const fadeOutPickerBackground = keyframes({
     opacity: 0
   }
 });
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   wrapper: {
     zIndex: 1000,
     position: 'fixed',
@@ -65,7 +64,7 @@ const useStyles = makeStyles()(() => ({
     bottom: 0,
     left: 0,
     right: 0,
-    backgroundColor: themeColors.light,
+    backgroundColor: theme.palette.background.surface,
     animation: `${slideInPickerModal} ${SLIDE_DURATION}ms 1 both ${EASING}`
   },
   containerInactive: {

package/components/Picker/spec.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Picker from "./index";
-import PickerList from "./components/List";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 describe('<Picker />', () => {
-  let renderedElement;
-  let renderedInstance;
   const mockItems = ['String only', {
     value: 'Value only'
   }, {
@@ -15,71 +12,81 @@ describe('<Picker />', () => {
   }];
   const mockOnChange = jest.fn();
   const mockOnSelect = jest.fn();
-
-  /**
-   * The view component
-   * @param {Object} props The component props.
-   */
-  const renderComponent = props => {
-    renderedElement = mount(/*#__PURE__*/_jsx(Picker, {
-      ...props
-    }));
-    renderedInstance = renderedElement.find('Picker').instance();
-  };
+  const renderComponent = props => render(/*#__PURE__*/_jsx(Picker, {
+    ...props
+  }));
   beforeEach(() => {
-    renderComponent({
-      items: mockItems,
-      onChange: mockOnChange,
-      onSelect: mockOnSelect
-    });
-    renderedElement.update();
+    jest.clearAllMocks();
   });
   describe('Given the component was mounted to the DOM', () => {
     it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
+      const renderedElement = renderComponent({
+        items: mockItems,
+        onChange: mockOnChange,
+        onSelect: mockOnSelect
+      });
+      expect(renderedElement.container.firstChild).toMatchSnapshot();
     });
     it('should have no selected value', () => {
-      expect(renderedInstance.selectedItem).toBe(null);
+      renderComponent({
+        items: mockItems,
+        onChange: mockOnChange,
+        onSelect: mockOnSelect
+      });
+      expect(screen.queryByText('String only')).toBeNull();
+      expect(screen.getByText('Pick ...')).toBeTruthy();
     });
     describe('Given picker component gets opened', () => {
-      beforeEach(() => {
-        renderedInstance.toggleOpenState(true);
-        renderedElement.update();
-      });
+      const openPicker = () => {
+        const renderedElement = renderComponent({
+          items: mockItems,
+          onChange: mockOnChange,
+          onSelect: mockOnSelect
+        });
+        fireEvent.click(renderedElement.container.querySelector('button.engage__picker__button'));
+        return renderedElement;
+      };
       it('should have isOpen state', () => {
-        expect(renderedInstance.state.isOpen).toBe(true);
+        openPicker();
+        expect(document.querySelector('.engage__picker_modal')).toBeTruthy();
       });
       it('should render the picker list', () => {
-        expect(renderedElement.find(PickerList).length).toBe(1);
+        openPicker();
+        expect(document.querySelector('ul.engage__picker_list')).toBeTruthy();
       });
       it('should render the picker items', () => {
-        expect(renderedElement.find('li button').length).toBe(mockItems.length);
+        const renderedElement = openPicker();
+        expect(renderedElement.container.querySelectorAll('li button').length).toBe(mockItems.length);
       });
       describe('Given a item gets selected', () => {
         jest.useFakeTimers();
-        beforeEach(() => {
-          jest.clearAllMocks();
-          renderedElement.find('li button').first().simulate('click');
-          jest.runAllTimers();
-        });
         afterEach(() => {
           jest.clearAllTimers();
         });
         it('should trigger onChange when the value changed', () => {
+          const renderedElement = openPicker();
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
+          jest.runAllTimers();
           expect(mockOnChange).toHaveBeenCalledTimes(1);
         });
         it('should trigger onSelect when the value changed', () => {
+          const renderedElement = openPicker();
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
+          jest.runAllTimers();
           expect(mockOnSelect).toHaveBeenCalledTimes(1);
         });
         it('should not trigger onChange when the value did not change, but trigger onSelect', () => {
-          renderedInstance.setState({
-            selectedIndex: 0
+          const renderedElement = renderComponent({
+            items: mockItems,
+            value: 'String only',
+            onChange: mockOnChange,
+            onSelect: mockOnSelect
           });
-          renderedInstance.toggleOpenState(true);
-          renderedElement.find('li button').first().simulate('click');
+          fireEvent.click(renderedElement.container.querySelector('button.engage__picker__button'));
+          fireEvent.click(renderedElement.container.querySelectorAll('li button')[0]);
           jest.runAllTimers();
-          expect(mockOnChange).toHaveBeenCalledTimes(1);
-          expect(mockOnSelect).toHaveBeenCalledTimes(2);
+          expect(mockOnChange).toHaveBeenCalledTimes(0);
+          expect(mockOnSelect).toHaveBeenCalledTimes(1);
         });
       });
     });

package/components/PickerUtilize/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/PickerUtilize/components/Button/index.jsx"],"names":[],"mappings":";AA2CA;;;;GAIG;AACH,+DAHW,MAAM,GACL,GAAG,CAiBd;;;;;;;;;;;QAcW,mCAAQ;;;;sBA5EE,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/PickerUtilize/components/Button/index.jsx"],"names":[],"mappings":";AAwCA;;;;GAIG;AACH,+DAHW,MAAM,GACL,GAAG,CAiBd;;;;;;;;;;;QAcW,mCAAS;;;;sBAzEC,YAAY"}