diff --git a/app/assets/javascripts/discourse/app/components/ace-editor.gjs b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
index 2a3e14f97d9..a3aad9981d3 100644
--- a/app/assets/javascripts/discourse/app/components/ace-editor.gjs
+++ b/app/assets/javascripts/discourse/app/components/ace-editor.gjs
@@ -6,6 +6,7 @@ import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import loadAce from "discourse/lib/load-ace-editor";
+import { isTesting } from "discourse-common/config/environment";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
@@ -143,6 +144,10 @@ export default class AceEditor extends Component {
     this.editor.$blockScrolling = Infinity;
     this.editor.renderer.setScrollMargin(10, 10);
 
+    if (isTesting()) {
+      element.aceEditor = this.editor;
+    }
+
     this.changeDisabledState();
     this.warnSCSSDeprecations();
 
diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
index 3f4f2cc8a51..9d901b0585a 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs
@@ -1,15 +1,9 @@
-import { render } from "@ember/test-helpers";
+import { click, fillIn, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
 import ThemeSettingsEditor from "admin/components/theme-settings-editor";
 
-function glimmerComponent(owner, componentClass, args = {}) {
-  const componentManager = owner.lookup("component-manager:glimmer");
-  return componentManager.createComponent(componentClass, {
-    named: args,
-  });
-}
-
 module(
   "Integration | Component | admin-theme-settings-editor",
   function (hooks) {
@@ -33,81 +27,104 @@ module(
     });
 
     test("input is valid json", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
-        model: [],
-      });
+      const model = [];
 
-      component.editedContent = "foo";
-      component.save();
-      assert.strictEqual(component.errors[0].setting, "Syntax Error");
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
+
+      await fillIn(".ace textarea", "foo");
+      await click("button#save");
+
+      assert.dom(".validation-error").hasText(/Syntax Error/);
     });
 
     test("'setting' key is present for each setting", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
-        model: [],
-      });
+      const model = [];
 
-      component.editedContent = JSON.stringify([{ value: "value1" }]);
-      component.save();
-      assert.strictEqual(component.errors[0].setting, "Syntax Error");
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
+
+      await fillIn(".ace textarea", `[{ "value": "value1" }]`);
+      await click("button#save");
+
+      assert.dom(".validation-error").hasText(/Syntax Error/);
     });
 
     test("'value' key is present for each setting", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
-        model: [],
-      });
+      const model = [];
 
-      component.editedContent = JSON.stringify([{ setting: "setting1" }]);
-      component.save();
-      assert.strictEqual(component.errors[0].setting, "Syntax Error");
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
+
+      await fillIn(".ace textarea", `[{ "setting": "setting1" }]`);
+      await click("button#save");
+
+      assert.dom(".validation-error").hasText(/Syntax Error/);
     });
 
     test("only 'setting' and 'value' keys are present, no others", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
-        model: [],
-      });
+      const model = [];
 
-      component.editedContent = JSON.stringify([{ other_key: "other-key-1" }]);
-      component.save();
-      assert.strictEqual(component.errors[0].setting, "Syntax Error");
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
+
+      await fillIn(".ace textarea", `[{ "other_key": "other-key-1" }]`);
+      await click("button#save");
+
+      assert.dom(".validation-error").hasText(/Syntax Error/);
     });
 
     test("no settings are deleted", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
+      const model = {
         model: {
-          model: {
-            settings: [
-              { setting: "foo", value: "foo" },
-              { setting: "bar", value: "bar" },
-            ],
-          },
+          settings: [{ setting: "foo", value: "foo" }],
         },
-      });
+      };
 
-      component.editedContent = JSON.stringify([
-        { setting: "bar", value: "bar" },
-      ]);
-      component.save();
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
 
-      assert.strictEqual(component.errors[0].setting, "foo");
+      query(".ace").aceEditor.session.doc.setValue(
+        JSON.stringify([{ setting: "bar", value: "bar" }])
+      );
+      await click("button#save");
+
+      assert
+        .dom(".validation-error")
+        .hasText(
+          "foo: These settings were deleted. Please restore them and try again."
+        );
     });
 
     test("no settings are added", async function (assert) {
-      const component = glimmerComponent(this.owner, ThemeSettingsEditor, {
+      const model = {
         model: {
-          model: {
-            settings: [{ setting: "bar", value: "bar" }],
-          },
+          settings: [{ setting: "bar", value: "bar" }],
         },
-      });
+      };
 
-      component.editedContent = JSON.stringify([
-        { setting: "foo", value: "foo" },
-        { setting: "bar", value: "bar" },
-      ]);
-      component.save();
+      await render(<template>
+        <ThemeSettingsEditor @model={{model}} />
+      </template>);
 
-      assert.strictEqual(component.errors[0].setting, "foo");
+      query(".ace").aceEditor.session.doc.setValue(
+        JSON.stringify([
+          { setting: "foo", value: "foo" },
+          { setting: "bar", value: "bar" },
+        ])
+      );
+      await click("button#save");
+
+      assert
+        .dom(".validation-error")
+        .hasText(
+          "foo: These settings were added. Please remove them and try again."
+        );
     });
   }
 );