From dd3ed279304cbe7d2e7e29fc8a0fd0c7e2a02d25 Mon Sep 17 00:00:00 2001 From: Natalie Tay Date: Wed, 12 Jan 2022 19:49:24 +0800 Subject: [PATCH] DEV: Allow utility class domFromString to take in strings with multiple top level elements (#15548) Previously only `
one top element
` was allowed because we use `firstChild` instead of `children`. We also want `
one
two
` to work with this method. --- .../addon/lib/dom-from-string.js | 2 +- .../tests/unit/lib/dom-from-string-test.js | 7 +++++-- .../discourse/tests/unit/lib/formatter-test.js | 18 +++++++++--------- .../tests/unit/lib/link-mentions-test.js | 2 +- .../javascripts/pretty-text/addon/oneboxer.js | 2 +- 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js b/app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js index d37e288f87c..3f69f14fbff 100644 --- a/app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js +++ b/app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js @@ -2,5 +2,5 @@ export default function domFromString(string) { const template = document.createElement("template"); string = string.trim(); template.innerHTML = string; - return template.content.firstChild; + return template.content.children; } diff --git a/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js b/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js index 939adca48fa..0f64e388f3a 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js @@ -4,7 +4,10 @@ import domFromString from "discourse-common/lib/dom-from-string"; discourseModule("Unit | Utility | domFromString", function () { test("constructing DOM node from a string", function (assert) { - const node = domFromString('
foo
'); - assert.ok(node.classList.contains("foo")); + const node = domFromString( + '
foo
boo
' + ); + assert.ok(node[0].classList.contains("foo")); + assert.ok(node[1].classList.contains("boo")); }); }); diff --git a/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js b/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js index 0c73254867d..d87f0119d1e 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js @@ -38,7 +38,7 @@ function shortDateTester(format) { } function strip(html) { - return domFromString(html).innerText; + return domFromString(html)[0].innerText; } discourseModule("Unit | Utility | formatter", function (hooks) { @@ -121,12 +121,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) { ); assert.strictEqual( - domFromString(formatDays(0, { format: "medium" })).title, + domFromString(formatDays(0, { format: "medium" }))[0].title, longDate(new Date()) ); assert.ok( - domFromString(formatDays(0, { format: "medium" })).classList.contains( + domFromString(formatDays(0, { format: "medium" }))[0].classList.contains( "date" ) ); @@ -226,12 +226,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) { test("autoUpdatingRelativeAge", function (assert) { let d = moment().subtract(1, "day").toDate(); - let elem = domFromString(autoUpdatingRelativeAge(d)); + let elem = domFromString(autoUpdatingRelativeAge(d))[0]; assert.strictEqual(elem.dataset.format, "tiny"); assert.strictEqual(elem.dataset.time, d.getTime().toString()); assert.strictEqual(elem.title, ""); - elem = domFromString(autoUpdatingRelativeAge(d, { title: true })); + elem = domFromString(autoUpdatingRelativeAge(d, { title: true }))[0]; assert.strictEqual(elem.title, longDate(d)); elem = domFromString( @@ -240,14 +240,14 @@ discourseModule("Unit | Utility | formatter", function (hooks) { title: true, leaveAgo: true, }) - ); + )[0]; assert.strictEqual(elem.dataset.format, "medium-with-ago"); assert.strictEqual(elem.dataset.time, d.getTime().toString()); assert.strictEqual(elem.title, longDate(d)); assert.strictEqual(elem.innerHTML, "1 day ago"); - elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" })); + elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" }))[0]; assert.strictEqual(elem.dataset.format, "medium"); assert.strictEqual(elem.dataset.time, d.getTime().toString()); assert.strictEqual(elem.title, ""); @@ -256,7 +256,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) { test("updateRelativeAge", function (assert) { let d = new Date(); - let elem = domFromString(autoUpdatingRelativeAge(d)); + let elem = domFromString(autoUpdatingRelativeAge(d))[0]; elem.dataset.time = d.getTime() - 2 * 60 * 1000; updateRelativeAge(elem); @@ -266,7 +266,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) { d = new Date(); elem = domFromString( autoUpdatingRelativeAge(d, { format: "medium", leaveAgo: true }) - ); + )[0]; elem.dataset.time = d.getTime() - 2 * 60 * 1000; updateRelativeAge(elem); diff --git a/app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js b/app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js index fc5f71e5f38..a17da1ca9a8 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js @@ -40,7 +40,7 @@ module("Unit | Utility | link-mentions", function () { @valid_group @mentionable_group - `); + `)[0]; await linkSeenMentions(root); // Ember.Test.registerWaiter is not available here, so we are implementing diff --git a/app/assets/javascripts/pretty-text/addon/oneboxer.js b/app/assets/javascripts/pretty-text/addon/oneboxer.js index 6aa538e8b6e..f60eb467ab4 100644 --- a/app/assets/javascripts/pretty-text/addon/oneboxer.js +++ b/app/assets/javascripts/pretty-text/addon/oneboxer.js @@ -76,7 +76,7 @@ function loadNext(ajax) { }) .then( (template) => { - const node = domFromString(template); + const node = domFromString(template)[0]; setLocalCache(normalize(url), node); elem.replaceWith(node); applySquareGenericOnebox(node);