DEV: Skip loading plugin JS when running only core tests (#18047)

Plugins often change core behavior, and thereby cause core's tests to fail. In CI, we work around this problem by running core CI without any plugins loaded.

In development, the only option to safely run the core tests is to uninstall all plugins, which is clearly a bad developer experience. This commit aims to improve that experience.

The `qunit_skip_plugins=1` flag would previously prevent the plugin **tests** from running. This commit extends that flag to also affect the plugin's application JS.

.prettierignore

@@ -17,6 +17,7 @@ lib/javascripts/messageformat.js
 lib/highlight_js/
 plugins/**/lib/javascripts/locale
 public/
+!/app/assets/javascripts/discourse/public
 vendor/
 app/assets/javascripts/discourse/tests/fixtures
 spec/

app/assets/javascripts/discourse/lib/bootstrap-json/index.js

@@ -388,24 +388,30 @@ module.exports = {
 
         for (const { name, hasJs } of pluginInfos) {
           if (hasJs) {
-            scripts.push(`plugins/${name}.js`);
+            scripts.push({ src: `plugins/${name}.js`, name });
           }
 
           if (fs.existsSync(`../plugins/${name}_extras.js.erb`)) {
-            scripts.push(`plugins/${name}_extras.js`);
+            scripts.push({ src: `plugins/${name}_extras.js`, name });
           }
         }
       } else {
-        scripts.push("discourse/tests/active-plugins.js");
+        scripts.push({
+          src: "discourse/tests/active-plugins.js",
+          name: "_all",
+        });
       }
 
-      scripts.push("admin-plugins.js");
+      scripts.push({ src: "admin-plugins.js", name: "_admin" });
 
       return scripts
-        .map((s) => `<script src="${config.rootURL}assets/${s}"></script>`)
+        .map(
+          ({ src, name }) =>
+            `<script src="${config.rootURL}assets/${src}" data-discourse-plugin="${name}"></script>`
+        )
         .join("\n");
     } else if (shouldLoadPluginTestJs() && type === "test-plugin-tests-js") {
-      return `<script id="plugin-test-script" src="${config.rootURL}assets/discourse/tests/plugin-tests.js"></script>`;
+      return `<script id="plugin-test-script" src="${config.rootURL}assets/discourse/tests/plugin-tests.js" data-discourse-plugin="_all"></script>`;
     }
   },
 

app/assets/javascripts/discourse/public/assets/scripts/discourse-test-listen-boot.js

@@ -27,4 +27,4 @@ document.body.insertAdjacentHTML(
   `
 );
 
-require('discourse/tests/test-boot-ember-cli');
+require("discourse/tests/test-boot-ember-cli");

app/assets/javascripts/discourse/public/assets/scripts/discourse-test-load-dynamic-js.js

@@ -0,0 +1,28 @@
+const dynamicJsTemplate = document.querySelector("#dynamic-test-js");
+
+const params = new URLSearchParams(document.location.search);
+const skipPlugins = params.get("qunit_skip_plugins");
+
+for (const element of dynamicJsTemplate.content.childNodes) {
+  if (skipPlugins && element.dataset?.discoursePlugin) {
+    continue;
+  }
+
+  if (
+    element.tagName === "SCRIPT" &&
+    element.innerHTML.includes("EmberENV.TESTS_FILE_LOADED")
+  ) {
+    // Inline script introduced by ember-cli. Incompatible with CSP and our custom plugin JS loading system
+    // https://github.com/ember-cli/ember-cli/blob/04a38fda2c/lib/utilities/ember-app-utils.js#L131
+    // We re-implement in test-boot-ember-cli.js
+    continue;
+  }
+
+  const clone = element.cloneNode(true);
+
+  if (clone.tagName === "SCRIPT") {
+    clone.async = false;
+  }
+
+  document.querySelector("discourse-dynamic-test-js").appendChild(clone);
+}

app/assets/javascripts/discourse/public/assets/scripts/discourse-test-trigger-ember-cli-boot.js

@@ -0,0 +1 @@
+require("discourse/tests/test-boot-ember-cli");

app/assets/javascripts/discourse/tests/index.html

@@ -50,15 +50,22 @@
     <script src="{{rootURL}}assets/discourse-markdown.js"></script>
     <script src="{{rootURL}}assets/admin.js"></script>
     <script src="{{rootURL}}assets/wizard.js"></script>
-    {{content-for "test-plugin-js"}}
-    <script src="{{rootURL}}assets/test-helpers.js"></script>
-    <script src="{{rootURL}}assets/core-tests.js"></script>
-    {{content-for "test-plugin-tests-js"}}
-    <script>
-      require("discourse/tests/test-boot-ember-cli");
-    </script>
-    <script src="{{rootURL}}assets/scripts/discourse-boot.js"></script>
 
-    {{content-for "body-footer"}} {{content-for "test-body-footer"}}
+    <template id="dynamic-test-js">
+      {{content-for "test-plugin-js"}}
+      <script defer src="{{rootURL}}assets/test-helpers.js"></script>
+      <script defer src="{{rootURL}}assets/core-tests.js"></script>
+      {{content-for "test-plugin-tests-js"}}
+      <script defer src="{{rootURL}}assets/scripts/discourse-test-trigger-ember-cli-boot.js"></script>
+      <script defer src="{{rootURL}}assets/scripts/discourse-boot.js"></script>
+      {{content-for "body-footer"}} {{content-for "test-body-footer"}}
+    </template>
+
+    <discourse-dynamic-test-js>
+    </discourse-dynamic-test-js>
+
+    <!-- This script takes the <template>, filters plugin assets as required, then appends to discourse-dynamic-test-js -->
+    <script src="{{rootURL}}assets/scripts/discourse-test-load-dynamic-js.js"></script>
+
   </body>
 </html>

app/assets/javascripts/discourse/tests/test-boot-ember-cli.js

@@ -8,6 +8,13 @@ import { setup } from "qunit-dom";
 setEnvironment("testing");
 
 document.addEventListener("discourse-booted", () => {
+  // eslint-disable-next-line no-undef
+  if (!EmberENV.TESTS_FILE_LOADED) {
+    throw new Error(
+      'The tests file was not loaded. Make sure your tests index.html includes "assets/tests.js".'
+    );
+  }
+
   const script = document.getElementById("plugin-test-script");
   if (script && !requirejs.entries["discourse/tests/plugin-tests"]) {
     throw new Error(