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

Co-authored-by: David Taylor <david@taylorhq.com>
This commit is contained in:
Jarek Radosz 2022-08-22 17:33:32 +02:00 committed by GitHub
parent b567cebffe
commit 21abcfe5a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 39 deletions

View File

@ -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,

View File

@ -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, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
import { 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,49 +51,62 @@ class NativeComponent extends Component {
}
}
discourseModule("Unit | Utils | decorators", function (hooks) {
module("Unit | Utils | decorators", function (hooks) {
setupRenderingTest(hooks);
componentTest("afterRender", {
template: hbs`{{foo-component baz=baz}}`,
test("afterRender", async function (assert) {
this.registry.register("component:foo-component", fooComponent);
this.set("baz", 0);
beforeEach() {
this.registry.register("component:foo-component", fooComponent);
this.set("baz", 0);
},
await render(hbs`{{foo-component baz=baz}}`);
async test(assert) {
assert.ok(exists(document.querySelector(".foo-component")));
assert.strictEqual(this.baz, 1);
assert.ok(exists(document.querySelector(".foo-component")));
assert.strictEqual(this.baz, 1);
await clearRender();
await clearRender();
assert.ok(!exists(document.querySelector(".foo-component")));
assert.strictEqual(this.baz, 1);
},
assert.ok(!exists(document.querySelector(".foo-component")));
assert.strictEqual(this.baz, 1);
});
componentTest("discourseComputed works in native classes", {
template: hbs`<NativeComponent @name="Jarek" />`,
test("discourseComputed works in EmberObject classes", async function (assert) {
this.registry.register(
"component:ember-object-component",
EmberObjectComponent
);
beforeEach() {
// eslint-disable-next-line no-undef
Ember.TEMPLATES[
"components/native-component"
] = hbs`<span class="native-component">{{this.text}}</span>`;
this.registry.register("component:native-component", NativeComponent);
},
this.set("name", "Jarek");
await render(hbs`<EmberObjectComponent @name={{this.name}} />`);
afterEach() {
// eslint-disable-next-line no-undef
delete Ember.TEMPLATES["components/native-component"];
},
assert.strictEqual(
document.querySelector(".ember-object-component").textContent,
"hello, Jarek"
);
test(assert) {
assert.strictEqual(
document.querySelector(".native-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);
this.set("name", "Jarek");
await render(hbs`<NativeComponent @name={{this.name}} />`);
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"
);
});
});