DEV: Await for ace render in tests (#28586)

Why all the manual setting of `width` and `height`? Without it all ace editors were 0x0, invisible.

Why didn't it affect the tests before? ace-editor tests only confirms that there is an element, theme-settings-editor tests were effectively unit tests before 7317b5a, fk-code test avoids interacting with ace.

app/assets/javascripts/discourse/app/components/ace-editor.gjs

@@ -3,6 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
+import { registerWaiter } from "@ember/test";
 import { modifier } from "ember-modifier";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import loadAce from "discourse/lib/load-ace-editor";
@@ -70,6 +71,12 @@ export default class AceEditor extends Component {
     this.skipChangePropagation = true;
     this.editor.getSession().setValue(this.args.content || "");
     this.skipChangePropagation = false;
+
+    if (isTesting()) {
+      let finished = false;
+      registerWaiter(() => finished);
+      this.editor.renderer.once("afterRender", () => (finished = true));
+    }
   });
 
   constructor() {
@@ -165,7 +172,7 @@ export default class AceEditor extends Component {
   @bind
   editorIdChanged() {
     if (this.autofocus) {
-      this.send("focus");
+      this.focus();
     }
   }
 

app/assets/javascripts/discourse/tests/integration/components/ace-editor-test.gjs

@@ -7,34 +7,52 @@ module("Integration | Component | ace-editor", function (hooks) {
   setupRenderingTest(hooks);
 
   test("css editor", async function (assert) {
-    await render(<template><AceEditor @mode="css" /></template>);
+    await render(<template>
+      <AceEditor @mode="css" style="width: 300px; height: 200px" />
+    </template>);
     assert.dom(".ace_editor").exists("it renders the ace editor");
   });
 
   test("html editor", async function (assert) {
     await render(<template>
-      <AceEditor @mode="html" @content="<b>wat</b>" />
+      <AceEditor
+        @mode="html"
+        @content="<b>wat</b>"
+        style="width: 300px; height: 200px"
+      />
     </template>);
     assert.dom(".ace_editor").exists("it renders the ace editor");
   });
 
   test("sql editor", async function (assert) {
     await render(<template>
-      <AceEditor @mode="sql" @content="SELECT * FROM users" />
+      <AceEditor
+        @mode="sql"
+        @content="SELECT * FROM users"
+        style="width: 300px; height: 200px"
+      />
     </template>);
     assert.dom(".ace_editor").exists("it renders the ace editor");
   });
 
   test("yaml editor", async function (assert) {
     await render(<template>
-      <AceEditor @mode="yaml" @content="test: true" />
+      <AceEditor
+        @mode="yaml"
+        @content="test: true"
+        style="width: 300px; height: 200px"
+      />
     </template>);
     assert.dom(".ace_editor").exists("it renders the ace editor");
   });
 
   test("javascript editor", async function (assert) {
     await render(<template>
-      <AceEditor @mode="javascript" @content="test: true" />
+      <AceEditor
+        @mode="javascript"
+        @content="test: true"
+        style="width: 300px; height: 200px"
+      />
     </template>);
     assert.dom(".ace_editor").exists("it renders the ace editor");
   });
@@ -45,6 +63,7 @@ module("Integration | Component | ace-editor", function (hooks) {
         @mode="sql"
         @content="SELECT * FROM users"
         @disabled={{true}}
+        style="width: 300px; height: 200px"
       />
     </template>);
 

app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/code-test.gjs

@@ -14,7 +14,7 @@ module("Integration | Component | FormKit | Controls | Code", function (hooks) {
     await render(<template>
       <Form @onSubmit={{mutateData}} @data={{data}} as |form|>
         <form.Field @name="foo" @title="Foo" as |field|>
-          <field.Code />
+          <field.Code @height={{100}} style="width: 200px" />
         </form.Field>
       </Form>
     </template>);