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 DModal, {
-import {
   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,22 +1,28 @@
 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(
+    await render(<template>
-      hbs`<DModal @inline={{true}} @title="Modal Title" @subtitle="Modal Subtitle" />`
+      <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(
+    await render(<template>
-      hbs`
       <DModal @inline={{true}}>
         <:aboveHeader>aboveHeaderContent</:aboveHeader>
         <:headerAboveTitle>headerAboveTitleContent</:headerAboveTitle>
@@ -26,8 +32,7 @@ module("Integration | Component | d-modal", function (hooks) {
         <: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(
+    await render(<template>
-      hbs`<DModal @inline={{true}} @flash="Some message" @flashType="success"/>`
+      <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;
+    class TestState {
-    this.closeModal = () => (closeModalCalled = true);
+      @tracked dismissable;
-    this.set("dismissable", false);
 
-    await render(
+      @action
-      hbs`<DModal @inline={{true}} @closeModal={{this.closeModal}} @dismissable={{this.dismissable}}/>`
+      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(
+    await render(<template>
-      hbs`<DModal @inline={{true}} @bodyClass="my-body-class" @headerClass="my-header-class" @title="Hello world" />`
+      <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,14 +110,13 @@ 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(
+    await render(<template>
-      hbs`
+      <DModal @inline={{true}} @tagName="form" {{on "submit" handleSubmit}}>
-        <DModal @inline={{true}} @tagName="form" {{on "submit" this.handleSubmit}}>
         <:body>
           <input type="text" name="name" value="John Doe" />
         </:body>
@@ -104,8 +124,7 @@ module("Integration | Component | d-modal", function (hooks) {
           <button type="submit">Submit</button>
         </:footer>
       </DModal>
-        `
+    </template>);
-    );
 
     assert.dom("form.d-modal").exists();
     await click(".d-modal button[type=submit]");