From 59e7713189596ff9325ba51e119e9842b5e10f2c Mon Sep 17 00:00:00 2001 From: David Taylor Date: Mon, 11 Sep 2023 16:29:44 +0100 Subject: [PATCH] DEV: Update d-modal tests to gjs (#23509) --- ...service-test.js => modal-service-test.gjs} | 33 ++--- .../{d-modal-test.js => d-modal-test.gjs} | 113 ++++++++++-------- 2 files changed, 84 insertions(+), 62 deletions(-) rename app/assets/javascripts/discourse/tests/acceptance/{modal-service-test.js => modal-service-test.gjs} (93%) rename app/assets/javascripts/discourse/tests/integration/components/{d-modal-test.js => d-modal-test.gjs} (51%) diff --git a/app/assets/javascripts/discourse/tests/acceptance/modal-service-test.js b/app/assets/javascripts/discourse/tests/acceptance/modal-service-test.gjs similarity index 93% rename from app/assets/javascripts/discourse/tests/acceptance/modal-service-test.js rename to app/assets/javascripts/discourse/tests/acceptance/modal-service-test.gjs index 4390cc9b246..b2b4c263ed1 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/modal-service-test.js +++ b/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 { + + @action closeWithCustomData() { this.args.closeModal({ hello: "world" }); } } -setComponentTemplate( - hbs` - - Modal content is {{@model.text}} - - - `, - MyModalClass -); acceptance("Modal service: component-based API", function () { test("displays correctly", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-modal-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-modal-test.gjs similarity index 51% rename from app/assets/javascripts/discourse/tests/integration/components/d-modal-test.js rename to app/assets/javascripts/discourse/tests/integration/components/d-modal-test.gjs index 3bb63656186..fe5071f10a0 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/d-modal-test.js +++ b/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`` - ); + await render(); 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` - - <:aboveHeader>aboveHeaderContent - <:headerAboveTitle>headerAboveTitleContent - <:headerBelowTitle>headerBelowTitleContent - <:belowHeader>belowHeaderContent - <:body>bodyContent - <:footer>footerContent - <:belowFooter>belowFooterContent - - ` - ); + await render(); 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``); + await render(); assert.dom(".d-modal .alert").hasText("Some message"); }); test("flash type", async function (assert) { - await render( - hbs`` - ); + await render(); 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`` - ); + @action + closeModal() { + this.closeModalCalled = true; + } + } + const testState = new TestState(); + testState.dismissable = false; + + await render(); 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`` - ); + await render(); 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` - - <:body> - - - <:footer> - - - - ` - ); + await render(); assert.dom("form.d-modal").exists(); await click(".d-modal button[type=submit]");