Skip to content

Commit 0bb9ed4

Browse files
Steve Hobbsjfromaniello
Steve Hobbs
authored and
jfromaniello
committed
Fix header height calculation for large titles (auth0#1859)
* Moved header height calculation to a root CSS property * Added basic tests for Header component * Added test for setting document element
1 parent 8c00cdb commit 0bb9ed4

File tree

8 files changed

+258
-71
lines changed

8 files changed

+258
-71
lines changed

‎css/index.styl

+1
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ loadingSize = 30px
186186

187187
.auth0-lock-content-body-wrapper
188188
padding-top 10px
189+
margin-top: var(--header-height, 100px)
189190

190191
.auth0-lock-close-button, .auth0-lock-back-button
191192
-webkit-box-sizing content-box !important

‎src/__tests__/testUtils.js

+13-21
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'; // eslint-disable-line
22
import renderer from 'react-test-renderer';
33

4-
export const expectComponent = children => {
5-
const component = renderer.create(children);
4+
export const expectComponent = (children, opts) => {
5+
const component = renderer.create(children, opts);
66
return expect(component);
77
};
88

@@ -40,26 +40,18 @@ export const extractPropsFromWrapper = (wrapper, index = 0) =>
4040
export const setURL = (url, options = {}) => {
4141
const parser = document.createElement('a');
4242
parser.href = url;
43-
[
44-
'href',
45-
'protocol',
46-
'host',
47-
'hostname',
48-
'origin',
49-
'port',
50-
'pathname',
51-
'search',
52-
'hash'
53-
].forEach(prop => {
54-
let value = parser[prop];
55-
if (prop === 'origin' && options.noOrigin) {
56-
value = null;
43+
['href', 'protocol', 'host', 'hostname', 'origin', 'port', 'pathname', 'search', 'hash'].forEach(
44+
prop => {
45+
let value = parser[prop];
46+
if (prop === 'origin' && options.noOrigin) {
47+
value = null;
48+
}
49+
Object.defineProperty(window.location, prop, {
50+
value,
51+
writable: true
52+
});
5753
}
58-
Object.defineProperty(window.location, prop, {
59-
value,
60-
writable: true
61-
});
62-
});
54+
);
6355
};
6456

6557
export const expectMockToMatch = ({ mock }, numberOfCalls) => {

‎src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap

-25
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,6 @@ exports[`Chrome can dislay all global messages together 1`] = `
2121
/>
2222
<div
2323
className="auth0-lock-content-body-wrapper"
24-
style={
25-
Object {
26-
"marginTop": 200,
27-
}
28-
}
2924
>
3025
<div>
3126
<div>
@@ -175,11 +170,6 @@ exports[`Chrome renders correctly when there is a global information message 1`]
175170
/>
176171
<div
177172
className="auth0-lock-content-body-wrapper"
178-
style={
179-
Object {
180-
"marginTop": 200,
181-
}
182-
}
183173
>
184174
<div>
185175
<div>
@@ -301,11 +291,6 @@ exports[`Chrome renders correctly when there is a global message 1`] = `
301291
/>
302292
<div
303293
className="auth0-lock-content-body-wrapper"
304-
style={
305-
Object {
306-
"marginTop": 200,
307-
}
308-
}
309294
>
310295
<div>
311296
<div>
@@ -427,11 +412,6 @@ exports[`Chrome renders correctly when there is a global success message 1`] = `
427412
/>
428413
<div
429414
className="auth0-lock-content-body-wrapper"
430-
style={
431-
Object {
432-
"marginTop": 200,
433-
}
434-
}
435415
>
436416
<div>
437417
<div>
@@ -553,11 +533,6 @@ exports[`Chrome renders correctly with basic props 1`] = `
553533
/>
554534
<div
555535
className="auth0-lock-content-body-wrapper"
556-
style={
557-
Object {
558-
"marginTop": 200,
559-
}
560-
}
561536
>
562537
<div>
563538
<div />

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

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Header renders correctly with basic props 1`] = `
4+
<div
5+
className="auth0-lock-header"
6+
>
7+
<div
8+
className="auth0-lock-header-bg auth0-lock-blur-support"
9+
>
10+
<div
11+
className="auth0-lock-header-bg-blur auth0-lock-no-grayscale"
12+
style={
13+
Object {
14+
"backgroundImage": "url('some-image.png')",
15+
}
16+
}
17+
/>
18+
<div
19+
className="auth0-lock-header-bg-solid"
20+
style={
21+
Object {
22+
"backgroundColor": "red",
23+
}
24+
}
25+
/>
26+
</div>
27+
<div
28+
className="auth0-lock-header-welcome"
29+
>
30+
<div
31+
className="auth0-lock-firstname"
32+
title="Header"
33+
>
34+
Header
35+
</div>
36+
</div>
37+
</div>
38+
`;
39+
40+
exports[`Header sets the header size property on the document element 1`] = `
41+
<div
42+
className="auth0-lock-header"
43+
>
44+
<div
45+
className="auth0-lock-header-bg auth0-lock-blur-support"
46+
>
47+
<div
48+
className="auth0-lock-header-bg-blur auth0-lock-no-grayscale"
49+
style={
50+
Object {
51+
"backgroundImage": "url('some-image.png')",
52+
}
53+
}
54+
/>
55+
<div
56+
className="auth0-lock-header-bg-solid"
57+
style={
58+
Object {
59+
"backgroundColor": "red",
60+
}
61+
}
62+
/>
63+
</div>
64+
<div
65+
className="auth0-lock-header-welcome"
66+
>
67+
<div
68+
className="auth0-lock-firstname"
69+
title="Header"
70+
>
71+
Header
72+
</div>
73+
</div>
74+
</div>
75+
`;
76+
77+
exports[`Header shows the back button when there is a handler 1`] = `
78+
<div
79+
className="auth0-lock-header"
80+
>
81+
<span
82+
aria-label="back"
83+
className="auth0-lock-back-button"
84+
dangerouslySetInnerHTML={
85+
Object {
86+
"__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 24 24\\" version=\\"1.0\\" viewBox=\\"0 0 24 24\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <polyline fill=\\"none\\" points=\\"12.5,21 3.5,12 12.5,3 \\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\"></polyline> <line fill=\\"none\\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\" x1=\\"22\\" x2=\\"3.5\\" y1=\\"12\\" y2=\\"12\\"></line> </svg>",
87+
}
88+
}
89+
id="undefined-back-button"
90+
onClick={[Function]}
91+
onKeyPress={[Function]}
92+
role="button"
93+
tabIndex={0}
94+
/>
95+
<div
96+
className="auth0-lock-header-bg auth0-lock-blur-support"
97+
>
98+
<div
99+
className="auth0-lock-header-bg-blur auth0-lock-no-grayscale"
100+
style={
101+
Object {
102+
"backgroundImage": "url('some-image.png')",
103+
}
104+
}
105+
/>
106+
<div
107+
className="auth0-lock-header-bg-solid"
108+
style={
109+
Object {
110+
"backgroundColor": "red",
111+
}
112+
}
113+
/>
114+
</div>
115+
<div
116+
className="auth0-lock-header-welcome"
117+
>
118+
<div
119+
className="auth0-lock-firstname"
120+
title="Header"
121+
>
122+
Header
123+
</div>
124+
</div>
125+
</div>
126+
`;
127+
128+
exports[`Header shows the logoUrl when there is no name 1`] = `
129+
<div
130+
className="auth0-lock-header"
131+
>
132+
<div
133+
className="auth0-lock-header-bg auth0-lock-blur-support"
134+
>
135+
<div
136+
className="auth0-lock-header-bg-blur"
137+
style={
138+
Object {
139+
"backgroundImage": "url('some-image.png')",
140+
}
141+
}
142+
/>
143+
<div
144+
className="auth0-lock-header-bg-solid"
145+
style={
146+
Object {
147+
"backgroundColor": "red",
148+
}
149+
}
150+
/>
151+
</div>
152+
<div
153+
className="auth0-lock-header-welcome"
154+
>
155+
<img
156+
alt=""
157+
className="auth0-lock-header-logo"
158+
src="some-logo.png"
159+
/>
160+
<div
161+
className="auth0-lock-name"
162+
title="This is the header"
163+
>
164+
This is the header
165+
</div>
166+
</div>
167+
</div>
168+
`;

‎src/__tests__/ui/box/chrome.test.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ describe('Chrome', () => {
2626

2727
beforeEach(() => {
2828
Chrome = getComponent();
29-
Chrome.prototype.getHeaderSize = jest.fn(() => 200);
3029
});
3130

3231
it('renders correctly with basic props', () => {

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { expectComponent } from 'testUtils';
3+
4+
const getComponent = () => require('ui/box/header').default;
5+
6+
describe('Header', () => {
7+
let Header;
8+
9+
beforeEach(() => {
10+
Header = getComponent();
11+
});
12+
13+
it('renders correctly with basic props', () => {
14+
const props = {
15+
title: 'This is the header',
16+
name: 'Header',
17+
logoUrl: 'some-logo.png',
18+
backgroundUrl: 'some-image.png',
19+
backgroundColor: 'red'
20+
};
21+
22+
expectComponent(<Header {...props} />).toMatchSnapshot();
23+
});
24+
25+
it('shows the back button when there is a handler', () => {
26+
const props = {
27+
title: 'This is the header',
28+
name: 'Header',
29+
logoUrl: 'some-logo.png',
30+
backgroundUrl: 'some-image.png',
31+
backgroundColor: 'red',
32+
backHandler: () => jest.fn()
33+
};
34+
35+
expectComponent(<Header {...props} />).toMatchSnapshot();
36+
});
37+
38+
it('shows the logoUrl when there is no name', () => {
39+
const props = {
40+
title: 'This is the header',
41+
backgroundUrl: 'some-image.png',
42+
logoUrl: 'some-logo.png',
43+
backgroundColor: 'red'
44+
};
45+
46+
expectComponent(<Header {...props} />).toMatchSnapshot();
47+
});
48+
49+
it('sets the header size property on the document element', () => {
50+
const spy = jest.spyOn(document.documentElement.style, 'setProperty');
51+
52+
const props = {
53+
title: 'This is the header',
54+
name: 'Header',
55+
logoUrl: 'some-logo.png',
56+
backgroundUrl: 'some-image.png',
57+
backgroundColor: 'red'
58+
};
59+
60+
expectComponent(<Header {...props} />, {
61+
createNodeMock: () => ({ clientHeight: 100 })
62+
}).toMatchSnapshot();
63+
64+
expect(spy).toHaveBeenCalledWith('--header-height', '100px');
65+
});
66+
});

0 commit comments

Comments
 (0)