ember-inspector 4.13.1 → 4.15.0

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

@@ -1,19 +1,24 @@
+/* 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';
 import Controller from '@ember/controller';
 import { 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 { run } from '@ember/runloop';
-import Ember from 'ember-debug/utils/ember';
-import { compareVersion } from 'ember-debug/utils/version';
 
-const { VERSION } = Ember;
+import EmberDebugImport from 'ember-debug/main';
+import EmberImport from 'ember-debug/ember';
 
-const isComponentHighlightSupported = compareVersion(VERSION, '3.20.0') !== -1;
+import { compareVersion } from 'ember-debug/version';
+import { setComponentTemplate } from '@ember/component';
+
+let EmberDebug;
+
+let isComponentHighlightSupported;
 
 const getRounded = (value) => {
   let data = value;
@@ -26,119 +31,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 +246,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 +278,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 +300,7 @@ const assertNodeSizes = (assert, synthetic, real) => {
     assert.strictEqual(
       getRounded(style[styleKey]),
       getRounded(box[boxKey]),
-      `same ${boxKey} as component`
+      `same ${boxKey} as component`,
     );
   }
 };
@@ -305,7 +309,7 @@ const matchHighlights = (
   assert,
   testedRoute,
   newHighlights,
-  isGlimmerComponent
+  isGlimmerComponent,
 ) => {
   const renderedComponents = mockedRoutes[testedRoute].expectedRender.map(
     (selector) => {
@@ -314,10 +318,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 +331,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,
-    })
+    }),
   );
 };
 
@@ -383,6 +388,12 @@ async function highlightsPromise(testedRoute, isGlimmerComponent) {
 }
 
 module('Ember Debug - profile manager component highlight', function (hooks) {
+  hooks.before(async function () {
+    EmberDebug = (await EmberDebugImport).default;
+    let VERSION = (await EmberImport).VERSION;
+    isComponentHighlightSupported = compareVersion(VERSION, '3.20.0') !== -1;
+  });
+
   setupEmberDebugTest(hooks, {
     routes() {
       this.route('home');
@@ -395,23 +406,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 +430,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 +439,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 +448,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 +457,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 +466,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 +475,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 +484,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 +493,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 +502,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 +511,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 +520,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 +529,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 +538,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

@@ -1,7 +1,11 @@
 import { module, test } from 'qunit';
-import ProfileNode from 'ember-debug/models/profile-node';
+import ProfileNodeImport from 'ember-debug/profile-node';
+let ProfileNode;
 
-module('Ember Debug - ProfileNode', function () {
+module('Ember Debug - ProfileNode', function (hooks) {
+  hooks.before(async function () {
+    ProfileNode = (await ProfileNodeImport).default;
+  });
   test('It can create a ProfileNode', function (assert) {
     let p = new ProfileNode(1001, { template: 'application' });
 
@@ -35,12 +39,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 +74,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

@@ -2,25 +2,33 @@ import { run } from '@ember/runloop';
 import Evented from '@ember/object/evented';
 import EmberObject from '@ember/object';
 import { module, test } from 'qunit';
-import PromiseAssembler from 'ember-debug/libs/promise-assembler';
+import PromiseAssemblerImport from 'ember-debug/promise-assembler';
+let PromiseAssembler;
 
 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.before(async () => {
+    PromiseAssembler = (await PromiseAssemblerImport).default;
+  });
+
   hooks.beforeEach(() => {
     stubRSVP();
+    // eslint-disable-next-line ember/no-runloop
     run(function () {
       assembler = new PromiseAssembler({
         RSVP: fakeRSVP,
@@ -30,6 +38,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 +64,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 +97,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 +156,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 +239,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);
   });
 });