From 503b77fb27d584526b344e6e30f2f615c2892097 Mon Sep 17 00:00:00 2001 From: Jerry Nummi Date: Sat, 18 Apr 2020 16:22:26 -0700 Subject: [PATCH] More functional classes and data-test selectors (#1168) * More functional classes and data-test selectors * Fix broken object inspector tests --- app/components/app-picker.hbs | 6 +- app/components/deprecation-item.hbs | 2 +- app/components/object-inspector.hbs | 26 ++- .../object-inspector/dependent-keys.hbs | 6 +- app/components/object-inspector/errors.hbs | 12 +- .../object-inspector/properties-all.hbs | 2 +- .../object-inspector/properties-grouped.hbs | 15 +- app/components/object-inspector/property.hbs | 42 ++-- app/components/promise-item.hbs | 3 +- app/components/route-cell-objects.hbs | 3 +- app/styles/deprecations.scss | 1 - app/styles/dropdown.scss | 38 +--- app/styles/mixin.scss | 104 ++-------- app/styles/object_inspector.scss | 38 +--- app/styles/route_tree.scss | 2 - app/styles/utils.scss | 32 ++- app/templates/component-tree-toolbar.hbs | 4 +- app/templates/component-tree.hbs | 2 +- app/templates/container-type-toolbar.hbs | 4 +- .../container-types/index-toolbar.hbs | 2 +- app/templates/model-types-toolbar.hbs | 2 +- app/templates/route-tree-toolbar.hbs | 2 +- lib/ui/addon/components/send-to-console.hbs | 3 +- tests/acceptance/component-tree-test.js | 4 +- tests/acceptance/container-test.js | 6 +- tests/acceptance/data-test.js | 2 +- tests/acceptance/object-inspector-test.js | 186 +++++++++--------- tests/acceptance/promise-test.js | 8 +- tests/acceptance/route-tree-test.js | 6 +- 29 files changed, 241 insertions(+), 322 deletions(-) diff --git a/app/components/app-picker.hbs b/app/components/app-picker.hbs index d85081da59..b820eaded2 100644 --- a/app/components/app-picker.hbs +++ b/app/components/app-picker.hbs @@ -1,6 +1,6 @@ -
+
- {{svg-jar "dropdown-arrow" class="dropdown__arrow"}} + {{svg-jar "dropdown-arrow" class="dropdown__arrow fill-current absolute opacity-75 pointer-events-none"}}
diff --git a/app/components/deprecation-item.hbs b/app/components/deprecation-item.hbs index cff883e6bb..4b1958bc12 100644 --- a/app/components/deprecation-item.hbs +++ b/app/components/deprecation-item.hbs @@ -1,5 +1,5 @@ -
+
- - - + {{@model.firstObject.name}}
{{#if this.trail}} - {{this.trail}} + + {{this.trail}} + {{/if}}
diff --git a/app/components/object-inspector/dependent-keys.hbs b/app/components/object-inspector/dependent-keys.hbs index b09bb99084..25f18f1640 100644 --- a/app/components/object-inspector/dependent-keys.hbs +++ b/app/components/object-inspector/dependent-keys.hbs @@ -1,8 +1,8 @@ -
  • +
  • {{svg-jar "dependent-key-connection" width="20px" height="10px"}} -
      +
        {{#each @keys as |depKey|}} -
      • +
      • {{svg-jar "dependent-key-bullet" width="9px" diff --git a/app/components/object-inspector/errors.hbs b/app/components/object-inspector/errors.hbs index 0265d37d8f..3c5e8d49a3 100644 --- a/app/components/object-inspector/errors.hbs +++ b/app/components/object-inspector/errors.hbs @@ -1,20 +1,20 @@ -
        -

        +
        +

        Errors

        -
        +
        {{#each @errors as |error|}} -
        +
        Error while computing: {{error.property}}
        {{/each}}
        - diff --git a/app/components/object-inspector/properties-all.hbs b/app/components/object-inspector/properties-all.hbs index fc8b964447..2682a78095 100644 --- a/app/components/object-inspector/properties-all.hbs +++ b/app/components/object-inspector/properties-all.hbs @@ -1,5 +1,5 @@ {{#if this.flatPropertyList.length}} -
          +
            diff --git a/app/components/object-inspector/properties-grouped.hbs b/app/components/object-inspector/properties-grouped.hbs index 023e92bf03..5a02f6cbc6 100644 --- a/app/components/object-inspector/properties-grouped.hbs +++ b/app/components/object-inspector/properties-grouped.hbs @@ -1,22 +1,27 @@ {{#each @model.mixins as |mixin|}}
            {{#if mixin.properties.length}}

            {{mixin.name}}

            {{else}} -

            +

            {{mixin.name}}

            {{/if}} {{#if accordion.isExpanded}} -
              +
                @@ -29,7 +34,7 @@ @sendToConsole={{fn this.sendToConsole prop}} /> {{else}} -
              • No Properties
                • +
              • No Properties
                • {{/each}}
              diff --git a/app/components/object-inspector/property.hbs b/app/components/object-inspector/property.hbs index 7876a731a1..27093d89dd 100644 --- a/app/components/object-inspector/property.hbs +++ b/app/components/object-inspector/property.hbs @@ -1,5 +1,6 @@
            • {{!-- Disclosure Triangle --}} {{#if this.hasDependentKeys}} @@ -19,18 +20,24 @@ {{/if}} {{!-- Property Icon --}} - - + {{!-- Property Name --}} - + {{#if this.isService}} {{@model.name}} @@ -38,7 +45,7 @@ {{#if this.hasDependentKeys}} {{@model.name}} @@ -48,7 +55,7 @@ {{/if}} - : + : {{#if this.isEdit}} {{#if this.isDate}} @@ -56,52 +63,59 @@ allowInput=true date=(readonly this.dateValue) dateFormat="Y-m-d" - class="mixin__property-value-txt js-object-property-value-date" + class="mixin__property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date" onChange=this.dateSelected onClose=this.finishedEditing }} {{else}} {{/if}} {{else}} {{#if this.canCalculate}} {{/if}} {{#if this.isDate}} {{@model.value.inspect}} {{else}} {{@model.value.inspect}} {{/if}} {{/if}} - (Overridden by {{@model.overridden}}) + + (Overridden by {{@model.overridden}}) + diff --git a/app/components/promise-item.hbs b/app/components/promise-item.hbs index 0401967514..b8fddd569a 100644 --- a/app/components/promise-item.hbs +++ b/app/components/promise-item.hbs @@ -55,9 +55,10 @@
              {{#if this.isError}}
              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 @@
              @@ -12,6 +12,6 @@
              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);