partial window mock

packages/lib/src/common/window/window.mock.js

@@ -2,7 +2,7 @@ const noop = () => ({});
 const width = 2560;
 const height = 1440;
 
-const dims = {
+export const dimsMock = {
   y: 0,
   x: 0,
   width,
@@ -16,8 +16,8 @@ const dims = {
 };
 
 const elem = {
-  ...dims,
-  getBoundingClientRect: () => dims,
+  ...dimsMock,
+  getBoundingClientRect: () => dimsMock,
 };
 
 const documentMock = {
@@ -30,8 +30,8 @@ const documentMock = {
   querySelector: () => [elem],
   documentElement: elem,
   activeElement: elem,
-  style: dims,
-  ...dims,
+  style: dimsMock,
+  ...dimsMock,
 };
 
 documentMock.body = documentMock;
@@ -46,18 +46,24 @@ const locationMock = {
   search: '',
   hash: '',
 };
-
+export const scrollMock = {
+  scrollTop: 0,
+  scrollY: 0,
+};
+const windowHydrateMock = {
+  ...dimsMock,
+  ...scrollMock,
+};
 const windowMock = {
   isMock: true,
   isSSR: true,
   orientation: 0,
   devicePixelRatio: 1,
-  scrollTop: 0,
   addEventListener: noop,
   removeEventListener: noop,
   createEvent: noop,
   CustomEvent: noop,
-  screen: dims,
+  screen: dimsMock,
   open: noop,
   petri: {},
   search: {},
@@ -69,9 +75,10 @@ const windowMock = {
   getComputedStyle: noop,
   localStorage: {},
   frames: [],
-  ...dims,
+  ...windowHydrateMock,
 };
 
+export const hydrateMockMap = new Map(Object.keys(windowHydrateMock).map((key) => [key, windowHydrateMock[key]]));
 windowMock.parent = windowMock;
 
 export default windowMock;

packages/lib/src/common/window/windowWrapper.js

@@ -1,8 +1,16 @@
-import WindowMock from './window.mock';
+import WindowMock, { hydrateMockMap } from './window.mock';
 
 class WindowWrapper {
   constructor() {
-    this.reset();
+    this.shouldUseMock = true;
+    this.initProxyWindow = this.initProxyWindow.bind(this);
+    if (this.windowIsAvailable()) {
+      // this will wrap the real window with partial mock for the dimensions
+      // once the gallery is mounted we will switch from the mocked properties to the real values
+      this.initProxyWindow();
+    } else {
+      this.initMockWindow();
+    }
   }
 
   windowIsAvailable() {
@@ -13,12 +21,55 @@ class WindowWrapper {
     }
   }
 
-  reset() {
-    this.isMock = !this.windowIsAvailable();
-    this.window = this.isMock ? WindowMock : window;
-    if (this.isMock) {
-      this.window.mockInstanceId = Math.floor(Math.random() * 100000);
+  initProxyWindow() {
+    console.log('locall pro-gallery ==>');
+    const handler = {
+      // here the proxy target is the global window object
+      get: function (target, property) {
+        if (hydrateMockMap.has(property) && this.shouldUseMock) {
+          return hydrateMockMap.get(property);
+        }
+        return target[property];
+      }.bind(this),
+      // here we push to the custom props Set to know later if we want to bind the prop
+      // reflect just assigns the proprty and returns boolean if the assign was successfull
+      set: function (target, property, value) {
+        return Reflect.set(target, property, value);
+      },
+    };
+    // eslint-disable-next-line no-undef
+    const windowProxy = new Proxy(window, handler);
+    const windowFuncHandler = {
+      get: function (target, property) {
+        if (!windowProxy.proGalleryCustomProps.has(property) && typeof windowProxy[property] === 'function') {
+          return windowProxy[property].bind(window);
+        }
+        return windowProxy[property];
+      },
+      set: function (target, property, value) {
+        windowProxy.proGalleryCustomProps.add(property);
+        return Reflect.set(windowProxy, property, value);
+      },
+    };
+    if (!windowProxy.proGalleryCustomProps) {
+      windowProxy.proGalleryCustomProps = new Set();
     }
+    // this second proxy that returnes binded functions to avoid issues with non configurable proprties
+    // eslint-disable-next-line no-undef
+    this.window = new Proxy({}, windowFuncHandler);
+  }
+  initMockWindow() {
+    this.window = WindowMock;
+    this.window.mockInstanceId = Math.floor(Math.random() * 100000);
+  }
+  stopUsingMock() {
+    this.shouldUseMock = false;
+  }
+  get shouldUseMock() {
+    return this._shouldUseMock;
+  }
+  set shouldUseMock(shouldUseMock) {
+    this._shouldUseMock = shouldUseMock;
   }
 }