Bug 1591307: Localize CompatibilityApp component. r=jdescottes,flod

Differential Revision: https://phabricator.services.mozilla.com/D79804
This commit is contained in:
Daisuke Akatsuka 2020-06-18 07:27:50 +00:00
parent 1e1c4fc175
commit 1c09f71859
4 changed files with 29 additions and 11 deletions

View File

@ -12,6 +12,8 @@ const {
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Types = require("devtools/client/inspector/compatibility/types");
const Accordion = createFactory(
@ -30,6 +32,8 @@ const Settings = createFactory(
class CompatibilityApp extends PureComponent {
static get propTypes() {
return {
// getString prop is injected by the withLocalization wrapper
getString: PropTypes.func.isRequired,
isSettingsVisibile: PropTypes.bool.isRequired,
isTopLevelTargetProcessing: PropTypes.bool.isRequired,
selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
@ -44,6 +48,7 @@ class CompatibilityApp extends PureComponent {
render() {
const {
getString,
isSettingsVisibile,
isTopLevelTargetProcessing,
selectedNodeIssues,
@ -88,13 +93,13 @@ class CompatibilityApp extends PureComponent {
items: [
{
id: "compatibility-app--selected-element-pane",
header: "Selected Element",
header: getString("compatibility-selected-element-header"),
component: selectedNodeIssuePane,
opened: true,
},
{
id: "compatibility-app--all-elements-pane",
header: "All Issues",
header: getString("compatibility-all-elements-header"),
component: [topLevelTargetIssuePane, throbber],
opened: true,
},
@ -117,4 +122,6 @@ const mapStateToProps = state => {
topLevelTargetIssues: state.compatibility.topLevelTargetIssues,
};
};
module.exports = connect(mapStateToProps)(CompatibilityApp);
module.exports = FluentReact.withLocalization(
connect(mapStateToProps)(CompatibilityApp)
);

View File

@ -15,7 +15,7 @@ exports[`CompatibilityApp component renders with settings 1`] = `
"component": <IssuePane
issues={Array []}
/>,
"header": "Selected Element",
"header": "compatibility-selected-element-header",
"id": "compatibility-app--selected-element-pane",
"opened": true,
},
@ -26,7 +26,7 @@ exports[`CompatibilityApp component renders with settings 1`] = `
/>,
null,
],
"header": "All Issues",
"header": "compatibility-all-elements-header",
"id": "compatibility-app--all-elements-pane",
"opened": true,
},
@ -56,7 +56,7 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
"component": <IssuePane
issues={Array []}
/>,
"header": "Selected Element",
"header": "compatibility-selected-element-header",
"id": "compatibility-app--selected-element-pane",
"opened": true,
},
@ -67,7 +67,7 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
/>,
null,
],
"header": "All Issues",
"header": "compatibility-all-elements-header",
"id": "compatibility-app--all-elements-pane",
"opened": true,
},

View File

@ -25,8 +25,11 @@ describe("CompatibilityApp component", () => {
topLevelTargetIssues: [],
},
});
const wrapper = shallow(CompatibilityApp({ store })).dive();
expect(wrapper).toMatchSnapshot();
const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
const connectWrapper = withLocalizationWrapper.dive();
const targetComponent = connectWrapper.dive();
expect(targetComponent).toMatchSnapshot();
});
it("renders with settings", () => {
@ -38,7 +41,10 @@ describe("CompatibilityApp component", () => {
topLevelTargetIssues: [],
},
});
const wrapper = shallow(CompatibilityApp({ store })).dive();
expect(wrapper).toMatchSnapshot();
const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
const connectWrapper = withLocalizationWrapper.dive();
const targetComponent = connectWrapper.dive();
expect(targetComponent).toMatchSnapshot();
});
});

View File

@ -1,3 +1,8 @@
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
## Messages used as headers in the main pane
compatibility-selected-element-header = Selected Element
compatibility-all-elements-header = All Issues