diff --git a/addon/utils/bind-data-test-attributes.js b/addon/utils/bind-data-test-attributes.js index 219b1251..4b5b92bd 100644 --- a/addon/utils/bind-data-test-attributes.js +++ b/addon/utils/bind-data-test-attributes.js @@ -1,4 +1,4 @@ -import { assert } from '@ember/debug'; +import { assert, deprecate } from '@ember/debug'; import { isArray } from '@ember/array'; const TEST_SELECTOR_PREFIX = /data-test-.*/; @@ -39,6 +39,16 @@ export default function bindDataTestAttributes(component) { for (let prop of dataTestProperties) { if (attributeBindings.indexOf(prop) === -1) { + let componentName = extractComponentName(component) || ``; + deprecate(`You have set ${prop} on the ${componentName} component. Relying on automatic attribute binding of data-test properties on classic components is deprecated. Your options are:\n\n` + + '- use angle bracket syntax with `...attributes` to invoke components\n' + + '- explicitly add `attributeBindings` to the component\n' + + '- stay on an older version of ember-test-selectors\n\n', false, { + for: 'ember-test-selectors', + id: 'ember-test-selectors.auto-binding', + until: '6.0.0', + since: { available: '5.2.0', enabled: '5.2.0' }, + }); attributeBindings.push(prop); } } @@ -55,3 +65,15 @@ export default function bindDataTestAttributes(component) { }); } } + +function extractComponentName(component) { + let debugKey = component._debugContainerKey; + if (debugKey) { + return debugKey.replace(/^component:/, ''); + } + + let className = component.constructor.name; + if (className && className !== 'Class') { + return className; + } +}