ember-inspector 4.13.1-alpha.2024.8.9 → 4.13.1-alpha.2025.6.8

package/tests/ember_debug/profile-manager-test.js

@@ -1,4 +1,6 @@
+/* eslint-disable ember/no-classic-classes */
 import { find, visit, waitUntil, getSettledState } from '@ember/test-helpers';
+// eslint-disable-next-line ember/no-classic-components
 import EmberComponent from '@ember/component';
 import GlimmerComponent from '@glimmer/component';
 import EmberRoute from '@ember/routing/route';
@@ -10,6 +12,7 @@ import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
 import { run } from '@ember/runloop';
 import Ember from 'ember-debug/utils/ember';
 import { compareVersion } from 'ember-debug/utils/version';
+import { setComponentTemplate } from '@ember/component';
 
 const { VERSION } = Ember;
 
@@ -26,119 +29,123 @@ const getRounded = (value) => {
   }
   return Math.floor(data);
 };
-class OneRootGlimmer extends GlimmerComponent {
-  classNames = 'simple-component';
-}
 
-const mockedComponents = {
-  text: {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs('text only', {
-      moduleName: 'my-app/templates/components/text.hbs',
-    }),
-  },
-  'text-glimmer': {
-    component: GlimmerComponent,
-    template: hbs('text only', {
-      moduleName: 'my-app/templates/components/text-glimmer.hbs',
-    }),
-  },
-  comment: {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs('<!-- comment -->', {
-      moduleName: 'my-app/templates/components/comment.hbs',
-    }),
-  },
-  'comment-glimmer': {
-    component: GlimmerComponent,
-    template: hbs('<!-- comment -->', {
-      moduleName: 'my-app/templates/components/comment-glimmer.hbs',
-    }),
-  },
-  'one-root': {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs('<div class="simple-component">one root</div>', {
-      moduleName: 'my-app/templates/components/one-root.hbs',
-    }),
-  },
-  'one-root-glimmer': {
-    component: OneRootGlimmer,
-    template: hbs('<div class={{this.classNames}}>one root</div>', {
-      moduleName: 'my-app/templates/components/one-root-glimmer.hbs',
-    }),
-  },
-  'two-root': {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs(
-      '<div class="simple-component">one</div><div class="another-component">two</div>',
-      { moduleName: 'my-app/templates/components/two-root.hbs' }
-    ),
-  },
-  'two-root-glimmer': {
-    component: GlimmerComponent,
-    template: hbs(
-      '<div class="simple-component">one</div><div class="another-component">two</div>',
-      { moduleName: 'my-app/templates/components/two-root-glimmer.hbs' }
-    ),
-  },
-  'root-comment-root': {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs(
-      '<div class="simple-component">one</div><!-- comment --><div class="another-component">two</div>',
-      { moduleName: 'my-app/templates/components/root-comment-root.hbs' }
-    ),
-  },
-  'root-comment-root-glimmer': {
-    component: GlimmerComponent,
-    template: hbs(
-      '<div class="simple-component">one</div><!-- comment --><div class="another-component">two</div>',
-      {
-        moduleName: 'my-app/templates/components/root-comment-root-glimmer.hbs',
-      }
-    ),
-  },
-  'comment-root-comment': {
-    component: EmberComponent.extend({
-      tagName: '',
-    }),
-    template: hbs(
-      '<!-- comment 1 --><div class="simple-component">one</div><!-- comment 2 -->',
-      { moduleName: 'my-app/templates/components/comment-root-comment.hbs' }
-    ),
-  },
-  'comment-root-comment-glimmer': {
-    component: GlimmerComponent,
-    template: hbs(
-      '<!-- comment 1 --><div class="simple-component">one</div><!-- comment 2 -->',
-      { moduleName: 'my-app/templates/components/comment-root-comment.hbs' }
-    ),
-  },
-  'div-tag': {
-    component: EmberComponent.extend({
-      classNames: ['simple-component'],
-    }),
-    template: hbs('text in div', {
-      moduleName: 'my-app/templates/components/div-tag.hbs',
-    }),
-  },
-  'div-roots': {
-    component: EmberComponent.extend({
-      classNames: ['simple-component'],
-    }),
-    template: hbs('<div>one</div><div>two</div>', {
-      moduleName: 'my-app/templates/components/div-roots.hbs',
-    }),
-  },
+const mockedComponents = () => {
+  class OneRootGlimmer extends GlimmerComponent {
+    classNames = 'simple-component';
+  }
+
+  return {
+    text: {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs('text only', {
+        moduleName: 'my-app/templates/components/text.hbs',
+      }),
+    },
+    'text-glimmer': {
+      component: class extends GlimmerComponent {},
+      template: hbs('text only', {
+        moduleName: 'my-app/templates/components/text-glimmer.hbs',
+      }),
+    },
+    comment: {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs('<!-- comment -->', {
+        moduleName: 'my-app/templates/components/comment.hbs',
+      }),
+    },
+    'comment-glimmer': {
+      component: class extends GlimmerComponent {},
+      template: hbs('<!-- comment -->', {
+        moduleName: 'my-app/templates/components/comment-glimmer.hbs',
+      }),
+    },
+    'one-root': {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs('<div class="simple-component">one root</div>', {
+        moduleName: 'my-app/templates/components/one-root.hbs',
+      }),
+    },
+    'one-root-glimmer': {
+      component: OneRootGlimmer,
+      template: hbs('<div class={{this.classNames}}>one root</div>', {
+        moduleName: 'my-app/templates/components/one-root-glimmer.hbs',
+      }),
+    },
+    'two-root': {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs(
+        '<div class="simple-component">one</div><div class="another-component">two</div>',
+        { moduleName: 'my-app/templates/components/two-root.hbs' },
+      ),
+    },
+    'two-root-glimmer': {
+      component: class extends GlimmerComponent {},
+      template: hbs(
+        '<div class="simple-component">one</div><div class="another-component">two</div>',
+        { moduleName: 'my-app/templates/components/two-root-glimmer.hbs' },
+      ),
+    },
+    'root-comment-root': {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs(
+        '<div class="simple-component">one</div><!-- comment --><div class="another-component">two</div>',
+        { moduleName: 'my-app/templates/components/root-comment-root.hbs' },
+      ),
+    },
+    'root-comment-root-glimmer': {
+      component: class extends GlimmerComponent {},
+      template: hbs(
+        '<div class="simple-component">one</div><!-- comment --><div class="another-component">two</div>',
+        {
+          moduleName:
+            'my-app/templates/components/root-comment-root-glimmer.hbs',
+        },
+      ),
+    },
+    'comment-root-comment': {
+      component: EmberComponent.extend({
+        tagName: '',
+      }),
+      template: hbs(
+        '<!-- comment 1 --><div class="simple-component">one</div><!-- comment 2 -->',
+        { moduleName: 'my-app/templates/components/comment-root-comment.hbs' },
+      ),
+    },
+    'comment-root-comment-glimmer': {
+      component: class extends GlimmerComponent {},
+      template: hbs(
+        '<!-- comment 1 --><div class="simple-component">one</div><!-- comment 2 -->',
+        { moduleName: 'my-app/templates/components/comment-root-comment.hbs' },
+      ),
+    },
+    'div-tag': {
+      component: EmberComponent.extend({
+        classNames: ['simple-component'],
+      }),
+      template: hbs('text in div', {
+        moduleName: 'my-app/templates/components/div-tag.hbs',
+      }),
+    },
+    'div-roots': {
+      component: EmberComponent.extend({
+        classNames: ['simple-component'],
+      }),
+      template: hbs('<div>one</div><div>two</div>', {
+        moduleName: 'my-app/templates/components/div-roots.hbs',
+      }),
+    },
+  };
 };
 
 const mockedRoutes = {
@@ -237,32 +244,27 @@ const constructBase = (owner) => {
     'template:application',
     hbs(
       '<div class="application" style="line-height: normal;">{{outlet}}</div>',
-      { moduleName: 'my-app/templates/application.hbs' }
-    )
+      { moduleName: 'my-app/templates/application.hbs' },
+    ),
   );
 
   owner.register('route:home', EmberRoute);
 
   owner.register(
     'template:home',
-    hbs('Home', { moduleName: 'my-app/templates/home.hbs' })
+    hbs('Home', { moduleName: 'my-app/templates/home.hbs' }),
   );
 };
 
 const constructComponents = (owner, componentsMap) => {
   for (const componentKey in componentsMap) {
-    if (componentsMap[componentKey].component) {
-      owner.register(
-        `component:${componentKey}`,
-        componentsMap[componentKey].component
-      );
-    }
-    if (componentsMap[componentKey].template) {
-      owner.register(
-        `template:components/${componentKey}`,
-        componentsMap[componentKey].template
-      );
-    }
+    owner.register(
+      `component:${componentKey}`,
+      setComponentTemplate(
+        componentsMap[componentKey].template,
+        componentsMap[componentKey].component,
+      ),
+    );
   }
 };
 
@@ -274,7 +276,7 @@ const constructRoutes = (owner, routes) => {
     if (mockedRoutes[routeKey].controller) {
       owner.register(
         `controller:${routeKey}`,
-        mockedRoutes[routeKey].controller
+        mockedRoutes[routeKey].controller,
       );
     }
     if (mockedRoutes[routeKey].template) {
@@ -296,7 +298,7 @@ const assertNodeSizes = (assert, synthetic, real) => {
     assert.strictEqual(
       getRounded(style[styleKey]),
       getRounded(box[boxKey]),
-      `same ${boxKey} as component`
+      `same ${boxKey} as component`,
     );
   }
 };
@@ -305,7 +307,7 @@ const matchHighlights = (
   assert,
   testedRoute,
   newHighlights,
-  isGlimmerComponent
+  isGlimmerComponent,
 ) => {
   const renderedComponents = mockedRoutes[testedRoute].expectedRender.map(
     (selector) => {
@@ -314,10 +316,10 @@ const matchHighlights = (
         component,
         isComponentHighlightSupported
           ? 'expected component is rendered'
-          : 'expected component is rendered but the component highlight is not supported'
+          : 'expected component is rendered but the component highlight is not supported',
       );
       return component;
-    }
+    },
   );
 
   if (isComponentHighlightSupported && !isGlimmerComponent) {
@@ -327,16 +329,17 @@ const matchHighlights = (
   } else {
     assert.notOk(
       newHighlights.length,
-      'Should not have any highlight if highlight is not supported'
+      'Should not have any highlight if highlight is not supported',
     );
   }
 };
 
 const enableHighlight = () => {
+  // eslint-disable-next-line ember/no-runloop
   run(() =>
     EmberDebug.port.trigger('render:updateShouldHighlightRender', {
       shouldHighlightRender: true,
-    })
+    }),
   );
 };
 
@@ -395,23 +398,21 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   hooks.beforeEach(async function () {
     EmberDebug.IGNORE_DEPRECATIONS = true;
     constructBase(this.owner);
-    constructComponents(this.owner, mockedComponents);
+    constructComponents(this.owner, mockedComponents());
   });
 
   hooks.afterEach(function (assert) {
     const highlights = document.getElementsByClassName(
-      'ember-inspector-render-highlight'
+      'ember-inspector-render-highlight',
     );
 
     assert.notOk(
       highlights?.length,
-      'highlights should be destroyed after execution'
+      'highlights should be destroyed after execution',
     );
   });
 
   test('Should not show highlights for text component - Ember component', async function (assert) {
-    assert.expect(2);
-
     const testedRoute = 'text-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -421,8 +422,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should not show highlights for text component - Glimmer component', async function (assert) {
-    assert.expect(2);
-
     const testedRoute = 'text-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -432,8 +431,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should not show highlights for comment component - Ember component', async function (assert) {
-    assert.expect(2);
-
     const testedRoute = 'comment-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -443,8 +440,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should not show highlights for comment component - Glimmer component', async function (assert) {
-    assert.expect(2);
-
     const testedRoute = 'comment-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -454,8 +449,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight one rootNode Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 6 : 3);
-
     const testedRoute = 'one-root-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -465,8 +458,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Highlight is not supported, should not highlight one rootNode Glimmer component', async function (assert) {
-    assert.expect(3);
-
     const testedRoute = 'one-root-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -476,8 +467,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight two rootNode ([rootNode, rootNode] and no tagName) Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 11 : 4);
-
     const testedRoute = 'two-root-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -487,8 +476,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Highlight is not supported, should not highlight two rootNode ([rootNode, rootNode] and no tagName) Glimmer component', async function (assert) {
-    assert.expect(4);
-
     const testedRoute = 'two-root-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -498,8 +485,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight two rootNode with one comment ([rootNode, commentNode, rootNode] and no tagName) Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 11 : 4);
-
     const testedRoute = 'root-comment-root-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -509,8 +494,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Highlight is not supported, should not highlight two rootNode with one comment ([rootNode, commentNode, rootNode] and no tagName) Glimmer component', async function (assert) {
-    assert.expect(4);
-
     const testedRoute = 'root-comment-root-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -520,8 +503,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight one rootNode with two comment ([commentNode, rootNode, commentNode] and no tagName) Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 6 : 3);
-
     const testedRoute = 'comment-root-comment-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -531,8 +512,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Highlight is not supported, should not highlight one rootNode with two comment ([commentNode, rootNode, commentNode] and no tagName) Glimmer component', async function (assert) {
-    assert.expect(3);
-
     const testedRoute = 'comment-root-comment-glimmer-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -542,8 +521,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight tagName div Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 6 : 3);
-
     const testedRoute = 'div-tag-route';
     constructRoutes(this.owner, [testedRoute]);
 
@@ -553,8 +530,6 @@ module('Ember Debug - profile manager component highlight', function (hooks) {
   });
 
   test('Should highlight two rootNode ([rootNode, rootNode] and tagName div) Ember component', async function (assert) {
-    assert.expect(isComponentHighlightSupported ? 6 : 3);
-
     const testedRoute = 'div-roots-route';
     constructRoutes(this.owner, [testedRoute]);
 

package/tests/ember_debug/profile-node-test.js

@@ -35,12 +35,12 @@ module('Ember Debug - ProfileNode', function () {
 
     assert.notOk(
       p1.parent,
-      'Without a parent parameter, the attribute is not set'
+      'Without a parent parameter, the attribute is not set',
     );
     assert.strictEqual(
       p2.parent,
       p1,
-      "If passed, p2's parent is assigned to p1"
+      "If passed, p2's parent is assigned to p1",
     );
     assert.notOk(p1.time, "p1 has no time because it's unfinished");
     assert.notOk(p2.time, "p2 has no time because it's unfinished");
@@ -70,7 +70,7 @@ module('Ember Debug - ProfileNode', function () {
 
     assert.ok(
       JSON.stringify(p1),
-      'it can serialize due to no cycles in the object'
+      'it can serialize due to no cycles in the object',
     );
   });
 

package/tests/ember_debug/promise-assembler-test.js

@@ -9,18 +9,21 @@ let assembler;
 let fakeRSVP;
 
 function stubRSVP() {
+  // eslint-disable-next-line ember/no-classic-classes
   fakeRSVP = EmberObject.extend(Evented, {
     configure() {},
   }).create();
 }
 
 function startAssembler() {
+  // eslint-disable-next-line ember/no-runloop
   run(assembler, 'start');
 }
 
 module('Ember Debug - PromiseAssembler', function (hooks) {
   hooks.beforeEach(() => {
     stubRSVP();
+    // eslint-disable-next-line ember/no-runloop
     run(function () {
       assembler = new PromiseAssembler({
         RSVP: fakeRSVP,
@@ -30,6 +33,7 @@ module('Ember Debug - PromiseAssembler', function (hooks) {
 
   hooks.afterEach(() => {
     if (assembler) {
+      // eslint-disable-next-line ember/no-runloop
       run(assembler, 'destroy');
       assembler = null;
     }
@@ -55,7 +59,7 @@ module('Ember Debug - PromiseAssembler', function (hooks) {
     let promise = event.promise;
     assert.strictEqual(event.promise, assembler.find(promise['guid']));
 
-    assert.strictEqual(assembler.find().get('length'), 1);
+    assert.strictEqual(assembler.find().length, 1);
 
     assert.strictEqual(promise['guid'], 1);
     assert.strictEqual(promise['label'], 'label');
@@ -88,7 +92,7 @@ module('Ember Debug - PromiseAssembler', function (hooks) {
     assert.strictEqual(assembler.find(parent['guid']), parent);
     assert.strictEqual(assembler.find(child['guid']), child);
 
-    assert.strictEqual(assembler.find().get('length'), 2);
+    assert.strictEqual(assembler.find().length, 2);
 
     assert.strictEqual(parent['guid'], 1);
     assert.strictEqual(parent['label'], 'label');
@@ -147,7 +151,7 @@ module('Ember Debug - PromiseAssembler', function (hooks) {
     assert.strictEqual(assembler.find(parent['guid']), parent);
     assert.strictEqual(assembler.find(child['guid']), child);
 
-    assert.strictEqual(assembler.find().get('length'), 2);
+    assert.strictEqual(assembler.find().length, 2);
 
     assert.strictEqual(parent['guid'], 1);
     assert.strictEqual(parent['label'], 'label');
@@ -230,26 +234,25 @@ module('Ember Debug - PromiseAssembler', function (hooks) {
     assert.strictEqual(promise['state'], 'rejected');
     assert.strictEqual(promise['reason'], 'reason');
     assert.strictEqual(promise['settledAt'], date);
-    assert.strictEqual(assembler.find().get('length'), 1);
+    assert.strictEqual(assembler.find().length, 1);
   });
 
   test('#stop', function (assert) {
-    assert.expect(3);
-
     startAssembler();
 
     fakeRSVP.trigger('created', {
       guid: 1,
     });
-    assert.strictEqual(assembler.find().get('length'), 1);
+    assert.strictEqual(assembler.find().length, 1);
 
+    // eslint-disable-next-line ember/no-runloop
     run(assembler, 'stop');
 
-    assert.strictEqual(assembler.find().get('length'), 0);
+    assert.strictEqual(assembler.find().length, 0);
     assembler.on('created', function () {
       assert.ok(false);
     });
     fakeRSVP.trigger('created', { guid: 1 });
-    assert.strictEqual(assembler.find().get('length'), 0);
+    assert.strictEqual(assembler.find().length, 0);
   });
 });

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

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-runloop */
 /* eslint-disable ember/avoid-leaking-state-in-ember-objects */
 import { run, later } from '@ember/runloop';
 import { A as emberA } from '@ember/array';
@@ -56,9 +57,9 @@ module('Ember Debug - Promise Debug', function (hooks) {
 
     let promises = emberA(message.promises);
 
-    promise1 = promises.findBy('label', 'Promise1');
-    child1 = promises.findBy('label', 'Child1');
-    promise2 = promises.findBy('label', 'Promise2');
+    promise1 = promises.find((x) => x.label === 'Promise1');
+    child1 = promises.find((x) => x.label === 'Child1');
+    promise2 = promises.find((x) => x.label === 'Promise2');
 
     assert.strictEqual(promise1.label, 'Promise1');
     assert.strictEqual(promise1.state, 'fulfilled');
@@ -74,8 +75,6 @@ module('Ember Debug - Promise Debug', function (hooks) {
   });
 
   test('Updates are published when they happen', function (assert) {
-    assert.expect(8);
-
     EmberDebug.port.trigger('promise:getAndObservePromises');
 
     let p;
@@ -88,7 +87,7 @@ module('Ember Debug - Promise Debug', function (hooks) {
     later(function () {
       assert.strictEqual(name, 'promise:promisesUpdated');
       let promises = emberA(message.promises);
-      let promise = promises.findBy('label', 'Promise1');
+      let promise = promises.find((x) => x.label === 'Promise1');
       assert.ok(!!promise);
       if (promise) {
         assert.strictEqual(promise.label, 'Promise1');