ember-inspector 4.13.1 → 4.15.0

package/tests/acceptance/component-tree-test.js

@@ -84,7 +84,7 @@ function TopLevel({ id }, ...children) {
       instance: null,
       template: 'packages/@ember/-internals/glimmer/lib/templates/outlet.hbs',
     },
-    ...children
+    ...children,
   );
 }
 
@@ -109,7 +109,7 @@ function getRenderTree({ withChildren, withManyChildren } = {}) {
   if (withChildren) {
     children.push(
       Component({ id: 5, name: 'sub-task' }),
-      Component({ id: 6, name: 'sub-task' })
+      Component({ id: 6, name: 'sub-task' }),
     );
   }
   if (withManyChildren) {
@@ -133,11 +133,11 @@ function getRenderTree({ withChildren, withManyChildren } = {}) {
                 args: Args({ names: ['subTasks'], positionals: 0 }),
                 instance: Serialized('ember789'),
               },
-              ...children
-            )
-          )
-        )
-      )
+              ...children,
+            ),
+          ),
+        ),
+      ),
     ),
   ];
 }
@@ -165,7 +165,7 @@ module('Component Tab', function (hooks) {
     assert.strictEqual(
       expandedNodes.length,
       3,
-      'all nodes should be expanded except the leaf node'
+      'all nodes should be expanded except the leaf node',
     );
 
     let names = [];
@@ -183,7 +183,7 @@ module('Component Tab', function (hooks) {
         'TodoList',
         'TodoItem @subTasks ={{ ... }}',
       ],
-      'expected names for all views/components'
+      'expected names for all views/components',
     );
   });
 
@@ -193,7 +193,7 @@ module('Component Tab', function (hooks) {
     let treeNodes = findAll('.component-tree-item');
     assert.strictEqual(treeNodes.length, 4, 'expected some tree nodes');
 
-    let expanders = findAll('.component-tree-item__expand');
+    let expanders = findAll('.component-tree-item-expand');
     let expanderEl = expanders[expanders.length - 1];
     await click(expanderEl);
 
@@ -230,8 +230,6 @@ module('Component Tab', function (hooks) {
   });
 
   test('It allows users to navigate nodes with arrow keys', async function (assert) {
-    assert.expect(6);
-
     await visit('/component-tree');
 
     // select first node with down arrow key
@@ -286,31 +284,31 @@ module('Component Tab', function (hooks) {
   test('It allows users to expand and collapse children with alt key', async function (assert) {
     await visit('/component-tree');
 
-    let expanders = findAll('.component-tree-item__expand.expanded');
+    let expanders = findAll('.component-tree-item-expand.expanded');
     assert.strictEqual(
       expanders.length,
       3,
-      'disclosure triangles all in expanded state'
+      'disclosure triangles all in expanded state',
     );
 
     // Click second component with alt key;
     // this should collapse itself and children
     let expanderEl = expanders[1];
     await click(expanderEl, { altKey: true });
-    expanders = findAll('.component-tree-item__expand.expanded');
+    expanders = findAll('.component-tree-item-expand.expanded');
     assert.strictEqual(
       expanders.length,
       1,
-      'clicked disclosure triangle no longer expanded'
+      'clicked disclosure triangle no longer expanded',
     );
 
-    expanders = findAll('.component-tree-item__expand');
+    expanders = findAll('.component-tree-item-expand');
     expanderEl = expanders[1];
     await click(expanderEl);
 
     // After expanding second component without alt key
     // the children should be collapsed
-    expanders = findAll('.component-tree-item__expand');
+    expanders = findAll('.component-tree-item-expand');
     expanderEl = expanders[2];
     assert
       .dom(expanderEl)
@@ -335,10 +333,63 @@ module('Component Tab', function (hooks) {
     assert.deepEqual(
       visibleComponentNames,
       ['application route', 'todos route', 'TodoList'],
-      'expected names for all views/components'
+      'expected names for all views/components',
     );
   });
 
+  test('it should only show parents and children of selected item in focus mode', async function (assert) {
+    await visit('/component-tree');
+
+    function findTreeItem(children, id) {
+      for (const child of children) {
+        if (child.id.includes(`render-node:${id}`)) {
+          return child;
+        }
+        const found = findTreeItem(child.children, id);
+        if (found) {
+          return found;
+        }
+      }
+    }
+
+    function getCustomRenderTree() {
+      const tree = getRenderTree({ withChildren: true });
+      const subtask = findTreeItem(tree, 6);
+      const todo = findTreeItem(tree, 3);
+      subtask.children.push(Component({ id: 7, name: 'sub-task-child' }));
+      subtask.children.push(Component({ id: 8, name: 'sub-task-child' }));
+      todo.children.push(Component({ id: 9, name: 'todo-list-2' }));
+      return tree;
+    }
+
+    await sendMessage({
+      type: 'view:renderTree',
+      tree: getCustomRenderTree(),
+    });
+
+    await rerender();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.strictEqual(treeNodes.length, 5, 'expected all tree nodes');
+
+    let expanders = findAll('.component-tree-item-expand');
+    let expanderEl = expanders[expanders.length - 1];
+    await click(expanderEl);
+
+    treeNodes = findAll('.component-tree-item');
+    const subTask = treeNodes
+      .filter((t) => t.textContent.toLowerCase().includes('subtask'))
+      .at(-1);
+
+    respondWith('view:showInspection', false, { count: 1 });
+    await click(subTask);
+
+    await click('[data-test-toggle-focus]');
+
+    treeNodes = findAll('.component-tree-item');
+    assert.strictEqual(treeNodes.length, 6, 'expected all tree nodes');
+  });
+
   test('It should clear the search filter when the clear button is clicked', async function (assert) {
     await visit('/component-tree');
 
@@ -357,7 +408,7 @@ module('Component Tab', function (hooks) {
   test('It should update the view tree when the port triggers a change, preserving the expanded state of existing nodes', async function (assert) {
     await visit('/component-tree');
 
-    let expanders = findAll('.component-tree-item__expand');
+    let expanders = findAll('.component-tree-item-expand');
     let expanderEl = expanders[expanders.length - 1];
     await click(expanderEl);
 
@@ -385,7 +436,7 @@ module('Component Tab', function (hooks) {
       .exists({ count: 4 }, 'the last node should still be collapsed');
 
     assert
-      .dom('.component-tree-item__expand')
+      .dom('.component-tree-item-expand')
       .exists({ count: 3 }, 'last item should not have expander yet');
 
     // send a view tree with children
@@ -395,14 +446,14 @@ module('Component Tab', function (hooks) {
     });
 
     assert
-      .dom('.component-tree-item__expand')
+      .dom('.component-tree-item-expand')
       .exists({ count: 4 }, 'it should have a new expander');
 
     assert
       .dom('.component-tree-item')
       .exists({ count: 4 }, 'the last node should still be collapsed');
 
-    let expanders = findAll('.component-tree-item__expand');
+    let expanders = findAll('.component-tree-item-expand');
     let expanderEl = expanders[expanders.length - 1];
     await click(expanderEl);
 
@@ -437,14 +488,14 @@ module('Component Tab', function (hooks) {
     await settled();
 
     assert
-      .dom('.component-tree-item--pinned')
+      .dom('.component-tree-item-pinned')
       .exists({ count: 1 }, 'it should pinn the selected item');
 
     assert.true(
       isInViewport(
-        document.getElementsByClassName('component-tree-item--pinned').item(0)
+        document.getElementsByClassName('component-tree-item-pinned').item(0),
       ),
-      'it should show the pinned item'
+      'it should show the pinned item',
     );
 
     await sendMessage({
@@ -455,16 +506,16 @@ module('Component Tab', function (hooks) {
     await settled();
 
     assert
-      .dom('.component-tree-item--highlighted')
+      .dom('.component-tree-item-highlighted')
       .exists({ count: 1 }, 'it should show the previewing item');
 
     assert.true(
       isInViewport(
         document
-          .getElementsByClassName('component-tree-item--highlighted')
-          .item(0)
+          .getElementsByClassName('component-tree-item-highlighted')
+          .item(0),
       ),
-      'it should show the preview item'
+      'it should show the preview item',
     );
 
     await sendMessage({
@@ -475,10 +526,10 @@ module('Component Tab', function (hooks) {
     await settled();
 
     assert
-      .dom('.component-tree-item--pinned')
+      .dom('.component-tree-item-pinned')
       .exists(
         { count: 0 },
-        'it should not scroll back to the pinned component after preview finished'
+        'it should not scroll back to the pinned component after preview finished',
       );
 
     await sendMessage({
@@ -489,10 +540,10 @@ module('Component Tab', function (hooks) {
     await settled();
 
     assert
-      .dom('.component-tree-item--pinned')
+      .dom('.component-tree-item-pinned')
       .exists(
         { count: 0 },
-        'it should not scroll back to the pinned component after new render tree'
+        'it should not scroll back to the pinned component after new render tree',
       );
 
     const scrollTarget = document
@@ -515,20 +566,18 @@ module('Component Tab', function (hooks) {
     await settled();
 
     assert
-      .dom('.component-tree-item--pinned')
+      .dom('.component-tree-item-pinned')
       .exists({ count: 1 }, 'it should show the pinned item after scrolling');
 
     assert.true(
       isInViewport(
-        document.getElementsByClassName('component-tree-item--pinned').item(0)
+        document.getElementsByClassName('component-tree-item-pinned').item(0),
       ),
-      'it should show the pinned item'
+      'it should show the pinned item',
     );
   });
 
   test('Previewing / showing a view on the client', async function (assert) {
-    assert.expect(2);
-
     await visit('/component-tree');
 
     respondWith('view:showInspection', ({ id, pin }) => {
@@ -545,8 +594,6 @@ module('Component Tab', function (hooks) {
   });
 
   test('Scrolling an element into view', async function (assert) {
-    assert.expect(1);
-
     await visit('/component-tree');
 
     respondWith('view:scrollIntoView', ({ id }) => {
@@ -558,8 +605,6 @@ module('Component Tab', function (hooks) {
   });
 
   test('View DOM element in Elements panel', async function (assert) {
-    assert.expect(1);
-
     await visit('/component-tree');
 
     respondWith('view:inspectElement', ({ id }) => {
@@ -571,8 +616,6 @@ module('Component Tab', function (hooks) {
   });
 
   test('Inspects the component in the object inspector on click and shows tooltip', async function (assert) {
-    assert.expect(3);
-
     await visit('/component-tree');
 
     respondWith('view:showInspection', ({ id, pin }) => {
@@ -585,24 +628,22 @@ module('Component Tab', function (hooks) {
       assert.strictEqual(
         objectId,
         'ember456',
-        'Client asked to inspect the application controller'
+        'Client asked to inspect the application controller',
       );
       return false;
     });
 
-    await click('.component-tree-item--component code');
+    await click('.component-tree-item-component code');
   });
 
   test('Selects a component in the tree in response to a message from the context menu', async function (assert) {
-    assert.expect(8);
-
     // Go to the component tree and populate it before sending the message from the context menu
     // also collapse the tree to test auto expanding to pinned item
     await visit('/component-tree');
     let treeNodes = findAll('.component-tree-item');
     assert.strictEqual(treeNodes.length, 4, 'expected some tree nodes');
 
-    let expanders = findAll('.component-tree-item__expand');
+    let expanders = findAll('.component-tree-item-expand');
     let expanderEl = expanders[expanders.length - 1];
     await click(expanderEl);
 
@@ -619,7 +660,7 @@ module('Component Tab', function (hooks) {
       assert.strictEqual(
         objectId,
         'ember789',
-        'Client asked to inspect the <TodoItem> component'
+        'Client asked to inspect the <TodoItem> component',
       );
       return false;
     });
@@ -632,16 +673,16 @@ module('Component Tab', function (hooks) {
     assert.strictEqual(
       currentURL(),
       '/component-tree?pinned=render-node%3A4',
-      'It pins the element id as a query param'
+      'It pins the element id as a query param',
     );
 
     await settled();
 
     assert
-      .dom('.component-tree-item--pinned')
+      .dom('.component-tree-item-pinned')
       .hasText(
         'TodoItem @subTasks ={{ ... }}',
-        'It selects the item in the tree corresponding to the element'
+        'It selects the item in the tree corresponding to the element',
       );
 
     treeNodes = findAll('.component-tree-item');
@@ -649,15 +690,13 @@ module('Component Tab', function (hooks) {
   });
 
   test('Can inspect component arguments that are objects in component tree', async function (assert) {
-    assert.expect(1);
-
     await visit('/component-tree');
 
     respondWith('objectInspector:inspectById', ({ objectId }) => {
       assert.strictEqual(
         objectId,
         'ember1',
-        'Client asked to inspect the <TodoList> component argument'
+        'Client asked to inspect the <TodoList> component argument',
       );
       return false;
     });

package/tests/acceptance/container-test.js

@@ -161,8 +161,6 @@ module('Container Tab', function (outer) {
     });
 
     test('Successfully redirects if the container type is not found', async function (assert) {
-      assert.expect(1);
-
       respondWith('container:getInstances', ({ containerType }) => {
         if (containerType === 'random-type') {
           return {

package/tests/acceptance/data-test.js

@@ -34,7 +34,7 @@ function getModelTypes() {
 
 function recordFactory(
   { objectId, ...attrs },
-  filterValues = { isNew: false }
+  filterValues = { isNew: false },
 ) {
   filterValues = filterValues || { isNew: false };
   let searchKeywords = [];
@@ -60,7 +60,7 @@ function getRecords(type) {
       }),
       recordFactory(
         { objectId: 'post-2', id: 2, title: 'Hello', body: '' },
-        { isNew: true }
+        { isNew: true },
       ),
     ];
   }
@@ -91,11 +91,16 @@ module('Data Tab', function (outer) {
     test('Model types are successfully listed and bound', async function (assert) {
       respondWith('data:getModelTypes', {
         type: 'data:modelTypesAdded',
-        modelTypes: getModelTypes(),
+        modelTypes: [],
       });
 
       await visit('/data/model-types');
 
+      await sendMessage({
+        type: 'data:modelTypesAdded',
+        modelTypes: getModelTypes(),
+      });
+
       assert.dom('.js-model-type').exists({ count: 2 });
 
       // they should be sorted alphabetically
@@ -250,7 +255,7 @@ module('Data Tab', function (outer) {
           applicationId,
           applicationName,
           modelTypes: getModelTypes(),
-        })
+        }),
       );
 
       await click('[data-test-reload-container-btn]');
@@ -259,8 +264,6 @@ module('Data Tab', function (outer) {
     });
 
     test('Can inspect store in data pane', async function (assert) {
-      assert.expect(1);
-
       respondWith('data:getModelTypes', {
         type: 'data:modelTypesAdded',
         modelTypes: getModelTypes(),
@@ -321,7 +324,7 @@ module('Data Tab', function (outer) {
 
       let secondRow = recordRows[1];
       let secondRowColumns = secondRow.querySelectorAll(
-        '[data-test-table-cell]'
+        '[data-test-table-cell]',
       );
       assert.dom(secondRowColumns[0]).hasText('2');
       assert.dom(secondRowColumns[1]).hasText('Hello');
@@ -350,7 +353,7 @@ module('Data Tab', function (outer) {
             },
             {
               isNew: true,
-            }
+            },
           ),
         ],
       });
@@ -461,7 +464,7 @@ module('Data Tab', function (outer) {
       let filters = findAll('.js-filter');
       assert.strictEqual(filters.length, 2);
       let newFilter = [...filters].find(
-        (e) => e.textContent.indexOf('New') > -1
+        (e) => e.textContent.indexOf('New') > -1,
       );
       await click(newFilter);
 
@@ -517,7 +520,7 @@ module('Data Tab', function (outer) {
     test('Columns successfully updated when switching model types', async function (assert) {
       await visit('/data/model-types/App.Post/records');
       let columns = findAll('[data-test-table-header-column]');
-      assert.dom(columns[columns.length - 1]).includesText('Body');
+      assert.dom(columns.at(-1)).includesText('Body');
 
       respondWith('data:getFilters', {
         type: 'data:filters',
@@ -531,7 +534,7 @@ module('Data Tab', function (outer) {
 
       await visit('/data/model-types/App.Comment/records');
       columns = findAll('[data-test-table-header-column]');
-      assert.dom(columns[columns.length - 1]).includesText('Content');
+      assert.dom(columns.at(-1)).includesText('Content');
     });
   });
 });

package/tests/acceptance/deprecation-test.js

@@ -90,8 +90,6 @@ module('Deprecation Tab', function (outer) {
     });
 
     test('No source map', async function (assert) {
-      assert.expect(6);
-
       await visit('/deprecations');
 
       await toggleDeprecationSource();
@@ -131,8 +129,6 @@ module('Deprecation Tab', function (outer) {
     });
 
     test("With source map, source found, can't open resource", async function (assert) {
-      assert.expect(12);
-
       await visit('/deprecations');
 
       await toggleDeprecationSource();
@@ -149,14 +145,14 @@ module('Deprecation Tab', function (outer) {
       assert.strictEqual(sources.length, 2, 'shows all sources');
       assert.notOk(
         sources[0].querySelector('[data-test-deprecation-source-link]'),
-        'source not clickable'
+        'source not clickable',
       );
       assert
         .dom(sources[0].querySelector('[data-test-deprecation-source-text]'))
         .hasText('path-to-file.js:1');
       assert.notOk(
         sources[1].querySelector('[data-test-deprecation-source-link]'),
-        'source not clickable'
+        'source not clickable',
       );
       assert
         .dom(sources[1].querySelector('[data-test-deprecation-source-text]'))
@@ -169,7 +165,7 @@ module('Deprecation Tab', function (outer) {
       });
 
       await click(
-        sources[0].querySelector('[data-test-trace-deprecations-btn]')
+        sources[0].querySelector('[data-test-trace-deprecations-btn]'),
       );
 
       respondWith('deprecation:sendStackTraces', ({ deprecation }) => {
@@ -179,7 +175,7 @@ module('Deprecation Tab', function (outer) {
       });
 
       await click(
-        sources[1].querySelector('[data-test-trace-deprecations-btn]')
+        sources[1].querySelector('[data-test-trace-deprecations-btn]'),
       );
     });
 
@@ -202,14 +198,14 @@ module('Deprecation Tab', function (outer) {
       assert.strictEqual(sources.length, 2, 'shows all sources');
       assert.notOk(
         sources[0].querySelector('[data-test-deprecation-source-text]'),
-        'source clickable'
+        'source clickable',
       );
       assert
         .dom(sources[0].querySelector('[data-test-deprecation-source-link]'))
         .hasText('path-to-file.js:1');
       assert.notOk(
         sources[1].querySelector('[data-test-deprecation-source-text]'),
-        'source clickable'
+        'source clickable',
       );
       assert
         .dom(sources[1].querySelector('[data-test-deprecation-source-link]'))
@@ -218,13 +214,13 @@ module('Deprecation Tab', function (outer) {
       expectOpenResource('http://path-to-file.js', 1);
 
       await click(
-        sources[0].querySelector('[data-test-deprecation-source-link]')
+        sources[0].querySelector('[data-test-deprecation-source-link]'),
       );
 
       expectOpenResource('http://path-to-second-file.js', 2);
 
       await click(
-        sources[1].querySelector('[data-test-deprecation-source-link]')
+        sources[1].querySelector('[data-test-deprecation-source-link]'),
       );
     });
 

package/tests/acceptance/info-test.js

@@ -23,7 +23,7 @@ module('Info Tab', function (hooks) {
     assert.strictEqual(
       libraries.length,
       3,
-      'The correct number of libraries is displayed'
+      'The correct number of libraries is displayed',
     );
     assert
       .dom(libraries[0].querySelector('.js-lib-library'))
@@ -54,7 +54,7 @@ module('Info Tab', function (hooks) {
     assert.strictEqual(
       configs.length,
       2,
-      'The correct number of configurations is displayed'
+      'The correct number of configurations is displayed',
     );
     assert
       .dom(configs[0].querySelector('.js-config-key'))