@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-alpha.9

package/components/CountdownTimer/spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import CountdownTimer, { getFormattedTimeString } from "./index";
 describe('<CountdownTimer>', () => {
   jest.useFakeTimers();
@@ -36,24 +37,23 @@ describe('<CountdownTimer>', () => {
    */
   const performFormatCheck = (remainingDays, remainingHours, remainingMinutes, remainingSeconds) => {
     jest.clearAllTimers();
-    setInterval.mock.calls = [];
+    const intervalSpy = jest.spyOn(global, 'setInterval');
     const wrapper = createTimerElement(remainingDays, remainingHours, remainingMinutes, remainingSeconds, null);
-    const expectedTimeFormat = getFormattedTimeString(remainingDays, remainingHours, remainingMinutes, remainingSeconds - 1 // Expect the decremented timeout.
-    );
-
-    // We cannot perform a snapshot match here because the timestamp changes for each call.
-    expect(setInterval.mock.calls.length).toBe(1);
-    jest.runTimersToTime(1000);
+    const expectedTimeFormat = getFormattedTimeString(remainingDays, remainingHours, remainingMinutes, remainingSeconds - 1);
+    expect(intervalSpy).toHaveBeenCalledTimes(1);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     wrapper.update();
     const {
       params,
       string
     } = wrapper.props();
-    const renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
+    intervalSpy.mockRestore();
   };
   it('should render the correct time for < 24h', () => performFormatCheck(0, 0, 0, 5));
   it('should render the correct time for 24h - 48h', () => performFormatCheck(1, 12, 6, 5));
@@ -62,46 +62,44 @@ describe('<CountdownTimer>', () => {
     jest.clearAllTimers();
     const wrapper = createTimerElement(-1, -2, -3, -5, null);
     const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     const {
       params,
       string
     } = wrapper.props();
-    const renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
   });
   it('should stop at 00:00:00 when the timer expires', () => {
     const wrapper = createTimerElement(0, 0, 0, 1, null);
     const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
-    let renderedTimeFormat;
-
-    // Run down to 00:00:00.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     wrapper.update();
     let {
       params,
       string
     } = wrapper.props();
-    renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
-
-    // Advance time a bit further and make sure the timer stays at 00:00:00.
-    jest.runTimersToTime(1000);
+    }).toEqual(expectedTimeFormat);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     ({
       params,
       string
     } = wrapper.props());
-    renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
   });
   it('should invoke the callback when the timer expires', () => {
     let timesCallbackInvoked = 0;
@@ -112,17 +110,17 @@ describe('<CountdownTimer>', () => {
       timesCallbackInvoked += 1;
     };
     createTimerElement(0, 0, 0, 2, callback);
-
-    // The timer is not expired yet. Make sure the callback is not invoked.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(0);
-
-    // The timer should expire by now.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(1);
-
-    // Run it again and make sure it won't be called twice.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(1);
   });
   it('should not invoke the callback when the timeout is already expired.', () => {
@@ -134,7 +132,9 @@ describe('<CountdownTimer>', () => {
       timesCallbackInvoked += 1;
     };
     createTimerElement(0, 0, 0, 0, callback);
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(0);
   });
 });

package/components/HtmlSanitizer/spec.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jest-environment jsdom */
+
 import React from 'react';
 import { mount } from 'enzyme';
-import { JSDOM } from 'jsdom';
 import { embeddedMedia } from '@shopgate/pwa-common/collections';
 import HtmlSanitizer from "./index";
 jest.mock("../EmbeddedMedia", () => ({
@@ -12,7 +13,7 @@ jest.mock("./connector", () => Cmp => Cmp);
 /**
  * @param {string} html HTML markup.
  * @param {Object} props Component props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
 const createWrapper = (html, props = {}) => mount(/*#__PURE__*/React.createElement(HtmlSanitizer, _extends({
   navigate: () => {}
@@ -125,7 +126,9 @@ describe('<HtmlSanitizer />', () => {
       mockedHandleClick.mockClear();
     });
     it('follows a link from a plain <a>', () => {
-      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      // Create a real container element in the current document
+      const attachNode = document.createElement('div');
+      document.body.appendChild(attachNode);
       const html = '&lt;a id=&quot;link&quot; href=&quot;#follow-me-and-everything-is-alright&quot;&gt;Plain Link&lt;/a&gt;';
       const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
         decode: true,
@@ -134,9 +137,9 @@ describe('<HtmlSanitizer />', () => {
         },
         navigate: () => {}
       }, html), {
-        attachTo: doc.getElementsByTagName('div')[0]
+        attachTo: attachNode
       });
-      const aTag = doc.getElementsByTagName('a')[0];
+      const aTag = attachNode.getElementsByTagName('a')[0];
       aTag.closest = () => aTag;
       const event = {
         target: aTag,
@@ -145,9 +148,12 @@ describe('<HtmlSanitizer />', () => {
       wrapper.instance().handleTap(event);
       expect(mockedHandleClick).toHaveBeenCalledTimes(1);
       expect(mockedHandleClick).toHaveBeenCalledWith('#follow-me-and-everything-is-alright', '');
+      wrapper.unmount();
+      attachNode.remove();
     });
     it('follows a link from a <a> with other HTML inside', () => {
-      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      const attachNode = document.createElement('div');
+      document.body.appendChild(attachNode);
       const html = '&lt;a id=&quot;link&quot; target=&quot;_blank&quot; href=&quot;#I-ll-be-the-one-to-tuck-you-in-at-night&quot;&gt;&lt;span&gt;Span Link&lt;/span&gt;&lt;/a&gt;';
       const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
         decode: true,
@@ -156,10 +162,10 @@ describe('<HtmlSanitizer />', () => {
         },
         navigate: () => {}
       }, html), {
-        attachTo: doc.getElementsByTagName('div')[0]
+        attachTo: attachNode
       });
-      const aTag = doc.getElementsByTagName('a')[0];
-      const spanTag = doc.getElementsByTagName('span')[0];
+      const aTag = attachNode.getElementsByTagName('a')[0];
+      const spanTag = attachNode.getElementsByTagName('span')[0];
       spanTag.closest = () => aTag;
       const event = {
         target: spanTag,

package/components/Swiper/components/SwiperItem/spec.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SwiperItem from '.';
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect
+}));
 describe('<SwiperItem />', () => {
   it('should not render without children', () => {
     const wrapper = shallow(/*#__PURE__*/React.createElement(SwiperItem, null, /*#__PURE__*/React.createElement("div", null)));

package/components/Widgets/components/Widget/spec.js

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import Grid from "../../../Grid";
 import Widget from "./index";
 jest.mock('react', () => ({
-  ...require.requireActual('react'),
+  ...jest.requireActual('react'),
   Suspense: function Suspense({
     children
   }) {

package/components/Widgets/components/WidgetGrid/spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import WidgetGrid from "./index";
 jest.mock('react', () => ({
-  ...require.requireActual('react'),
+  ...jest.requireActual('react'),
   Suspense: function Suspense({
     children
   }) {

package/components/Widgets/spec.js

@@ -137,10 +137,16 @@ describe('<Widgets />', () => {
     expect(wrapper.find('img').length).toBe(1);
   });
   it('should schedule a re-render when widget is scheduled', () => {
-    const minutesToNextFullHour = 60 - new Date().getMinutes();
-    const msToNextFullHour = minutesToNextFullHour * 60000;
+    // Use a fixed point in time so "next full hour" is deterministic.
+    // Pick a time that's not exactly on the hour.
+    const base = new Date('2023-01-01T10:37:00.000Z');
+    jest.setSystemTime(base);
+    const minutesToNextFullHour = 60 - base.getMinutes(); // 23
+    const msToNextFullHour = minutesToNextFullHour * 60000; // 23 * 60_000
+
     const scheduledFromMs = Date.now() + msToNextFullHour - 1;
     const scheduledToMs = Date.now() + minutesToNextFullHour + 1000;
+
     /* eslint-disable camelcase */
     const widgets = [{
       col: 0,
@@ -159,18 +165,27 @@ describe('<Widgets />', () => {
       type: '@shopgate/commerce-widgets/image'
     }];
     /* eslint-enable camelcase */
+
     const wrapper = createWrapper(widgets);
     const instance = wrapper.find('Widgets').instance();
+    const clearSpy = jest.spyOn(global, 'clearTimeout');
     instance.forceUpdate = jest.fn();
+
+    // Before the schedule hits, the image should not render yet.
     expect(wrapper.find(Image).exists()).toBe(false);
+
+    // 1) Advance to the next full hour -> first forced update.
     jest.advanceTimersByTime(msToNextFullHour);
     expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-    // In real life next timeout should be in 60 minutes.
-    // This test has same Date and fake timers.
-    jest.advanceTimersByTime(msToNextFullHour);
+
+    // 2) The component should schedule the next tick for +60 min.
+    jest.advanceTimersByTime(60 * 60000);
     expect(instance.forceUpdate).toHaveBeenCalledTimes(2);
-    instance.componentWillUnmount();
-    expect(clearTimeout).toHaveBeenCalled();
+
+    // Unmount triggers cleanup of any pending timeouts.
+    wrapper.unmount();
+    expect(clearSpy).toHaveBeenCalled();
+    clearSpy.mockRestore();
   });
   it('should render only wrapper when widgets array is empty', () => {
     const widgets = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.30.0-alpha.8",
+  "version": "7.30.0-alpha.9",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.30.0-alpha.8",
+    "@shopgate/pwa-benchmark": "7.30.0-alpha.9",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -27,7 +27,6 @@
     "gsap": "^3.6.0",
     "history": "^4.9.0",
     "intl-messageformat": "^7.8.3",
-    "jsdom": "11.12.0",
     "path-match": "^1.2.4",
     "react-dotdotdot": "~1.3.0",
     "react-helmet": "^6.1.0",
@@ -42,7 +41,7 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.0-alpha.8",
+    "@shopgate/pwa-core": "7.30.0-alpha.9",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.21",
     "prop-types": "~15.8.1",