Skip to content

Commit 093609a

Browse files
jamuhljamuhl
committed
add tests for hooks
1 parent 32e02b2 commit 093609a

13 files changed

+734
-36
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
"prettier": "1.14.3",
6666
"prettier-eslint": "8.8.2",
6767
"raf": "^3.4.0",
68-
"react": "^16.5.2",
69-
"react-dom": "^16.5.2",
68+
"react": "16.7.0-alpha.2",
69+
"react-dom": "16.7.0-alpha.2",
7070
"rimraf": "2.6.2",
7171
"rollup": "0.66.2",
7272
"rollup-plugin-babel": "^4.0.3",

‎src/hooks/context.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
let defaultOptions = {
2-
wait: false,
32
bindI18n: 'languageChanged',
43
transEmptyNodeValue: '',
54
};

‎src/hooks/withTranslation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useTranslation } from './useTranslation';
44
export function withTranslation(ns) {
55
return function Extend(WrappedComponent) {
66
function Wrapper(props) {
7-
const [t, i18n] = useTranslation(ns);
7+
const [t, i18n] = useTranslation(ns, props);
88

99
return React.createElement(WrappedComponent, {
1010
...props,

‎test/hooks.trans.render.spec.js‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
import React from 'react';
2+
import { shallow, render, mount } from 'enzyme';
3+
import ifReact from 'enzyme-adapter-react-helper/build/ifReact';
4+
import i18n from './i18n';
5+
import { withTranslation } from '../src/hooks/withTranslation';
6+
import { Trans } from '../src/hooks/Trans';
7+
8+
9+
function Link({ to, children }) {
10+
return <a href={to}>{children}</a>;
11+
}
12+
13+
describe('trans simple', () => {
14+
const TestElement = ({ t, parent }) => {
15+
const count = 10;
16+
const name = 'Jan';
17+
return (
18+
<Trans i18nKey="transTest1" parent={parent}>
19+
Open <Link to="/msgs">here</Link>.
20+
</Trans>
21+
);
22+
};
23+
24+
it('should render correct content', () => {
25+
const wrapper = mount(<TestElement />);
26+
// console.log(wrapper.debug());
27+
expect(
28+
wrapper.contains(
29+
<div>
30+
Go <Link to="/msgs">there</Link>.
31+
</div>
32+
)
33+
).toBe(true);
34+
});
35+
36+
// ifReact('>= 16', describe, describe.skip)(
37+
// 'trans simple - setting back default behaviour of no parent',
38+
// () => {
39+
// // we set in ./i18n react.defaultTransParent so all tests run backwards compatible
40+
// // and this tests new default bahaviour of just returning children
41+
// const TestElement = ({ t, parent }) => {
42+
// const count = 10;
43+
// const name = 'Jan';
44+
// return (
45+
// <Trans i18nKey="transTest1_noParent" parent={false}>
46+
// <span>
47+
// Open <Link to="/msgs">here</Link>.
48+
// </span>
49+
// </Trans>
50+
// );
51+
// };
52+
53+
// it('should render correct content', () => {
54+
// const wrapper = mount(<TestElement />);
55+
// // console.log(wrapper.debug());
56+
// expect(
57+
// wrapper.contains(
58+
// <span>
59+
// Go <Link to="/msgs">there</Link>.
60+
// </span>
61+
// )
62+
// ).toBe(true);
63+
// });
64+
// }
65+
// );
66+
67+
it('can use a different parent element', () => {
68+
const wrapper = mount(<TestElement parent="span" />);
69+
expect(
70+
wrapper.contains(
71+
<span>
72+
Go <Link to="/msgs">there</Link>.
73+
</span>
74+
)
75+
).toBe(true);
76+
});
77+
});
78+
79+
describe('trans simple using ns prop', () => {
80+
const TestElement = ({ t, parent }) => (
81+
<Trans i18nKey="transTest1" ns="other" parent={parent}>
82+
Open <Link to="/msgs">here</Link>.
83+
</Trans>
84+
);
85+
86+
it('should render correct content', () => {
87+
const wrapper = mount(<TestElement />);
88+
// console.log(wrapper.debug());
89+
expect(
90+
wrapper.contains(
91+
<div>
92+
Another go <Link to="/msgs">there</Link>.
93+
</div>
94+
)
95+
).toBe(true);
96+
});
97+
});
98+
99+
describe('trans simple with custom html tag', () => {
100+
const TestElement = ({ t, parent }) => (
101+
<Trans i18nKey="transTest1_customHtml" parent={parent}>
102+
Open <Link to="/msgs">here</Link>.
103+
</Trans>
104+
);
105+
106+
it('should skip custom html tags', () => {
107+
const wrapper = mount(<TestElement />);
108+
// console.log(wrapper.debug());
109+
expect(
110+
wrapper.contains(
111+
<div>
112+
Go <Link to="/msgs">there</Link>.
113+
</div>
114+
)
115+
).toBe(true);
116+
});
117+
});
118+
119+
describe('trans testTransKey1 singular', () => {
120+
const TestElement = ({ t }) => {
121+
const numOfItems = 1;
122+
return (
123+
<Trans i18nKey="testTransKey1" count={numOfItems}>
124+
{{ numOfItems }} items matched.
125+
</Trans>
126+
);
127+
};
128+
129+
it('should render correct content', () => {
130+
const wrapper = mount(<TestElement />);
131+
// console.log(wrapper.debug());
132+
expect(wrapper.contains(<div>1 item matched.</div>)).toBe(true);
133+
});
134+
});
135+
136+
describe('trans testTransKey1 plural', () => {
137+
const TestElement = ({ t }) => {
138+
const numOfItems = 10;
139+
return (
140+
<Trans i18nKey="testTransKey1" count={numOfItems}>
141+
{{ numOfItems }} items matched.
142+
</Trans>
143+
);
144+
};
145+
146+
it('should render correct content', () => {
147+
const wrapper = mount(<TestElement />);
148+
// console.log(wrapper.debug());
149+
expect(wrapper.contains(<div>10 items matched.</div>)).toBe(true);
150+
});
151+
});
152+
153+
describe('trans testTransKey2', () => {
154+
const TestElement = ({ t }) => {
155+
const numOfItems = 10;
156+
return (
157+
<Trans i18nKey="testTransKey2" count={numOfItems}>
158+
<span className="matchCount">{{ numOfItems }}</span> items matched.
159+
</Trans>
160+
);
161+
};
162+
163+
it('should render correct content', () => {
164+
const wrapper = mount(<TestElement />);
165+
// console.log(wrapper.debug());
166+
expect(
167+
wrapper.contains(
168+
<div>
169+
<span className="matchCount">10</span> items matched.
170+
</div>
171+
)
172+
).toBe(true);
173+
});
174+
});
175+
176+
describe('trans testTransKey3', () => {
177+
const TestElement = ({ t }) => {
178+
const numOfItems = 10;
179+
return (
180+
<Trans i18nKey="testTransKey3" count={numOfItems}>
181+
Result: <span className="matchCount">{{ numOfItems }}</span> items matched.
182+
</Trans>
183+
);
184+
};
185+
186+
it('should render correct content', () => {
187+
const wrapper = mount(<TestElement />);
188+
// console.log(wrapper.debug());
189+
expect(
190+
wrapper.contains(
191+
<div>
192+
Result: <span className="matchCount">10</span> items matched.
193+
</div>
194+
)
195+
).toBe(true);
196+
});
197+
});
198+
199+
describe('trans complex', () => {
200+
const TestElement = ({ t }) => {
201+
const count = 10;
202+
const name = 'Jan';
203+
// prettier-ignore
204+
return (
205+
<Trans i18nKey="transTest2" count={count}>
206+
Hello <strong>{{ name }}</strong>, you have {{ count }} message. Open <Link to="/msgs">here</Link>.
207+
</Trans>
208+
);
209+
};
210+
211+
it('should render correct content', () => {
212+
const wrapper = mount(<TestElement />);
213+
// console.warn(wrapper.debug());
214+
expect(
215+
wrapper.contains(
216+
<div>
217+
Hello <strong>Jan</strong>, you have 10 messages. Open <Link to="/msgs">here</Link>.
218+
</div>
219+
)
220+
).toBe(true);
221+
});
222+
});
223+
224+
describe('trans complex v2 no extra pseudo elements for interpolation', () => {
225+
const TestElement = ({ t }) => {
226+
const count = 10;
227+
const name = 'Jan';
228+
// prettier-ignore
229+
return (
230+
<Trans i18nKey="transTest2InV2" count={count}>
231+
Hello <strong>{{ name }}</strong>, you have {{ count }} message. Open <Link to="/msgs">here</Link>.
232+
</Trans>
233+
);
234+
};
235+
236+
it('should render correct content', () => {
237+
const wrapper = mount(<TestElement />);
238+
// console.warn(wrapper.debug());
239+
expect(
240+
wrapper.contains(
241+
<div>
242+
Hello <strong>Jan</strong>, you have 10 messages. Open <Link to="/msgs">here</Link>.
243+
</div>
244+
)
245+
).toBe(true);
246+
});
247+
});
248+
249+
describe('trans with t as prop', () => {
250+
const TestElement = ({ t, cb }) => {
251+
const customT = (...args) => {
252+
if (cb) cb();
253+
return t(...args);
254+
};
255+
return (
256+
<Trans i18nKey="transTest1" t={customT}>
257+
Open <Link to="/msgs">here</Link>.
258+
</Trans>
259+
);
260+
};
261+
262+
it('should use props t', () => {
263+
let usedCustomT = false;
264+
const cb = () => {
265+
usedCustomT = true;
266+
};
267+
268+
const HocElement = withTranslation(['translation'], {})(TestElement);
269+
270+
mount(<HocElement cb={cb} />);
271+
expect(usedCustomT).toBe(true);
272+
});
273+
274+
it('should not pass t to HTML element', () => {
275+
const HocElement = withTranslation(['translation'], {})(TestElement);
276+
277+
const wrapper = mount(<HocElement i18n={i18n} />);
278+
expect(
279+
wrapper.contains(
280+
<div>
281+
Go <Link to="/msgs">there</Link>.
282+
</div>
283+
)
284+
).toBe(true);
285+
});
286+
});
287+
288+
describe('trans with empty content', () => {
289+
const TestElement = () => <Trans />;
290+
it('should render an empty string', () => {
291+
const wrapper = mount(<TestElement />);
292+
expect(wrapper.contains(<div />)).toBe(true);
293+
});
294+
});
295+
296+
describe('trans with only content from translation file - no children', () => {
297+
const TestElement = () => <Trans i18nKey="key1" />;
298+
it('should render translated string', () => {
299+
const wrapper = mount(<TestElement />);
300+
expect(wrapper.contains(<div>test</div>)).toBe(true);
301+
});
302+
});
303+
304+
describe('trans using no children but props - icu case', () => {
305+
const TestElement = () => (
306+
<Trans
307+
defaults="hello <0>{{what}}</0>"
308+
values={{ what: 'world' }}
309+
components={[<strong>univers</strong>]}
310+
/>
311+
);
312+
it('should render translated string', () => {
313+
const wrapper = mount(<TestElement />);
314+
// console.log(wrapper.debug());
315+
expect(
316+
wrapper.contains(
317+
<div>
318+
hello <strong>world</strong>
319+
</div>
320+
)
321+
).toBe(true);
322+
});
323+
});
324+
325+
describe('trans using no children but props - nested case', () => {
326+
const TestElement = () => (
327+
<Trans
328+
defaults="<0>hello <1></1> {{what}}</0>"
329+
values={{ what: 'world' }}
330+
components={[
331+
<span>
332+
placeholder
333+
<br />
334+
</span>,
335+
]}
336+
/>
337+
);
338+
it('should render translated string', () => {
339+
const wrapper = mount(<TestElement />);
340+
// console.log(wrapper.debug());
341+
expect(
342+
wrapper.contains(
343+
<span>
344+
hello <br /> world
345+
</span>
346+
)
347+
).toBe(true);
348+
});
349+
});
350+
351+
describe('trans should not break on invalid node from translations', () => {
352+
const TestElement = () => <Trans i18nKey="testInvalidHtml" />;
353+
it('should render translated string', () => {
354+
const wrapper = mount(<TestElement />);
355+
// console.log(wrapper.debug());
356+
expect(wrapper.contains(<div>&lt;hello</div>)).toBe(true);
357+
});
358+
});
359+
360+
describe('trans should not break on invalid node from translations - part2', () => {
361+
const TestElement = () => <Trans i18nKey="testInvalidHtml2" />;
362+
it('should render translated string', () => {
363+
const wrapper = mount(<TestElement />);
364+
// console.log(wrapper.debug());
365+
expect(wrapper.contains(<div>&lt;hello&gt;</div>)).toBe(true);
366+
});
367+
});

0 commit comments

Comments
 (0)