From 0780a800501e5f0e56af8bdf82450c2ccfcbe562 Mon Sep 17 00:00:00 2001 From: Jerry Nummi Date: Fri, 21 Jun 2019 13:31:40 -0700 Subject: [PATCH] Angle brackets and classified component names --- app/helpers/classify.js | 8 +++++ app/helpers/console.js | 7 ---- app/styles/component_tree.scss | 8 +++-- .../components/component-tree-item.hbs | 4 +-- tests/acceptance/component-tree-test.js | 36 +++++++++---------- 5 files changed, 34 insertions(+), 29 deletions(-) create mode 100644 app/helpers/classify.js delete mode 100644 app/helpers/console.js diff --git a/app/helpers/classify.js b/app/helpers/classify.js new file mode 100644 index 0000000000..e87d88f786 --- /dev/null +++ b/app/helpers/classify.js @@ -0,0 +1,8 @@ +import { classify } from '@ember/string'; +import { helper } from '@ember/component/helper'; + +export function classifyString([str]) { + return classify(str); +} + +export default helper(classifyString); diff --git a/app/helpers/console.js b/app/helpers/console.js deleted file mode 100644 index cc2d7775a0..0000000000 --- a/app/helpers/console.js +++ /dev/null @@ -1,7 +0,0 @@ -import { helper } from '@ember/component/helper'; - -export function console(_) { - return console.log(_); -} - -export default helper(console); diff --git a/app/styles/component_tree.scss b/app/styles/component_tree.scss index 980b3d9098..818e08449b 100644 --- a/app/styles/component_tree.scss +++ b/app/styles/component_tree.scss @@ -53,12 +53,16 @@ .component-tree-item__bracket:before { color: var(--base07); - content: '{{'; + content: '<'; } .component-tree-item__bracket:after { color: var(--base07); - content: '}}'; + content: '>'; +} + +.component-tree-item__bracket.component-tree-item__bracket--self-closing:after { + content: '/>'; } /** diff --git a/app/templates/components/component-tree-item.hbs b/app/templates/components/component-tree-item.hbs index 460452e6e7..9ecabb1e88 100644 --- a/app/templates/components/component-tree-item.hbs +++ b/app/templates/components/component-tree-item.hbs @@ -15,9 +15,9 @@ {{/if}} - {{@item.view.name}} + {{if @item.view.isComponent (classify @item.view.name) @item.view.name}} {{#if @item.view.isComponent}} diff --git a/tests/acceptance/component-tree-test.js b/tests/acceptance/component-tree-test.js index a8a086786a..8f498c8910 100644 --- a/tests/acceptance/component-tree-test.js +++ b/tests/acceptance/component-tree-test.js @@ -13,10 +13,10 @@ import wait from 'ember-test-helpers/wait'; let port; -module('Component Tab', function(hooks) { +module('Component Tab', function (hooks) { setupApplicationTest(hooks); - hooks.beforeEach(function() { + hooks.beforeEach(function () { port = this.owner.lookup('port:main'); }); @@ -110,7 +110,7 @@ module('Component Tab', function(hooks) { }); } - test('It should correctly display the component tree', async function(assert) { + test('It should correctly display the component tree', async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -127,18 +127,18 @@ module('Component Tab', function(hooks) { let templateNames = []; - [...treeNodes].forEach(function(node) { + [...treeNodes].forEach(function (node) { templateNames.push(textFor('code', node)); }); assert.deepEqual( templateNames, - ['application', 'todos', 'todo-list', 'todo-item'], + ['application', 'todos', 'TodoList', 'TodoItem'], 'expected names for all views/components' ); }); - test('It allows users to expand and collapse nodes', async function(assert) { + test('It allows users to expand and collapse nodes', async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -158,7 +158,7 @@ module('Component Tab', function(hooks) { assert.equal(treeNodes.length, 3, 'the last node should be hidden'); }); - test('It allows users to expand and collapse children with alt key', async function(assert) { + test('It allows users to expand and collapse children with alt key', async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -188,7 +188,7 @@ module('Component Tab', function(hooks) { assert.ok(expanderEl.classList.contains('collapsed'), 'child component was collapsed'); }); - test('It should filter the view tree using the search text', async function(assert) { + test('It should filter the view tree using the search text', async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -205,18 +205,18 @@ module('Component Tab', function(hooks) { assert.equal(treeNodes.length, 2, 'expected filtered tree nodes'); let visibleComponentNames = []; - [...treeNodes].forEach(function(node) { + [...treeNodes].forEach(function (node) { visibleComponentNames.push(textFor('code', node)); }); assert.deepEqual( visibleComponentNames, - ['todo-list', 'todo-item'], + ['TodoList', 'TodoItem'], 'expected names for all views/components' ); }); - test("It should clear the search filter when the clear button is clicked", async function(assert) { + test("It should clear the search filter when the clear button is clicked", async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -237,7 +237,7 @@ module('Component Tab', function(hooks) { assert.equal(treeNodes.length, 4, 'expected all tree nodes'); }); - test('It should update the view tree when the port triggers a change, preserving the expanded state of existing nodes', async function(assert) { + test('It should update the view tree when the port triggers a change, preserving the expanded state of existing nodes', async function (assert) { let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -258,7 +258,7 @@ module('Component Tab', function(hooks) { assert.dom('.component-tree-item').exists({ count: 3 }, 'the last node should still be hidden'); }); - test('Previewing / showing a view on the client', async function(assert) { + test('Previewing / showing a view on the client', async function (assert) { let messageSent = null; port.reopen({ send(name, message) { @@ -290,7 +290,7 @@ module('Component Tab', function(hooks) { ); }); - test('Scrolling an element into view', async function(assert) { + test('Scrolling an element into view', async function (assert) { let messageSent = null; port.reopen({ send(name, message) { @@ -311,7 +311,7 @@ module('Component Tab', function(hooks) { ); }); - test('View DOM element in Elements panel', async function(assert) { + test('View DOM element in Elements panel', async function (assert) { let messageSent = null; port.reopen({ send(name, message) { @@ -333,7 +333,7 @@ module('Component Tab', function(hooks) { ); }); - test('Inspects the component in the object inspector on click', async function(assert) { + test('Inspects the component in the object inspector on click', async function (assert) { let messageSent = null; port.reopen({ send(name, message) { @@ -353,7 +353,7 @@ module('Component Tab', function(hooks) { assert.equal(messageSent.message.objectId, 'ember392'); }); - test('Selects a component in the tree in response to a message from the context menu', async function(assert) { + test('Selects a component in the tree in response to a message from the context menu', async function (assert) { // Go to the component tree and populate it before sending the message from the context menu let viewTree = defaultViewTree(); await visit('/component-tree'); @@ -367,6 +367,6 @@ module('Component Tab', function(hooks) { }); await wait(); assert.equal(currentURL(), '/component-tree?pinnedObjectId=ember267', 'It pins the element id as a query param'); - assert.dom('.component-tree-item--selected').hasText('todo-item', 'It selects the item in the tree corresponding to the element'); + assert.dom('.component-tree-item--selected').hasText('TodoItem', 'It selects the item in the tree corresponding to the element'); }); });