@shopgate/pwa-ui-shared 7.30.0-alpha.8 → 7.30.0-alpha.9

package/ActionButton/spec.js

@@ -44,17 +44,21 @@ describe('<ActionButton />', () => {
       });
     });
     describe('Given the component gets clicked', () => {
+      let timeoutSpy;
       beforeEach(() => {
+        timeoutSpy = jest.spyOn(global, 'setTimeout');
         renderedElement.find(RippleButton).simulate('click');
       });
+      afterEach(() => {
+        timeoutSpy.mockRestore();
+      });
       it('should use setTimeout for delaying the onClick handler', () => {
-        expect(setTimeout.mock.calls.length).toBe(1);
-        expect(setTimeout.mock.calls[0][1]).toBe(ActionButton.clickDelay);
+        expect(timeoutSpy).toHaveBeenCalledTimes(1);
+        expect(timeoutSpy.mock.calls[0][1]).toBe(ActionButton.clickDelay);
       });
       it('should eventually call the onClick handler', () => {
         jest.runOnlyPendingTimers();
-        expect(mockOnClick).toBeCalled();
-        expect(mockOnClick.mock.calls.length).toBe(1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
       });
     });
   });

package/AddToCartButton/spec.js

@@ -1,52 +1,66 @@
-import "core-js/modules/web.immediate.js";
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import AddToCartButton from "./index";
 
 /**
  * Flushes the promise queue.
  * @returns {Promise}
  */
-const flushPromises = () => new Promise(resolve => setImmediate(resolve));
+const flushMicrotasks = () => Promise.resolve();
 describe('<AddToCartButton />', () => {
   it('should render in loading state and should not be clickable', () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
+    const spy = jest.fn(() => Promise.resolve());
     const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
       onClick: spy,
       isLoading: true,
       isOrderable: true,
       isDisabled: false
     }));
+
+    // Click shouldn’t fire when loading
     wrapper.find('button').prop('onClick')();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(0);
   });
   it('should render with checkmark icon and should not be clickable the second time', async () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
+    const spy = jest.fn(() => Promise.resolve());
     const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,
       isDisabled: false
     }));
-    wrapper.find('button').prop('onClick')();
+
+    // First click triggers async work
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
     wrapper.update();
-    await flushPromises();
-    wrapper.find('button').prop('onClick')();
+
+    // Second click should be ignored
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
     wrapper.update();
-    await flushPromises();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(1);
   });
-  it('should render with cart icon and should be clickable', () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
+  it('should render with cart icon and should be clickable', async () => {
+    const spy = jest.fn(() => Promise.resolve());
     const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,
       isDisabled: false
     }));
-    wrapper.find('button').prop('onClick')();
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
+    wrapper.update();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(1);
   });

package/Form/Builder/spec.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import FormBuilder from '.';
+jest.mock('@shopgate/engage/components');
 describe('<FormBuilder />', () => {
   it('should render empty form', () => {
     const wrapper = mount(/*#__PURE__*/React.createElement(FormBuilder, {
@@ -186,9 +187,10 @@ describe('<FormBuilder />', () => {
   });
   describe('FormBuilder::elementChangeHandler', () => {
     it('should take the updated state from action listener', () => {
-      // Create mocked Form builder.
       const handleUpdate = jest.fn();
-      const builder = new FormBuilder({
+      const ref = /*#__PURE__*/React.createRef();
+      mount(/*#__PURE__*/React.createElement(FormBuilder, {
+        ref: ref,
         validationErrors: [],
         config: {
           fields: {
@@ -200,9 +202,11 @@ describe('<FormBuilder />', () => {
             }
           }
         },
-        handleUpdate
-      });
-      builder.actionListener.notify = () => ({
+        name: "foo",
+        id: "foo",
+        handleUpdate: handleUpdate
+      }));
+      ref.current.actionListener.notify = () => ({
         formData: {
           foo: 'bar'
         },
@@ -213,7 +217,7 @@ describe('<FormBuilder />', () => {
       });
 
       // Trigger update
-      builder.elementChangeHandler('foo', 'bar');
+      ref.current.elementChangeHandler('foo', 'bar');
 
       // Test
       expect(handleUpdate).toHaveBeenCalledWith({
@@ -223,7 +227,9 @@ describe('<FormBuilder />', () => {
     it('should consider backend validations', () => {
       // Create mocked Form builder.
       const handleUpdate = jest.fn();
-      const builder = new FormBuilder({
+      const ref = /*#__PURE__*/React.createRef();
+      mount(/*#__PURE__*/React.createElement(FormBuilder, {
+        ref: ref,
         validationErrors: [{}],
         config: {
           fields: {
@@ -235,9 +241,11 @@ describe('<FormBuilder />', () => {
             }
           }
         },
-        handleUpdate
-      });
-      builder.actionListener.notify = () => ({
+        name: "foo",
+        id: "foo",
+        handleUpdate: handleUpdate
+      }));
+      ref.current.actionListener.notify = () => ({
         formData: {
           foo: 'bar'
         },
@@ -248,7 +256,7 @@ describe('<FormBuilder />', () => {
       });
 
       // Trigger update
-      builder.elementChangeHandler('foo', 'bar');
+      ref.current.elementChangeHandler('foo', 'bar');
 
       // Test
       expect(handleUpdate).toHaveBeenCalledWith({

package/ScannerOverlay/components/CameraOverlay/style.js

@@ -6,7 +6,6 @@ const edgeBorderWidth = 3;
 const edgeOffsetHorizontal = themeVariables.gap.xbig;
 const edgeOffsetVertical = themeVariables.gap.xxbig;
 export default css({
-  position: 'relative',
   height: '90%',
   width: '100%',
   ':before,:after,>:before,>:after': {

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.30.0-alpha.8",
+  "version": "7.30.0-alpha.9",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.30.0-alpha.8",
-    "@shopgate/pwa-ui-material": "7.30.0-alpha.8",
+    "@shopgate/pwa-ui-ios": "7.30.0-alpha.9",
+    "@shopgate/pwa-ui-material": "7.30.0-alpha.9",
     "react-day-picker": "^7.4.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.0-alpha.8",
-    "@shopgate/pwa-common-commerce": "7.30.0-alpha.8",
+    "@shopgate/pwa-common": "7.30.0-alpha.9",
+    "@shopgate/pwa-common-commerce": "7.30.0-alpha.9",
     "classnames": "2.5.1",
     "react": "~16.14.0"
   },