ember-inspector 4.13.1 → 4.15.0

package/tests/ember_debug/view-debug-test.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-classic-classes */
 import {
   click,
   find,
@@ -8,28 +9,37 @@ import {
 import hasEmberVersion from '@ember/test-helpers/has-ember-version';
 import { A } from '@ember/array';
 import { run } from '@ember/runloop';
-import EmberComponent from '@ember/component';
+// eslint-disable-next-line ember/no-classic-components
+import EmberComponent, { setComponentTemplate } from '@ember/component';
 import EmberRoute from '@ember/routing/route';
 import EmberObject from '@ember/object';
 import Controller from '@ember/controller';
+// eslint-disable-next-line ember/no-at-ember-render-modifiers
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import QUnit, { module, test } from 'qunit';
 import { hbs } from 'ember-cli-htmlbars';
-import EmberDebug from 'ember-debug/main';
 import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
-import { isInVersionSpecifier } from 'ember-debug/utils/version';
-import { VERSION } from 'ember-debug/utils/ember';
+import { isInVersionSpecifier } from 'ember-debug/version';
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import EmberImport from 'ember-debug/ember';
+import EmberDebugImport from 'ember-debug/main';
+
+let EmberDebug;
+let VERSION;
 
 let templateOnlyComponent = null;
 try {
   // eslint-disable-next-line no-undef,ember/new-module-imports
   templateOnlyComponent = Ember._templateOnlyComponent;
   // eslint-disable-next-line no-empty
-} catch (e) {}
+} catch {}
 try {
+  // eslint-disable-next-line no-undef
   templateOnlyComponent = require('ember').default._templateOnlyComponent;
   // eslint-disable-next-line no-empty
-} catch (e) {}
+} catch {}
 
 // TODO switch to an adapter architecture, similar to the acceptance tests
 async function captureMessage(type, callback) {
@@ -103,7 +113,7 @@ function matchTree(tree, matchers, name) {
   QUnit.assert.strictEqual(
     tree.length,
     matchers.length,
-    `${name} tree and matcher should have the same length`
+    `${name} tree and matcher should have the same length`,
   );
 
   for (let i = 0; i < matchers.length; i++) {
@@ -117,7 +127,7 @@ function match(actual, matcher, message) {
   } else if (Array.isArray(matcher)) {
     QUnit.assert.ok(
       matcher.indexOf(actual) > -1,
-      `${actual} should be one of ${matcher.join('/')}`
+      `${actual} should be one of ${matcher.join('/')}`,
     );
   } else if (matcher instanceof RegExp && actual !== null) {
     QUnit.assert.ok(actual.match(matcher), `${actual} should match ${matcher}`);
@@ -146,23 +156,23 @@ function Serialized(id) {
   return (actual) => {
     QUnit.assert.ok(
       typeof actual === 'object' && actual !== null,
-      'serialized object should be an object'
+      'serialized object should be an object',
     );
     QUnit.assert.ok(
       typeof actual.id === 'string',
-      'serialized object should have a string id'
+      'serialized object should have a string id',
     );
 
     if (id === undefined) {
       QUnit.assert.ok(
         actual.id.match(/^ember[0-9]+$/),
-        'serialized object should have an ember guid'
+        'serialized object should have an ember guid',
       );
     } else {
       QUnit.assert.strictEqual(
         actual.id,
         id,
-        'serialized object should have an ember guid'
+        'serialized object should have an ember guid',
       );
     }
   };
@@ -172,13 +182,13 @@ function RenderNodeID(id) {
   return (actual) => {
     QUnit.assert.ok(
       typeof actual === 'string',
-      'render node id should be a string'
+      'render node id should be a string',
     );
 
     if (id === undefined) {
       QUnit.assert.ok(
         actual.match(/^.+render-node:.+$/),
-        `render node id should have the right format, actual: ${actual}`
+        `render node id should have the right format, actual: ${actual}`,
       );
     } else {
       QUnit.assert.strictEqual(actual, id, 'render node id should match');
@@ -190,32 +200,32 @@ function Args({ names = [], positionals = 0 } = {}) {
   return (actual) => {
     QUnit.assert.ok(
       typeof actual === 'object' && actual !== null,
-      'serialized args should be an object'
+      'serialized args should be an object',
     );
 
     QUnit.assert.ok(
       actual !== null && !actual.named.__ARGS__,
-      'serialized named args should not have __ARGS__'
+      'serialized named args should not have __ARGS__',
     );
 
     QUnit.assert.ok(
       typeof actual.named === 'object' && actual !== null,
-      'serialized named args should be an object'
+      'serialized named args should be an object',
     );
     QUnit.assert.deepEqual(
       Object.keys(actual.named),
       names,
-      'serialized named args should have the right keys'
+      'serialized named args should have the right keys',
     );
 
     QUnit.assert.ok(
       Array.isArray(actual.positional),
-      'serialized positional args should be an array'
+      'serialized positional args should be an array',
     );
     QUnit.assert.strictEqual(
       actual.positional.length,
       positionals,
-      'serialized positional args should have the right number of items'
+      'serialized positional args should have the right number of items',
     );
   };
 }
@@ -240,12 +250,12 @@ function RenderNode(
     match(
       actual.instance,
       instance,
-      `${name} ${type} should have correct instance`
+      `${name} ${type} should have correct instance`,
     );
     match(
       actual.template,
       template,
-      `${name} ${type} should have correct template`
+      `${name} ${type} should have correct template`,
     );
     match(actual.bounds, bounds, `${name} ${type} should have correct bounds`);
     matchTree(actual.children, children, `${name} ${type}`);
@@ -256,7 +266,7 @@ function Component(
   {
     name,
     instance = Serialized(),
-    template = `my-app/templates/components/${name}.hbs`,
+    template = `my-app/components/${name}.hbs`,
     bounds = 'single',
     ...options
   },
@@ -264,7 +274,7 @@ function Component(
 ) {
   return RenderNode(
     { name, instance, template, bounds, ...options, type: 'component' },
-    ...children
+    ...children,
   );
 }
 
@@ -280,7 +290,7 @@ function Modifier(
 ) {
   return RenderNode(
     { name, instance, template, bounds, ...options, type: 'modifier' },
-    ...children
+    ...children,
   );
 }
 
@@ -305,14 +315,25 @@ function HtmlElement(
       ...options,
       type: 'html-element',
     },
-    ...children
+    ...children,
   );
 }
 
+function RouteArgs() {
+  if (hasEmberVersion(6, 4)) {
+    // Related to routable components
+    return Args({ names: ['controller', 'model'] });
+  }
+  if (hasEmberVersion(3, 14)) {
+    return Args({ names: ['model'] });
+  }
+  return Args();
+}
+
 function Route(
   {
     name,
-    args = hasEmberVersion(3, 14) ? Args({ names: ['model'] }) : Args(),
+    args = RouteArgs(),
     instance = Serialized(),
     template = `my-app/templates/${name}.hbs`,
     ...options
@@ -323,8 +344,8 @@ function Route(
     { type: 'outlet', name: 'main', instance: undefined, template: null },
     RenderNode(
       { name, args, instance, template, ...options, type: 'route-template' },
-      ...children
-    )
+      ...children,
+    ),
   );
 }
 
@@ -336,7 +357,7 @@ function TopLevel(...children) {
       instance: Undefined(),
       template: /^packages\/.+\/templates\/outlet\.hbs$/,
     },
-    ...children
+    ...children,
   );
 }
 
@@ -351,6 +372,11 @@ function findInspectorElement(kind) {
 }
 
 module('Ember Debug - View', function (hooks) {
+  hooks.before(async function () {
+    EmberDebug = (await EmberDebugImport).default;
+    VERSION = (await EmberImport).VERSION;
+  });
+
   setupEmberDebugTest(hooks, {
     routes() {
       this.route('simple');
@@ -358,6 +384,7 @@ module('Ember Debug - View', function (hooks) {
       this.route('test-component-in-in-element');
       this.route('wormhole');
       this.route('inputs');
+      this.route('component-in-shadow-dom');
       this.route('comments', { resetNamespace: true }, function () {});
       this.route('posts', { resetNamespace: true });
     },
@@ -376,7 +403,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -389,7 +416,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -402,7 +429,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -415,7 +442,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -428,7 +455,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -441,7 +468,7 @@ module('Ember Debug - View', function (hooks) {
             },
           });
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -450,7 +477,7 @@ module('Ember Debug - View', function (hooks) {
         model() {
           return A(['first comment', 'second comment', 'third comment']);
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -459,7 +486,7 @@ module('Ember Debug - View', function (hooks) {
         model() {
           return 'String as model';
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -468,7 +495,7 @@ module('Ember Debug - View', function (hooks) {
         toString() {
           return 'App.ApplicationController';
         },
-      })
+      }),
     );
 
     this.owner.register(
@@ -481,50 +508,108 @@ module('Ember Debug - View', function (hooks) {
         toString() {
           return 'App.SimpleController';
         },
-      })
+      }),
     );
 
     this.owner.register(
-      'component:test-foo',
-      EmberComponent.extend({
-        classNames: ['simple-component'],
-        toString() {
-          return 'App.TestFooComponent';
+      'component:shadow-dom',
+      setComponentTemplate(
+        hbs(
+          `<div {{did-insert this.setupRoot}} />
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+        `,
+          {
+            moduleName: 'my-app/components/shadow-dom.hbs',
+          },
+        ),
+        class extends GlimmerComponent {
+          @tracked shadow;
+          setupRoot = (element) => {
+            this.shadow = element.attachShadow({ mode: 'open' });
+            window.testShadow = this.shadow;
+          };
         },
-      })
+      ),
     );
 
     this.owner.register(
-      'component:test-bar',
-      templateOnlyComponent?.() ||
+      'component:test-foo',
+      setComponentTemplate(
+        hbs('test-foo', {
+          moduleName: 'my-app/components/test-foo.hbs',
+        }),
         EmberComponent.extend({
-          tagName: '',
+          classNames: ['simple-component'],
           toString() {
-            return 'App.TestBarComponent';
+            return 'App.TestFooComponent';
           },
-        })
+        }),
+      ),
+    );
+
+    this.owner.register(
+      'component:test-bar',
+      setComponentTemplate(
+        hbs(
+          `<!-- before -->
+          <div class="another-component">
+          {{@value}}
+            <span>test</span>
+            <span class="bar-inner">bar</span>
+          </div>
+          <!-- after -->`,
+          { moduleName: 'my-app/components/test-bar.hbs' },
+        ),
+        templateOnlyComponent?.() ||
+          EmberComponent.extend({
+            tagName: '',
+            toString() {
+              return 'App.TestBarComponent';
+            },
+          }),
+      ),
     );
 
     this.owner.register(
       'component:test-in-element-in-component',
-      EmberComponent.extend({
-        init(...args) {
-          this._super(...args);
-          this.elementTarget = document.querySelector('#target');
-        },
-        toString() {
-          return 'App.TestInElementInComponent';
-        },
-      })
+      setComponentTemplate(
+        hbs(`
+          {{#in-element this.elementTarget}}
+            <p class='test-in-element-in-component'>
+              App.TestInElementInComponent
+            </p>
+          {{/in-element}}
+        `),
+        EmberComponent.extend({
+          init(...args) {
+            this._super(...args);
+            this.elementTarget = document.querySelector('#target');
+          },
+          toString() {
+            return 'App.TestInElementInComponent';
+          },
+        }),
+      ),
     );
 
     this.owner.register(
       'component:test-component-in-in-element',
-      EmberComponent.extend({
-        toString() {
-          return 'App.TestComponentInElement';
-        },
-      })
+      setComponentTemplate(
+        hbs(`
+          <p class='test-component-in-in-element'>
+            App.TestComponentInElement
+          </p>
+        `),
+        EmberComponent.extend({
+          toString() {
+            return 'App.TestComponentInElement';
+          },
+        }),
+      ),
     );
 
     /*
@@ -539,8 +624,8 @@ module('Ember Debug - View', function (hooks) {
           <div id="target"></div>
           {{outlet}}
         </div>`,
-        { moduleName: 'my-app/templates/application.hbs' }
-      )
+        { moduleName: 'my-app/templates/application.hbs' },
+      ),
     );
 
     this.owner.register(
@@ -548,27 +633,29 @@ module('Ember Debug - View', function (hooks) {
       hbs(
         `
         <div {{did-insert this.foo}}>
-          Simple {{test-foo}} {{test-bar value=(hash x=123 [x.y]=456)}} {{#in-element this.elementTarget}}<TestComponentInInElement />{{/in-element}}
+          <div>
+            Simple {{test-foo}} {{test-bar value=(hash x=123 [x.y]=456)}} {{#in-element this.elementTarget}}<TestComponentInInElement />{{/in-element}}
+          </div>
         </div>
         `,
         {
           moduleName: 'my-app/templates/simple.hbs',
-        }
-      )
+        },
+      ),
     );
 
     this.owner.register(
       'template:test-in-element-in-component',
       hbs('<TestInElementInComponent />', {
         moduleName: 'my-app/templates/test-in-element-in-component.hbs',
-      })
+      }),
     );
 
     this.owner.register(
       'template:test-component-in-in-element',
       hbs('<TestComponentInInElement />', {
         moduleName: 'my-app/templates/test-component-in-in-element.hbs',
-      })
+      }),
     );
 
     this.owner.register(
@@ -577,64 +664,32 @@ module('Ember Debug - View', function (hooks) {
         '<EmberWormhole @to="target"><div class="in-wormhole">Wormhole</div></EmberWormhole>',
         {
           moduleName: 'my-app/templates/wormhole.hbs',
-        }
-      )
+        },
+      ),
     );
     this.owner.register(
       'template:inputs',
       hbs('Simple <Input @value="987" />', {
         moduleName: 'my-app/templates/inputs.hbs',
-      })
+      }),
+    );
+
+    this.owner.register(
+      'template:component-in-shadow-dom',
+      hbs('<ShadowDom><TestFoo /></ShadowDom>', {
+        moduleName: 'my-app/templates/component-in-shadow-dom.hbs',
+      }),
     );
 
     this.owner.register(
       'template:comments/index',
       hbs('{{#each this.comments as |comment|}}{{comment}}{{/each}}', {
         moduleName: 'my-app/templates/comments/index.hbs',
-      })
+      }),
     );
     this.owner.register(
       'template:posts',
-      hbs('Posts', { moduleName: 'my-app/templates/posts.hbs' })
-    );
-    this.owner.register(
-      'template:components/test-foo',
-      hbs('test-foo', {
-        moduleName: 'my-app/templates/components/test-foo.hbs',
-      })
-    );
-    this.owner.register(
-      'template:components/test-bar',
-      hbs(
-        `<!-- before -->
-        <div class="another-component">
-        {{@value}}
-          <span>test</span>
-          <span class="bar-inner">bar</span>
-        </div>
-        <!-- after -->`,
-        { moduleName: 'my-app/templates/components/test-bar.hbs' }
-      )
-    );
-
-    this.owner.register(
-      'template:components/test-component-in-in-element',
-      hbs(`
-            <p class='test-component-in-in-element'>
-              App.TestComponentInElement
-            </p>
-        `)
-    );
-
-    this.owner.register(
-      'template:components/test-in-element-in-component',
-      hbs(`
-                {{#in-element this.elementTarget}}
-                  <p class='test-in-element-in-component'>
-                    App.TestInElementInComponent
-                  </p>
-                {{/in-element}}
-              `)
+      hbs('Posts', { moduleName: 'my-app/templates/posts.hbs' }),
     );
 
     this.owner.register('modifier:did-insert', didInsert);
@@ -674,7 +729,7 @@ module('Ember Debug - View', function (hooks) {
         Modifier({
           name: 'deprecated-event-handlers',
           args: Args({ positionals: 1 }),
-        })
+        }),
       );
     }
     const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
@@ -688,7 +743,7 @@ module('Ember Debug - View', function (hooks) {
           name: '-text-field',
           template: /.*/,
           args: Args({ names: ['target', 'value'], positionals: 0 }),
-        })
+        }),
       );
     }
 
@@ -698,7 +753,7 @@ module('Ember Debug - View', function (hooks) {
           name: 'input',
           args: Args({ names: ['id', 'class', 'type'] }),
         },
-        ...modifiers
+        ...modifiers,
       );
       if (hasEmberVersion(3, 26)) {
         inputChildren.push(htmlElement);
@@ -718,10 +773,10 @@ module('Ember Debug - View', function (hooks) {
                 args: Args({ names: ['value'], positionals: 0 }),
                 template: /.*/,
               },
-              ...inputChildren
-            )
-          )
-        )
+              ...inputChildren,
+            ),
+          ),
+        ),
       ),
     ]);
   });
@@ -747,7 +802,7 @@ module('Ember Debug - View', function (hooks) {
             QUnit.assert.equal(
               value.details[0].properties[0].value.inspect,
               '{ x: 123, x.y: 456 }',
-              'test-bar args value inspect should be correct'
+              'test-bar args value inspect should be correct',
             );
           }
           argsTestPromise = testArgsValue();
@@ -763,7 +818,7 @@ module('Ember Debug - View', function (hooks) {
               QUnit.assert.equal(
                 value.details[1].name,
                 'HTMLDivElement',
-                'in-element args value inspect should be correct'
+                'in-element args value inspect should be correct',
               );
             }
             argsTestPromise = testArgsValue();
@@ -773,7 +828,7 @@ module('Ember Debug - View', function (hooks) {
         Component({
           name: 'test-component-in-in-element',
           template: () => null,
-        })
+        }),
       ),
     ];
 
@@ -790,9 +845,9 @@ module('Ember Debug - View', function (hooks) {
               name: 'did-insert',
               args: Args({ positionals: 1 }),
             }),
-            ...children
+            ...children,
           ),
-        ]
+        ],
       );
     } else {
       root.push(...children);
@@ -800,13 +855,13 @@ module('Ember Debug - View', function (hooks) {
 
     matchTree(tree, [
       TopLevel(
-        Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
+        Route({ name: 'application' }, Route({ name: 'simple' }, ...root)),
       ),
     ]);
 
     QUnit.assert.ok(
       argsTestPromise instanceof Promise,
-      'args should be tested'
+      'args should be tested',
     );
     await argsTestPromise;
   });
@@ -818,7 +873,7 @@ module('Ember Debug - View', function (hooks) {
       .dom(this.element)
       .hasClass(
         'ember-application',
-        'The rootElement has the .ember-application CSS class'
+        'The rootElement has the .ember-application CSS class',
       );
 
     this.element.classList.remove('ember-application');
@@ -832,7 +887,7 @@ module('Ember Debug - View', function (hooks) {
       .dom(this.element)
       .doesNotHaveClass(
         'ember-application',
-        'The rootElement no longer has the .ember-application CSS class'
+        'The rootElement no longer has the .ember-application CSS class',
       );
 
     let tree = await getRenderTree();
@@ -855,7 +910,7 @@ module('Ember Debug - View', function (hooks) {
         Component({
           name: 'test-component-in-in-element',
           template: () => null,
-        })
+        }),
       ),
     ];
 
@@ -872,9 +927,9 @@ module('Ember Debug - View', function (hooks) {
               name: 'did-insert',
               args: Args({ positionals: 1 }),
             }),
-            ...children
+            ...children,
           ),
-        ]
+        ],
       );
     } else {
       root.push(...children);
@@ -882,32 +937,35 @@ module('Ember Debug - View', function (hooks) {
 
     matchTree(tree, [
       TopLevel(
-        Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
+        Route({ name: 'application' }, Route({ name: 'simple' }, ...root)),
       ),
     ]);
   });
 
   test('Does not list nested {{yield}} views', async function () {
-    this.owner.register('component:x-first', EmberComponent.extend());
-    this.owner.register('component:x-second', EmberComponent.extend());
-
     this.owner.register(
-      'template:posts',
-      hbs('{{#x-first}}Foo{{/x-first}}', {
-        moduleName: 'my-app/templates/posts.hbs',
-      })
+      'component:x-first',
+      setComponentTemplate(
+        hbs('{{#x-second}}{{yield}}{{/x-second}}', {
+          moduleName: 'my-app/components/x-first.hbs',
+        }),
+        EmberComponent.extend(),
+      ),
     );
     this.owner.register(
-      'template:components/x-first',
-      hbs('{{#x-second}}{{yield}}{{/x-second}}', {
-        moduleName: 'my-app/templates/components/x-first.hbs',
-      })
+      'component:x-second',
+      setComponentTemplate(
+        hbs('{{yield}}', {
+          moduleName: 'my-app/components/x-second.hbs',
+        }),
+        EmberComponent.extend(),
+      ),
     );
     this.owner.register(
-      'template:components/x-second',
-      hbs('{{yield}}', {
-        moduleName: 'my-app/templates/components/x-second.hbs',
-      })
+      'template:posts',
+      hbs('{{#x-first}}Foo{{/x-first}}', {
+        moduleName: 'my-app/templates/posts.hbs',
+      }),
     );
 
     await visit('/posts');
@@ -920,9 +978,9 @@ module('Ember Debug - View', function (hooks) {
           { name: 'application' },
           Route(
             { name: 'posts' },
-            Component({ name: 'x-first' }, Component({ name: 'x-second' }))
-          )
-        )
+            Component({ name: 'x-first' }, Component({ name: 'x-second' })),
+          ),
+        ),
       ),
     ]);
   });
@@ -946,8 +1004,9 @@ module('Ember Debug - View', function (hooks) {
       assert.ok(!isVisible(tooltip), 'tooltip is not visible');
       assert.ok(!isVisible(highlight), 'highlight is not visible');
 
+      // eslint-disable-next-line ember/no-runloop
       run(() =>
-        EmberDebug.port.trigger('view:inspectViews', { inspect: true })
+        EmberDebug.port.trigger('view:inspectViews', { inspect: true }),
       );
     });
 
@@ -965,10 +1024,7 @@ module('Ember Debug - View', function (hooks) {
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
         .hasText(
-          'my-app/templates/components/test-foo.hbs'.replace(
-            /\//g,
-            '\u200B/\u200B'
-          )
+          'my-app/components/test-foo.hbs'.replace(/\//g, '\u200B/\u200B'),
         );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
@@ -983,12 +1039,12 @@ module('Ember Debug - View', function (hooks) {
       assert.strictEqual(
         actual.width,
         expected.width,
-        'same width as component'
+        'same width as component',
       );
       assert.strictEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       await triggerEvent('.bar-inner', 'mousemove');
@@ -1000,17 +1056,14 @@ module('Ember Debug - View', function (hooks) {
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
         .hasText(
-          'my-app/templates/components/test-bar.hbs'.replace(
-            /\//g,
-            '\u200B/\u200B'
-          )
+          'my-app/components/test-bar.hbs'.replace(/\//g, '\u200B/\u200B'),
         );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText(
           templateOnlyComponent
             ? 'TemplateOnlyComponent'
-            : 'App.TestBarComponent'
+            : 'App.TestBarComponent',
         );
 
       actual = highlight.getBoundingClientRect();
@@ -1022,12 +1075,12 @@ module('Ember Debug - View', function (hooks) {
       assert.strictEqual(
         actual.width,
         expected.width,
-        'same width as component'
+        'same width as component',
       );
       assert.strictEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       await triggerEvent(document.body, 'mousemove');
@@ -1046,10 +1099,7 @@ module('Ember Debug - View', function (hooks) {
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
         .hasText(
-          'my-app/templates/components/test-foo.hbs'.replace(
-            /\//g,
-            '\u200B/\u200B'
-          )
+          'my-app/components/test-foo.hbs'.replace(/\//g, '\u200B/\u200B'),
         );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
@@ -1065,7 +1115,7 @@ module('Ember Debug - View', function (hooks) {
       assert.deepEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       assert.ok(isVisible(tooltip), 'tooltip is visible');
@@ -1075,10 +1125,7 @@ module('Ember Debug - View', function (hooks) {
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
         .hasText(
-          'my-app/templates/components/test-foo.hbs'.replace(
-            /\//g,
-            '\u200B/\u200B'
-          )
+          'my-app/components/test-foo.hbs'.replace(/\//g, '\u200B/\u200B'),
         );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
@@ -1117,7 +1164,6 @@ module('Ember Debug - View', function (hooks) {
       let actual = highlight.getBoundingClientRect();
       let expected = inElement.getBoundingClientRect();
 
-      // await this.pauseTest();
       assert.ok(isVisible(tooltip), 'tooltip is visible');
       assert.ok(isVisible(highlight), 'highlight is visible');
 
@@ -1127,7 +1173,7 @@ module('Ember Debug - View', function (hooks) {
       assert.deepEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       assert
@@ -1151,7 +1197,6 @@ module('Ember Debug - View', function (hooks) {
       let actual = highlight.getBoundingClientRect();
       let expected = inElement.getBoundingClientRect();
 
-      // await this.pauseTest();
       assert.ok(isVisible(tooltip), 'tooltip is visible');
       assert.ok(isVisible(highlight), 'highlight is visible');
 
@@ -1161,7 +1206,7 @@ module('Ember Debug - View', function (hooks) {
       assert.deepEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       assert
@@ -1185,7 +1230,6 @@ module('Ember Debug - View', function (hooks) {
       let actual = highlight.getBoundingClientRect();
       let expected = inElement.getBoundingClientRect();
 
-      // await this.pauseTest();
       assert.ok(isVisible(tooltip), 'tooltip is visible');
       assert.ok(isVisible(highlight), 'highlight is visible');
 
@@ -1195,12 +1239,52 @@ module('Ember Debug - View', function (hooks) {
       assert.deepEqual(
         actual.height,
         expected.height,
-        'same height as component'
+        'same height as component',
       );
 
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText(/ember-wormhole/);
     });
+
+    test('component inside shadow dom', async function (assert) {
+      if (isInVersionSpecifier('^5.8.0', VERSION)) {
+        assert.expect(2);
+        return;
+      }
+      await visit('component-in-shadow-dom');
+      await rerender();
+      await getRenderTree();
+
+      const inShadow = window.testShadow.querySelector('.simple-component');
+
+      await click(window.testShadow.host, {
+        clientX: inShadow.getBoundingClientRect().x,
+        clientY: inShadow.getBoundingClientRect().y,
+      });
+
+      assert
+        .dom('.ember-inspector-tooltip-header', tooltip)
+        .hasText('<TestFoo>');
+
+      let actual = highlight.getBoundingClientRect();
+      let expected = inShadow.getBoundingClientRect();
+
+      assert.ok(isVisible(tooltip), 'tooltip is visible');
+      assert.ok(isVisible(highlight), 'highlight is visible');
+
+      assert.deepEqual(actual.x, expected.x, 'same x as component');
+      assert.deepEqual(actual.y, expected.y, 'same y as component');
+      assert.deepEqual(actual.width, expected.width, 'same width as component');
+      assert.deepEqual(
+        actual.height,
+        expected.height,
+        'same height as component',
+      );
+
+      assert
+        .dom('.ember-inspector-tooltip-detail-instance', tooltip)
+        .hasText('App.TestFooComponent');
+    });
   });
 });