Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component Tree: Angle Brackets and Classified Names #992

Merged
merged 1 commit into from
Jun 21, 2019
Merged

Component Tree: Angle Brackets and Classified Names #992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions app/helpers/classify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
7 changes: 0 additions & 7 deletions app/helpers/console.js
View file
Open in desktop

This file was deleted.

8 changes: 6 additions & 2 deletions app/styles/component_tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '/>';
}

/**
Expand Down
4 changes: 2 additions & 2 deletions app/templates/components/component-tree-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
{{/if}}

<code
class="component-tree-item__tag {{if @item.view.isComponent "component-tree-item__bracket"}}"
class="component-tree-item__tag {{if @item.view.isComponent "component-tree-item__bracket"}} {{if (not @item.hasChildren) "component-tree-item__bracket--self-closing"}}"
>
{{@item.view.name}}
{{if @item.view.isComponent (classify @item.view.name) @item.view.name}}
</code>

{{#if @item.view.isComponent}}
Expand Down
36 changes: 18 additions & 18 deletions tests/acceptance/component-tree-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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');
Expand All @@ -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');
});
});