Skip to content

Commit 0e068a2

Browse files
ArmourArmour
committed
Test(frontend): add react snapshot testing support
Closes #2
1 parent da03d7b commit 0e068a2

File tree

70 files changed

+1698
-278
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1698
-278
lines changed

‎.babelrc

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,34 @@
1010
"react-hot-loader/babel"
1111
]
1212
}
13-
}
13+
},
14+
"plugins": [
15+
[
16+
"prismjs",
17+
{
18+
"languages": [
19+
"javascript",
20+
"css",
21+
"markup",
22+
"cpp",
23+
"bash",
24+
"docker",
25+
"go",
26+
"json",
27+
"markdown",
28+
"python",
29+
"jsx",
30+
"tsx",
31+
"scss",
32+
"typescript"
33+
],
34+
"plugins": [
35+
"autolinker",
36+
"command-line"
37+
],
38+
"theme": "default",
39+
"css": true
40+
}
41+
]
42+
]
1443
}

‎__mocks__/fileMock.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default 'test-file-stub';

‎frontend/src/components/Dropdown/__tests__/__snapshots__/dropdown.spec.tsx.snap

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Dropdown should renders correctly 1`] = `
4+
<div>
5+
<ul
6+
className="dropdown-content"
7+
id="id"
8+
>
9+
<li>
10+
<a
11+
href="/dropdown"
12+
onClick={[Function]}
13+
>
14+
dropdown
15+
</a>
16+
</li>
17+
</ul>
18+
,
19+
</div>
20+
`;

‎frontend/src/components/Dropdown/__tests__/dropdown.spec.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import 'materialize-css';
2+
import * as React from 'react';
3+
import { MemoryRouter } from 'react-router';
4+
import * as TestRenderer from 'react-test-renderer';
5+
6+
import { Dropdown } from '../dropdown';
7+
8+
const tMock = (k: string) => k;
9+
const i18nMock: any = {
10+
addResourceBundle: () => { return; },
11+
};
12+
13+
describe('Dropdown', () => {
14+
it('should renders correctly', () => {
15+
const renderer = TestRenderer.create(
16+
<MemoryRouter>
17+
<div>
18+
<Dropdown id='id' dropdownLists={['dropdown']} t={tMock} i18n={i18nMock} />,
19+
</div>
20+
</MemoryRouter>,
21+
);
22+
expect(renderer).toMatchSnapshot();
23+
renderer.unmount();
24+
});
25+
});

‎frontend/src/components/Dropdown/dropdown.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,17 @@ const dropdownConfig: Partial<M.DropdownOptions> = {
1313
coverTrigger: false,
1414
};
1515

16-
class Dropdown extends React.Component<IDropdownProps> {
16+
export class Dropdown extends React.Component<IDropdownProps> {
1717
constructor(props: IDropdownProps) {
1818
super(props);
1919
this.loadI18ns();
2020
}
2121

2222
public loadI18ns() {
2323
const { i18n } = this.props;
24-
for (const key in i18ns) {
25-
if (i18ns.hasOwnProperty(key)) {
26-
i18n.addResourceBundle(key, 'Dropdown', i18ns[key]);
27-
}
28-
}
24+
Object.keys(i18ns).forEach((key) => {
25+
i18n.addResourceBundle(key, 'Dropdown', i18ns[key]);
26+
});
2927
}
3028

3129
public componentDidMount() {

‎frontend/src/components/Footer/__tests__/__snapshots__/footer.spec.tsx.snap

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Footer should renders correctly 1`] = `
4+
<footer
5+
className="page-footer"
6+
>
7+
<div
8+
className="container"
9+
>
10+
<div
11+
className="row"
12+
>
13+
<div
14+
className="col l6 s12"
15+
>
16+
<h5
17+
className="white-text"
18+
>
19+
footer-title
20+
</h5>
21+
<p
22+
className="grey-text text-lighten-4"
23+
>
24+
footer-content
25+
</p>
26+
</div>
27+
<div
28+
className="col l3 offset-l3 s12"
29+
>
30+
<h5
31+
className="white-text"
32+
>
33+
links
34+
</h5>
35+
<ul>
36+
<li>
37+
<a
38+
className="grey-text text-lighten-3"
39+
href="#"
40+
>
41+
link-1
42+
</a>
43+
</li>
44+
<li>
45+
<a
46+
className="grey-text text-lighten-3"
47+
href="#"
48+
>
49+
link-2
50+
</a>
51+
</li>
52+
<li>
53+
<a
54+
className="grey-text text-lighten-3"
55+
href="#"
56+
>
57+
link-3
58+
</a>
59+
</li>
60+
<li>
61+
<a
62+
className="grey-text text-lighten-3"
63+
href="#"
64+
>
65+
link-4
66+
</a>
67+
</li>
68+
</ul>
69+
</div>
70+
</div>
71+
</div>
72+
<div
73+
className="footer-copyright"
74+
>
75+
<div
76+
className="container"
77+
>
78+
© 2017 Copyright
79+
<a
80+
className="grey-text text-lighten-4"
81+
href="https://github.com/Armour"
82+
>
83+
Armour
84+
</a>
85+
<a
86+
className="grey-text text-lighten-4 right"
87+
href="#"
88+
>
89+
more-links
90+
</a>
91+
</div>
92+
</div>
93+
</footer>
94+
`;

‎frontend/src/components/Footer/__tests__/footer.spec.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
import * as TestRenderer from 'react-test-renderer';
3+
4+
import { Footer } from '../footer';
5+
6+
const tMock = (k: string) => k;
7+
const i18nMock: any = {
8+
addResourceBundle: () => { return; },
9+
};
10+
11+
describe('Footer', () => {
12+
it('should renders correctly', () => {
13+
const renderer = TestRenderer.create(
14+
<Footer t={tMock} i18n={i18nMock} />,
15+
);
16+
expect(renderer).toMatchSnapshot();
17+
renderer.unmount();
18+
});
19+
});

‎frontend/src/components/Footer/footer.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,17 @@ import i18ns from './i18n';
55

66
interface IFooterProps extends InjectedI18nProps, InjectedTranslateProps { }
77

8-
class Footer extends React.Component<IFooterProps> {
8+
export class Footer extends React.Component<IFooterProps> {
99
constructor(props: IFooterProps) {
1010
super(props);
1111
this.loadI18ns();
1212
}
1313

1414
public loadI18ns() {
1515
const { i18n } = this.props;
16-
for (const key in i18ns) {
17-
if (i18ns.hasOwnProperty(key)) {
18-
i18n.addResourceBundle(key, 'Footer', i18ns[key]);
19-
}
20-
}
16+
Object.keys(i18ns).forEach((key) => {
17+
i18n.addResourceBundle(key, 'Footer', i18ns[key]);
18+
});
2119
}
2220

2321
public render() {

‎frontend/src/components/Header/__tests__/__snapshots__/header.spec.tsx.snap

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Header should renders correctly 1`] = `
4+
<div>
5+
<div>
6+
<nav>
7+
<div
8+
className="nav-wrapper"
9+
>
10+
<div
11+
className="container"
12+
>
13+
<a
14+
href="/"
15+
onClick={[Function]}
16+
>
17+
<img
18+
alt="logo"
19+
className="logo"
20+
src={
21+
Object {
22+
"default": "test-file-stub",
23+
}
24+
}
25+
/>
26+
</a>
27+
<a
28+
className="sidenav-trigger"
29+
data-target="nav-mobile"
30+
href="#"
31+
>
32+
<i
33+
className="material-icons"
34+
>
35+
menu
36+
</i>
37+
</a>
38+
<ul
39+
className="right hide-on-med-and-down"
40+
id="nav-desktop"
41+
>
42+
<li
43+
className=""
44+
>
45+
<a
46+
href="/react"
47+
onClick={[Function]}
48+
>
49+
react
50+
</a>
51+
</li>
52+
<li
53+
className="active"
54+
>
55+
<a
56+
className="dropdown-button"
57+
data-target="header-dropdown-desktop"
58+
href="#"
59+
>
60+
dropdown
61+
</a>
62+
</li>
63+
<li
64+
className=""
65+
>
66+
<a
67+
href="/404"
68+
onClick={[Function]}
69+
>
70+
notfound
71+
</a>
72+
</li>
73+
<Dropdown
74+
dropdownLists={
75+
Array [
76+
"parallax",
77+
]
78+
}
79+
id="header-dropdown-desktop"
80+
/>
81+
</ul>
82+
</div>
83+
</div>
84+
</nav>
85+
<ul
86+
className="sidenav"
87+
id="nav-mobile"
88+
>
89+
<li
90+
className=""
91+
>
92+
<a
93+
href="/react"
94+
onClick={[Function]}
95+
>
96+
react
97+
</a>
98+
</li>
99+
<li
100+
className="active"
101+
>
102+
<a
103+
className="dropdown-button"
104+
data-target="header-dropdown-mobile"
105+
href="#"
106+
>
107+
dropdown
108+
</a>
109+
</li>
110+
<li
111+
className=""
112+
>
113+
<a
114+
href="/404"
115+
onClick={[Function]}
116+
>
117+
notfound
118+
</a>
119+
</li>
120+
<Dropdown
121+
dropdownLists={
122+
Array [
123+
"parallax",
124+
]
125+
}
126+
id="header-dropdown-mobile"
127+
/>
128+
</ul>
129+
</div>
130+
,
131+
</div>
132+
`;

0 commit comments

Comments
 (0)