DEV: uses vanilla js for fixture qunit helper (#14703)

app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js

@@ -385,9 +385,9 @@ export function controllerFor(controller, model) {
 
 export function fixture(selector) {
   if (selector) {
-    return $("#qunit-fixture").find(selector);
+    return document.querySelector(`#qunit-fixture ${selector}`);
   }
-  return $("#qunit-fixture");
+  return document.querySelector("#qunit-fixture");
 }
 
 QUnit.assert.not = function (actual, message) {

app/assets/javascripts/discourse/tests/unit/lib/click-track-edit-history-test.js

@@ -9,7 +9,7 @@ import sinon from "sinon";
 const track = ClickTrack.trackClick;
 
 function generateClickEventOn(selector) {
-  return $.Event("click", { currentTarget: fixture(selector).first() });
+  return $.Event("click", { currentTarget: fixture(selector) });
 }
 
 module("Unit | Utility | click-track-edit-history", function (hooks) {
@@ -25,8 +25,7 @@ module("Unit | Utility | click-track-edit-history", function (hooks) {
 
     sessionStorage.clear();
 
-    fixture().html(
+    fixture().innerHTML = `<div id="topic" data-topic-id="1337">
-      `<div id="topic" data-topic-id="1337">
        </div>
        <div id="revisions" data-post-id="42" class="">
          <div class="row">
@@ -55,8 +54,7 @@ module("Unit | Utility | click-track-edit-history", function (hooks) {
              <a class="hashtag" href="http://discuss.domain.com">#hashtag</a>
            </div>
          </div>
-       </div>`
+       </div>`;
-    );
   });
 
   skip("tracks internal URLs", async function (assert) {

app/assets/javascripts/discourse/tests/unit/lib/click-track-profile-page-test.js

@@ -8,7 +8,7 @@ import sinon from "sinon";
 const track = ClickTrack.trackClick;
 
 function generateClickEventOn(selector) {
-  return $.Event("click", { currentTarget: fixture(selector).first() });
+  return $.Event("click", { currentTarget: fixture(selector) });
 }
 
 module("Unit | Utility | click-track-profile-page", function (hooks) {
@@ -24,8 +24,7 @@ module("Unit | Utility | click-track-profile-page", function (hooks) {
 
     sessionStorage.clear();
 
-    fixture().html(
+    fixture().innerHTML = `<p class="excerpt first" data-post-id="42" data-topic-id="1337" data-user-id="3141">
-      `<p class="excerpt first" data-post-id="42" data-topic-id="1337" data-user-id="3141">
         <a href="http://www.google.com">google.com</a>
         <a class="lightbox back" href="http://www.google.com">google.com</a>
         <div class="onebox-result">
@@ -48,8 +47,7 @@ module("Unit | Utility | click-track-profile-page", function (hooks) {
         <a id="same-site" href="http://discuss.domain.com">forum</a>
         <a class="attachment" href="http://discuss.domain.com/uploads/default/1234/1532357280.txt">log.txt</a>
         <a class="hashtag" href="http://discuss.domain.com">#hashtag</a>
-      </p>`
+      </p>`;
-    );
   });
 
   skip("tracks internal URLs", async function (assert) {

app/assets/javascripts/discourse/tests/unit/lib/click-track-test.js

@@ -11,7 +11,7 @@ import { setPrefix } from "discourse-common/lib/get-url";
 const track = ClickTrack.trackClick;
 
 function generateClickEventOn(selector) {
-  return $.Event("click", { currentTarget: fixture(selector).first() });
+  return $.Event("click", { currentTarget: fixture(selector) });
 }
 
 module("Unit | Utility | click-track", function (hooks) {
@@ -27,8 +27,7 @@ module("Unit | Utility | click-track", function (hooks) {
 
     sessionStorage.clear();
 
-    fixture().html(
+    fixture().innerHTML = `<div id="topic" data-topic-id="1337">
-      `<div id="topic" data-topic-id="1337">
         <article data-post-id="42" data-user-id="3141">
           <a href="http://www.google.com">google.com</a>
           <a class="lightbox back" href="http://www.google.fr">google.fr</a>
@@ -52,8 +51,7 @@ module("Unit | Utility | click-track", function (hooks) {
           <a class="abs-prefix-url" href="${window.location.origin}/forum/thing">prefix link</a>
           <a class="diff-prefix-url" href="/thing">diff prefix link</a>
         </article>
-      </div>`
+      </div>`;
-    );
   });
 
   skip("tracks internal URLs", async function (assert) {
@@ -189,11 +187,11 @@ module("Unit | Utility | click-track", function (hooks) {
 
     assert.notOk(track(generateClickEventOn("a")));
 
-    let $link = fixture("a").first();
+    let link = fixture("a");
-    assert.ok($link.hasClass("no-href"));
+    assert.ok(link.classList.contains("no-href"));
-    assert.equal($link.data("href"), "http://www.google.com/");
+    assert.equal(link.dataset.href, "http://www.google.com/");
-    assert.blank($link.attr("href"));
+    assert.blank(link.getAttribute("href"));
-    assert.ok($link.data("auto-route"));
+    assert.ok(link.dataset.autoRoute);
     assert.ok(window.open.calledWith("http://www.google.com/", "_blank"));
   });
 
@@ -206,15 +204,15 @@ module("Unit | Utility | click-track", function (hooks) {
 
     const done = assert.async();
     later(() => {
-      assert.equal(fixture("a").attr("href"), "http://www.google.com");
+      assert.equal(fixture("a").getAttribute("href"), "http://www.google.com");
       done();
     });
   });
 
   function badgeClickCount(assert, id, expected) {
-    track(generateClickEventOn("#" + id));
+    track(generateClickEventOn(`#${id}`));
-    let $badge = $("span.badge", fixture("#" + id).first());
+    const badge = fixture(`#${id}`).querySelector("span.badge");
-    assert.equal(parseInt($badge.html(), 10), expected);
+    assert.equal(parseInt(badge.innerHTML, 10), expected);
   }
 
   test("does not update badge clicks on my own link", async function (assert) {

app/assets/javascripts/discourse/tests/unit/lib/highlight-search-test.js

@@ -4,19 +4,13 @@ import { fixture } from "discourse/tests/helpers/qunit-helpers";
 
 module("Unit | Utility | highlight-search", function () {
   test("highlighting text", function (assert) {
-    fixture().html(
+    fixture().innerHTML = `
-      `
       <p>This is some text to highlight</p>
-      `
+      `;
-    );
 
-    highlightSearch(fixture()[0], "some text");
+    highlightSearch(fixture(), "some text");
 
-    const terms = [];
+    const terms = [fixture(`.${CLASS_NAME}`).textContent];
-
-    fixture(`.${CLASS_NAME}`).each((_, elem) => {
-      terms.push(elem.textContent);
-    });
 
     assert.equal(
       terms.join(" "),
@@ -26,19 +20,13 @@ module("Unit | Utility | highlight-search", function () {
   });
 
   test("highlighting unicode text", function (assert) {
-    fixture().html(
+    fixture().innerHTML = `
-      `
       <p>This is some தமிழ் & русский text to highlight</p>
-      `
+      `;
-    );
 
-    highlightSearch(fixture()[0], "தமிழ் & русский");
+    highlightSearch(fixture(), "தமிழ் & русский");
 
-    const terms = [];
+    const terms = [fixture(`.${CLASS_NAME}`).textContent];
-
-    fixture(`.${CLASS_NAME}`).each((_, elem) => {
-      terms.push(elem.textContent);
-    });
 
     assert.equal(
       terms.join(" "),

app/assets/javascripts/discourse/tests/unit/lib/upload-short-url-test.js

@@ -64,25 +64,24 @@ function stubUrls(imageSrcs, attachmentSrcs, otherMediaSrcs) {
     response(imageSrcs.concat(attachmentSrcs.concat(otherMediaSrcs)))
   );
 
-  fixture().html(
+  fixture().innerHTML =
     imageSrcs.map((src) => `<img data-orig-src="${src.short_url}"/>`).join("") +
-      attachmentSrcs
+    attachmentSrcs
-        .map(
+      .map(
-          (src) =>
+        (src) =>
-            `<a data-orig-href="${src.short_url}">big enterprise contract.pdf</a>`
+          `<a data-orig-href="${src.short_url}">big enterprise contract.pdf</a>`
-        )
+      )
-        .join("") +
+      .join("") +
-      `<div class="scoped-area"><img data-orig-src="${imageSrcs[2].url}"></div>` +
+    `<div class="scoped-area"><img data-orig-src="${imageSrcs[2].url}"></div>` +
-      otherMediaSrcs
+    otherMediaSrcs
-        .map((src) => {
+      .map((src) => {
-          if (src.short_url.indexOf("mp3") > -1) {
+        if (src.short_url.indexOf("mp3") > -1) {
-            return `<audio controls><source data-orig-src="${src.short_url}"></audio>`;
+          return `<audio controls><source data-orig-src="${src.short_url}"></audio>`;
-          } else {
+        } else {
-            return `<video controls><source data-orig-src="${src.short_url}"></video>`;
+          return `<video controls><source data-orig-src="${src.short_url}"></video>`;
-          }
+        }
-        })
+      })
-        .join("")
+      .join("");
-  );
 }
 
 module("Unit | Utility | pretty-text/upload-short-url", function (hooks) {
@@ -97,7 +96,7 @@ module("Unit | Utility | pretty-text/upload-short-url", function (hooks) {
     lookup = lookupCachedUploadUrl("upload://a.jpeg");
     assert.deepEqual(lookup, {});
 
-    await resolveAllShortUrls(ajax, { secure_media: false }, fixture()[0]);
+    await resolveAllShortUrls(ajax, { secure_media: false }, fixture());
     await settled();
 
     lookup = lookupCachedUploadUrl("upload://a.jpeg");
@@ -144,36 +143,36 @@ module("Unit | Utility | pretty-text/upload-short-url", function (hooks) {
 
   test("resolveAllShortUrls - href + src replaced correctly", async function (assert) {
     stubUrls();
-    await resolveAllShortUrls(ajax, { secure_media: false }, fixture()[0]);
+    await resolveAllShortUrls(ajax, { secure_media: false }, fixture());
     await settled();
 
-    let image1 = fixture().find("img").eq(0);
+    let image1 = fixture().querySelector("img");
-    let image2 = fixture().find("img").eq(1);
+    let image2 = fixture().querySelectorAll("img")[1];
-    let link = fixture().find("a");
+    let audio = fixture().querySelector("audio");
-    let audio = fixture().find("audio").eq(0);
+    let video = fixture().querySelector("video");
-    let video = fixture().find("video").eq(0);
+    let link = fixture().querySelector("a");
 
-    assert.equal(image1.attr("src"), "/images/avatar.png?a");
+    assert.equal(image1.getAttribute("src"), "/images/avatar.png?a");
-    assert.equal(image2.attr("src"), "/images/avatar.png?b");
+    assert.equal(image2.getAttribute("src"), "/images/avatar.png?b");
-    assert.equal(link.attr("href"), "/uploads/short-url/c.pdf");
+    assert.equal(link.getAttribute("href"), "/uploads/short-url/c.pdf");
     assert.equal(
-      video.find("source").attr("src"),
+      video.querySelector("source").getAttribute("src"),
       "/uploads/default/original/3X/c/b/4.mp4"
     );
     assert.equal(
-      audio.find("source").attr("src"),
+      audio.querySelector("source").getAttribute("src"),
       "/uploads/default/original/3X/c/b/5.mp3"
     );
   });
 
   test("resolveAllShortUrls - url with full origin replaced correctly", async function (assert) {
     stubUrls();
-    await resolveAllShortUrls(ajax, { secure_media: false }, fixture()[0]);
+    await resolveAllShortUrls(ajax, { secure_media: false }, fixture());
     await settled();
-    let video = fixture().find("video").eq(1);
+    let video = fixture().querySelectorAll("video")[1];
 
     assert.equal(
-      video.find("source").attr("src"),
+      video.querySelector("source").getAttribute("src"),
       "http://localhost:3000/uploads/default/original/3X/c/b/6.mp4"
     );
   });
@@ -190,12 +189,12 @@ module("Unit | Utility | pretty-text/upload-short-url", function (hooks) {
       ],
       null
     );
-    await resolveAllShortUrls(ajax, { secure_media: true }, fixture()[0]);
+    await resolveAllShortUrls(ajax, { secure_media: true }, fixture());
     await settled();
 
-    let link = fixture().find("a");
+    let link = fixture().querySelector("a");
     assert.equal(
-      link.attr("href"),
+      link.getAttribute("href"),
       "/secure-media-uploads/default/original/3X/c/b/3.pdf"
     );
   });
@@ -204,7 +203,7 @@ module("Unit | Utility | pretty-text/upload-short-url", function (hooks) {
     stubUrls();
     let lookup;
 
-    let scopedElement = fixture()[0].querySelector(".scoped-area");
+    let scopedElement = fixture().querySelector(".scoped-area");
     await resolveAllShortUrls(ajax, {}, scopedElement);
     await settled();