FIX: Track native class deps in discourseComputed (#18023)

Co-authored-by: David Taylor <david@taylorhq.com>

app/assets/javascripts/discourse-common/addon/utils/handle-descriptor.js

@@ -11,7 +11,7 @@ export default function handleDescriptor(target, key, desc, params = []) {
     desc.value = undefined;
     desc.get = callUserSuppliedGet(params, val);
 
-    return computed(target, key, desc);
+    return computed(...params)(target, key, desc);
   } else {
     return {
       enumerable: desc.enumerable,

app/assets/javascripts/discourse/tests/unit/utils/decorators-test.js

@@ -1,12 +1,11 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import Component from "@ember/component";
-import { clearRender } from "@ember/test-helpers";
+import { clearRender, render } from "@ember/test-helpers";
 import discourseComputed, {
   afterRender,
 } from "discourse-common/utils/decorators";
-import componentTest, {
+import { exists } from "discourse/tests/helpers/qunit-helpers";
-  setupRenderingTest,
-} from "discourse/tests/helpers/component-test";
-import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
 import { hbs } from "ember-cli-htmlbars";
 
 const fooComponent = Component.extend({
@@ -32,8 +31,19 @@ const fooComponent = Component.extend({
   },
 });
 
+const EmberObjectComponent = Component.extend({
+  name: "",
+  layout: hbs`<span class="ember-object-component">{{this.text}}</span>`,
+
+  @discourseComputed("name")
+  text(name) {
+    return `hello, ${name}`;
+  },
+});
+
 class NativeComponent extends Component {
   name = "";
+  layout = hbs`<span class="native-component">{{this.text}}</span>`;
 
   @discourseComputed("name")
   text(name) {
@@ -41,18 +51,15 @@ class NativeComponent extends Component {
   }
 }
 
-discourseModule("Unit | Utils | decorators", function (hooks) {
+module("Unit | Utils | decorators", function (hooks) {
   setupRenderingTest(hooks);
 
-  componentTest("afterRender", {
+  test("afterRender", async function (assert) {
-    template: hbs`{{foo-component baz=baz}}`,
-
-    beforeEach() {
     this.registry.register("component:foo-component", fooComponent);
     this.set("baz", 0);
-    },
 
-    async test(assert) {
+    await render(hbs`{{foo-component baz=baz}}`);
+
     assert.ok(exists(document.querySelector(".foo-component")));
     assert.strictEqual(this.baz, 1);
 
@@ -60,30 +67,46 @@ discourseModule("Unit | Utils | decorators", function (hooks) {
 
     assert.ok(!exists(document.querySelector(".foo-component")));
     assert.strictEqual(this.baz, 1);
-    },
   });
 
-  componentTest("discourseComputed works in native classes", {
+  test("discourseComputed works in EmberObject classes", async function (assert) {
-    template: hbs`<NativeComponent @name="Jarek" />`,
+    this.registry.register(
+      "component:ember-object-component",
+      EmberObjectComponent
+    );
 
-    beforeEach() {
+    this.set("name", "Jarek");
-      // eslint-disable-next-line no-undef
+    await render(hbs`<EmberObjectComponent @name={{this.name}} />`);
-      Ember.TEMPLATES[
+
-        "components/native-component"
+    assert.strictEqual(
-      ] = hbs`<span class="native-component">{{this.text}}</span>`;
+      document.querySelector(".ember-object-component").textContent,
+      "hello, Jarek"
+    );
+
+    this.set("name", "Joffrey");
+    assert.strictEqual(
+      document.querySelector(".ember-object-component").textContent,
+      "hello, Joffrey",
+      "rerenders the component when arguments change"
+    );
+  });
+
+  test("discourseComputed works in native classes", async function (assert) {
     this.registry.register("component:native-component", NativeComponent);
-    },
 
-    afterEach() {
+    this.set("name", "Jarek");
-      // eslint-disable-next-line no-undef
+    await render(hbs`<NativeComponent @name={{this.name}} />`);
-      delete Ember.TEMPLATES["components/native-component"];
-    },
 
-    test(assert) {
     assert.strictEqual(
       document.querySelector(".native-component").textContent,
       "hello, Jarek"
     );
-    },
+
+    this.set("name", "Joffrey");
+    assert.strictEqual(
+      document.querySelector(".native-component").textContent,
+      "hello, Joffrey",
+      "rerenders the component when arguments change"
+    );
   });
 });