Repository: DevExpress/devextreme-vue
Pull request #189 (2018-11-06 10:57:53)

Emit root events for nested options with correct value (#184)


Patch:
diff --git a/src/core/configuration.ts b/src/core/configuration.ts
index c3e1cde..a1fd3a6 100644
--- a/src/core/configuration.ts
+++ b/src/core/configuration.ts
@@ -159,11 +159,15 @@ function bindOptionWatchers(config: Configuration, vueInstance: Pick<Vue, "$watc
 function subscribeOnUpdates(config: Configuration, vueInstance: Pick<Vue, "$emit">): void {
     config.optionChangedFunc = (args: any) => {
         let optionName = args.name;
+        let optionValue = args.value;
         const fullOptionPath = config.fullPath + ".";
+
         if (config.name && config.name === args.name && args.fullName.indexOf(fullOptionPath) === 0) {
             optionName = args.fullName.slice(fullOptionPath.length);
+        } else if (args.fullName !== args.name) {
+            optionValue = args.component.option(optionName);
         }
-        vueInstance.$emit("update:" + optionName, args.value);
+        vueInstance.$emit("update:" + optionName, optionValue);
     };
 }
 


Test patch:
diff --git a/src/core/configuration.test.ts b/src/core/configuration.test.ts
index 0007950..33bf6d1 100644
--- a/src/core/configuration.test.ts
+++ b/src/core/configuration.test.ts
@@ -102,7 +102,7 @@ it("binds option watchers", () => {
 });
 
 it("subscribes on updates", () => {
-    const $emitFunc = jest.fn();
+    const emitStub = jest.fn();
 
     const config: any = {
         name: null
@@ -111,18 +111,17 @@ it("subscribes on updates", () => {
     subscribeOnUpdates(
         config,
         {
-            $emit: $emitFunc
+            $emit: emitStub
         }
     );
     config.optionChangedFunc({name: "option1", fullName: "option1", value: "value"});
-    expect($emitFunc.mock.calls[0][0]).toBe("update:option1");
-    expect($emitFunc.mock.calls[0][1]).toBe("value");
 
-    expect($emitFunc).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledWith("update:option1", "value");
 });
 
 it("subscribes on updates of nested options", () => {
-    const $emitFunc = jest.fn();
+    const emitStub = jest.fn();
 
     const config: any = {
         name: "widgetOption",
@@ -132,14 +131,39 @@ it("subscribes on updates of nested options", () => {
     subscribeOnUpdates(
         config,
         {
-            $emit: $emitFunc
+            $emit: emitStub
         }
     );
     config.optionChangedFunc({name: "widgetOption", fullName: "widgetOption[1].option1", value: "value"});
-    expect($emitFunc.mock.calls[0][0]).toBe("update:option1");
-    expect($emitFunc.mock.calls[0][1]).toBe("value");
 
-    expect($emitFunc).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledWith("update:option1", "value");
+});
+
+it("subscribes on nested updates in root component", () => {
+    const emitStub = jest.fn();
+
+    const config: any = {
+        name: null
+    };
+
+    subscribeOnUpdates(
+        config,
+        {
+            $emit: emitStub
+        }
+    );
+    config.optionChangedFunc({
+        name: "widgetOption",
+        fullName: "widgetOption[1].option1",
+        value: "value",
+        component: {
+            option: (name: string) => name === "widgetOption" && "widgetOptionValue"
+        }
+    });
+
+    expect(emitStub).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledWith("update:widgetOption", "widgetOptionValue");
 });
 
 describe("initial configuration", () => {