DEV: Use the "new" test waiters (#29055)

In accordance with 2020 [RFC591](https://github.com/emberjs/rfcs/blob/master/text/0581-new-test-waiters.md) 🙂

Next steps: use them in plugins too (d-encrypt) and enable the eslint rule (https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/no-legacy-test-waiters.md)

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

@@ -3,7 +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 { buildWaiter } from "@ember/test-waiters";
 import { modifier } from "ember-modifier";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import loadAce from "discourse/lib/load-ace-editor";
@@ -11,6 +11,7 @@ import { isTesting } from "discourse-common/config/environment";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
+const WAITER = buildWaiter("ace-editor");
 const COLOR_VARS_REGEX =
   /\$(primary|secondary|tertiary|quaternary|header_background|header_primary|highlight|danger|success|love)(\s|;|-(low|medium|high))/g;
 
@@ -72,11 +73,10 @@ export default class AceEditor extends Component {
     this.editor.getSession().setValue(this.args.content || "");
     this.skipChangePropagation = false;
 
-    if (isTesting()) {
-      let finished = false;
-      registerWaiter(() => finished);
-      this.editor.renderer.once("afterRender", () => (finished = true));
-    }
+    const token = WAITER.beginAsync();
+    this.editor.renderer.once("afterRender", () => WAITER.endAsync(token));
+
+    return () => WAITER.endAsync(token);
   });
 
   constructor() {

app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs

@@ -222,9 +222,7 @@ export default class GlimmerSiteHeader extends Component {
           }
         ).finished;
 
-        if (isTesting()) {
-          waitForPromise(animationFinished);
-        }
+        waitForPromise(animationFinished);
 
         cloakElement.animate([{ opacity: 0 }], { fill: "forwards" });
         cloakElement.style.display = "block";

app/assets/javascripts/discourse/app/components/modal/json-schema-editor.js

@@ -3,7 +3,6 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { waitForPromise } from "@ember/test-waiters";
 import { create } from "virtual-dom";
-import { isTesting } from "discourse-common/config/environment";
 import { iconNode } from "discourse-common/lib/icon-library";
 
 export default class JsonSchemaEditorModal extends Component {
@@ -38,9 +37,7 @@ export default class JsonSchemaEditorModal extends Component {
   @action
   async buildJsonEditor(element) {
     const promise = import("@json-editor/json-editor");
-    if (isTesting()) {
-      waitForPromise(promise);
-    }
+    waitForPromise(promise);
     const { JSONEditor } = await promise;
 
     JSONEditor.defaults.options.theme = "barebones";

app/assets/javascripts/discourse/app/lib/after-frame-paint.js

@@ -1,17 +1,13 @@
-import DEBUG from "@glimmer/env";
-import { registerWaiter } from "@ember/test";
-import { isTesting } from "discourse-common/config/environment";
+import { buildWaiter } from "@ember/test-waiters";
+
+const WAITER = buildWaiter("after-frame-paint");
 
 /**
  * Runs `callback` shortly after the next browser Frame is produced.
  * ref: https://webperf.tips/tip/measuring-paint-time
  */
 export default function runAfterFramePaint(callback) {
-  let done = false;
-
-  if (DEBUG && isTesting()) {
-    registerWaiter(() => done);
-  }
+  const token = WAITER.beginAsync();
 
   // Queue a "before Render Steps" callback via requestAnimationFrame.
   requestAnimationFrame(() => {
@@ -21,7 +17,7 @@ export default function runAfterFramePaint(callback) {
 
     // Setup the callback to run in a Task
     messageChannel.port1.onmessage = () => {
-      done = true;
+      WAITER.endAsync(token);
       callback();
     };
 

app/assets/javascripts/discourse/app/lib/load-ace-editor.js

@@ -1,10 +1,7 @@
 import { waitForPromise } from "@ember/test-waiters";
-import { isTesting } from "discourse-common/config/environment";
 
 export default async function loadAce() {
   const promise = import("discourse/static/ace-editor-bundle");
-  if (isTesting()) {
-    waitForPromise(promise);
-  }
+  waitForPromise(promise);
   return await promise;
 }

app/assets/javascripts/discourse/app/lib/load-script.js

@@ -1,32 +1,28 @@
 import { run } from "@ember/runloop";
-import { registerWaiter } from "@ember/test";
+import { buildWaiter } from "@ember/test-waiters";
 import { Promise } from "rsvp";
 import { ajax } from "discourse/lib/ajax";
 import { PUBLIC_JS_VERSIONS } from "discourse/lib/public-js-versions";
-import { isTesting } from "discourse-common/config/environment";
 import getURL, { getURLWithCDN } from "discourse-common/lib/get-url";
 
+const WAITER = buildWaiter("load-script");
 const _loaded = {};
 const _loading = {};
 
 function loadWithTag(path, cb) {
   const head = document.getElementsByTagName("head")[0];
 
-  let finished = false;
   let s = document.createElement("script");
   s.src = path;
 
-  if (isTesting()) {
-    registerWaiter(() => finished);
-  }
+  const token = WAITER.beginAsync();
 
   // Don't leave it hanging if something goes wrong
   s.onerror = function () {
-    finished = true;
+    WAITER.endAsync(token);
   };
 
   s.onload = s.onreadystatechange = function (_, abort) {
-    finished = true;
     if (
       abort ||
       !s.readyState ||
@@ -38,6 +34,8 @@ function loadWithTag(path, cb) {
         run(null, cb);
       }
     }
+
+    WAITER.endAsync(token);
   };
 
   head.appendChild(s);