From cb976ac562b73f9b9413d7e10ca050f8a5916d64 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 17 Dec 2021 09:25:34 +0100 Subject: [PATCH] DEV: creates domFromString utility function (#15310) --- .../addon/lib/dom-from-string.js | 6 +++++ .../tests/unit/lib/dom-from-string-test.js | 10 +++++++ .../tests/unit/lib/formatter-test.js | 26 +++++++------------ .../tests/unit/lib/link-mentions-test.js | 11 +++----- .../javascripts/pretty-text/addon/oneboxer.js | 8 +++--- 5 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js create mode 100644 app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js 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 new file mode 100644 index 00000000000..d37e288f87c --- /dev/null +++ b/app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js @@ -0,0 +1,6 @@ +export default function domFromString(string) { + const template = document.createElement("template"); + string = string.trim(); + template.innerHTML = string; + return template.content.firstChild; +} 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 new file mode 100644 index 00000000000..939adca48fa --- /dev/null +++ b/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js @@ -0,0 +1,10 @@ +import { discourseModule } from "discourse/tests/helpers/qunit-helpers"; +import { test } from "qunit"; +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")); + }); +}); 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 af36cf34359..0c73254867d 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js @@ -9,13 +9,7 @@ import { import { discourseModule } from "discourse/tests/helpers/qunit-helpers"; import sinon from "sinon"; import { test } from "qunit"; - -function stringToDOMNode(string) { - let template = document.createElement("template"); - string = string.trim(); - template.innerHTML = string; - return template.content.firstChild; -} +import domFromString from "discourse-common/lib/dom-from-string"; function formatMins(mins, opts = {}) { let dt = new Date(new Date() - mins * 60 * 1000); @@ -44,7 +38,7 @@ function shortDateTester(format) { } function strip(html) { - return stringToDOMNode(html).innerText; + return domFromString(html).innerText; } discourseModule("Unit | Utility | formatter", function (hooks) { @@ -127,12 +121,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) { ); assert.strictEqual( - stringToDOMNode(formatDays(0, { format: "medium" })).title, + domFromString(formatDays(0, { format: "medium" })).title, longDate(new Date()) ); assert.ok( - stringToDOMNode(formatDays(0, { format: "medium" })).classList.contains( + domFromString(formatDays(0, { format: "medium" })).classList.contains( "date" ) ); @@ -232,15 +226,15 @@ discourseModule("Unit | Utility | formatter", function (hooks) { test("autoUpdatingRelativeAge", function (assert) { let d = moment().subtract(1, "day").toDate(); - let elem = stringToDOMNode(autoUpdatingRelativeAge(d)); + let elem = domFromString(autoUpdatingRelativeAge(d)); assert.strictEqual(elem.dataset.format, "tiny"); assert.strictEqual(elem.dataset.time, d.getTime().toString()); assert.strictEqual(elem.title, ""); - elem = stringToDOMNode(autoUpdatingRelativeAge(d, { title: true })); + elem = domFromString(autoUpdatingRelativeAge(d, { title: true })); assert.strictEqual(elem.title, longDate(d)); - elem = stringToDOMNode( + elem = domFromString( autoUpdatingRelativeAge(d, { format: "medium", title: true, @@ -253,7 +247,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) { assert.strictEqual(elem.title, longDate(d)); assert.strictEqual(elem.innerHTML, "1 day ago"); - elem = stringToDOMNode(autoUpdatingRelativeAge(d, { format: "medium" })); + elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" })); assert.strictEqual(elem.dataset.format, "medium"); assert.strictEqual(elem.dataset.time, d.getTime().toString()); assert.strictEqual(elem.title, ""); @@ -262,7 +256,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) { test("updateRelativeAge", function (assert) { let d = new Date(); - let elem = stringToDOMNode(autoUpdatingRelativeAge(d)); + let elem = domFromString(autoUpdatingRelativeAge(d)); elem.dataset.time = d.getTime() - 2 * 60 * 1000; updateRelativeAge(elem); @@ -270,7 +264,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) { assert.strictEqual(elem.innerHTML, "2m"); d = new Date(); - elem = stringToDOMNode( + elem = domFromString( autoUpdatingRelativeAge(d, { format: "medium", leaveAgo: true }) ); elem.dataset.time = d.getTime() - 2 * 60 * 1000; 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 8be7cc30f53..fc5f71e5f38 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 @@ -5,6 +5,7 @@ import { import { module, test } from "qunit"; import { Promise } from "rsvp"; import pretender from "discourse/tests/helpers/create-pretender"; +import domFromString from "discourse-common/lib/dom-from-string"; module("Unit | Utility | link-mentions", function () { test("linkSeenMentions replaces users and groups", async function (assert) { @@ -32,20 +33,14 @@ module("Unit | Utility | link-mentions", function () { "invalid", ]); - let html = ` + const root = domFromString(`
@invalid @valid_user @valid_group @mentionable_group
- `; - - let template = document.createElement("template"); - html = html.trim(); - template.innerHTML = html; - const root = template.content.firstChild; - + `); 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 f5d0679765e..6aa538e8b6e 100644 --- a/app/assets/javascripts/pretty-text/addon/oneboxer.js +++ b/app/assets/javascripts/pretty-text/addon/oneboxer.js @@ -1,3 +1,4 @@ +import domFromString from "discourse-common/lib/dom-from-string"; import { failedCache, lookupCache, @@ -74,11 +75,8 @@ function loadNext(ajax) { }, }) .then( - (html) => { - let template = document.createElement("template"); - template.innerHTML = html.trim(); - const node = template.content.firstChild; - + (template) => { + const node = domFromString(template); setLocalCache(normalize(url), node); elem.replaceWith(node); applySquareGenericOnebox(node);