DEV: Convert more tests to gjs/template tag (#34259)

app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.gjs

@@ -1,10 +1,11 @@
+import { hash } from "@ember/helper";
 import { getOwner } from "@ember/owner";
 import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import I18n from "discourse-i18n";
+import CategoryChooser from "select-kit/components/category-chooser";
 
 module(
   "Integration | Component | select-kit/category-chooser",
@@ -16,27 +17,27 @@ module(
     });
 
     test("with value", async function (assert) {
+      const self = this;
       this.set("value", 2);
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-        />
-      `);
+      await render(
+        <template><CategoryChooser @value={{self.value}} /></template>
+      );
 
       assert.strictEqual(this.subject.header().value(), "2");
       assert.strictEqual(this.subject.header().label(), "feature");
     });
 
     test("with excludeCategoryId", async function (assert) {
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            excludeCategoryId=2
-          }}
-        />
-      `);
+      const self = this;
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash excludeCategoryId=2}}
+          />
+        </template>
+      );
 
       await this.subject.expand();
 
@@ -44,14 +45,15 @@ module(
     });
 
     test("with scopedCategoryId", async function (assert) {
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            scopedCategoryId=2
-          }}
-        />
-      `);
+      const self = this;
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash scopedCategoryId=2}}
+          />
+        </template>
+      );
 
       await this.subject.expand();
 
@@ -75,14 +77,15 @@ module(
     });
 
     test("with prioritizedCategoryId", async function (assert) {
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            prioritizedCategoryId=5
-          }}
-        />
-      `);
+      const self = this;
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash prioritizedCategoryId=5}}
+          />
+        </template>
+      );
 
       await this.subject.expand();
 
@@ -111,147 +114,150 @@ module(
     });
 
     test("with allowUncategorized=null", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = false;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=null
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=null}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "category…");
     });
 
     test("with allowUncategorized=null and defaultComposerCategory present", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = false;
       this.siteSettings.default_composer_category = 4;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=null
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=null}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "");
     });
 
     test("with allowUncategorized=null and defaultComposerCategory present, but not set", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = false;
       this.siteSettings.default_composer_category = -1;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=null
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=null}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "category…");
     });
 
     test("with allowUncategorized=null none=true", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = false;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=null
-            none=true
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=null none=true}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "(no category)");
     });
 
     test("with disallowed uncategorized, none", async function (assert) {
+      const self = this;
       I18n.translations[I18n.locale].js.test = { root: "root none label" };
       this.siteSettings.allow_uncategorized_topics = false;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=null
-            none="test.root"
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=null none="test.root"}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "root none label");
     });
 
     test("with allowed uncategorized", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = true;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=true
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=true}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "uncategorized");
     });
 
     test("with allowed uncategorized and none=true", async function (assert) {
+      const self = this;
       this.siteSettings.allow_uncategorized_topics = true;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=true
-            none=true
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=true none=true}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "(no category)");
     });
 
     test("with allowed uncategorized and none", async function (assert) {
+      const self = this;
       I18n.translations[I18n.locale].js.test = { root: "root none label" };
       this.siteSettings.allow_uncategorized_topics = true;
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash
-            allowUncategorized=true
-            none="test.root"
-          }}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash allowUncategorized=true none="test.root"}}
+          />
+        </template>
+      );
 
       assert.strictEqual(this.subject.header().value(), null);
       assert.strictEqual(this.subject.header().label(), "root none label");
     });
 
     test("filter is case insensitive", async function (assert) {
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-        />
-      `);
+      const self = this;
+      await render(
+        <template><CategoryChooser @value={{self.value}} /></template>
+      );
 
       await this.subject.expand();
       await this.subject.fillInFilter("bug");
@@ -267,17 +273,16 @@ module(
     });
 
     test("filter works with non english characters", async function (assert) {
+      const self = this;
       const store = getOwner(this).lookup("service:store");
       store.createRecord("category", {
         id: 1,
         name: "chữ Quốc ngữ",
       });
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-        />
-      `);
+      await render(
+        <template><CategoryChooser @value={{self.value}} /></template>
+      );
 
       await this.subject.expand();
       await this.subject.fillInFilter("gữ");
@@ -287,6 +292,7 @@ module(
     });
 
     test("decodes entities in row title", async function (assert) {
+      const self = this;
       const store = getOwner(this).lookup("service:store");
       store.createRecord("category", {
         id: 1,
@@ -294,12 +300,14 @@ module(
         description_text: "baz &quot;bar ‘foo’",
       });
 
-      await render(hbs`
-        <CategoryChooser
-          @value={{this.value}}
-          @options={{hash scopedCategoryId=1}}
-        />
-      `);
+      await render(
+        <template>
+          <CategoryChooser
+            @value={{self.value}}
+            @options={{hash scopedCategoryId=1}}
+          />
+        </template>
+      );
 
       await this.subject.expand();
 

app/assets/javascripts/discourse/tests/unit/utils/optional-service-test.gjs

@@ -46,7 +46,7 @@ module("Unit | Utils | optional-service", function (hooks) {
       EmberObjectComponent
     );
 
-    await render(hbs`<EmberObjectComponent />`);
+    await render(<template><EmberObjectComponent /></template>);
 
     assert.dom(".ember-object-component").hasText("foo bar");
   });
@@ -54,7 +54,7 @@ module("Unit | Utils | optional-service", function (hooks) {
   test("optionalService works in native classes", async function (assert) {
     this.registry.register("component:native-component", NativeComponent);
 
-    await render(hbs`<NativeComponent />`);
+    await render(<template><NativeComponent /></template>);
 
     assert.dom(".native-component").hasText("foo bar");
   });

plugins/discourse-lazy-videos/test/javascripts/components/lazy-video-test.gjs

@@ -1,7 +1,7 @@
 import { click, render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import LazyVideo from "../discourse/components/lazy-video";
 
 module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
   setupRenderingTest(hooks);
@@ -17,25 +17,37 @@ module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
   };
 
   test("displays the correct video title", async function (assert) {
-    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);
+    const self = this;
+    await render(
+      <template><LazyVideo @videoAttributes={{self.attributes}} /></template>
+    );
 
     assert.dom(".title-link").hasText(this.attributes.title);
   });
 
   test("uses the correct video start time", async function (assert) {
-    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);
+    const self = this;
+    await render(
+      <template><LazyVideo @videoAttributes={{self.attributes}} /></template>
+    );
 
     assert.dom(".youtube-onebox").hasAttribute("data-video-start-time", "234");
   });
 
   test("displays the correct provider icon", async function (assert) {
-    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);
+    const self = this;
+    await render(
+      <template><LazyVideo @videoAttributes={{self.attributes}} /></template>
+    );
 
     assert.dom(".icon.youtube-icon").exists();
   });
 
   test("uses the dominant color from the dom", async function (assert) {
-    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);
+    const self = this;
+    await render(
+      <template><LazyVideo @videoAttributes={{self.attributes}} /></template>
+    );
 
     assert
       .dom(".video-thumbnail")
@@ -43,7 +55,10 @@ module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
   });
 
   test("loads the iframe when clicked", async function (assert) {
-    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}}/>`);
+    const self = this;
+    await render(
+      <template><LazyVideo @videoAttributes={{self.attributes}} /></template>
+    );
     assert.dom(".lazy-video-container.video-loaded").doesNotExist();
 
     await click(".video-thumbnail.youtube");
@@ -51,11 +66,17 @@ module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
   });
 
   test("accepts an optional onLoadedVideo callback function", async function (assert) {
+    const self = this;
     this.set("foo", 1);
     this.set("onLoadedVideo", () => this.set("foo", 2));
 
     await render(
-      hbs`<LazyVideo @videoAttributes={{this.attributes}} @onLoadedVideo={{this.onLoadedVideo}} />`
+      <template>
+        <LazyVideo
+          @videoAttributes={{self.attributes}}
+          @onLoadedVideo={{self.onLoadedVideo}}
+        />
+      </template>
     );
     assert.strictEqual(this.foo, 1);