From 57fd7ba1accbf2e95e0f9b8d4cacf6e6978bb48e Mon Sep 17 00:00:00 2001 From: adamjmcgrath Date: Tue, 26 May 2020 10:30:12 +0100 Subject: [PATCH] Header height not updated when Lock dialog is closed and reopened --- .../ui/box/__snapshots__/chrome.test.jsx.snap | 18 +++++++++--------- src/__tests__/ui/box/chrome.test.jsx | 10 ++++++---- src/ui/box/chrome.jsx | 2 ++ src/ui/box/container.jsx | 2 +- src/ui/box/multisize_slide.js | 1 + 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap index 4cdeab346..f87b77bf1 100644 --- a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap +++ b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap @@ -23,7 +23,7 @@ exports[`Chrome can dislay all global messages together 1`] = ` className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -182,7 +182,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -298,7 +298,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 200, + "marginTop": 250, } } > @@ -414,7 +414,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -530,7 +530,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 200, + "marginTop": 250, } } > @@ -646,7 +646,7 @@ exports[`Chrome renders correctly when there is a global information message 1`] className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -777,7 +777,7 @@ exports[`Chrome renders correctly when there is a global message 1`] = ` className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -908,7 +908,7 @@ exports[`Chrome renders correctly when there is a global success message 1`] = ` className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > @@ -1039,7 +1039,7 @@ exports[`Chrome renders correctly with basic props 1`] = ` className="auth0-lock-content-body-wrapper" style={ Object { - "marginTop": 0, + "marginTop": 200, } } > diff --git a/src/__tests__/ui/box/chrome.test.jsx b/src/__tests__/ui/box/chrome.test.jsx index 14a1413f2..78788f623 100644 --- a/src/__tests__/ui/box/chrome.test.jsx +++ b/src/__tests__/ui/box/chrome.test.jsx @@ -59,12 +59,13 @@ describe('Chrome', () => { const component = create(); const instance = component.getInstance(); - expect(instance.state.headerHeight).toBe(0); + expect(instance.state.headerHeight).toBe(200); expect(component).toMatchSnapshot(); + Chrome.prototype.getHeaderSize.mockReturnValue(250); triggerEvent('signin ready'); - expect(instance.state.headerHeight).toBe(200); + expect(instance.state.headerHeight).toBe(250); expect(component).toMatchSnapshot(); }); @@ -72,12 +73,13 @@ describe('Chrome', () => { const component = create(); const instance = component.getInstance(); - expect(instance.state.headerHeight).toBe(0); + expect(instance.state.headerHeight).toBe(200); expect(component).toMatchSnapshot(); + Chrome.prototype.getHeaderSize.mockReturnValue(250); triggerEvent('signup ready'); - expect(instance.state.headerHeight).toBe(200); + expect(instance.state.headerHeight).toBe(250); expect(component).toMatchSnapshot(); }); diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx index 1ade990d3..1e08c782c 100644 --- a/src/ui/box/chrome.jsx +++ b/src/ui/box/chrome.jsx @@ -87,6 +87,7 @@ export default class Chrome extends React.Component { this.state = { moving: false, reverse: false, headerHeight: 0 }; } + // eslint-disable-next-line react/no-deprecated componentWillReceiveProps(nextProps) { const { auxiliaryPane, showSubmitButton } = this.props; const { delayingShowSubmitButton } = this.state; @@ -151,6 +152,7 @@ export default class Chrome extends React.Component { l.handleEvent(m, 'signup ready', fn); l.handleEvent(m, 'signin ready', fn); + fn(); } onWillSlide() { diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx index 899f73be0..9d9a7b05e 100644 --- a/src/ui/box/container.jsx +++ b/src/ui/box/container.jsx @@ -31,7 +31,7 @@ const badgeSvg = ( const BottomBadge = ({ link }) => ( - + Protected with {badgeSvg} diff --git a/src/ui/box/multisize_slide.js b/src/ui/box/multisize_slide.js index f76a9c941..9f2b1f676 100644 --- a/src/ui/box/multisize_slide.js +++ b/src/ui/box/multisize_slide.js @@ -9,6 +9,7 @@ export default class Slider extends React.Component { this.state = { children: { current: props.children } }; } + // eslint-disable-next-line react/no-deprecated componentWillReceiveProps(nextProps) { // TODO: take a prop to identify what are we rendering instead of // infering it from children keys so we can accept more than one