diff --git a/app/styles/deprecations.scss b/app/styles/deprecations.scss
index 9ba65aba39..8045ad669d 100644
--- a/app/styles/deprecations.scss
+++ b/app/styles/deprecations.scss
@@ -1,6 +1,5 @@
.deprecation-item {
border-bottom: 1px solid var(--base01);
- font-size: 1.4rem;
.send-to-console {
font-size: inherit;
diff --git a/app/styles/dropdown.scss b/app/styles/dropdown.scss
index b2e6ccadf1..08e0c60943 100644
--- a/app/styles/dropdown.scss
+++ b/app/styles/dropdown.scss
@@ -1,40 +1,6 @@
-/**
- DROP-DOWN
- =========
-*/
-
-.dropdown {
- flex: auto;
- height: 28px;
- position: relative;
-}
-
-.dropdown__select {
- -moz-appearance: none;
- -webkit-appearance: none;
- background-color: var(--transparent);
- border: 0;
- box-sizing: border-box;
- color: var(--base13);
- display: block;
- font-size: 1.2rem;
- height: 100%;
- margin: 0;
- padding: 0 16px 0 5px;
- width: 100%;
-}
-
-.dropdown__select:focus {
- outline: none;
-}
-
.dropdown__arrow {
- opacity: 0.7;
- pointer-events: none;
- position: absolute;
right: 5px;
- top: 9px;
+ top: 50%;
+ transform: translateY(-50%);
width: 6px;
-
- path { fill: var(--base13); }
}
diff --git a/app/styles/mixin.scss b/app/styles/mixin.scss
index 160121e1e1..6372476355 100644
--- a/app/styles/mixin.scss
+++ b/app/styles/mixin.scss
@@ -9,39 +9,25 @@
$mixin-left-padding: 22px;
.mixin__name {
- background-color: var(--base01);
border-bottom: 1px solid var(--base03);
- color: var(--base15);
- cursor: default;
- overflow: hidden;
padding: 4px 2px 4px $mixin-left-padding;
- position: -webkit-sticky;
- position: sticky;
- text-overflow: ellipsis;
- top: 0;
- user-select: none;
- white-space: nowrap;
z-index: 1;
-}
-
-.mixin__name:active {
- background-color: var(--base02);
-}
-.mixin__name--no-props {
- color: var(--base09);
-}
+ &:active {
+ background-color: var(--base02);
+ }
-.mixin__name:before {
- color: var(--base10);
- content: "\25B6";
- font-size: 90%;
- left: 6px;
- margin-right: 5px;
- position: absolute;
- top: 5px;
- transform: rotate(0deg);
- transition: all 0.1s;
+ &:before {
+ color: var(--base10);
+ content: "\25B6";
+ font-size: 75%;
+ left: 7px;
+ margin-right: 5px;
+ position: absolute;
+ top: 6px;
+ transform: rotate(0deg);
+ transition: all 0.1s;
+ }
}
.mixin_props_no .mixin__name:before {
@@ -54,24 +40,13 @@ $mixin-left-padding: 22px;
.mixin__properties {
border-bottom: 1px solid var(--base03);
- font-family: var(--font-monospace);
- font-size: 1.2rem;
- list-style-type: none;
- margin: 0;
padding: 3px 0 5px;
}
.mixin__property {
- align-items: center;
- display: flex;
- flex-direction: row;
min-height: 19px;
- overflow: hidden;
padding-bottom: 1px;
padding-top: 1px;
- position: relative;
- text-overflow: ellipsis;
- white-space: nowrap;
button {
background: none;
@@ -93,7 +68,6 @@ $mixin-left-padding: 22px;
}
.mixin__send-btn {
- flex-shrink: 0;
opacity: 0;
padding-right: 6px;
}
@@ -115,26 +89,6 @@ $mixin-left-padding: 22px;
}
}
-/* Errors */
-
-.mixin__error {
- color: var(--spec01);
- margin-right: 3px;
- padding: 0 20px;
-}
-
-.mixin__name--errors {
- background-color: var(--base00);
-
- &:active {
- background-color: var(--base00);
- }
-
- button {
- margin-left: 10px;
- }
-}
-
/* Buttons */
.mixin__property-overridden-by {
@@ -142,32 +96,16 @@ $mixin-left-padding: 22px;
}
.mixin__property-name {
- color: var(--base14);
max-width: 50%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
}
.mixin__property-value {
flex: 1;
min-height: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
}
.mixin__property-value-txt {
- background: var(--base01);
border: 1px solid var(--base09);
- color: var(--base14);
- flex: 1;
- font-size: 1.2rem;
- outline: none;
-}
-
-.mixin__property-value-separator {
- margin-right: 5px;
}
.mixin__property .type-function {
@@ -198,23 +136,15 @@ $mixin-left-padding: 22px;
color: var(--spec09);
}
-.mixin__property_state_overridden {
- text-decoration: line-through;
-}
-
-.mixin__property:not(.mixin__property_state_overridden):hover {
+.mixin__property:not(.mixin__property-state-overridden):hover {
background-color: var(--base01);
}
-.mixin__property_state_overridden:hover .mixin__property-overridden-by {
- background-color: var(--spec00);
+.mixin__property-state-overridden:hover .mixin__property-overridden-by {
display: inline;
- position: absolute;
- right: 0;
- text-decoration: none;
}
-.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
+.mixin__property:not(.mixin__property-state-overridden):hover .mixin__send-btn {
opacity: 1;
&:active {
diff --git a/app/styles/object_inspector.scss b/app/styles/object_inspector.scss
index b11518be0f..47b0ce79ca 100644
--- a/app/styles/object_inspector.scss
+++ b/app/styles/object_inspector.scss
@@ -1,22 +1,5 @@
-/**
- OBJECT-INSPECTOR
- ================
- The Object inspector
- at the far right of the screen
-*/
-
-.object-inspector-object-name {
- flex: auto;
- font-weight: 700;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
.object-trail {
- margin-bottom: 4px;
- margin-left: 39px;
- word-break: break-all;
+ margin-left: 34px;
}
.object-inspector-toolbar.toolbar {
@@ -34,7 +17,6 @@
margin-bottom: 5px;
margin-top: 2px;
padding-top: 2px;
- position: relative;
& > svg {
height: 10px;
@@ -43,20 +25,11 @@
top: -4px;
width: 19px;
}
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
}
.mixin__property-dependency-item {
- color: var(--base12);
- font-size: 1.1rem;
margin-bottom: 2px;
margin-left: 55px;
- position: relative;
&:before {
background-color: var(--base08);
@@ -85,21 +58,12 @@
}
.mixin__property-icon-container {
- flex-shrink: 0;
width: $mixin-left-padding;
}
.mixin__property-icon {
- border-radius: 3px;
- color: var(--white);
- display: inline-block;
- font-family: var(--font-monospace);
- font-size: 1.3rem;
height: 17px;
line-height: 17px;
- text-align: center;
- -webkit-user-select: none;
- user-select: none;
width: 17px;
}
diff --git a/app/styles/route_tree.scss b/app/styles/route_tree.scss
index 44fb9ef6da..34de1130e1 100644
--- a/app/styles/route_tree.scss
+++ b/app/styles/route_tree.scss
@@ -1,7 +1,5 @@
.route-cell-objects {
.is-link {
- // inline-block prevents underline from displaying around white-space
- display: inline-block;
margin-right: 2px;
}
diff --git a/app/styles/utils.scss b/app/styles/utils.scss
index 64bf59755a..85e6fb7715 100644
--- a/app/styles/utils.scss
+++ b/app/styles/utils.scss
@@ -25,10 +25,14 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
+.block { display: block; }
+.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
@@ -47,9 +51,10 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.w-10 { width: var(--unit10); }
.w-11 { width: var(--unit11); }
.w-12 { width: var(--unit12); }
-
.w-full { width: 100%; }
.w-auto { width: auto; }
+
+.h-7 { height: var(--unit7); }
.h-full { height: 100%; }
.h-auto { height: auto; }
@@ -104,10 +109,18 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.leading-none { line-height: 1; }
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }
+.line-through { text-decoration: line-through; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.whitespace-no-wrap { white-space: nowrap; }
+.break-all { word-break: break-all; }
+
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
.bg-transparent { background-color: var(--transparent); }
@@ -117,6 +130,8 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.cursor-pointer { cursor: pointer; }
.cursor-col-resize { cursor: col-resize; }
+.select-none { user-select: none; }
+
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
@@ -130,6 +145,14 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.outline-none { outline: 0; }
+.opacity-100 { opacity: 1; }
+.opacity-75 { opacity: 0.75; }
+.opacity-50 { opacity: 0.5; }
+.opacity-25 { opacity: 0.25; }
+.opacity-0 { opacity: 0; }
+
+.list-none { list-style-type: none; }
+
/*
Utilities not part of Tailwind:
*/
@@ -142,8 +165,15 @@ $units: 0, 1, 2, 3, 4, 5, 6;
.bg-base05 { background-color: var(--base05); }
.bg-spec00 { background-color: var(--spec00); }
+.text-white { color: var(--white); }
+.text-base09 { color: var(--base09); }
+.text-base10 { color: var(--base10); }
.text-base11 { color: var(--base11); }
+.text-base12 { color: var(--base12); }
.text-base13 { color: var(--base13); }
+.text-base14 { color: var(--base14); }
+.text-base15 { color: var(--base15); }
+.text-spec01 { color: var(--spec01); }
.text-xs { font-size: 1rem; }
.text-sm { font-size: 1.1rem; }
diff --git a/app/templates/component-tree-toolbar.hbs b/app/templates/component-tree-toolbar.hbs
index d90694d7c5..813c6f0f8d 100644
--- a/app/templates/component-tree-toolbar.hbs
+++ b/app/templates/component-tree-toolbar.hbs
@@ -1,6 +1,6 @@
diff --git a/app/templates/component-tree.hbs b/app/templates/component-tree.hbs
index ef8446e360..4d3d3e7e4d 100644
--- a/app/templates/component-tree.hbs
+++ b/app/templates/component-tree.hbs
@@ -4,7 +4,7 @@
@collection={{this.visibleItems}}
@currentItem={{this.currentItem}}
@itemHeight={{this.itemHeight}}
- class="list__content js-component-tree"
+ class="list__content"
tabindex="-1"
>
{{#vertical-collection this.visibleItems estimateHeight=this.itemHeight key="id" as |item|}}
diff --git a/app/templates/container-type-toolbar.hbs b/app/templates/container-type-toolbar.hbs
index d831d5299c..811e07a494 100644
--- a/app/templates/container-type-toolbar.hbs
+++ b/app/templates/container-type-toolbar.hbs
@@ -1,7 +1,7 @@
diff --git a/app/templates/container-types/index-toolbar.hbs b/app/templates/container-types/index-toolbar.hbs
index af734683f9..7f7244f214 100644
--- a/app/templates/container-types/index-toolbar.hbs
+++ b/app/templates/container-types/index-toolbar.hbs
@@ -1,7 +1,7 @@
diff --git a/app/templates/model-types-toolbar.hbs b/app/templates/model-types-toolbar.hbs
index 3843c49350..35ba6f41a2 100644
--- a/app/templates/model-types-toolbar.hbs
+++ b/app/templates/model-types-toolbar.hbs
@@ -1,7 +1,7 @@
diff --git a/app/templates/route-tree-toolbar.hbs b/app/templates/route-tree-toolbar.hbs
index 497758e9ec..5946561de8 100644
--- a/app/templates/route-tree-toolbar.hbs
+++ b/app/templates/route-tree-toolbar.hbs
@@ -25,6 +25,6 @@
diff --git a/lib/ui/addon/components/send-to-console.hbs b/lib/ui/addon/components/send-to-console.hbs
index 3dad44f164..3c2f29258d 100644
--- a/lib/ui/addon/components/send-to-console.hbs
+++ b/lib/ui/addon/components/send-to-console.hbs
@@ -1,7 +1,8 @@
diff --git a/tests/acceptance/component-tree-test.js b/tests/acceptance/component-tree-test.js
index 810deb651f..71608cf473 100644
--- a/tests/acceptance/component-tree-test.js
+++ b/tests/acceptance/component-tree-test.js
@@ -226,7 +226,7 @@ module('Component Tab', function (hooks) {
let treeNodes = findAll('.component-tree-item');
assert.equal(treeNodes.length, 4, 'expected some tree nodes');
- await fillIn('.js-filter-views input', 'list');
+ await fillIn('[data-test-filter-views] input', 'list');
treeNodes = findAll('.component-tree-item');
assert.equal(treeNodes.length, 3, 'expected filtered tree nodes');
@@ -248,7 +248,7 @@ module('Component Tab', function (hooks) {
let treeNodes = findAll('.component-tree-item');
assert.equal(treeNodes.length, 4, 'expected all tree nodes');
- await fillIn('.js-filter-views input', 'xxxxxx');
+ await fillIn('[data-test-filter-views] input', 'xxxxxx');
treeNodes = findAll('.component-tree-item');
assert.equal(treeNodes.length, 0, 'expected filtered tree nodes');
diff --git a/tests/acceptance/container-test.js b/tests/acceptance/container-test.js
index 5440c829d5..3bf1ca6854 100644
--- a/tests/acceptance/container-test.js
+++ b/tests/acceptance/container-test.js
@@ -98,7 +98,7 @@ module('Container Tab', function(outer) {
await click(rows[1].querySelector('.js-instance-name'));
- await fillIn('.js-container-instance-search input', 'first');
+ await fillIn('[data-test-container-instance-search] input', 'first');
rows = findAll('.js-container-instance-list-item');
@@ -122,7 +122,7 @@ module('Container Tab', function(outer) {
let rows = findAll('.js-container-instance-list-item');
assert.equal(rows.length, 2, 'expected all rows');
- await fillIn('.js-container-instance-search input', 'xxxxx');
+ await fillIn('[data-test-container-instance-search] input', 'xxxxx');
rows = findAll('.js-container-instance-list-item');
assert.equal(rows.length, 0, 'expected filtered rows');
@@ -196,7 +196,7 @@ module('Container Tab', function(outer) {
}
});
- await click('.js-reload-container-btn');
+ await click('[data-test-reload-container-btn]');
assert.dom('.js-container-type').exists({ count: 2 });
assert.dom('.js-container-instance-list-item').exists({ count: 2 });
diff --git a/tests/acceptance/data-test.js b/tests/acceptance/data-test.js
index 229f8a1ad6..fc318848c4 100644
--- a/tests/acceptance/data-test.js
+++ b/tests/acceptance/data-test.js
@@ -216,7 +216,7 @@ module('Data Tab', function(outer) {
modelTypes: getModelTypes()
}));
- await click('.js-reload-container-btn');
+ await click('[data-test-reload-container-btn]');
assert.dom('.js-model-type').exists({ count: 2 });
});
diff --git a/tests/acceptance/object-inspector-test.js b/tests/acceptance/object-inspector-test.js
index cff64023ed..cc3c29b682 100644
--- a/tests/acceptance/object-inspector-test.js
+++ b/tests/acceptance/object-inspector-test.js
@@ -81,9 +81,9 @@ module('Object Inspector', function(hooks) {
...objectFactory({ name: 'My Object' })
});
- assert.dom('.js-object-name').hasText('My Object');
- assert.dom('.js-object-detail-name').hasText('Own Properties');
- assert.dom('.js-object-detail').hasClass(
+ assert.dom('[data-test-object-name]').hasText('My Object');
+ assert.dom('[data-test-object-detail-name]').hasText('Own Properties');
+ assert.dom('[data-test-object-detail]').hasClass(
'mixin_state_expanded',
'The "Own Properties" detail is expanded by default'
);
@@ -97,29 +97,29 @@ module('Object Inspector', function(hooks) {
...objectToInspect()
});
- assert.dom('.js-object-name').hasText('My Object');
- let [firstDetail, secondDetail] = findAll('.js-object-detail');
- assert.dom(firstDetail.querySelector('.js-object-detail-name')).hasText('First Detail');
+ assert.dom('[data-test-object-name]').hasText('My Object');
+ let [firstDetail, secondDetail] = findAll('[data-test-object-detail]');
+ assert.dom(firstDetail.querySelector('[data-test-object-detail-name]')).hasText('First Detail');
assert.dom(firstDetail).hasNoClass('mixin_state_expanded', 'Detail not expanded by default');
- await click('.js-object-detail-name', firstDetail);
+ await click('[data-test-object-detail-name]', firstDetail);
assert.dom(firstDetail).hasClass('mixin_state_expanded', 'Detail expands on click.');
assert.dom(secondDetail).hasNoClass('mixin_state_expanded', 'Second detail does not expand.');
- assert.equal(firstDetail.querySelectorAll('.js-object-property').length, 1);
- assert.dom(firstDetail.querySelector('.js-object-property-name')).hasText('numberProperty');
- assert.dom(firstDetail.querySelector('.js-object-property-value')).hasText('1');
- await click(firstDetail.querySelector('.js-object-detail-name'));
+ assert.equal(firstDetail.querySelectorAll('[data-test-object-property]').length, 1);
+ assert.dom(firstDetail.querySelector('[data-test-object-property-name]')).hasText('numberProperty');
+ assert.dom(firstDetail.querySelector('[data-test-object-property-value]')).hasText('1');
+ await click(firstDetail.querySelector('[data-test-object-detail-name]'));
assert.dom(firstDetail).hasNoClass('mixin_state_expanded', 'Expanded detail minimizes on click.');
- await click(secondDetail.querySelector('.js-object-detail-name'));
+ await click(secondDetail.querySelector('[data-test-object-detail-name]'));
assert.dom(secondDetail).hasClass('mixin_state_expanded');
- assert.equal(secondDetail.querySelectorAll('.js-object-property').length, 2);
- assert.dom(secondDetail.querySelectorAll('.js-object-property-name')[0]).hasText('objectProperty');
- assert.dom(secondDetail.querySelectorAll('.js-object-property-value')[0]).hasText('Ember Object Name');
- assert.dom(secondDetail.querySelectorAll('.js-object-property-name')[1]).hasText('stringProperty');
- assert.dom(secondDetail.querySelectorAll('.js-object-property-value')[1]).hasText('String Value');
+ assert.equal(secondDetail.querySelectorAll('[data-test-object-property]').length, 2);
+ assert.dom(secondDetail.querySelectorAll('[data-test-object-property-name]')[0]).hasText('objectProperty');
+ assert.dom(secondDetail.querySelectorAll('[data-test-object-property-value]')[0]).hasText('Ember Object Name');
+ assert.dom(secondDetail.querySelectorAll('[data-test-object-property-name]')[1]).hasText('stringProperty');
+ assert.dom(secondDetail.querySelectorAll('[data-test-object-property-value]')[1]).hasText('String Value');
});
test("Digging deeper into objects", async function (assert) {
@@ -148,29 +148,29 @@ module('Object Inspector', function(hooks) {
}]
});
- let secondDetail = findAll('.js-object-detail')[1];
+ let secondDetail = findAll('[data-test-object-detail]')[1];
- await click(secondDetail.querySelector('.js-object-detail-name'));
- await click('.js-object-property .js-object-property-value');
+ await click(secondDetail.querySelector('[data-test-object-detail-name]'));
+ await click('[data-test-object-property] [data-test-object-property-value]');
- assert.dom('.js-object-name').hasText('My Object', 'Title stays as the initial object.');
- assert.dom('.js-object-trail').hasText('.objectProperty', 'Nested property shows below title');
- assert.dom('.js-object-detail-name').hasText('Nested Detail');
+ assert.dom('[data-test-object-name]').hasText('My Object', 'Title stays as the initial object.');
+ assert.dom('[data-test-object-trail]').hasText('.objectProperty', 'Nested property shows below title');
+ assert.dom('[data-test-object-detail-name]').hasText('Nested Detail');
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
- assert.dom('.js-object-detail').hasClass('mixin_state_expanded');
- assert.dom('.js-object-property-name').hasText('nestedProp');
- assert.dom('.js-object-property-value').hasText('Nested Prop');
+ assert.dom('[data-test-object-detail]').hasClass('mixin_state_expanded');
+ assert.dom('[data-test-object-property-name]').hasText('nestedProp');
+ assert.dom('[data-test-object-property-value]').hasText('Nested Prop');
respondWith('objectInspector:releaseObject', ({ objectId }) => {
assert.equal(objectId, 'nestedObject');
return false;
});
- await click('.js-object-inspector-back');
+ await click('[data-test-object-inspector-back]');
- assert.dom('.js-object-trail').doesNotExist(0);
+ assert.dom('[data-test-object-trail]').doesNotExist(0);
});
test("Computed properties", async function (assert) {
@@ -193,7 +193,7 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
respondWith('objectInspector:calculate', ({ objectId, property, mixinIndex }) => ({
type: 'objectInspector:updateProperty',
@@ -206,9 +206,9 @@ module('Object Inspector', function(hooks) {
}
}));
- await click('.js-calculate');
+ await click('[data-test-calculate]');
- assert.dom('.js-object-property-value').hasText('Computed value');
+ assert.dom('[data-test-object-property-value]').hasText('Computed value');
});
test("Service highlight", async function(assert) {
@@ -230,11 +230,11 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
assert.dom('.mixin__property--group').exists({ count: 1 });
assert.dom('.mixin__property-icon--service').exists({ count: 1 });
- assert.dom('.js-property-name-service').exists({ count: 1 });
+ assert.dom('[data-test-property-name-service]').exists({ count: 1 });
assert.dom('.mixin__property-dependency-list').doesNotExist();
assert.dom('.mixin__property-dependency-item').doesNotExist();
assert.dom('.mixin__property-dependency-item > .mixin__property-dependency-name').doesNotExist();
@@ -262,7 +262,7 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
respondWith('objectInspector:calculate', ({ objectId, property, mixinIndex }) => ({
type: 'objectInspector:updateProperty',
@@ -275,7 +275,7 @@ module('Object Inspector', function(hooks) {
}
}));
- await click('.js-calculate');
+ await click('[data-test-calculate]');
assert.dom('.mixin__property--group').doesNotExist();
@@ -313,7 +313,7 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
respondWith('objectInspector:calculate', ({ objectId, property, mixinIndex }) => ({
type: 'objectInspector:updateProperty',
@@ -326,7 +326,7 @@ module('Object Inspector', function(hooks) {
}
}));
- await click('.js-calculate');
+ await click('[data-test-calculate]');
assert.dom('.mixin__property--group').exists({ count: 1 });
@@ -344,7 +344,7 @@ module('Object Inspector', function(hooks) {
// All View
- await click('.js-object-display-type-all');
+ await click('[data-test-object-display-type-all]');
await click('.mixin__property-icon--computed');
assert.dom('.mixin__property-dependency-list').exists({ count: 1 });
@@ -373,7 +373,7 @@ module('Object Inspector', function(hooks) {
}]
});
- assert.dom('.js-object-property-value').hasText('Teddy');
+ assert.dom('[data-test-object-property-value]').hasText('Teddy');
await sendMessage({
type: 'objectInspector:updateProperty',
@@ -387,9 +387,9 @@ module('Object Inspector', function(hooks) {
}
});
- await click('.js-object-property-value');
+ await click('[data-test-object-property-value]');
- let txtField = find('.js-object-property-value-txt');
+ let txtField = find('[data-test-object-property-value-txt]');
assert.equal(txtField.value, '"Alex"');
respondWith('objectInspector:saveProperty', ({ objectId, property, value }) => ({
@@ -405,9 +405,9 @@ module('Object Inspector', function(hooks) {
}));
await fillIn(txtField, '"Joey"');
- await triggerKeyEvent('.js-object-property-value-txt', 'keyup', 13);
+ await triggerKeyEvent('[data-test-object-property-value-txt]', 'keyup', 13);
- assert.dom('.js-object-property-value').hasText('Joey');
+ assert.dom('[data-test-object-property-value]').hasText('Joey');
});
test("Stringified json should not get double parsed", async function (assert) {
@@ -431,11 +431,11 @@ module('Object Inspector', function(hooks) {
}]
});
- assert.dom('.js-object-property-value').hasText('{"name":"teddy"}');
+ assert.dom('[data-test-object-property-value]').hasText('{"name":"teddy"}');
- await click('.js-object-property-value');
+ await click('[data-test-object-property-value]');
- let txtField = find('.js-object-property-value-txt');
+ let txtField = find('[data-test-object-property-value-txt');
assert.equal(txtField.value, '"{"name":"teddy"}"');
respondWith('objectInspector:saveProperty', ({ objectId, property, value }) => ({
@@ -451,9 +451,9 @@ module('Object Inspector', function(hooks) {
}));
await fillIn(txtField, '"{"name":"joey"}"');
- await triggerKeyEvent('.js-object-property-value-txt', 'keyup', 13);
+ await triggerKeyEvent('[data-test-object-property-value-txt]', 'keyup', 13);
- assert.dom('.js-object-property-value').hasText('{"name":"joey"}');
+ assert.dom('[data-test-object-property-value]').hasText('{"name":"joey"}');
});
test("Send to console", async function (assert) {
@@ -484,7 +484,7 @@ module('Object Inspector', function(hooks) {
});
// Grouped View
- await click('.js-send-to-console-btn');
+ await click('[data-test-send-to-console-btn]');
respondWith('objectInspector:sendToConsole', ({ objectId, property }) => {
assert.equal(objectId, 'object-id');
@@ -492,10 +492,10 @@ module('Object Inspector', function(hooks) {
return false;
});
- await click('.js-send-object-to-console-btn');
+ await click('[data-test-send-object-to-console-btn]');
// All View
- await click('.js-object-display-type-all');
+ await click('[data-test-object-display-type-all]');
respondWith('objectInspector:sendToConsole', ({ objectId, property }) => {
assert.equal(objectId, 'object-id');
@@ -503,7 +503,7 @@ module('Object Inspector', function(hooks) {
return false;
});
- await click('.js-send-object-to-console-btn');
+ await click('[data-test-send-object-to-console-btn]');
});
test("Read only CPs cannot be edited", async function (assert) {
@@ -536,14 +536,14 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-property-value');
+ await click('[data-test-object-property-value]');
- assert.dom('.js-object-property-value-txt').doesNotExist();
+ assert.dom('[data-test-object-property-value-txt]').doesNotExist();
- let valueElements = findAll('.js-object-property-value');
+ let valueElements = findAll('[data-test-object-property-value]');
await click(valueElements[valueElements.length - 1]);
- assert.dom('.js-object-property-value-txt').exists();
+ assert.dom('[data-test-object-property-value-txt]').exists();
});
test("Dropping an object due to destruction", async function (assert) {
@@ -559,14 +559,14 @@ module('Object Inspector', function(hooks) {
}]
});
- assert.dom('.js-object-name').hasText('My Object');
+ assert.dom('[data-test-object-name]').hasText('My Object');
await sendMessage({
type: 'objectInspector:droppedObject',
objectId: 'myObject'
});
- assert.dom('.js-object-name').doesNotExist();
+ assert.dom('[data-test-object-name]').doesNotExist();
});
test("Date fields are editable", async function (assert) {
@@ -591,11 +591,11 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
- assert.dom('.js-object-property-value').hasText(date.toString());
+ assert.dom('[data-test-object-property-value]').hasText(date.toString());
- await click('.js-object-property-value');
+ await click('[data-test-object-property-value]');
let field = find('.js-object-property-value-date');
assert.ok(field);
@@ -620,7 +620,7 @@ module('Object Inspector', function(hooks) {
await fillIn(field, '2015-01-01');
await triggerKeyEvent(field, 'keydown', 13);
- assert.dom('.js-object-property-value').hasText(date.toString());
+ assert.dom('[data-test-object-property-value]').hasText(date.toString());
});
test("Errors are correctly displayed", async function (assert) {
@@ -637,16 +637,16 @@ module('Object Inspector', function(hooks) {
]
});
- assert.dom('.js-object-name').hasText('My Object');
- assert.dom('.js-object-inspector-errors').exists({ count: 1 });
- assert.dom('.js-object-inspector-error').exists({ count: 2 });
+ assert.dom('[data-test-object-name]').hasText('My Object');
+ assert.dom('[data-test-object-inspector-errors]').exists({ count: 1 });
+ assert.dom('[data-test-object-inspector-error]').exists({ count: 2 });
respondWith('objectInspector:traceErrors', ({ objectId }) => {
assert.equal(objectId, '1');
return false;
});
- await click('.js-send-errors-to-console');
+ await click('[data-test-send-errors-to-console]');
await sendMessage({
type: 'objectInspector:updateErrors',
@@ -656,8 +656,8 @@ module('Object Inspector', function(hooks) {
]
});
- assert.dom('.js-object-inspector-errors').exists({ count: 1 });
- assert.dom('.js-object-inspector-error').exists({ count: 1 });
+ assert.dom('[data-test-object-inspector-errors]').exists({ count: 1 });
+ assert.dom('[data-test-object-inspector-error]').exists({ count: 1 });
await sendMessage({
type: 'objectInspector:updateErrors',
@@ -665,8 +665,8 @@ module('Object Inspector', function(hooks) {
errors: []
});
- assert.dom('.js-object-inspector-errors').doesNotExist();
- assert.dom('.js-object-inspector-error').doesNotExist();
+ assert.dom('[data-test-object-inspector-errors]').doesNotExist();
+ assert.dom('[data-test-object-inspector-error]').doesNotExist();
});
test("Tracked properties", async function (assert) {
@@ -689,10 +689,10 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
assert.dom('.mixin__property-icon--tracked').exists();
- assert.dom('.js-object-property-value').hasText('123');
+ assert.dom('[data-test-object-property-value]').hasText('123');
await sendMessage({
type: 'objectInspector:updateProperty',
@@ -705,7 +705,7 @@ module('Object Inspector', function(hooks) {
});
assert.dom('.mixin__property-icon--tracked').exists();
- assert.dom('.js-object-property-value').hasText('456');
+ assert.dom('[data-test-object-property-value]').hasText('456');
});
test("Plain properties", async function (assert) {
@@ -728,10 +728,10 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
assert.dom('.mixin__property-icon--property').exists();
- assert.dom('.js-object-property-value').hasText('123');
+ assert.dom('[data-test-object-property-value]').hasText('123');
await sendMessage({
type: 'objectInspector:updateProperty',
@@ -744,7 +744,7 @@ module('Object Inspector', function(hooks) {
});
assert.dom('.mixin__property-icon--property').exists();
- assert.dom('.js-object-property-value').hasText('456');
+ assert.dom('[data-test-object-property-value]').hasText('456');
});
test("Getters", async function (assert) {
@@ -767,10 +767,10 @@ module('Object Inspector', function(hooks) {
}]
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
assert.dom('.mixin__property-icon--getter').exists();
- assert.dom('.js-object-property-value').hasText('123');
+ assert.dom('[data-test-object-property-value]').hasText('123');
await sendMessage({
type: 'objectInspector:updateProperty',
@@ -783,7 +783,7 @@ module('Object Inspector', function(hooks) {
});
assert.dom('.mixin__property-icon--getter').exists();
- assert.dom('.js-object-property-value').hasText('456');
+ assert.dom('[data-test-object-property-value]').hasText('456');
});
test('Custom filter', async function (assert) {
@@ -810,31 +810,31 @@ module('Object Inspector', function(hooks) {
],
});
- await click('.js-object-detail-name');
+ await click('[data-test-object-detail-name]');
- assert.dom('.js-object-property').exists({ count: 2 });
- assert.dom('.js-object-display-type-grouped.active').exists();
+ assert.dom('[data-test-object-property]').exists({ count: 2 });
+ assert.dom('[data-test-object-display-type-grouped].active').exists();
assert.dom('[data-test-object-inspector-custom-search-clear]').doesNotExist();
await typeIn('#custom-filter-input', 'e');
- assert.dom('.js-object-property').exists({ count: 2 });
- assert.dom('.js-object-display-type-all.active').exists();
- assert.dom('.js-object-display-type-grouped.active').doesNotExist();
+ assert.dom('[data-test-object-property]').exists({ count: 2 });
+ assert.dom('[data-test-object-display-type-all].active').exists();
+ assert.dom('[data-test-object-display-type-grouped].active').doesNotExist();
assert.dom('[data-test-object-inspector-custom-search-clear]').exists();
await typeIn('#custom-filter-input', 'r');
- assert.dom('.js-object-property').exists({ count: 1 });
- assert.dom('.js-object-display-type-all').exists();
+ assert.dom('[data-test-object-property]').exists({ count: 1 });
+ assert.dom('[data-test-object-display-type-all]').exists();
await click('[data-test-object-inspector-custom-search-clear]');
- assert.dom('.js-object-property').exists({ count: 2 });
- assert.dom('.js-object-display-type-all').exists();
+ assert.dom('[data-test-object-property]').exists({ count: 2 });
+ assert.dom('[data-test-object-display-type-all]').exists();
await typeIn('#custom-filter-input', 'z');
- assert.dom('.js-object-property').exists({ count: 0 });
+ assert.dom('[data-test-object-property]').exists({ count: 0 });
- await click('.js-object-display-type-grouped');
- assert.dom('.js-object-display-type-grouped.active').exists();
+ await click('[data-test-object-display-type-grouped]');
+ assert.dom('[data-test-object-display-type-grouped].active').exists();
assert.dom('#custom-filter-input').hasNoText();
assert.dom('[data-test-object-inspector-custom-search-clear]').doesNotExist();
});
diff --git a/tests/acceptance/promise-test.js b/tests/acceptance/promise-test.js
index 24693e98d8..cf7e1ac438 100644
--- a/tests/acceptance/promise-test.js
+++ b/tests/acceptance/promise-test.js
@@ -295,7 +295,7 @@ module('Promise Tab', function(outer) {
await visit('/promise-tree');
- assert.dom('.js-send-to-console-btn').hasText('Stack Trace');
+ assert.dom('[data-test-send-to-console-btn]').hasText('Stack Trace');
respondWith('promise:sendValueToConsole', ({ promiseId }) => {
assert.equal(promiseId, 1, 'promiseId');
@@ -303,7 +303,7 @@ module('Promise Tab', function(outer) {
});
let row = find('.js-promise-tree-item');
- await click(row.querySelector('.js-send-to-console-btn'));
+ await click(row.querySelector('[data-test-send-to-console-btn]'));
});
test("Send fulfillment value to console", async function(assert) {
@@ -323,7 +323,7 @@ module('Promise Tab', function(outer) {
await visit('/promise-tree');
- assert.dom('.js-send-to-console-btn').exists();
+ assert.dom('[data-test-send-to-console-btn]').exists();
respondWith('promise:sendValueToConsole', ({ promiseId }) => {
assert.equal(promiseId, 1, 'promiseId');
@@ -331,7 +331,7 @@ module('Promise Tab', function(outer) {
});
let row = find('.js-promise-tree-item');
- await click(row.querySelector('.js-send-to-console-btn'));
+ await click(row.querySelector('[data-test-send-to-console-btn]'));
});
test("Sending objects to the object inspector", async function(assert) {
diff --git a/tests/acceptance/route-tree-test.js b/tests/acceptance/route-tree-test.js
index 8f331dfea6..41bf10c59a 100644
--- a/tests/acceptance/route-tree-test.js
+++ b/tests/acceptance/route-tree-test.js
@@ -109,7 +109,7 @@ module('Route Tree Tab', function(outer) {
'route name displayed'
);
- let routeHandlers = findAll('.js-route-handler').map(function(item) {
+ let routeHandlers = findAll('[data-test-route-handler]').map(function(item) {
return item.getAttribute('title').trim();
});
assert.deepEqual(
@@ -140,7 +140,7 @@ module('Route Tree Tab', function(outer) {
return false;
});
- await click(applicationRow.querySelector('.js-route-handler'));
+ await click(applicationRow.querySelector('[data-test-route-handler]'));
respondWith('objectInspector:inspectController', ({ name }) => {
assert.equal(name, 'application', 'controller name');
@@ -174,7 +174,7 @@ module('Route Tree Tab', function(outer) {
let routeNodes = findAll('.js-route-tree-item');
assert.equal(routeNodes.length, 6);
- await fillIn('.js-filter-views input', 'edit');
+ await fillIn('[data-test-filter-views] input', 'edit');
routeNodes = findAll('.js-route-tree-item');
assert.equal(routeNodes.length, 1);