diff --git a/app/assets/javascripts/discourse/app/components/mount-widget.js b/app/assets/javascripts/discourse/app/components/mount-widget.js index 9fd7776ae11..d14f255cce5 100644 --- a/app/assets/javascripts/discourse/app/components/mount-widget.js +++ b/app/assets/javascripts/discourse/app/components/mount-widget.js @@ -166,4 +166,8 @@ export default Component.extend({ unmountChildComponent(info) { this._childComponents.removeObject(info); }, + + didUpdateAttrs() { + this.queueRerender(); + }, }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js index 497725a05b3..6d9df71943a 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js @@ -158,12 +158,6 @@ module("Integration | Component | Widget | render-glimmer", function (hooks) { ); await fillIn("input.dynamic-value-input", "somedynamicvalue"); - assert.strictEqual( - query("div.glimmer-content").innerText, - "arg1=val1 dynamicArg=", - "changed arguments do not change before rerender" - ); - await click(".my-widget button"); assert.strictEqual( query("div.glimmer-content").innerText, @@ -200,16 +194,10 @@ module("Integration | Component | Widget | render-glimmer", function (hooks) { DemoComponent.eventLog = []; await fillIn("input.dynamic-value-input", "somedynamicvalue"); - assert.deepEqual( - DemoComponent.eventLog, - [], - "component is not notified of attr change before widget rerender" - ); - await click(".my-widget button"); assert.deepEqual( DemoComponent.eventLog, - ["didReceiveAttrs"], + ["didReceiveAttrs", "didReceiveAttrs"], // once for input, once for event "component is notified of attr change during widget rerender" ); diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-test.js index 04cf9f31959..8cefc8d900b 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-test.js @@ -1,6 +1,6 @@ import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { click, render } from "@ember/test-helpers"; +import { click, render, settled } from "@ember/test-helpers"; import { count, exists, query } from "discourse/tests/helpers/qunit-helpers"; import { hbs } from "ember-cli-htmlbars"; import widgetHbs from "discourse/widgets/hbs-compiler"; @@ -33,6 +33,24 @@ module("Integration | Component | Widget | base", function (hooks) { assert.strictEqual(query(".test").innerText, "Hello Robin"); }); + test("widget rerenders when args change", async function (assert) { + createWidget("hello-test", { + tagName: "div.test", + template: widgetHbs`Hello {{attrs.name}}`, + }); + + this.set("args", { name: "Robin" }); + + await render(hbs``); + + assert.strictEqual(query(".test").innerText, "Hello Robin"); + + this.set("args", { name: "David" }); + await settled(); + + assert.strictEqual(query(".test").innerText, "Hello David"); + }); + test("widget services", async function (assert) { createWidget("service-test", { tagName: "div.base-url-test",