feature(ngProbe): Allow specifying a root Node when using a selector

Author: vicb

lib/introspection.dart

@@ -64,18 +64,35 @@ List<ElementProbe> _findAllProbesInTree(dom.Node node) {
  *
  * The node parameter could be:
  * * a [dom.Node],
- * * a CSS selector for this node.
+ * * a CSS selector to look for a matching node inside the [root] or the dom.document.
+ *
+ * Specifying a [root] element allows querying a node that is not attached to the DOM. It is an
+ * error to pass a [root] element that is already attached to the DOM.
  *
  * **NOTE:** This global method is here to make it easier to debug Angular
  * application from the browser's REPL, unit or end-to-end tests. The
  * function is not intended to be called from Angular application.
  */
-ElementProbe ngProbe(nodeOrSelector) {
-  if (nodeOrSelector == null) throw "ngProbe called without node";
+ElementProbe ngProbe(nodeOrSelector, [dom.Node root]) {
+  if (nodeOrSelector == null) throw "ngProbe called without node/selector";
   var node = nodeOrSelector;
   if (nodeOrSelector is String) {
-    var nodes = ngQuery(dom.document, nodeOrSelector);
-    node = (nodes.isNotEmpty) ? nodes.first : null;
+    if (root == null) {
+      root = dom.document;
+    } else {
+      var attached = false;
+      for (var parent = root.parentNode; parent != null; parent = parent.parentNode) {
+        if (parent == dom.document) {
+          attached = true;
+          break;
+        }
+      }
+      if (attached) throw "The root element must not be attached to the DOM";
+      root = new dom.DivElement()..append(root);
+    }
+    var nodes = ngQuery(root, nodeOrSelector);
+    if (nodes.isEmpty) throw "The '$nodeOrSelector' selector does not match any node";
+    node = nodes.first;
   }
   var probe = _findProbeWalkingUp(node);
   if (probe != null) {
@@ -93,7 +110,8 @@ ElementProbe ngProbe(nodeOrSelector) {
  * application from the browser's REPL, unit or end-to-end tests. The function
  * is not intended to be called from Angular application.
  */
-DirectiveInjector ngInjector(nodeOrSelector) => ngProbe(nodeOrSelector).injector;
+DirectiveInjector ngInjector(nodeOrSelector, [dom.Node root]) =>
+    ngProbe(nodeOrSelector, root).injector;
 
 
 /**
@@ -103,11 +121,10 @@ DirectiveInjector ngInjector(nodeOrSelector) => ngProbe(nodeOrSelector).injector
  * application from the browser's REPL, unit or end-to-end tests. The function
  * is not intended to be called from Angular application.
  */
-Scope ngScope(nodeOrSelector) => ngProbe(nodeOrSelector).scope;
+Scope ngScope(nodeOrSelector, [dom.Node root]) => ngProbe(nodeOrSelector, root).scope;
 
 
-List<dom.Element> ngQuery(dom.Node element, String selector,
-                          [String containsText]) {
+List<dom.Element> ngQuery(dom.Node element, String selector, [String containsText]) {
   var list = [];
   var children = [element];
   if ((element is dom.Element) && element.shadowRoot != null) {

lib/mock/test_bed.dart

@@ -31,7 +31,7 @@ class TestBed {
    *   - [List<Node>] then treat it as a collection of nods
    *
    * After the compilation the [rootElements] contains an array of compiled root nodes,
-   * and [rootElement] contains the first element from the [rootElemets].
+   * and [rootElement] contains the first element from the [rootElements].
    *
    * An option [scope] parameter can be supplied to link it with non root scope.
    */

test/introspection_spec.dart

@@ -35,17 +35,32 @@ void main() {
     it('should select probe using CSS selector', (TestBed _) {
       _.compile('<div ng-show="true">WORKS</div>');
       document.body.append(_.rootElement);
-      var div = new Element.html('<div><p><span></span></p></div>');
-      var span = div.querySelector('span');
-      var shadowRoot = span.createShadowRoot();
-      shadowRoot.innerHtml = '<ul><li>stash</li><li>secret</li><ul>';
-
       ElementProbe probe = ngProbe('[ng-show]');
       expect(probe).toBeDefined();
       expect(probe.injector.get(NgShow) is NgShow).toEqual(true);
       _.rootElement.remove();
     });
 
+    it('should throw if the root Element is attached to the DOM', (TestBed _) {
+      _.compile('<div ng-show="true">WORKS</div>');
+      document.body.append(_.rootElement);
+      expect(() => ngProbe('[ng-show]', _.rootElement))
+          .toThrow("The root element must not be attached to the DOM");
+    });
+
+    it('should select probe using CSS selector inside the given root element',(TestBed _) {
+      _.compile('<div ng-show="true">WORKS</div>');
+      ElementProbe probe = ngProbe('[ng-show]', _.rootElement);
+      expect(probe).toBeDefined();
+      expect(probe.injector.get(NgShow) is NgShow).toEqual(true);
+    });
+
+    it('should throw when the selector does not match any element', (TestBed _) {
+      _.compile('<div></div>');
+      expect(() => ngProbe('input', _.rootElement))
+          .toThrowWith(message: "The 'input' selector does not match any node");
+    });
+
     it('should select elements in the root shadow root', () {
       var div = new Element.html('<div></div>');
       var shadowRoot = div.createShadowRoot();