@shopgate/pwa-ui-material 7.31.5 → 7.31.6

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.31.5",
+  "version": "7.31.6",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.31.5",
+    "@shopgate/pwa-common": "7.31.6",
     "@types/color": "^4.2.0",
     "@types/react-transition-group": "^4.4.12",
     "react": "^17.0.2",

package/Accordion/components/AccordionContent/spec.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import AccordionContent from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('react-spring', () => ({
-  ...jest.requireActual('react-spring'),
-  useSpring: jest.fn().mockReturnValue({
-    hook: 'useSpring return value'
-  })
-}));
-describe('<AccordionContent />', () => {
-  it('should render as closed', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
-      id: "some-id",
-      children: /*#__PURE__*/_jsx("div", {
-        id: "test",
-        children: "Some Child"
-      })
-    }));
-    expect(wrapper.find('#test').text()).toEqual('Some Child');
-    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render as open', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
-      open: true,
-      id: "some-id",
-      children: /*#__PURE__*/_jsx("div", {
-        id: "test",
-        children: "Some Child"
-      })
-    }));
-    expect(wrapper.find('#test').text()).toEqual('Some Child');
-    expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/Accordion/spec.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Accordion from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.unmock('@shopgate/pwa-ui-shared');
-jest.mock('@shopgate/engage/components');
-jest.mock('react-spring', () => ({
-  ...jest.requireActual('react-spring'),
-  useSpring: jest.fn().mockReturnValue({
-    hook: 'useSpring return value'
-  })
-}));
-describe('<Accordion />', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('should render with renderLabel prop and children', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      renderLabel: () => /*#__PURE__*/_jsx("div", {}),
-      testId: "Some Thing",
-      children: "Some content."
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('AccordionContent').exists()).toBe(true);
-  });
-  it('should not render without a renderLabel prop', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      testId: "Some Thing"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should not render without children', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
-      renderLabel: () => {},
-      testId: "Some Thing"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-});

package/BaseDialog/components/Buttons/spec.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Button from '@shopgate/pwa-ui-shared/Button';
-import Buttons from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const actions = [{
-  label: 'action0',
-  action: jest.fn()
-}, {
-  label: 'action1',
-  action: jest.fn()
-}, {
-  label: 'action2',
-  action: jest.fn()
-}];
-describe('<Buttons />', () => {
-  it('should not render if no actions are passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render buttons', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
-      actions: actions
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Button).length).toBe(actions.length);
-  });
-});

package/BaseDialog/components/Content/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Content from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Content />', () => {
-  it('should not render if no content is passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render content components', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
-      content: "Hello World"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
-  });
-});

package/BaseDialog/components/Title/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Title />', () => {
-  it('should not render without a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render with a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
-      title: "Some test title"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);
-  });
-});

package/BaseDialog/spec.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./components/Title";
-import Content from "./components/Content";
-import Buttons from "./components/Buttons";
-import BasicDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const props = {
-  title: 'Hello World',
-  children: /*#__PURE__*/_jsx("div", {
-    children: "Hello World"
-  }),
-  actions: [{
-    label: 'action0',
-    action: jest.fn()
-  }, {
-    label: 'action1',
-    action: jest.fn()
-  }, {
-    label: 'action2',
-    action: jest.fn()
-  }]
-};
-jest.mock('@shopgate/engage/a11y/components');
-describe('<BasicDialog />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render as expected', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      ...props
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Title).length).toBe(1);
-    expect(wrapper.find(Title).props().title).toEqual(props.title);
-    expect(wrapper.find(Content).length).toBe(1);
-    expect(wrapper.find(Content).props().content).toEqual(props.children);
-    expect(wrapper.find(Buttons).length).toBe(1);
-    expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);
-  });
-});

package/NavDrawer/components/Divider/spec.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Divider from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<NavDrawerDivider />', () => {
-  it('should match the snapshot', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Divider, {}));
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/NavDrawer/spec.js

@@ -1,139 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-/* eslint-disable global-require, extra-rules/no-single-line-objects */
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import Transition from 'react-transition-group/Transition';
-jest.unmock('@shopgate/pwa-core');
-jest.mock('@shopgate/engage/styles', () => ({
-  makeStyles: () => function mockUseStylesFactory(defs) {
-    return function useStylesMock() {
-      const keys = Object.keys(defs);
-      const classes = keys.reduce((acc, key) => {
-        acc[key] = `mock-class-${key}`;
-        return acc;
-      }, {});
-      const cx = (...parts) => parts.filter(Boolean).join(' ');
-      return {
-        classes,
-        cx
-      };
-    };
-  }
-}));
-jest.mock('@shopgate/engage/components', () => {
-  const mockReact = require('react');
-  const mockPropTypes = require('prop-types');
-  function Backdrop(props) {
-    const {
-      isVisible,
-      onClick
-    } = props;
-    if (!isVisible) {
-      return null;
-    }
-    return mockReact.createElement('button', {
-      type: 'button',
-      'aria-label': 'Close',
-      'data-test-id': 'NavDrawerBackdrop',
-      onClick
-    });
-  }
-  Backdrop.propTypes = {
-    isVisible: mockPropTypes.bool,
-    onClick: mockPropTypes.func
-  };
-  Backdrop.defaultProps = {
-    isVisible: false,
-    onClick: undefined
-  };
-  Backdrop.displayName = 'Backdrop';
-  return {
-    Backdrop
-  };
-});
-jest.mock('@shopgate/engage/a11y/components', () => {
-  const mockPropTypes = require('prop-types');
-  function ModalStateTracker(props) {
-    return props.children;
-  }
-  ModalStateTracker.propTypes = {
-    children: mockPropTypes.node
-  };
-  ModalStateTracker.defaultProps = {
-    children: null
-  };
-  return {
-    ModalStateTracker
-  };
-});
-jest.mock("./components/Item", () => {
-  const mockReact = require('react');
-  const mockPropTypes = require('prop-types');
-  const ItemWithRef = mockReact.forwardRef((props, ref) => mockReact.createElement('button', {
-    type: 'button',
-    ref,
-    'data-test-id': 'nav-drawer-item'
-  }, props.label));
-  ItemWithRef.propTypes = {
-    label: mockPropTypes.string
-  };
-  ItemWithRef.defaultProps = {
-    label: ''
-  };
-  return {
-    __esModule: true,
-    default: ItemWithRef
-  };
-});
-
-// eslint-disable-next-line import/first
-import NavDrawer from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('NavDrawer', () => {
-  it('should match the snapshot', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
-      children: "Content"
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should open and close with an event', () => {
-    const onOpen = jest.fn();
-    const onClose = jest.fn();
-    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
-      onOpen: onOpen,
-      onClose: onClose,
-      children: "Content"
-    }));
-    act(() => {
-      NavDrawer.open();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(true);
-    expect(onOpen).toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-    act(() => {
-      NavDrawer.close();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(false);
-    expect(onClose).toHaveBeenCalled();
-  });
-  it('should close when Backdrop is clicked', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
-      children: "Content"
-    }));
-    act(() => {
-      NavDrawer.open();
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(true);
-    const backdrop = wrapper.find('[data-test-id="NavDrawerBackdrop"]');
-    act(() => {
-      backdrop.simulate('click');
-    });
-    wrapper.update();
-    expect(wrapper.find(Transition).prop('in')).toEqual(false);
-  });
-});
-/* eslint-enable global-require, extra-rules/no-single-line-objects */

package/SnackBar/spec.js

@@ -1,293 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import SnackBar from "./index";
-
-// Use the real long-press hook (the barrel would otherwise drag in appEvents/pwa-core).
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/core/hooks/events', () => ({
-  __esModule: true,
-  useLongPress: jest.requireActual('@shopgate/engage/core/hooks/events/useLongPress').default
-}));
-jest.mock('@shopgate/engage/core/helpers', () => ({
-  i18n: {
-    text: input => input || ''
-  }
-}));
-jest.mock('@shopgate/pwa-common/helpers/config', () => ({
-  themeColors: {
-    light: '#ffffff',
-    lightDark: '#333333',
-    accent: '#00aaff'
-  },
-  themeShadows: {
-    toast: 'none'
-  }
-}));
-jest.mock('@shopgate/pwa-common/components/Ellipsis', () => ({
-  __esModule: true,
-  default: ({
-    children
-  }) => children
-}));
-jest.mock('@shopgate/engage/styles', () => ({
-  makeStyles: () => () => () => ({
-    classes: new Proxy({}, {
-      get: (_, prop) => prop
-    }),
-    cx: (...args) => args.filter(Boolean).join(' ')
-  })
-}));
-
-// Render the Spring render-prop child immediately without animating. onRest is fired on a 0ms
-// timer to mirror react-spring calling it after the commit — this drives the auto-hide countdown.
-jest.mock('react-spring', () => ({
-  config: {
-    stiff: {}
-  }
-}));
-jest.mock('react-spring/renderprops.cjs', () => {
-  // eslint-disable-next-line global-require
-  const {
-    useEffect: useSpringEffect
-  } = require('react');
-  return {
-    Spring: ({
-      children,
-      onRest
-    }) => {
-      useSpringEffect(() => {
-        const id = setTimeout(() => onRest && onRest(), 0);
-        return () => clearTimeout(id);
-      });
-      return children({});
-    }
-  };
-});
-describe('<SnackBar />', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-  it('should invoke onLongPress after a long press on a toast that provides one', () => {
-    const onLongPress = jest.fn();
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      onLongPress,
-      duration: 5000
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: jest.fn(),
-      toasts: toasts
-    }));
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-    act(() => {
-      jest.advanceTimersByTime(4000);
-    });
-    fireEvent.mouseUp(message);
-    expect(onLongPress).toHaveBeenCalledTimes(1);
-  });
-  it('should keep the toast open while it is being long-pressed instead of auto-hiding', () => {
-    const onLongPress = jest.fn();
-    const removeToast = jest.fn();
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      onLongPress,
-      duration: 2500
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: removeToast,
-      toasts: toasts
-    }));
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-
-    // Hold well past the toast's 2500ms lifetime: the auto-hide countdown must be frozen, so the
-    // toast neither hides nor gets removed while the press is ongoing.
-    act(() => {
-      jest.advanceTimersByTime(3000);
-    });
-    expect(onLongPress).not.toHaveBeenCalled();
-    expect(removeToast).not.toHaveBeenCalled();
-
-    // The long press still completes at its 4000ms threshold.
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-    expect(onLongPress).toHaveBeenCalledTimes(1);
-  });
-  it('should invoke the pressed toast\'s handler even if the toast is mutated in place mid-press', () => {
-    // ToastProvider updates a same-id toast by mutating it in place, so the long-press must fire
-    // the handler captured when the press started, not whatever toasts[0].onLongPress became.
-    const pressedHandler = jest.fn();
-    const replacementHandler = jest.fn();
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      onLongPress: pressedHandler,
-      duration: 5000
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: jest.fn(),
-      toasts: toasts
-    }));
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-    // A second pipeline error arrives during the press and overwrites the toast's handler in place.
-    toasts[0].onLongPress = replacementHandler;
-    act(() => {
-      jest.advanceTimersByTime(4000);
-    });
-    fireEvent.mouseUp(message);
-    expect(pressedHandler).toHaveBeenCalledTimes(1);
-    expect(replacementHandler).not.toHaveBeenCalled();
-  });
-  it('should not also fire the box click action on a long press when onLongPress is present', () => {
-    const onLongPress = jest.fn();
-    const action = jest.fn();
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      onLongPress,
-      action,
-      // no actionLabel → would otherwise become a whole-box onClick
-      duration: 5000
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: jest.fn(),
-      toasts: toasts
-    }));
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-    act(() => {
-      jest.advanceTimersByTime(4000);
-    });
-    fireEvent.mouseUp(message);
-    // The pointer release also produces a click, which must not run the action too.
-    fireEvent.click(message);
-    expect(onLongPress).toHaveBeenCalledTimes(1);
-    expect(action).not.toHaveBeenCalled();
-  });
-  it('should not invoke onLongPress when the press is released before the threshold', () => {
-    const onLongPress = jest.fn();
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      onLongPress,
-      duration: 5000
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: jest.fn(),
-      toasts: toasts
-    }));
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-    act(() => {
-      jest.advanceTimersByTime(300);
-    });
-    fireEvent.mouseUp(message);
-    act(() => {
-      jest.advanceTimersByTime(500);
-    });
-    expect(onLongPress).not.toHaveBeenCalled();
-  });
-  it('should not attach long-press handlers when the toast has no onLongPress', () => {
-    const toasts = [{
-      id: 'pipeline.error',
-      message: 'error.general',
-      duration: 5000
-    }];
-    render(/*#__PURE__*/_jsx(SnackBar, {
-      removeToast: jest.fn(),
-      toasts: toasts
-    }));
-
-    // A long press must be a no-op (and must not throw) when no handler is provided.
-    const message = screen.getByText('error.general');
-    fireEvent.mouseDown(message);
-    expect(() => act(() => {
-      jest.advanceTimersByTime(500);
-    })).not.toThrow();
-  });
-  it('should play each queued toast in turn — the second is not skipped or instantly removed', () => {
-    // Mirrors ToastProvider: a FIFO queue whose head is dropped (immutably) on removeToast.
-    const Harness = () => {
-      const [toasts, setToasts] = useState([{
-        id: 'a',
-        message: 'first.toast',
-        duration: 2500
-      }, {
-        id: 'b',
-        message: 'second.toast',
-        duration: 2500
-      }]);
-      const removeToast = useCallback(() => setToasts(t => t.slice(1)), []);
-      if (!toasts.length) return null;
-      return /*#__PURE__*/_jsx(SnackBar, {
-        removeToast: removeToast,
-        toasts: toasts
-      });
-    };
-    render(/*#__PURE__*/_jsx(Harness, {}));
-
-    // First toast is shown; the second is still queued, not yet rendered.
-    expect(screen.getByText('first.toast')).toBeTruthy();
-    expect(screen.queryByText('second.toast')).toBe(null);
-
-    // First toast dwells (2500ms), then slides out and is removed after the exit animation.
-    act(() => {
-      jest.advanceTimersByTime(2500 + 600);
-    });
-
-    // The second toast is now on screen — it got its turn rather than being dropped instantly.
-    expect(screen.getByText('second.toast')).toBeTruthy();
-    expect(screen.queryByText('first.toast')).toBe(null);
-
-    // It in turn dwells and is removed, draining the queue.
-    act(() => {
-      jest.advanceTimersByTime(2500 + 600);
-    });
-    expect(screen.queryByText('second.toast')).toBe(null);
-  });
-  it('auto-hides within its duration even when the parent re-renders repeatedly', () => {
-    // The spring re-settles (and fires onRest) on every render because of `force`. The auto-hide
-    // countdown must therefore NOT be tied to onRest, or frequent parent re-renders would keep
-    // resetting it and the toast would outlive its duration.
-    const removeToast = jest.fn();
-    const Harness = () => {
-      const [, tick] = useState(0);
-      useEffect(() => {
-        const id = setInterval(() => tick(n => n + 1), 500); // re-render every 500ms (< duration)
-        return () => clearInterval(id);
-      }, []);
-      const toasts = [{
-        id: 'a',
-        message: 'error.general',
-        duration: 2500
-      }];
-      return /*#__PURE__*/_jsx(SnackBar, {
-        removeToast: removeToast,
-        toasts: toasts
-      });
-    };
-    render(/*#__PURE__*/_jsx(Harness, {}));
-
-    // Not yet gone before its duration elapses.
-    act(() => {
-      jest.advanceTimersByTime(2000);
-    });
-    expect(removeToast).not.toHaveBeenCalled();
-
-    // Removed shortly after its duration (dwell + exit animation), despite the periodic re-renders.
-    act(() => {
-      jest.advanceTimersByTime(500 + 600);
-    });
-    expect(removeToast).toHaveBeenCalledTimes(1);
-  });
-});

package/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "."
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "**/*.spec.*",
-    "**/__tests__/**",
-    "**/__snapshots__/**",
-    "coverage"
-  ]
-}

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.json",
-}