maint(pat-depends): Always throw update event and add changed dom structure.

Trigger pat-update on pat-depends itself and add updated dom structure to pat-update event data.
This allows other patterns to also listen to changes in pat-depends.
Goes together with the previous change on pat-autofocus.

Related: #1092

Author: thet

src/pat/depends/depends.js

@@ -99,13 +99,13 @@ export default Base.extend({
         } else if (this.$el.is("a")) {
             this.$el.off("click.patternDepends");
         }
-        if (this.$el.hasClass("pat-autosuggest")) {
-            this.$el.findInclusive("input.pat-autosuggest").trigger("pat-update", {
-                pattern: "depends",
-                enabled: true,
-            });
-        }
         this.$el.removeClass("disabled");
+        this.$el.trigger("pat-update", {
+            pattern: "depends",
+            action: "attribute-changed",
+            dom: this.$el[0],
+            enabled: true,
+        });
     },
 
     disable() {
@@ -114,13 +114,13 @@ export default Base.extend({
         } else if (this.$el.is("a")) {
             this.$el.on("click.patternDepends", (e) => e.preventDefault());
         }
-        if (this.$el.hasClass("pat-autosuggest")) {
-            this.$el.findInclusive("input.pat-autosuggest").trigger("pat-update", {
-                pattern: "depends",
-                enabled: false,
-            });
-        }
         this.$el.addClass("disabled");
+        this.$el.trigger("pat-update", {
+            pattern: "depends",
+            action: "attribute-changed",
+            dom: this.$el[0],
+            enabled: false,
+        });
     },
 
     onChange(event) {

src/pat/depends/depends.test.js

@@ -3,7 +3,7 @@ import pattern from "./depends";
 import utils from "../../core/utils";
 
 describe("pat-depends", function () {
-    describe("init", function () {
+    describe("1 - init", function () {
         beforeEach(function () {
             $("<div/>", { id: "lab" }).appendTo(document.body);
         });
@@ -40,7 +40,7 @@ describe("pat-depends", function () {
         });
     });
 
-    describe("disable", function () {
+    describe("2 - disable", function () {
         beforeEach(function () {
             $("<div/>", { id: "lab" }).appendTo(document.body);
         });
@@ -84,7 +84,7 @@ describe("pat-depends", function () {
         });
     });
 
-    describe("enable", function () {
+    describe("3 - enable", function () {
         beforeEach(function () {
             $("<div/>", { id: "lab" }).appendTo(document.body);
         });
@@ -128,4 +128,63 @@ describe("pat-depends", function () {
             expect($._data($dependent[0]).events).toBe(undefined);
         });
     });
+
+    describe("4 - pat-update", function () {
+        it("4.1 - Throw pat-update on enabling", async function () {
+            document.body.innerHTML = `
+                <input
+                    type="checkbox"
+                    id="control"
+                    value="yes"
+                    checked="checked"/>
+                <button
+                    id="dependent"
+                    type="button"
+                    class="pat-depends"
+                    data-pat-depends="condition: control"
+                    >Click me</button>
+            `;
+            const el = document.querySelector(".pat-depends");
+            const instance = new pattern(el);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            let data;
+            $(el).on("pat-update", (e, d) => {
+                data = d;
+            });
+            instance.enable();
+            expect(data.pattern).toBe("depends");
+            expect(data.action).toBe("attribute-changed");
+            expect(data.dom).toBe(el);
+            expect(data.enabled).toBe(true);
+        });
+        it("4.2 - Throw pat-update on disabling", async function () {
+            document.body.innerHTML = `
+                <input
+                    type="checkbox"
+                    id="control"
+                    value="yes"
+                    checked="checked"/>
+                <button
+                    id="dependent"
+                    type="button"
+                    class="pat-depends"
+                    data-pat-depends="condition: control"
+                    >Click me</button>
+            `;
+            const el = document.querySelector(".pat-depends");
+            const instance = new pattern(el);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            let data;
+            $(el).on("pat-update", (e, d) => {
+                data = d;
+            });
+            instance.disable();
+            expect(data.pattern).toBe("depends");
+            expect(data.action).toBe("attribute-changed");
+            expect(data.dom).toBe(el);
+            expect(data.enabled).toBe(false);
+        });
+    });
 });