Skip to content

Commit c8c8e4f

Browse files
paibamboopaibamboo
committed
feat(intl): two things
- add the rest of language data - change test from manually validating classnames and props to checking if components match snapshot
1 parent 9865256 commit c8c8e4f

26 files changed

Lines changed: 634 additions & 99 deletions

‎src/app/components/Header.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {TestHelper} from "../helpers/TestHelper";
2-
import {Header, Styles} from "./Header";
2+
import {Header} from "./Header";
33

44
describe("<Header />", () => {
55

@@ -9,7 +9,7 @@ describe("<Header />", () => {
99
.mount(Header);
1010

1111
it("Renders with correct style", () => {
12-
expect(component.find("nav")).toHaveClassName(Styles.nav);
12+
expect(component).toMatchSnapshot();
1313
});
1414

1515
});

‎src/app/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ const Header = () => (
3333
</nav>
3434
);
3535

36-
export {Header, Styles};
36+
export {Header};

‎src/app/components/RegisterForm.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@ import {Promise} from "es6-promise";
33
import * as React from "react";
44
import {RegisterForm, RegisterReduxForm} from "./RegisterForm";
55
describe("<RegisterForm />", () => {
6-
it("without props", () => {
6+
it("matches snapshot when without props", () => {
77
const component = <RegisterReduxForm />;
88
expect(component).toMatchSnapshot();
99
});
1010

11-
it("when submitting button is disabled", () => {
11+
it("matches snapshot when submitting button is disabled", () => {
1212
const component = <RegisterReduxForm submitting={true} />;
1313
expect(component).toMatchSnapshot();
1414
});
1515

16-
it("when submitting button is enabled", () => {
16+
it("matches snapshot when submitting button is enabled", () => {
1717
const component = <RegisterReduxForm submitting={false} />;
1818
expect(component).toMatchSnapshot();
1919
});
2020

21-
it("when clear button is disabled", () => {
21+
it("matches snapshot when clear button is disabled", () => {
2222
const component = <RegisterReduxForm pristine={true} />;
2323
expect(component).toMatchSnapshot();
2424
});
2525

26-
it("when clear button is enabled", () => {
26+
it("matches snapshot when clear button is enabled", () => {
2727
const component = <RegisterReduxForm pristine={false} submitting={false} />;
2828
expect(component).toMatchSnapshot();
2929
});

‎src/app/components/__snapshots__/Header.test.tsx.snap‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Header /> Renders with correct style 1`] = `
4+
<IntlProvider
5+
locale="en-GB"
6+
messages={
7+
Object {
8+
"about": "About",
9+
"counter": "Counter",
10+
"home": "Home",
11+
"register": "Register",
12+
"stars": "Stars",
13+
}
14+
}
15+
>
16+
<Provider
17+
store={
18+
Object {
19+
"dispatch": [Function],
20+
"getState": [Function],
21+
"replaceReducer": [Function],
22+
"subscribe": [Function],
23+
Symbol(observable): [Function],
24+
}
25+
}
26+
>
27+
<Header>
28+
<nav
29+
className="f8r6aqq"
30+
>
31+
<ul>
32+
<li>
33+
<Link
34+
onlyActiveOnIndex={false}
35+
style={Object {}}
36+
to="/"
37+
>
38+
<a
39+
onClick={[Function]}
40+
style={Object {}}
41+
>
42+
<FormattedMessage
43+
defaultMessage="Home"
44+
id="home"
45+
values={Object {}}
46+
>
47+
<span>
48+
Home
49+
</span>
50+
</FormattedMessage>
51+
</a>
52+
</Link>
53+
</li>
54+
<li>
55+
<Link
56+
onlyActiveOnIndex={false}
57+
style={Object {}}
58+
to="about"
59+
>
60+
<a
61+
onClick={[Function]}
62+
style={Object {}}
63+
>
64+
<FormattedMessage
65+
defaultMessage="About Us"
66+
id="about"
67+
values={Object {}}
68+
>
69+
<span>
70+
About
71+
</span>
72+
</FormattedMessage>
73+
</a>
74+
</Link>
75+
</li>
76+
<li>
77+
<Link
78+
onlyActiveOnIndex={false}
79+
style={Object {}}
80+
to="counter"
81+
>
82+
<a
83+
onClick={[Function]}
84+
style={Object {}}
85+
>
86+
<FormattedMessage
87+
defaultMessage="Counter"
88+
id="counter"
89+
values={Object {}}
90+
>
91+
<span>
92+
Counter
93+
</span>
94+
</FormattedMessage>
95+
</a>
96+
</Link>
97+
</li>
98+
<li>
99+
<Link
100+
onlyActiveOnIndex={false}
101+
style={Object {}}
102+
to="stars"
103+
>
104+
<a
105+
onClick={[Function]}
106+
style={Object {}}
107+
>
108+
<FormattedMessage
109+
defaultMessage="Stars"
110+
id="stars"
111+
values={Object {}}
112+
>
113+
<span>
114+
Stars
115+
</span>
116+
</FormattedMessage>
117+
</a>
118+
</Link>
119+
</li>
120+
<li>
121+
<Link
122+
onlyActiveOnIndex={false}
123+
style={Object {}}
124+
to="register"
125+
>
126+
<a
127+
onClick={[Function]}
128+
style={Object {}}
129+
>
130+
<FormattedMessage
131+
defaultMessage="Register"
132+
id="register"
133+
values={Object {}}
134+
>
135+
<span>
136+
Register
137+
</span>
138+
</FormattedMessage>
139+
</a>
140+
</Link>
141+
</li>
142+
</ul>
143+
</nav>
144+
</Header>
145+
</Provider>
146+
</IntlProvider>
147+
`;

‎src/app/components/__snapshots__/RegisterForm.test.tsx.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<RegisterForm /> when clear button is disabled 1`] = `
3+
exports[`<RegisterForm /> matches snapshot when clear button is disabled 1`] = `
44
<ReduxForm
55
pristine={true}
66
/>
77
`;
88

9-
exports[`<RegisterForm /> when clear button is enabled 1`] = `
9+
exports[`<RegisterForm /> matches snapshot when clear button is enabled 1`] = `
1010
<ReduxForm
1111
pristine={false}
1212
submitting={false}
1313
/>
1414
`;
1515

16-
exports[`<RegisterForm /> when submitting button is disabled 1`] = `
16+
exports[`<RegisterForm /> matches snapshot when submitting button is disabled 1`] = `
1717
<ReduxForm
1818
submitting={true}
1919
/>
2020
`;
2121

22-
exports[`<RegisterForm /> when submitting button is enabled 1`] = `
22+
exports[`<RegisterForm /> matches snapshot when submitting button is enabled 1`] = `
2323
<ReduxForm
2424
submitting={false}
2525
/>
2626
`;
2727

28-
exports[`<RegisterForm /> without props 1`] = `<ReduxForm />`;
28+
exports[`<RegisterForm /> matches snapshot when without props 1`] = `<ReduxForm />`;

‎src/app/containers/AboutPage.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {AboutPage, UnconnectedAbout} from "./AboutPage";
77

88
describe("<AboutPage />", () => {
99
const component = new TestHelper()
10-
.withTranslation({locale: "en-GB", languageData: {"about.us": "About Us", "current.language": "Current Language"}})
10+
.withTranslation({locale: "en-GB", languageData: {"about.us": "About Us", "about.change": "Change Language", "current.language": "Current Language"}})
1111
.mount(AboutPage);
1212

13-
it("renders header with text", () => {
14-
expect(component.find("h4 FormattedMessage")).toHaveProp("id", "about.us");
13+
it("matches snapshot", () => {
14+
expect(component).toMatchSnapshot();
1515
});
1616

1717
it("calls switchLanguage() when button is clicked", () => {

‎src/app/containers/AboutPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class AboutPage extends React.Component<IStateToProps & IDispatchToProps, null>
2020
return (
2121
<div>
2222
<h3><FormattedMessage id="current.language" defaultMessage="Current Language" />: {this.props.locale}</h3>
23-
<button onClick={this.switchLanguage}>Change Language</button>
23+
<button onClick={this.switchLanguage}><FormattedMessage id="about.change" defaultMessage="Change language"/></button>
2424
<h4><FormattedMessage id="about.us" defaultMessage="About Us" /></h4>
2525
</div>
2626
);

‎src/app/containers/App.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {TestHelper} from "../helpers/TestHelper";
2-
import {App, Styles} from "./App";
2+
import {App} from "./App";
33

44
describe("<App />", () => {
55
const component = (new TestHelper())
66
.withState({language: {payload: {locale: "en", languageData: {}}}})
77
.mount(App);
88

9-
it("Renders with correct style", () => {
10-
expect(component.find("section")).toHaveClassName(Styles.container);
9+
it("matches snapshot", () => {
10+
expect(component).toMatchSnapshot();
1111
});
1212

1313
});

‎src/app/containers/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,4 @@ class App extends React.Component<any, any> {
5252
}
5353

5454
const connectedApp = connect((state) => ({languages: state.language}))(App);
55-
export {connectedApp as App, Styles}
55+
export {connectedApp as App}

‎src/app/containers/CounterPage.test.tsx‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,18 @@
11
import {shallow} from "enzyme";
22
import * as React from "react";
3-
import {TestHelper} from "../helpers/TestHelper";
4-
import {IStore} from "../redux/IStore";
53
import {IAction} from "../redux/modules/baseModule";
64
import {DECREMENT, ICounter, INCREMENT} from "../redux/modules/counterModule";
7-
import {CounterPage, UnconnectedCounter} from "./CounterPage";
8-
9-
/** Mock App. State */
10-
const state: Partial<IStore> = {
11-
counter: {
12-
isFetching: false,
13-
payload: {
14-
count: 1
15-
}
16-
}
17-
};
5+
import {UnconnectedCounter} from "./CounterPage";
186

197
describe("<Counter />", () => {
20-
let component;
21-
22-
beforeEach(() => {
23-
component = (new TestHelper()).withState(state).mount(CounterPage);
24-
});
25-
26-
it("renders header", () => {
27-
expect(component.find("h4")).toHaveText("Counter Example");
28-
});
29-
30-
it("renders Increment and Decrement buttons", () => {
31-
expect(component.find("button")).toHaveLength(2);
8+
it("matches snapshot when count > 0", () => {
9+
const component = shallow(<UnconnectedCounter count={10} dispatch={jest.fn()} />);
10+
expect(component).toMatchSnapshot();
3211
});
3312

34-
it("renders counter value", () => {
35-
expect(component.find("p")).toHaveText("1");
13+
it("matches snapshot when count <= 0", () => {
14+
const component = shallow(<UnconnectedCounter count={0} dispatch={jest.fn()} />);
15+
expect(component).toMatchSnapshot();
3616
});
3717

3818
it("calls handleIncrement() when increment button is clicked", () => {

0 commit comments

Comments
 (0)