Fix getComponentForEl with nested fragments (returns owner component) (…

…#1382)

* Fix getComponentForEl with nested fragments (returns owner component)

src/runtime/components/util-browser.js

@@ -11,22 +11,15 @@ var componentLookup = {};
 var defaultDocument = document;
 var EMPTY_OBJECT = {};
 
-function getParentComponentForEl(node) {
-    while (node && !componentsByDOMNode.get(node)) {
-        node = node.previousSibling || node.parentNode;
-        node = (node && node.fragment) || node;
-    }
-    return node && componentsByDOMNode.get(node);
-}
-
 function getComponentForEl(el, doc) {
     if (el) {
         var node =
             typeof el == "string"
                 ? (doc || defaultDocument).getElementById(el)
                 : el;
         if (node) {
-            return getParentComponentForEl(node);
+            var vElement = vElementsByDOMNode.get(node);
+            return vElement && vElement.___ownerComponent;
         }
     }
 }

test/components-browser/fixtures/get-component-for-el-nested-fragments/components/child/index.marko

@@ -0,0 +1,15 @@
+class {
+    onCreate(input) {
+        this.name = input.name;
+    }
+}
+
+<macro|input| name="fragment">
+    <${input}/>
+</macro>
+
+<fragment>
+    <fragment>
+        <div class=input.name/>
+    </fragment>
+</fragment>

test/components-browser/fixtures/get-component-for-el-nested-fragments/index.marko

@@ -0,0 +1,19 @@
+class {
+    onCreate() {
+        this.name = "parent";
+    }
+}
+
+<macro|input| name="fragment">
+    <${input}/>
+</macro>
+
+<div key="root">
+    <fragment>
+        <fragment>
+            <child name="child-a"/>
+        </fragment>
+    </fragment>
+    <div.child-b/>
+    <child name="child-c"/>
+</div>

test/components-browser/fixtures/get-component-for-el-nested-fragments/test.js

@@ -0,0 +1,14 @@
+var expect = require("chai").expect;
+var getComponentForEl = require("marko/components").getComponentForEl;
+
+module.exports = function(helpers) {
+    var component = helpers.mount(require.resolve("./index.marko"), {});
+    var root = component.getEl("root");
+    var childA = root.querySelector(".child-a");
+    var childB = root.querySelector(".child-b");
+    var childC = root.querySelector(".child-c");
+
+    expect(getComponentForEl(childA)).has.property("name", "child-a");
+    expect(getComponentForEl(childB)).has.property("name", "parent");
+    expect(getComponentForEl(childC)).has.property("name", "child-c");
+};