DEV: Update d-modal tests to gjs (#23509)

app/assets/javascripts/discourse/tests/acceptance/modal-service-test.gjs

@@ -1,36 +1,39 @@
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { click, settled, triggerKeyEvent, visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { hbs } from "ember-cli-htmlbars";
 import { getOwner } from "@ember/application";
 import Component from "@glimmer/component";
-import { setComponentTemplate } from "@glimmer/manager";
-import {
+import DModal, {
   CLOSE_INITIATED_BY_BUTTON,
   CLOSE_INITIATED_BY_CLICK_OUTSIDE,
   CLOSE_INITIATED_BY_ESC,
   CLOSE_INITIATED_BY_MODAL_SHOW,
 } from "discourse/components/d-modal";
 import { action } from "@ember/object";
+import { on } from "@ember/modifier";
 
 class MyModalClass extends Component {
+  <template>
+    <DModal
+      class="service-modal"
+      @closeModal={{@closeModal}}
+      @title="Hello World"
+    >
+      Modal content is
+      {{@model.text}}
+      <button
+        type="button"
+        class="custom-data"
+        {{on "click" this.closeWithCustomData}}
+      ></button>
+    </DModal>
+  </template>
+
   @action
   closeWithCustomData() {
     this.args.closeModal({ hello: "world" });
   }
 }
-setComponentTemplate(
-  hbs`
-    <DModal
-      @closeModal={{@closeModal}}
-      @title="Hello World"
-    >
-      Modal content is {{@model.text}}
-      <button class='custom-data' {{on "click" this.closeWithCustomData}}></button>
-    </DModal>
-  `,
-  MyModalClass
-);
 
 acceptance("Modal service: component-based API", function () {
   test("displays correctly", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/d-modal-test.gjs

@@ -1,33 +1,38 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { click, render, settled } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import DModal from "discourse/components/d-modal";
+import { on } from "@ember/modifier";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 
 module("Integration | Component | d-modal", function (hooks) {
   setupRenderingTest(hooks);
 
   test("title and subtitle", async function (assert) {
-    await render(
-      hbs`<DModal @inline={{true}} @title="Modal Title" @subtitle="Modal Subtitle" />`
-    );
+    await render(<template>
+      <DModal
+        @inline={{true}}
+        @title="Modal Title"
+        @subtitle="Modal Subtitle"
+      />
+    </template>);
     assert.dom(".d-modal .title h3").hasText("Modal Title");
     assert.dom(".d-modal .subtitle").hasText("Modal Subtitle");
   });
 
   test("named blocks", async function (assert) {
-    await render(
-      hbs`
-        <DModal @inline={{true}}>
-          <:aboveHeader>aboveHeaderContent</:aboveHeader>
-          <:headerAboveTitle>headerAboveTitleContent</:headerAboveTitle>
-          <:headerBelowTitle>headerBelowTitleContent</:headerBelowTitle>
-          <:belowHeader>belowHeaderContent</:belowHeader>
-          <:body>bodyContent</:body>
-          <:footer>footerContent</:footer>
-          <:belowFooter>belowFooterContent</:belowFooter>
-        </DModal>
-      `
-    );
+    await render(<template>
+      <DModal @inline={{true}}>
+        <:aboveHeader>aboveHeaderContent</:aboveHeader>
+        <:headerAboveTitle>headerAboveTitleContent</:headerAboveTitle>
+        <:headerBelowTitle>headerBelowTitleContent</:headerBelowTitle>
+        <:belowHeader>belowHeaderContent</:belowHeader>
+        <:body>bodyContent</:body>
+        <:footer>footerContent</:footer>
+        <:belowFooter>belowFooterContent</:belowFooter>
+      </DModal>
+    </template>);
 
     assert.dom(".d-modal").includesText("aboveHeaderContent");
     assert.dom(".d-modal").includesText("headerAboveTitleContent");
@@ -39,31 +44,44 @@ module("Integration | Component | d-modal", function (hooks) {
   });
 
   test("flash", async function (assert) {
-    await render(hbs`<DModal @inline={{true}} @flash="Some message"/>`);
+    await render(<template>
+      <DModal @inline={{true}} @flash="Some message" />
+    </template>);
     assert.dom(".d-modal .alert").hasText("Some message");
   });
 
   test("flash type", async function (assert) {
-    await render(
-      hbs`<DModal @inline={{true}} @flash="Some message" @flashType="success"/>`
-    );
+    await render(<template>
+      <DModal @inline={{true}} @flash="Some message" @flashType="success" />
+    </template>);
     assert.dom(".d-modal .alert").hasClass("alert-success");
   });
 
   test("dismissable", async function (assert) {
-    let closeModalCalled = false;
-    this.closeModal = () => (closeModalCalled = true);
-    this.set("dismissable", false);
+    class TestState {
+      @tracked dismissable;
 
-    await render(
-      hbs`<DModal @inline={{true}} @closeModal={{this.closeModal}} @dismissable={{this.dismissable}}/>`
-    );
+      @action
+      closeModal() {
+        this.closeModalCalled = true;
+      }
+    }
+    const testState = new TestState();
+    testState.dismissable = false;
+
+    await render(<template>
+      <DModal
+        @inline={{true}}
+        @closeModal={{testState.closeModal}}
+        @dismissable={{testState.dismissable}}
+      />
+    </template>);
 
     assert
       .dom(".d-modal .modal-close")
       .doesNotExist("close button is not shown when dismissable=false");
 
-    this.set("dismissable", true);
+    testState.dismissable = true;
     await settled();
     assert
       .dom(".d-modal .modal-close")
@@ -71,17 +89,20 @@ module("Integration | Component | d-modal", function (hooks) {
 
     await click(".d-modal .modal-close");
     assert.true(
-      closeModalCalled,
+      testState.closeModalCalled,
       "closeModal is called when close button clicked"
     );
-
-    closeModalCalled = false;
   });
 
   test("header and body classes", async function (assert) {
-    await render(
-      hbs`<DModal @inline={{true}} @bodyClass="my-body-class" @headerClass="my-header-class" @title="Hello world" />`
-    );
+    await render(<template>
+      <DModal
+        @inline={{true}}
+        @bodyClass="my-body-class"
+        @headerClass="my-header-class"
+        @title="Hello world"
+      />
+    </template>);
 
     assert.dom(".d-modal .modal-header").hasClass("my-header-class");
     assert.dom(".d-modal .modal-body").hasClass("my-body-class");
@@ -89,23 +110,21 @@ module("Integration | Component | d-modal", function (hooks) {
 
   test("as a form", async function (assert) {
     let submittedFormData;
-    this.handleSubmit = (event) => {
+    const handleSubmit = (event) => {
       event.preventDefault();
       submittedFormData = new FormData(event.currentTarget);
     };
 
-    await render(
-      hbs`
-        <DModal @inline={{true}} @tagName="form" {{on "submit" this.handleSubmit}}>
-          <:body>
-            <input type="text" name="name" value="John Doe" />
-          </:body>
-          <:footer>
-            <button type="submit">Submit</button>
-          </:footer>
-        </DModal>
-        `
-    );
+    await render(<template>
+      <DModal @inline={{true}} @tagName="form" {{on "submit" handleSubmit}}>
+        <:body>
+          <input type="text" name="name" value="John Doe" />
+        </:body>
+        <:footer>
+          <button type="submit">Submit</button>
+        </:footer>
+      </DModal>
+    </template>);
 
     assert.dom("form.d-modal").exists();
     await click(".d-modal button[type=submit]");