diff --git a/css/index.styl b/css/index.styl index 62a5272b8..b96b11d71 100644 --- a/css/index.styl +++ b/css/index.styl @@ -186,6 +186,7 @@ loadingSize = 30px .auth0-lock-content-body-wrapper padding-top 10px + margin-top: var(--header-height, 100px) .auth0-lock-close-button, .auth0-lock-back-button -webkit-box-sizing content-box !important diff --git a/src/__tests__/testUtils.js b/src/__tests__/testUtils.js index b8ddf5835..528c36040 100644 --- a/src/__tests__/testUtils.js +++ b/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) => { diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap index 48dc8ccfe..69f60515b 100644 --- a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap +++ b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap @@ -21,11 +21,6 @@ exports[`Chrome can dislay all global messages together 1`] = ` />
@@ -175,11 +170,6 @@ exports[`Chrome renders correctly when there is a global information message 1`] />
@@ -301,11 +291,6 @@ exports[`Chrome renders correctly when there is a global message 1`] = ` />
@@ -427,11 +412,6 @@ exports[`Chrome renders correctly when there is a global success message 1`] = ` />
@@ -553,11 +533,6 @@ exports[`Chrome renders correctly with basic props 1`] = ` />
diff --git a/src/__tests__/ui/box/__snapshots__/header.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/header.test.jsx.snap new file mode 100644 index 000000000..365e2ec19 --- /dev/null +++ b/src/__tests__/ui/box/__snapshots__/header.test.jsx.snap @@ -0,0 +1,168 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Header renders correctly with basic props 1`] = ` +
+
+
+
+
+
+
+ Header +
+
+
+`; + +exports[`Header sets the header size property on the document element 1`] = ` +
+
+
+
+
+
+
+ Header +
+
+
+`; + +exports[`Header shows the back button when there is a handler 1`] = ` +
+ ", + } + } + id="undefined-back-button" + onClick={[Function]} + onKeyPress={[Function]} + role="button" + tabIndex={0} + /> +
+
+
+
+
+
+ Header +
+
+
+`; + +exports[`Header shows the logoUrl when there is no name 1`] = ` +
+
+
+
+
+
+ +
+ This is the header +
+
+
+`; diff --git a/src/__tests__/ui/box/chrome.test.jsx b/src/__tests__/ui/box/chrome.test.jsx index ad115cba0..2512523b4 100644 --- a/src/__tests__/ui/box/chrome.test.jsx +++ b/src/__tests__/ui/box/chrome.test.jsx @@ -26,7 +26,6 @@ describe('Chrome', () => { beforeEach(() => { Chrome = getComponent(); - Chrome.prototype.getHeaderSize = jest.fn(() => 200); }); it('renders correctly with basic props', () => { diff --git a/src/__tests__/ui/box/header.test.jsx b/src/__tests__/ui/box/header.test.jsx new file mode 100644 index 000000000..2f9bd841f --- /dev/null +++ b/src/__tests__/ui/box/header.test.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { expectComponent } from 'testUtils'; + +const getComponent = () => require('ui/box/header').default; + +describe('Header', () => { + let Header; + + beforeEach(() => { + Header = getComponent(); + }); + + it('renders correctly with basic props', () => { + const props = { + title: 'This is the header', + name: 'Header', + logoUrl: 'some-logo.png', + backgroundUrl: 'some-image.png', + backgroundColor: 'red' + }; + + expectComponent(
).toMatchSnapshot(); + }); + + it('shows the back button when there is a handler', () => { + const props = { + title: 'This is the header', + name: 'Header', + logoUrl: 'some-logo.png', + backgroundUrl: 'some-image.png', + backgroundColor: 'red', + backHandler: () => jest.fn() + }; + + expectComponent(
).toMatchSnapshot(); + }); + + it('shows the logoUrl when there is no name', () => { + const props = { + title: 'This is the header', + backgroundUrl: 'some-image.png', + logoUrl: 'some-logo.png', + backgroundColor: 'red' + }; + + expectComponent(
).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(
, { + createNodeMock: () => ({ clientHeight: 100 }) + }).toMatchSnapshot(); + + expect(spy).toHaveBeenCalledWith('--header-height', '100px'); + }); +}); diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx index e9421095b..ca2d6a7b9 100644 --- a/src/ui/box/chrome.jsx +++ b/src/ui/box/chrome.jsx @@ -84,7 +84,7 @@ const AUXILIARY_ANIMATION_DURATION = 350; export default class Chrome extends React.Component { constructor(props) { super(props); - this.state = { moving: false, reverse: false, headerHeight: 0 }; + this.state = { moving: false, reverse: false }; } componentWillReceiveProps(nextProps) { @@ -145,10 +145,6 @@ export default class Chrome extends React.Component { } } - componentDidMount() { - this.setState({ headerHeight: this.getHeaderSize() }); - } - onWillSlide() { this.setState({ moving: true }); this.sliding = true; @@ -189,19 +185,6 @@ export default class Chrome extends React.Component { } } - // Record the header element so that we can retrieve its size when the - // component renders - setHeaderElement(element) { - this.header = element; - } - - // Get the size (rather than the element itself), as returning - // the element makes this difficult to test (we can't reasonably enforce the size - // as it's not rendered to a screen). - getHeaderSize() { - return this.header ? this.header.getDOMNode().clientHeight : 0; - } - render() { const { avatar, @@ -286,13 +269,9 @@ export default class Chrome extends React.Component { backgroundUrl={backgroundUrl} backgroundColor={primaryColor} logoUrl={logo} - ref={::this.setHeaderElement} /> -
+
diff --git a/src/ui/box/header.jsx b/src/ui/box/header.jsx index c45ae7a45..1782a5621 100644 --- a/src/ui/box/header.jsx +++ b/src/ui/box/header.jsx @@ -6,6 +6,13 @@ import { BackButton } from './button'; // TODO: simplify this mess :) export default class Header extends React.Component { + setHeaderHeightStyle(headerElement) { + if (headerElement) { + const height = headerElement.clientHeight || 0; + document.documentElement.style.setProperty('--header-height', `${height}px`); + } + } + getDOMNode() { return ReactDOM.findDOMNode(this); } @@ -14,7 +21,7 @@ export default class Header extends React.Component { const { backHandler, backgroundColor, backgroundUrl, logoUrl, name, title } = this.props; return ( -
+
{backHandler && }