Bug 1563127 - Fixing invalid JSON from manual string injection (#5149)

content-src/components/Card/Card.jsx

@@ -246,7 +246,7 @@ export class _Card extends React.PureComponent {
       </a>
       {!props.placeholder && <button aria-haspopup="true"
         data-l10n-id="newtab-menu-content-tooltip"
-        data-l10n-args={`{ "title": "${title}" }`}
+        data-l10n-args={JSON.stringify({title})}
         className="context-menu-button icon"
         onClick={this.onMenuButtonClick} />}
       {isContextMenuOpen &&

content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx

@@ -57,7 +57,7 @@ export class DSLinkMenu extends React.PureComponent {
               aria-haspopup="true"
               className="context-menu-button icon"
               data-l10n-id="newtab-menu-content-tooltip"
-              data-l10n-args={`{ "title": "${title}" }`}
+              data-l10n-args={JSON.stringify({title})}
               onClick={this.onMenuButtonClick} />
       {isContextMenuOpen &&
         <LinkMenu

content-src/components/TopSites/TopSite.jsx

@@ -283,7 +283,7 @@ export class TopSite extends React.PureComponent {
           <button aria-haspopup="true"
             className="context-menu-button icon"
             data-l10n-id="newtab-menu-content-tooltip"
-            data-l10n-args={`{ "title": "${title}" }`}
+            data-l10n-args={JSON.stringify({title})}
             onClick={this.onMenuButtonClick} />
           {isContextMenuOpen &&
             <LinkMenu

test/unit/content-src/components/Card.test.jsx

@@ -111,6 +111,15 @@ describe("<Card>", () => {
     assert.isTrue(context.childAt(1).hasClass("card-context-label"));
     assert.equal(context.childAt(1).text(), linkWithCustomContext.context);
   });
+  it("should parse args for fluent correctly", () => {
+    const title = '"fluent"';
+    const link = {...DEFAULT_PROPS.link, title};
+
+    wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+    let button = wrapper.find("button[data-l10n-id='newtab-menu-content-tooltip']");
+
+    assert.equal(button.prop("data-l10n-args"), JSON.stringify({title}));
+  });
   it("should have .active class, on card-outer if context menu is open", () => {
     const button = wrapper.find(".context-menu-button");
     assert.isFalse(wrapper.find(".card-outer").hasClass("active"));

test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx

@@ -67,6 +67,14 @@ describe("<DSLinkMenu>", () => {
       await new Promise(r => requestAnimationFrame(r));
       assert.calledOnce(add);
     });
+
+    it("should parse args for fluent correctly ", () => {
+      const title = '"fluent"'
+      wrapper = shallow(<DSLinkMenu title={title} />);
+
+      const button = wrapper.find("button[data-l10n-id='newtab-menu-content-tooltip']");
+      assert.equal(button.prop("data-l10n-args"), JSON.stringify({title}));
+    });
   });
 
   describe("DS context menu options", () => {

test/unit/content-src/components/TopSites.test.jsx

@@ -560,6 +560,15 @@ describe("<TopSite>", () => {
     assert.equal(wrapper.find(TopSiteLink).props().title, "foobar");
   });
 
+  it("should parse args for fluent correctly", () => {
+    const title = '"fluent"';
+    link.hostname = title;
+
+    const wrapper = mount(<TopSite link={link} />);
+    const button = wrapper.find("button[data-l10n-id='newtab-menu-content-tooltip']");
+    assert.equal(button.prop("data-l10n-args"), JSON.stringify({title}));
+  });
+
   it("should have .active class, on top-site-outer if context menu is open", () => {
     const wrapper = shallow(<TopSite link={link} index={1} activeIndex={1} />);
     wrapper.setState({showContextMenu: true});