Skip to content

Commit 45ec0bc

Browse files
author
Steve Hobbs
committed
Added basic tests for Header component
1 parent 75b7e66 commit 45ec0bc

File tree

3 files changed

+179
-2
lines changed

3 files changed

+179
-2
lines changed

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

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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 shows the back button when there is a handler 1`] = `
41+
<div
42+
className="auth0-lock-header"
43+
>
44+
<span
45+
aria-label="back"
46+
className="auth0-lock-back-button"
47+
dangerouslySetInnerHTML={
48+
Object {
49+
"__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>",
50+
}
51+
}
52+
id="undefined-back-button"
53+
onClick={[Function]}
54+
onKeyPress={[Function]}
55+
role="button"
56+
tabIndex={0}
57+
/>
58+
<div
59+
className="auth0-lock-header-bg auth0-lock-blur-support"
60+
>
61+
<div
62+
className="auth0-lock-header-bg-blur auth0-lock-no-grayscale"
63+
style={
64+
Object {
65+
"backgroundImage": "url('some-image.png')",
66+
}
67+
}
68+
/>
69+
<div
70+
className="auth0-lock-header-bg-solid"
71+
style={
72+
Object {
73+
"backgroundColor": "red",
74+
}
75+
}
76+
/>
77+
</div>
78+
<div
79+
className="auth0-lock-header-welcome"
80+
>
81+
<div
82+
className="auth0-lock-firstname"
83+
title="Header"
84+
>
85+
Header
86+
</div>
87+
</div>
88+
</div>
89+
`;
90+
91+
exports[`Header shows the logoUrl when there is no name 1`] = `
92+
<div
93+
className="auth0-lock-header"
94+
>
95+
<div
96+
className="auth0-lock-header-bg auth0-lock-blur-support"
97+
>
98+
<div
99+
className="auth0-lock-header-bg-blur"
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+
<img
119+
alt=""
120+
className="auth0-lock-header-logo"
121+
src="some-logo.png"
122+
/>
123+
<div
124+
className="auth0-lock-name"
125+
title="This is the header"
126+
>
127+
This is the header
128+
</div>
129+
</div>
130+
</div>
131+
`;

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

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
});

‎src/ui/box/header.jsx

-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import { BackButton } from './button';
77

88
export default class Header extends React.Component {
99
setHeaderHeightStyle(headerElement) {
10-
console.log(headerElement);
11-
1210
if (headerElement) {
1311
const height = headerElement.clientHeight || 0;
1412
document.documentElement.style.setProperty('--header-height', `${height}px`);

0 commit comments

Comments
 (0)