Added test for setting document element

Author: Steve Hobbs

src/__tests__/testUtils.js

@@ -1,8 +1,8 @@
 import React from 'react'; // eslint-disable-line
 import renderer from 'react-test-renderer';
 
-export const expectComponent = children => {
-  const component = renderer.create(children);
+export const expectComponent = (children, opts) => {
+  const component = renderer.create(children, opts);
   return expect(component);
 };
 
@@ -40,26 +40,18 @@ export const extractPropsFromWrapper = (wrapper, index = 0) =>
 export const setURL = (url, options = {}) => {
   const parser = document.createElement('a');
   parser.href = url;
-  [
-    'href',
-    'protocol',
-    'host',
-    'hostname',
-    'origin',
-    'port',
-    'pathname',
-    'search',
-    'hash'
-  ].forEach(prop => {
-    let value = parser[prop];
-    if (prop === 'origin' && options.noOrigin) {
-      value = null;
+  ['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(
+    prop => {
+      let value = parser[prop];
+      if (prop === 'origin' && options.noOrigin) {
+        value = null;
+      }
+      Object.defineProperty(window.location, prop, {
+        value,
+        writable: true
+      });
     }
-    Object.defineProperty(window.location, prop, {
-      value,
-      writable: true
-    });
-  });
+  );
 };
 
 export const expectMockToMatch = ({ mock }, numberOfCalls) => {

src/__tests__/ui/box/__snapshots__/header.test.jsx.snap

@@ -37,6 +37,43 @@ exports[`Header renders correctly with basic props 1`] = `
 </div>
 `;
 
+exports[`Header sets the header size property on the document element 1`] = `
+<div
+  className="auth0-lock-header"
+>
+  <div
+    className="auth0-lock-header-bg auth0-lock-blur-support"
+  >
+    <div
+      className="auth0-lock-header-bg-blur auth0-lock-no-grayscale"
+      style={
+        Object {
+          "backgroundImage": "url('some-image.png')",
+        }
+      }
+    />
+    <div
+      className="auth0-lock-header-bg-solid"
+      style={
+        Object {
+          "backgroundColor": "red",
+        }
+      }
+    />
+  </div>
+  <div
+    className="auth0-lock-header-welcome"
+  >
+    <div
+      className="auth0-lock-firstname"
+      title="Header"
+    >
+      Header
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Header shows the back button when there is a handler 1`] = `
 <div
   className="auth0-lock-header"

src/__tests__/ui/box/header.test.jsx

@@ -45,4 +45,22 @@ describe('Header', () => {
 
     expectComponent(<Header {...props} />).toMatchSnapshot();
   });
+
+  it('sets the header size property on the document element', () => {
+    const spy = jest.spyOn(document.documentElement.style, 'setProperty');
+
+    const props = {
+      title: 'This is the header',
+      name: 'Header',
+      logoUrl: 'some-logo.png',
+      backgroundUrl: 'some-image.png',
+      backgroundColor: 'red'
+    };
+
+    expectComponent(<Header {...props} />, {
+      createNodeMock: () => ({ clientHeight: 100 })
+    }).toMatchSnapshot();
+
+    expect(spy).toHaveBeenCalledWith('--header-height', '100px');
+  });
 });