diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.gjs b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
index 5ba00a62dd1..2a3e14f97d9 100644
--- a/app/assets/javascripts/discourse/app/components/ace-editor.gjs
+++ b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
@@ -143,7 +143,6 @@ export default class AceEditor extends Component {
     this.editor.$blockScrolling = Infinity;
     this.editor.renderer.setScrollMargin(10, 10);
 
-    element.setAttribute("data-editor", this.editor);
     this.changeDisabledState();
     this.warnSCSSDeprecations();
 
@@ -185,7 +184,7 @@ export default class AceEditor extends Component {
 
     this.editor?.container.parentNode.parentNode.setAttribute(
       "data-disabled",
-      this.args.disabled
+      !!this.args.disabled
     );
   }
 
diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
similarity index 51%
rename from app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.js
rename to app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
index 050ec713d74..3f4f2cc8a51 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
@@ -1,39 +1,13 @@
-import { render, waitUntil } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import ThemeSettingsEditor from "admin/components/theme-settings-editor";
 
-/*
-example valid content for ace editor:
-[
-	{
-		"setting": "whitelisted_fruits",
-		"value": "uudu"
-	},
-	{
-		"setting": "favorite_fruit",
-		"value": "orange"
-	},
-	{
-		"setting": "year",
-		"value": 1992
-	},
-	{
-		"setting": "banner_links",
-		"value": "[{\"icon\":\"info-circle\",\"text\":\"about this site\",\"url\":\"/faq\"}, {\"icon\":\"users\",\"text\":\"meet our staff\",\"url\":\"/about\"}, {\"icon\":\"star\",\"text\":\"your preferences\",\"url\":\"/my/preferences\"}]"
-	}
-]
- */
-
-function glimmerComponent(owner, componentName, args = {}) {
-  const { class: componentClass } = owner.factoryFor(
-    `component:${componentName}`
-  );
-  let componentManager = owner.lookup("component-manager:glimmer");
-  let component = componentManager.createComponent(componentClass, {
+function glimmerComponent(owner, componentClass, args = {}) {
+  const componentManager = owner.lookup("component-manager:glimmer");
+  return componentManager.createComponent(componentClass, {
     named: args,
   });
-  return component;
 }
 
 module(
@@ -41,38 +15,35 @@ module(
   function (hooks) {
     setupRenderingTest(hooks);
 
-    let model;
-
     test("renders passed json model object into string in the ace editor", async function (assert) {
-      await render(hbs`<ThemeSettingsEditor @model={{hash
-        model=(hash
-         settings=(array
-          (hash
-            setting='setting1'
-            value='value1')
-          (hash
-            setting='setting2'
-            value='value2')
-          )
-        )
-    }} />`);
+      const model = {
+        model: {
+          settings: [
+            { setting: "setting1", value: "value1" },
+            { setting: "setting2", value: "value2" },
+          ],
+        },
+      };
 
-      await waitUntil(() => document.querySelectorAll(".ace_line")[0]);
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
 
       assert.dom(".ace_line").hasText("[");
     });
 
     test("input is valid json", async function (assert) {
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: [],
       });
+
       component.editedContent = "foo";
       component.save();
       assert.strictEqual(component.errors[0].setting, "Syntax Error");
     });
 
     test("'setting' key is present for each setting", async function (assert) {
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: [],
       });
 
@@ -82,7 +53,7 @@ module(
     });
 
     test("'value' key is present for each setting", async function (assert) {
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: [],
       });
 
@@ -92,26 +63,25 @@ module(
     });
 
     test("only 'setting' and 'value' keys are present, no others", async function (assert) {
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: [],
       });
 
-      component.editedContent = JSON.stringify([{ otherkey: "otherkey1" }]);
+      component.editedContent = JSON.stringify([{ other_key: "other-key-1" }]);
       component.save();
       assert.strictEqual(component.errors[0].setting, "Syntax Error");
     });
 
     test("no settings are deleted", async function (assert) {
-      model = {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: {
-          settings: [
-            { setting: "foo", value: "foo" },
-            { setting: "bar", value: "bar" },
-          ],
+          model: {
+            settings: [
+              { setting: "foo", value: "foo" },
+              { setting: "bar", value: "bar" },
+            ],
+          },
         },
-      };
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
-        model,
       });
 
       component.editedContent = JSON.stringify([
@@ -123,14 +93,12 @@ module(
     });
 
     test("no settings are added", async function (assert) {
-      model = {
+      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
         model: {
-          settings: [{ setting: "bar", value: "bar" }],
+          model: {
+            settings: [{ setting: "bar", value: "bar" }],
+          },
         },
-      };
-
-      const component = glimmerComponent(this.owner, "theme-settings-editor", {
-        model,
       });
 
       component.editedContent = JSON.stringify([
@@ -138,6 +106,7 @@ module(
         { setting: "bar", value: "bar" },
       ]);
       component.save();
+
       assert.strictEqual(component.errors[0].setting, "foo");
     });
   }