fix(ivy): debug node names should match user declaration (#32328)

PR Close #32328

packages/core/src/debug/debug_node.ts

@@ -247,7 +247,17 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
     return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode as Element : null;
   }
 
-  get name(): string { return this.nativeNode.nodeName; }
+  get name(): string {
+    try {
+      const context = loadLContext(this.nativeNode) !;
+      const lView = context.lView;
+      const tData = lView[TVIEW].data;
+      const tNode = tData[context.nodeIndex] as TNode;
+      return tNode.tagName !;
+    } catch (e) {
+      return this.nativeNode.nodeName;
+    }
+  }
 
   /**
    *  Gets a map of property names to property values for an element.

packages/core/test/debug/debug_node_spec.ts

@@ -1036,4 +1036,19 @@ class TestCmptWithPropBindings {
     }
     expect(superParentName).not.toEqual('');
   });
+
+  it('should match node name with declared casing', () => {
+    @Component({template: `<div></div><myComponent></myComponent>`})
+    class Wrapper {
+    }
+
+    @Component({selector: 'myComponent', template: ''})
+    class MyComponent {
+    }
+
+    const fixture = TestBed.configureTestingModule({declarations: [Wrapper, MyComponent]})
+                        .createComponent(Wrapper);
+    expect(fixture.debugElement.query(e => e.name === 'myComponent')).toBeTruthy();
+    expect(fixture.debugElement.query(e => e.name === 'div')).toBeTruthy();
+  });
 }