ember-inspector 4.11.0-alpha.2024.3.9 → 4.11.0-alpha.2024.4.2

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

@@ -12,10 +12,13 @@ import EmberComponent from '@ember/component';
 import EmberRoute from '@ember/routing/route';
 import EmberObject from '@ember/object';
 import Controller from '@ember/controller';
+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';
 
 let templateOnlyComponent = null;
 try {
@@ -265,6 +268,47 @@ function Component(
   );
 }
 
+function Modifier(
+  {
+    name,
+    instance = Serialized(),
+    template = null,
+    bounds = 'single',
+    ...options
+  },
+  ...children
+) {
+  return RenderNode(
+    { name, instance, template, bounds, ...options, type: 'modifier' },
+    ...children
+  );
+}
+
+function HtmlElement(
+  {
+    name,
+    instance = Serialized(),
+    args = Args(),
+    template = null,
+    bounds = 'single',
+    ...options
+  },
+  ...children
+) {
+  return RenderNode(
+    {
+      name,
+      instance,
+      args,
+      template,
+      bounds,
+      ...options,
+      type: 'html-element',
+    },
+    ...children
+  );
+}
+
 function Route(
   {
     name,
@@ -430,6 +474,7 @@ module('Ember Debug - View', function (hooks) {
     this.owner.register(
       'controller:simple',
       Controller.extend({
+        foo() {},
         get elementTarget() {
           return document.querySelector('#target');
         },
@@ -501,7 +546,11 @@ module('Ember Debug - View', function (hooks) {
     this.owner.register(
       'template:simple',
       hbs(
-        'Simple {{test-foo}} {{test-bar value=(hash x=123 [x.y]=456)}} {{#in-element this.elementTarget}}<TestComponentInInElement />{{/in-element}}',
+        `
+        <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>
+        `,
         {
           moduleName: 'my-app/templates/simple.hbs',
         }
@@ -587,6 +636,8 @@ module('Ember Debug - View', function (hooks) {
                 {{/in-element}}
               `)
     );
+
+    this.owner.register('modifier:did-insert', didInsert);
   });
 
   test('Simple Inputs Tree', async function () {
@@ -596,6 +647,41 @@ module('Ember Debug - View', function (hooks) {
 
     const inputChildren = [];
     // https://github.com/emberjs/ember.js/commit/e6cf1766f8e02ddb24bf67833c148e7d7c93182f
+    const modifiers = [
+      Modifier({
+        name: 'on',
+        args: Args({ positionals: 2 }),
+      }),
+      Modifier({
+        name: 'on',
+        args: Args({ positionals: 2 }),
+      }),
+      Modifier({
+        name: 'on',
+        args: Args({ positionals: 2 }),
+      }),
+      Modifier({
+        name: 'on',
+        args: Args({ positionals: 2 }),
+      }),
+      Modifier({
+        name: 'on',
+        args: Args({ positionals: 2 }),
+      }),
+    ];
+    if (hasEmberVersion(3, 28) && !hasEmberVersion(4, 0)) {
+      modifiers.push(
+        Modifier({
+          name: 'deprecated-event-handlers',
+          args: Args({ positionals: 1 }),
+        })
+      );
+    }
+    const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
+    if (!enableModifierSupport) {
+      modifiers.length = 0;
+    }
+
     if (!hasEmberVersion(3, 26)) {
       inputChildren.push(
         Component({
@@ -606,6 +692,19 @@ module('Ember Debug - View', function (hooks) {
       );
     }
 
+    if (enableModifierSupport) {
+      const htmlElement = HtmlElement(
+        {
+          name: 'input',
+          args: Args({ names: ['id', 'class', 'type'] }),
+        },
+        ...modifiers
+      );
+      if (hasEmberVersion(3, 26)) {
+        inputChildren.push(htmlElement);
+      }
+    }
+
     matchTree(tree, [
       TopLevel(
         Route(
@@ -634,55 +733,77 @@ module('Ember Debug - View', function (hooks) {
 
     let argsTestPromise;
 
+    const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
+
+    const children = [
+      Component({ name: 'test-foo', bounds: 'single' }),
+      Component({
+        name: 'test-bar',
+        bounds: 'range',
+        args: Args({ names: ['value'], positionals: 0 }),
+        instance: (actual) => {
+          async function testArgsValue() {
+            const value = await digDeeper(actual.id, 'args');
+            QUnit.assert.equal(
+              value.details[0].properties[0].value.inspect,
+              '{ x: 123, x.y: 456 }',
+              'test-bar args value inspect should be correct'
+            );
+          }
+          argsTestPromise = testArgsValue();
+        },
+      }),
+      Component(
+        {
+          name: 'in-element',
+          args: (actual) => {
+            QUnit.assert.ok(actual.positional[0]);
+            async function testArgsValue() {
+              const value = await inspectById(actual.positional[0].id);
+              QUnit.assert.equal(
+                value.details[1].name,
+                'HTMLDivElement',
+                'in-element args value inspect should be correct'
+              );
+            }
+            argsTestPromise = testArgsValue();
+          },
+          template: null,
+        },
+        Component({
+          name: 'test-component-in-in-element',
+          template: () => null,
+        })
+      ),
+    ];
+
+    const root = [];
+
+    if (enableModifierSupport) {
+      root.push(
+        ...[
+          HtmlElement(
+            {
+              name: 'div',
+            },
+            Modifier({
+              name: 'did-insert',
+              args: Args({ positionals: 1 }),
+            }),
+            ...children
+          ),
+        ]
+      );
+    } else {
+      root.push(...children);
+    }
+
     matchTree(tree, [
       TopLevel(
-        Route(
-          { name: 'application' },
-          Route(
-            { name: 'simple' },
-            Component({ name: 'test-foo', bounds: 'single' }),
-            Component({
-              name: 'test-bar',
-              bounds: 'range',
-              args: Args({ names: ['value'], positionals: 0 }),
-              instance: (actual) => {
-                async function testArgsValue() {
-                  const value = await digDeeper(actual.id, 'args');
-                  QUnit.assert.equal(
-                    value.details[0].properties[0].value.inspect,
-                    '{ x: 123, x.y: 456 }',
-                    'value inspect should be correct'
-                  );
-                }
-                argsTestPromise = testArgsValue();
-              },
-            }),
-            Component(
-              {
-                name: 'in-element',
-                args: (actual) => {
-                  QUnit.assert.ok(actual.positional[0]);
-                  async function testArgsValue() {
-                    const value = await inspectById(actual.positional[0].id);
-                    QUnit.assert.equal(
-                      value.details[1].name,
-                      'HTMLDivElement',
-                      'in-element args value inspect should be correct'
-                    );
-                  }
-                  argsTestPromise = testArgsValue();
-                },
-                template: null,
-              },
-              Component({
-                name: 'test-component-in-in-element',
-                template: () => null,
-              })
-            )
-          )
-        )
+        Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
       ),
     ]);
+
     QUnit.assert.ok(
       argsTestPromise instanceof Promise,
       'args should be tested'
@@ -716,31 +837,52 @@ module('Ember Debug - View', function (hooks) {
 
     let tree = await getRenderTree();
 
+    const root = [];
+
+    const children = [
+      Component({ name: 'test-foo', bounds: 'single' }),
+      Component({
+        name: 'test-bar',
+        bounds: 'range',
+        args: Args({ names: ['value'], positionals: 0 }),
+      }),
+      Component(
+        {
+          name: 'in-element',
+          args: Args({ names: [], positionals: 1 }),
+          template: null,
+        },
+        Component({
+          name: 'test-component-in-in-element',
+          template: () => null,
+        })
+      ),
+    ];
+
+    const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
+
+    if (enableModifierSupport) {
+      root.push(
+        ...[
+          HtmlElement(
+            {
+              name: 'div',
+            },
+            Modifier({
+              name: 'did-insert',
+              args: Args({ positionals: 1 }),
+            }),
+            ...children
+          ),
+        ]
+      );
+    } else {
+      root.push(...children);
+    }
+
     matchTree(tree, [
       TopLevel(
-        Route(
-          { name: 'application' },
-          Route(
-            { name: 'simple' },
-            Component({ name: 'test-foo', bounds: 'single' }),
-            Component({
-              name: 'test-bar',
-              bounds: 'range',
-              args: Args({ names: ['value'], positionals: 0 }),
-            }),
-            Component(
-              {
-                name: 'in-element',
-                args: Args({ names: [], positionals: 1 }),
-                template: null,
-              },
-              Component({
-                name: 'test-component-in-in-element',
-                template: () => null,
-              })
-            )
-          )
-        )
+        Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
       ),
     ]);
   });

package/tests/index.html

@@ -5,6 +5,7 @@
     <title>EmberInspector Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="../" />
     <style>
       /* Smoke and mirrors requires the container
       to be visible all the time since rendering