Client-side script robustness

lib/clientSideScripts/__snapshots__/getScreenDimensions.spec.ts.snap

@@ -53,3 +53,30 @@ Object {
   },
 }
 `;
+
+exports[`getScreenDimensions should return zeroed dimensions if the document attributes are null 1`] = `
+Object {
+  "dimensions": Object {
+    "body": Object {
+      "offsetHeight": 0,
+      "scrollHeight": 0,
+    },
+    "html": Object {
+      "clientHeight": 0,
+      "clientWidth": 0,
+      "offsetHeight": 0,
+      "scrollHeight": 0,
+      "scrollWidth": 0,
+    },
+    "window": Object {
+      "devicePixelRatio": 1,
+      "innerHeight": 768,
+      "innerWidth": 1024,
+      "outerHeight": 0,
+      "outerWidth": 0,
+      "screenHeight": 0,
+      "screenWidth": 0,
+    },
+  },
+}
+`;

lib/clientSideScripts/__snapshots__/removeCustomCss.spec.ts.snap

@@ -3,3 +3,7 @@
 exports[`removeCustomCss should be able to remove the custom css 1`] = `"body:{width:100%}"`;
 
 exports[`removeCustomCss should be able to remove the custom css 2`] = `""`;
+
+exports[`removeCustomCss should do nothing if custom css is not present 1`] = `""`;
+
+exports[`removeCustomCss should do nothing if custom css is not present 2`] = `""`;

lib/clientSideScripts/getScreenDimensions.spec.ts

@@ -13,4 +13,11 @@ describe('getScreenDimensions', () => {
 
     expect(getScreenDimensions()).toMatchSnapshot();
   });
+
+  it('should return zeroed dimensions if the document attributes are null', () => {
+    Object.defineProperty(document, 'body', {value: null});
+    Object.defineProperty(document, 'documentElement', {value: null});
+
+    expect(getScreenDimensions()).toMatchSnapshot();
+  });
 });

lib/clientSideScripts/getScreenDimensions.ts

@@ -7,28 +7,34 @@ export default function getScreenDimensions():ScreenDimensions {
   const body = document.body;
   const html = document.documentElement;
 
+  const bodyDimensions = {
+    scrollHeight: body == null ? 0 : body.scrollHeight,
+    offsetHeight: body == null ? 0 : body.offsetHeight
+  };
+
+  const htmlDimensions = {
+    clientHeight: html == null ? 0 : html.clientHeight,
+    clientWidth: html == null ? 0 : html.clientWidth,
+    scrollHeight: html == null ? 0 : html.scrollHeight,
+    scrollWidth: html == null ? 0 : html.scrollWidth,
+    offsetHeight: html == null ? 0 : html.offsetHeight
+  };
+
+  const windowDimensions = {
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight,
+    outerHeight: window.outerHeight === 0 ? htmlDimensions.clientHeight : window.outerHeight,
+    outerWidth: window.outerWidth === 0 ? htmlDimensions.clientWidth : window.outerWidth,
+    devicePixelRatio: window.devicePixelRatio,
+    screenWidth: window.screen.width,
+    screenHeight: window.screen.height,
+  };
+
   return {
     dimensions: {
-      body: {
-        scrollHeight: body.scrollHeight,
-        offsetHeight: body.offsetHeight
-      },
-      html: {
-        clientHeight: html.clientHeight,
-        clientWidth: html.clientWidth,
-        scrollHeight: html.scrollHeight,
-        scrollWidth: html.scrollWidth,
-        offsetHeight: html.offsetHeight
-      },
-      window: {
-        innerWidth: window.innerWidth,
-        innerHeight: window.innerHeight,
-        outerHeight: window.outerHeight === 0 ? html.clientHeight : window.outerHeight,
-        outerWidth: window.outerWidth === 0 ? html.clientWidth : window.outerWidth,
-        devicePixelRatio: window.devicePixelRatio,
-        screenWidth: window.screen.width,
-        screenHeight: window.screen.height,
-      }
+      body: bodyDimensions,
+      html: htmlDimensions,
+      window: windowDimensions
     }
   };
 }

lib/clientSideScripts/removeCustomCss.spec.ts

@@ -18,4 +18,24 @@ describe('removeCustomCss', ()=>{
 
     expect(document.head.textContent).toMatchSnapshot();
   });
+
+
+  it('should do nothing if custom css is not present', () => {
+    const id = 'test';
+
+    expect(document.head.textContent).toMatchSnapshot();
+
+    removeCustomCss(id);
+
+    expect(document.head.textContent).toMatchSnapshot();
+  });
+
+  it('should do nothing if document.head is null', () => {
+    const id = 'test';
+    Object.defineProperty(document, 'head', {value: null});    
+
+    removeCustomCss(id);
+
+    expect(document.head).toBe(null);
+  });
 });

lib/clientSideScripts/removeCustomCss.ts

@@ -3,5 +3,7 @@
  */
 export default function removeCustomCss(id: string): void {
   const elem = document.querySelector(`style#${id}`);
-  elem.parentNode.removeChild(elem);
+  if (elem != null) {
+    elem.parentNode.removeChild(elem);
+  }
 }

lib/clientSideScripts/screenDimensions.interfaces.ts

@@ -5,49 +5,49 @@ export interface ScreenDimensions {
       // The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or
       // horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after.
       // If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight
-      scrollHeight: number;
+      scrollHeight?: number;
       // measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
       // It does not include the height of pseudo-elements such as ::before or ::after. For the document body object, the measurement
       // includes total linear content height instead of the element's CSS height. Floated elements extending below other
       // linear content are ignored
-      offsetHeight: number
+      offsetHeight?: number
     };
     html: {
       // Inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present)
-      clientWidth: number;
+      clientWidth?: number;
       // The width is measured in the same way as clientWidth: it includes the element's padding, but not its border, margin or vertical
       // scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element's content
       // can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth
-      scrollWidth: number;
+      scrollWidth?: number;
       // Inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present)
-      clientHeight: number;
+      clientHeight?: number;
       // The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or
       // horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after. If the element's
       // content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight
-      scrollHeight: number;
+      scrollHeight?: number;
       // Measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
       // It does not include the height of pseudo-elements such as ::before or ::after. For the document body object, the measurement
       // includes total linear content height instead of the element's CSS height. Floated elements extending below other linear
       // content are ignored
-      offsetHeight: number
+      offsetHeight?: number
     };
     window: {
       // Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
-      innerWidth: number;
+      innerWidth?: number;
       // Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
-      innerHeight: number;
+      innerHeight?: number;
       // Width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded),
       // window chrome and window resizing borders/handles.
-      outerWidth: number;
+      outerWidth?: number;
       // Height in pixels of the whole browser window. It represents the height of the whole browser window including sidebar
       // (if expanded), window chrome and window resizing borders/handles.
-      outerHeight: number;
+      outerHeight?: number;
       // The ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
-      devicePixelRatio: number;
+      devicePixelRatio?: number;
       // The width of the screen
-      screenWidth: number;
+      screenWidth?: number;
       // The height of the screen
-      screenHeight: number
+      screenHeight?: number
     }
   };
 }

lib/clientSideScripts/setCustomCss.spec.ts

@@ -46,4 +46,18 @@ describe('setCustomCss', () => {
 
     expect(document.head.textContent).toMatchSnapshot();
   });
+
+  it('should do nothing if document.head is null', () => {
+    const cssOptions:CssOptions = {
+      addressBarPadding:6,
+      disableCSSAnimation:false,
+      id:'id',
+      toolBarPadding:6,
+    };
+    Object.defineProperty(document, 'head', {value: null});    
+
+    setCustomCss(cssOptions);
+
+    expect(document.head).toBe(null);
+  });
 });

lib/clientSideScripts/setCustomCss.ts

@@ -4,7 +4,11 @@ import {CssOptions} from './customCss.interfaces';
  * Set some default css
  */
 export default function setCustomCss(cssOptions: CssOptions): void {
-	const disableTransformationsTransitionsAnimations = `
+    if (document.head == null) {
+        return;
+    }
+
+    const disableTransformationsTransitionsAnimations = `
 * {
     -o-transition-property: none !important;
     -moz-transition-property: none !important;