From c7a08b3255daa34c4e3da8b599e2787fa22fc379 Mon Sep 17 00:00:00 2001
From: Steffan <40404519+Steffan153@users.noreply.github.com>
Date: Tue, 22 Mar 2022 23:37:36 -0600
Subject: [PATCH] Properly escape html10n arguments in suggested change
 template

Co-authored-by: Richard Hansen <rhansen@rhansen.org>
---
 static/js/index.js                            |  4 ++
 .../tests/frontend/specs/commentSuggestion.js | 39 +++++++++++++------
 templates/comments.html                       |  5 +--
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 7c0f6fd3..13856a57 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -590,6 +590,10 @@ EpComments.prototype.insertComment = function (commentId, comment, index) {
   comment.commentId = commentId;
   comment.reply = true;
   content = $('#commentsTemplate').tmpl(comment);
+  content.find('.from-label')[0].dataset.l10nArgs = JSON.stringify({
+    changeFrom: comment.changeFrom,
+    changeTo: comment.changeTo,
+  });
   if (comment.author !== clientVars.userId) {
     $(content).find('.comment-actions-wrapper').addClass('hidden');
   }
diff --git a/static/tests/frontend/specs/commentSuggestion.js b/static/tests/frontend/specs/commentSuggestion.js
index 6b3ea55d..50ff410a 100644
--- a/static/tests/frontend/specs/commentSuggestion.js
+++ b/static/tests/frontend/specs/commentSuggestion.js
@@ -43,23 +43,40 @@ describe('ep_comments_page - Comment Suggestion', function () {
     const outer$ = helper.padOuter$;
     const inner$ = helper.padInner$;
     const chrome$ = helper.padChrome$;
-    const suggestedText = 'A new suggested text';
-    await openCommentFormWithSuggestion('This content will receive a comment');
+    const origText = 'This content will receive a comment';
+    const suggestedText = 'amp: & dq: " sq: \' lt: < gt: > bs: \\ end';
+    await openCommentFormWithSuggestion(origText);
 
     await helper.waitForPromise(() => chrome$('#newComment.popup-show').is(':visible'));
     chrome$('#newComment').find('textarea.comment-content').val('A new comment text');
-    chrome$('#newComment').find('textarea.to-value').val(suggestedText);
+    chrome$('#newComment').find('suggestion-checkbox').click();
+    let newCommentSuggestion;
+    await helper.waitForPromise(() => {
+      newCommentSuggestion = chrome$('#newComment').find('textarea.to-value');
+      return newCommentSuggestion.length > 0 && newCommentSuggestion.is(':visible');
+    });
+    newCommentSuggestion.val(suggestedText);
     chrome$('#comment-create-btn').click();
-    await helper.waitForPromise(() => inner$('div').first().find('.comment').length);
-    let comment$ = inner$('div').first().find('.comment');
-    comment$.click();
+
+    let commentedText$;
     await helper.waitForPromise(() => {
-      outer$('.approve-suggestion-btn:visible').click();
-      return true;
+      commentedText$ = inner$('div').first().find('.comment');
+      return commentedText$.length > 0;
     });
-    comment$ = inner$('div').first().find('.comment');
-    await helper.waitForPromise(() => comment$.text() === suggestedText);
-    expect(comment$.text()).to.be(suggestedText);
+    commentedText$.click();
+    let comment$;
+    await helper.waitForPromise(() => {
+      comment$ = outer$('.comment-container');
+      const fd$ = comment$.find('.full-display-content');
+      return comment$.length > 0 && fd$.length > 0 && fd$.is(':visible');
+    });
+    await helper.waitForPromise(
+        () => comment$.find('.comment-title-wrapper .from-label').text().includes(suggestedText));
+
+    outer$('.approve-suggestion-btn:visible').click();
+    commentedText$ = inner$('div').first().find('.comment');
+    await helper.waitForPromise(
+        () => inner$('div').first().find('.comment').text() === suggestedText);
   });
 });
 
diff --git a/templates/comments.html b/templates/comments.html
index 5b45b8e9..3abe0d18 100644
--- a/templates/comments.html
+++ b/templates/comments.html
@@ -97,10 +97,7 @@ <h1 data-l10n-id="ep_comments_page.comment">Comment</h1>
     {{if changeTo}}
     <form class="comment-changeTo-form suggestion-display">
         <div>
-          <!-- TODO: Fix below line to properly handle escaped characters -->
-          <!-- Using escape() is a temp fix designed to handle suggestions to "foo" -->
-          <!-- which historically would break a pad :( -->
-            <span class="from-label" data-l10n-id="ep_comments_page.comments_template.suggested_change_from" data-l10n-args='{"changeFrom": "${changeFrom}", "changeTo": "${escape(changeTo)}"}'>Suggested Change From</span>
+            <span class="from-label" data-l10n-id="ep_comments_page.comments_template.suggested_change_from">Suggested Change From</span>
             <span class="hidden from-value">${changeFrom}</span>
             <span class="hidden to-value">${changeTo}</span>
         </div>