Add tests

app/assets/javascripts/discourse/tests/acceptance/mobile-discovery-test.js

@@ -1,4 +1,8 @@
-import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  exists,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
 
@@ -9,6 +13,12 @@ acceptance("Topic Discovery - Mobile", function (needs) {
     assert.ok(exists(".topic-list"), "The list of topics was rendered");
     assert.ok(exists(".topic-list .topic-list-item"), "has topics");
 
+    assert.equal(
+      queryAll("a[data-user-card=codinghorror] img.avatar").attr("loading"),
+      "lazy",
+      "it adds loading=`lazy` to topic list avatars"
+    );
+
     await visit("/categories");
     assert.ok(exists(".category"), "has a list of categories");
   });

app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js

@@ -27,6 +27,12 @@ acceptance("Topic Discovery", function (needs) {
       "it shows user's full name in avatar title"
     );
 
+    assert.equal(
+      queryAll("a[data-user-card=eviltrout] img.avatar").attr("loading"),
+      "lazy",
+      "it adds loading=`lazy` to topic list avatars"
+    );
+
     await visit("/c/bug");
     assert.ok(exists(".topic-list"), "The list of topics was rendered");
     assert.ok(exists(".topic-list .topic-list-item"), "has topics");

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

@@ -100,7 +100,7 @@ discourseModule("Unit | Utilities", function () {
     let avatarTemplate = "/path/to/avatar/{size}.png";
     assert.equal(
       avatarImg({ avatarTemplate: avatarTemplate, size: "tiny" }),
-      "<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar'>",
+      "<img loading='lazy' alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar'>",
       "it returns the avatar html"
     );
 
@@ -110,7 +110,7 @@ discourseModule("Unit | Utilities", function () {
         size: "tiny",
         title: "evilest trout",
       }),
-      "<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
+      "<img loading='lazy' alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar' title='evilest trout' aria-label='evilest trout'>",
       "it adds a title if supplied"
     );
 
@@ -120,7 +120,7 @@ discourseModule("Unit | Utilities", function () {
         size: "tiny",
         extraClasses: "evil fish",
       }),
-      "<img alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar evil fish'>",
+      "<img loading='lazy' alt='' width='20' height='20' src='/path/to/avatar/40.png' class='avatar evil fish'>",
       "it adds extra classes if supplied"
     );