Skip to content

Commit 55db0be

Browse files
GregoorGregoor
committed
use jest for snapshot testing localized
1 parent 6715562 commit 55db0be

17 files changed

+1686
-1515
lines changed

‎fluent-react/babel.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
"presets": [
3+
"@babel/preset-react",
4+
["@babel/preset-env", {
5+
"targets": "node >= 8.9.0"
6+
}]
7+
],
8+
"plugins": [
9+
["babel-plugin-transform-rename-import", {
10+
"original": "fluent",
11+
"replacement": "fluent/compat"
12+
}],
13+
"@babel/plugin-proposal-async-generator-functions"
14+
],
15+
};

‎fluent-react/package.json‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,20 @@
5555
"react": "^0.14.9 || ^15.0.0 || ^16.0.0"
5656
},
5757
"devDependencies": {
58-
"@babel/preset-react": "^7.0.0-beta.47",
58+
"@babel/plugin-proposal-async-generator-functions": "^7.2.0",
59+
"@babel/preset-env": "^7.5.5",
60+
"@babel/preset-react": "7.0.0",
61+
"babel-jest": "^24.8.0",
5962
"babel-plugin-transform-rename-import": "^2.2.0",
60-
"enzyme": "^3.3.0",
61-
"enzyme-adapter-react-16": "^1.1.1",
62-
"jsdom": "^11.12.0",
63+
"jest": "^24.8.0",
64+
"prettier": "^1.18.2",
6365
"react": "^16.2.0",
6466
"react-dom": "^16.2.0",
65-
"react-test-renderer": "^16.8.6",
66-
"sinon": "^4.2.2"
67+
"react-test-renderer": "^16.8.6"
68+
},
69+
"jest": {
70+
"transformIgnorePatterns": [
71+
"node_modules/(?!(@fluent/sequence)/)"
72+
]
6773
}
6874
}

‎fluent-react/src/localized.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function toArguments(props) {
5252
* source code.
5353
*/
5454
function Localized(props) {
55-
const { id, attrs, children: elem = null } = props;
55+
const { id, attrs, children: child = null } = props;
5656
const { l10n, parseMarkup } = useContext(FluentContext);
5757

5858
if (l10n == null) {
@@ -80,7 +80,7 @@ function Localized(props) {
8080
}
8181

8282
const msg = bundle.getMessage(id);
83-
const [args, elems] = toArguments(this.props);
83+
const [args, elems] = toArguments(props);
8484
let errors = [];
8585

8686
// Check if the child inside <Localized> is a valid element -- if not, then

‎fluent-react/src/provider.js‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CachedSyncIterable } from "cached-iterable";
22
import { createElement, useMemo } from "react";
33
import PropTypes from "prop-types";
4-
import { mapBundleSync } from "fluent-sequence";
4+
import { mapBundleSync } from "@fluent/sequence";
55
import FluentContext from "./context";
66
import createParseMarkup from "./markup";
77

@@ -32,52 +32,56 @@ export default function LocalizationProvider(props) {
3232
throw new Error("The bundles prop must be an iterable.");
3333
}
3434

35-
const bundles = useMemo(
36-
() => CachedSyncIterable.from(props.bundles),
37-
[props.bundles]
38-
);
39-
const parseMarkup = useMemo(
40-
() => props.parseMarkup || createParseMarkup(),
41-
[props.parseMarkup]
42-
);
35+
const bundles = useMemo(() => CachedSyncIterable.from(props.bundles), [
36+
props.bundles
37+
]);
38+
const parseMarkup = useMemo(() => props.parseMarkup || createParseMarkup(), [
39+
props.parseMarkup
40+
]);
4341
const value = useMemo(
44-
() => ({
45-
l10n: {
42+
() => {
43+
const l10n = {
4644
getBundle: id => mapBundleSync(bundles, id),
4745
getString(id, args, fallback) {
48-
const bundle = mapBundleSync(bundles, id);
46+
const bundle = l10n.getBundle(id);
4947

5048
if (bundle) {
5149
const msg = bundle.getMessage(id);
5250
if (msg && msg.value) {
5351
let errors = [];
5452
let value = bundle.formatPattern(msg.value, args, errors);
5553
for (let error of errors) {
56-
this.reportError(error);
54+
l10n.reportError(error);
5755
}
5856
return value;
5957
}
6058
}
6159

6260
return fallback || id;
61+
},
62+
// XXX Control this via a prop passed to the LocalizationProvider.
63+
// See https://github.com/projectfluent/fluent.js/issues/411.
64+
reportError(error) {
65+
/* global console */
66+
// eslint-disable-next-line no-console
67+
console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
6368
}
64-
},
65-
parseMarkup
66-
}),
69+
};
70+
return {
71+
l10n,
72+
parseMarkup
73+
};
74+
},
6775
[bundles, parseMarkup]
6876
);
6977

70-
return createElement(
71-
FluentContext.Provider,
72-
{value},
73-
props.children
74-
);
78+
return createElement(FluentContext.Provider, { value }, props.children);
7579
}
7680

7781
LocalizationProvider.propTypes = {
7882
children: PropTypes.element.isRequired,
7983
bundles: isIterable,
80-
parseMarkup: PropTypes.func,
84+
parseMarkup: PropTypes.func
8185
};
8286

8387
function isIterable(props, propName, componentName) {

‎fluent-react/test/exports_test.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as FluentReact from '../src/index';
33
import LocalizationProvider from '../src/provider';
44
import Localized from '../src/localized';
55
import withLocalization from '../src/with_localization';
6-
import ReactLocalization, { isReactLocalization } from '../src/localization';
76

87
suite('Exports', () => {
98
test('LocalizationProvider', () => {
@@ -21,8 +20,4 @@ suite('Exports', () => {
2120
test('ReactLocalization', () => {
2221
assert.strictEqual(FluentReact.ReactLocalization, ReactLocalization);
2322
});
24-
25-
test('isReactLocalization', () => {
26-
assert.strictEqual(FluentReact.isReactLocalization, isReactLocalization);
27-
});
2823
});

‎fluent-react/test/index.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎fluent-react/test/localized_change.test.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import TestRenderer from "react-test-renderer";
3+
import { FluentBundle, FluentResource } from "../../fluent-bundle/src";
4+
import { LocalizationProvider, Localized } from "../src/index";
5+
6+
test("relocalizes", () => {
7+
const Root = ({ bundle }) => (
8+
<LocalizationProvider bundles={[bundle]}>
9+
<Localized id="foo">
10+
<div />
11+
</Localized>
12+
</LocalizationProvider>
13+
);
14+
15+
const bundle1 = new FluentBundle();
16+
bundle1.addResource(new FluentResource(`
17+
foo = FOO
18+
`));
19+
const renderer = TestRenderer.create(<Root bundle={bundle1} />);
20+
expect(renderer.toJSON()).toMatchInlineSnapshot(`
21+
<div>
22+
FOO
23+
</div>
24+
`);
25+
26+
const bundle2 = new FluentBundle();
27+
bundle2.addResource(new FluentResource(`
28+
foo = BAR
29+
`));
30+
renderer.update(<Root bundle={bundle2} />);
31+
expect(renderer.toJSON()).toMatchInlineSnapshot(`
32+
<div>
33+
BAR
34+
</div>
35+
`);
36+
});

‎fluent-react/test/localized_change_test.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎fluent-react/test/localized_fallback.test.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import TestRenderer from "react-test-renderer";
3+
import { FluentBundle, FluentResource } from "../../fluent-bundle/src";
4+
import { LocalizationProvider, Localized } from "../src/index";
5+
6+
test("uses message from 1st bundle", () => {
7+
const bundle1 = new FluentBundle();
8+
9+
bundle1.addResource(new FluentResource(`
10+
foo = FOO
11+
`));
12+
13+
const renderer = TestRenderer.create(
14+
<LocalizationProvider bundles={[bundle1]}>
15+
<Localized id="foo">
16+
<div>Bar</div>
17+
</Localized>
18+
</LocalizationProvider>
19+
);
20+
21+
expect(renderer.toJSON()).toMatchInlineSnapshot(`
22+
<div>
23+
FOO
24+
</div>
25+
`);
26+
});
27+
28+
test("uses message from the 2nd bundle", function() {
29+
const bundle1 = new FluentBundle();
30+
const bundle2 = new FluentBundle();
31+
32+
bundle1.addResource(new FluentResource(`
33+
not-foo = NOT FOO
34+
`));
35+
bundle2.addResource(new FluentResource(`
36+
foo = FOO
37+
`));
38+
39+
const renderer = TestRenderer.create(
40+
<LocalizationProvider bundles={[bundle1, bundle2]}>
41+
<Localized id="foo">
42+
<div>Bar</div>
43+
</Localized>
44+
</LocalizationProvider>
45+
);
46+
47+
expect(renderer.toJSON()).toMatchInlineSnapshot(`
48+
<div>
49+
FOO
50+
</div>
51+
`);
52+
});
53+
54+
test("falls back back for missing message", function() {
55+
const bundle1 = new FluentBundle();
56+
57+
bundle1.addResource(new FluentResource(`
58+
not-foo = NOT FOO
59+
`));
60+
61+
const renderer = TestRenderer.create(
62+
<LocalizationProvider bundles={[bundle1]}>
63+
<Localized id="foo">
64+
<div>Bar</div>
65+
</Localized>
66+
</LocalizationProvider>
67+
);
68+
69+
expect(renderer.toJSON()).toMatchInlineSnapshot(`
70+
<div>
71+
Bar
72+
</div>
73+
`);
74+
});

0 commit comments

Comments
 (0)