diff --git a/README.md b/README.md index 9155c533..015cba9c 100644 --- a/README.md +++ b/README.md @@ -20,9 +20,6 @@ Features - Removes properties starting with `data-test-` from your JS objects like component classes for production builds -- Automatically binds properties starting with `data-test-` on all components - for development/testing builds - More information on why that is useful are available on our [blog](http://simplabs.com/blog/2016/03/04/ember-test-selectors.html)! @@ -79,20 +76,6 @@ be applied to the element that has `...attributes` on it, or on the component wrapper `div` element if you don't use `tagName = ''`. -### Usage with Curly Components - -If you still use the old curly invocation syntax for components you can pass -`data-test-*` arguments to the components and they will automatically be bound -on the wrapper element too: - -```handlebars -{{spinner color="blue" data-test-spinner=true}} -``` - -Please note that the automatic argument binding only works for components based -on `@ember/component`, but not `@glimmer/component`. - - ### Usage in Ember addons If you want to use ember-test-selectors in an addon make sure that it appears diff --git a/addon/utils/bind-data-test-attributes.js b/addon/utils/bind-data-test-attributes.js deleted file mode 100644 index 4b5b92bd..00000000 --- a/addon/utils/bind-data-test-attributes.js +++ /dev/null @@ -1,79 +0,0 @@ -import { assert, deprecate } from '@ember/debug'; -import { isArray } from '@ember/array'; - -const TEST_SELECTOR_PREFIX = /data-test-.*/; - -export default function bindDataTestAttributes(component) { - let dataTestProperties = []; - for (let attr in component) { - if (TEST_SELECTOR_PREFIX.test(attr)) { - dataTestProperties.push(attr); - } - } - - if (dataTestProperties.length === 0) { - return; - } - - let tagName = component.get('tagName'); - - if (component.get('supportsDataTestProperties') && tagName === '') { - return; - } - - let message = `ember-test-selectors could not bind data-test-* properties on ${component} ` + - `automatically because tagName is empty. If you did this intentionally, see ` + - `https://github.com/simplabs/ember-test-selectors#usage-in-computed-properties ` + - `for instructions on how to disable this assertion.`; - - assert(message, tagName !== '', { - id: 'ember-test-selectors.empty-tag-name', - }); - - let attributeBindings = component.get('attributeBindings') || []; - if (!isArray(attributeBindings)) { - attributeBindings = [attributeBindings]; - } else { - attributeBindings = attributeBindings.slice(); - } - - 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); - } - } - - try { - component.set('attributeBindings', attributeBindings); - - } catch (error) { - let message = `ember-test-selectors could not bind data-test-* properties on ${component} ` + - `automatically because "attributeBindings" is a read-only property.`; - - assert(message, false, { - id: 'ember-test-selectors.computed-attribute-bindings', - }); - } -} - -function extractComponentName(component) { - let debugKey = component._debugContainerKey; - if (debugKey) { - return debugKey.replace(/^component:/, ''); - } - - let className = component.constructor.name; - if (className && className !== 'Class') { - return className; - } -} diff --git a/index.js b/index.js index 96a002f4..24d7bc2e 100644 --- a/index.js +++ b/index.js @@ -26,7 +26,10 @@ module.exports = { this._stripTestSelectors = !app.tests; } - this._shouldPatchClassicComponent = !this._stripTestSelectors && addonOptions.patchClassicComponent !== false; + if ('patchClassicComponent' in addonOptions) { + ui.writeDeprecateLine('[ember-test-selectors] The `patchClassicComponent` option is obsolete. ' + + 'You can remove it from your `ember-cli-build.js` file.', false); + } }, _setupPreprocessorRegistry(registry) { @@ -70,10 +73,6 @@ module.exports = { this._registeredWithBabel = true; } - - if (this._shouldPatchClassicComponent) { - host.import('vendor/ember-test-selectors/patch-component.js'); - } }, cacheKeyForTree(treeType) { @@ -85,13 +84,6 @@ module.exports = { } }, - treeForAddon() { - // remove our "addon" folder from the build if we're stripping test selectors - if (this._shouldPatchClassicComponent) { - return this._super.treeForAddon.apply(this, arguments); - } - }, - preprocessTree(type, tree) { // remove the unit tests if we're testing ourself and are in strip mode. // we do this because these tests depend on the "addon" and "app" folders being available, diff --git a/tests/acceptance/bind-data-test-attributes-in-components-test.js b/tests/acceptance/bind-data-test-attributes-in-components-test.js deleted file mode 100644 index b0c4fa27..00000000 --- a/tests/acceptance/bind-data-test-attributes-in-components-test.js +++ /dev/null @@ -1,66 +0,0 @@ -import { module, test } from 'qunit'; -import { setupApplicationTest } from 'ember-qunit'; -import { visit } from '@ember/test-helpers'; - -import config from 'dummy/config/environment'; - -if (!config.stripTestSelectors) { - - /* - * We use an acceptance test here to test the "ember-test-selectors" initializer, - * because initializers are only applied in acceptance tests, but not in - * component integration tests. - */ - module('Acceptance | Initializer | ember-test-selectors', function(hooks) { - setupApplicationTest(hooks); - - hooks.beforeEach(async function() { - await visit('/bind-test'); - }); - - test('it binds data-test-* attributes on components', function(assert) { - assert.dom('.test1 div[data-test-first]').exists('data-test-first exists'); - assert.dom('.test1 div[data-test-first="foobar"]').exists('data-test-first has correct value'); - }); - - test('it binds data-test-* attributes on components in block form', function(assert) { - assert.dom('.test2 div[data-test-first]').exists('data-test-first exists'); - assert.dom('.test2 div[data-test-first="foobar"]').exists('data-test-first has correct value'); - }); - - test('it works with multiple data-test-* attributes on components', function(assert) { - assert.dom('.test3 div[data-test-first]').exists('data-test-first exists'); - assert.dom('.test3 div[data-test-first="foobar"]').exists('data-test-first has correct value'); - assert.dom('.test3 div[data-test-second]').exists('data-test-second exists'); - assert.dom('.test3 div[data-test-second="second"]').exists('data-test-second has correct value'); - }); - - test('it leaves other data attributes untouched, when a data-test-* attribute is present as well on components', function(assert) { - assert.dom('.test4 div[data-test-first]').exists('data-test-first exists'); - assert.dom('.test4 div[data-test-first="foobar"]').exists('data-test-first has correct value'); - assert.dom('.test4 div[data-non-test]').doesNotExist('data-non-test does not exists'); - }); - - test('it leaves data-test attribute untouched on components', function(assert) { - assert.dom('.test5 div[data-test]').doesNotExist('data-test does not exists'); - }); - - test('it leaves other data attributes untouched on components', function(assert) { - assert.dom('.test6 div[data-non-test]').doesNotExist('data-non-test does not exists'); - }); - - test('it binds data-test-* attributes with boolean values on components', function(assert) { - assert.dom('.test7 div[data-test-with-boolean-value]').exists('data-test-with-boolean-value exists'); - }); - - test('it binds data-test attributes on {{link-to}} components', function(assert) { - assert.dom('.test-link-to-block a').hasAttribute('data-test-foo', 'bar'); - assert.dom('.test-link-to-inline a').hasAttribute('data-test-foo', 'bar'); - }); - - test('it handles the tagless components without assert when `supportsDataTestProperties` is set', function(assert) { - assert.dom('.test12 div[data-test-with-boolean-value]').doesNotExist('data-test-with-boolean-value does not exist'); - assert.dom('.test13 div[data-test-without-value]').doesNotExist('data-test-without-value does not exist'); - }); - }); -} diff --git a/tests/dummy/app/templates/bind-test.hbs b/tests/dummy/app/templates/bind-test.hbs deleted file mode 100644 index ac37ac64..00000000 --- a/tests/dummy/app/templates/bind-test.hbs +++ /dev/null @@ -1,21 +0,0 @@ -
{{data-test-component data-test-first="foobar"}}
- -
{{#data-test-component data-test-first="foobar"}}hello{{/data-test-component}}
- -
{{data-test-component data-test-first="foobar" data-test-second="second"}}
- -
{{data-test-component data-test-first="foobar" data-non-test="baz"}}
- -
{{data-test-component data-test="foo"}}
- -
{{data-test-component data-non-test="foo"}}
- -
{{data-test-component data-test-with-boolean-value=true}}
- -
{{#link-to "index" data-test-foo="bar"}}Label{{/link-to}}
- -
{{link-to "Label" "index" data-test-foo="bar"}}
- -
{{tagless-component data-test-with-boolean-value=true}}
- -
{{tagless-component data-test-without-value}}
diff --git a/tests/unit/utils/bind-data-test-attributes-test.js b/tests/unit/utils/bind-data-test-attributes-test.js deleted file mode 100644 index 90039b86..00000000 --- a/tests/unit/utils/bind-data-test-attributes-test.js +++ /dev/null @@ -1,190 +0,0 @@ -import { module, test } from 'qunit'; -import EmberObject, { computed } from '@ember/object'; -import EmberMixin from '@ember/object/mixin'; -import { dasherize } from '@ember/string'; - -import bindDataTestAttributes from 'ember-test-selectors/utils/bind-data-test-attributes'; - -module('Unit | Utility | bind data test attributes', function() { - test('it adds missing attributeBindings array', function(assert) { - let Fixture = EmberObject.extend({ - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - 'data-test-from-invocation': 'bar', - }); - - assert.deepEqual(instance.get('attributeBindings'), undefined); - - bindDataTestAttributes(instance); - - assert.deepEqual(instance.get('attributeBindings'), - ['data-test-from-invocation', 'data-test-from-factory']); - }); - - test('it adds to existing attributeBindings array', function(assert) { - let Fixture = EmberObject.extend({ - attributeBindings: ['foo', 'bar'], - - foo: 1, - bar: 2, - - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - 'data-test-from-invocation': 'bar', - }); - - assert.deepEqual(instance.get('attributeBindings'), ['foo', 'bar']); - - bindDataTestAttributes(instance); - - assert.deepEqual(instance.get('attributeBindings'), - ['foo', 'bar', 'data-test-from-invocation', 'data-test-from-factory']); - }); - - test('it converts existing attributeBindings string to array', function(assert) { - let Fixture = EmberObject.extend({ - attributeBindings: 'foo', - - foo: 1, - - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - 'data-test-from-invocation': 'bar', - }); - - assert.deepEqual(instance.get('attributeBindings'), 'foo'); - - bindDataTestAttributes(instance); - - assert.deepEqual(instance.get('attributeBindings'), - ['foo', 'data-test-from-invocation', 'data-test-from-factory']); - }); - - test('it only adds data-test-* properties', function(assert) { - let Fixture = EmberObject.extend({ - foo: 1, - bar: 2, - - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - baz: 3, - - 'data-test-from-invocation': 'bar', - }); - - assert.deepEqual(instance.get('attributeBindings'), undefined); - - bindDataTestAttributes(instance); - - assert.deepEqual(instance.get('attributeBindings'), - ['data-test-from-invocation', 'data-test-from-factory']); - }); - - test('it does not add a data-test property', function(assert) { - let Fixture = EmberObject.extend({ - 'data-test': 'foo', - }); - let instance = Fixture.create(); - - assert.deepEqual(instance.get('attributeBindings'), undefined); - - bindDataTestAttributes(instance); - - assert.deepEqual(instance.get('attributeBindings'), undefined); - }); - - test('it breaks if attributeBindings is a computed property', function(assert) { - let Fixture = EmberObject.extend({ - attributeBindings: computed('prop', function() { - return [this.get('prop')]; - }).readOnly(), - - foo: 5, - - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - prop: 'foo', - - 'data-test-from-invocation': 'bar', - }); - - assert.throws(() => bindDataTestAttributes(instance)); - }); - - test('it breaks if tagName is empty', function(assert) { - let Fixture = EmberObject.extend({ - tagName: '', - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - 'data-test-from-invocation': 'bar', - }); - - assert.throws(() => bindDataTestAttributes(instance)); - }); - - test('it does not breaks if tagName is empty and supportsDataTestProperties is set', function(assert) { - assert.expect(0); - - let Fixture = EmberObject.extend({ - tagName: '', - supportsDataTestProperties: true, - 'data-test-from-factory': 'foo', - }); - let instance = Fixture.create({ - 'data-test-from-invocation': 'bar', - }); - - bindDataTestAttributes(instance); - }); - - test('issue #106', function(assert) { - let Component = EmberObject.extend({}); - - Component.reopen({ - init() { - this._super(...arguments); - bindDataTestAttributes(this); - }, - }); - - let Mixin = EmberMixin.create({ - init() { - this._super(...arguments); - - if (this.tagName !== '') { - let componentName = dasherize(this._XXXdebugContainerKey.replace(/\//g, '-').split(':')[1]); - this.set('data-test-component', componentName); - - let dataTestAttr = ['data-test-component']; - this.attributeBindings = this.attributeBindings ? this.attributeBindings.concat(dataTestAttr) : dataTestAttr; - } - }, - }); - - Component.reopen(Mixin); - - let Fixture1 = Component.extend({ - _XXXdebugContainerKey: 'component:fixture1', - tagName: 'span', - }); - - let fixture1 = Fixture1.create(); - - assert.strictEqual(fixture1.get('data-test-component'), 'fixture1'); - - let Fixture2 = Component.extend({ - _XXXdebugContainerKey: 'component:fixture2', - tagName: '', - }); - - let fixture2 = Fixture2.create(); - - assert.strictEqual(fixture2.get('data-test-component'), undefined); - }); -}); diff --git a/vendor/ember-test-selectors/patch-component.js b/vendor/ember-test-selectors/patch-component.js deleted file mode 100644 index ba2c0a69..00000000 --- a/vendor/ember-test-selectors/patch-component.js +++ /dev/null @@ -1,15 +0,0 @@ -/* global Ember */ - -(function() { - var bindDataTestAttributes; - - Ember.Component.reopen({ - init: function() { - this._super.apply(this, arguments); - if (!bindDataTestAttributes) { - bindDataTestAttributes = require('ember-test-selectors/utils/bind-data-test-attributes')['default']; - } - bindDataTestAttributes(this); - } - }); -})();