From d47f73d76b3ccbc9f0be5df3b897afd08b1636a6 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 12:55:41 +0100 Subject: [PATCH 1/8] README: Remove "positional params" hack from documentation It's not officially deprecated yet since angle bracket syntax has mostly made this obsolete, but we shouldn't be promoting this as a feature anymore either. --- README.md | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/README.md b/README.md index 078fe8c0..f270ec26 100644 --- a/README.md +++ b/README.md @@ -90,17 +90,6 @@ as data attributes on the `
` wrapping the component template:
``` -You can also use boolean attributes, but make sure it is the first parameter -as this makes use of Ember's positional params system. - -```handlebars -{{! valid }} -{{comments-list data-test-comments post=post}} - -{{! compiler error }} -{{comments-list post=post data-test-comments}} -``` - ### Usage in Computed Properties Instead of assigning `data-test-comment-id` in this example template: From 53a48e6228d4def37503150704ea5594d5a870d6 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 12:57:34 +0100 Subject: [PATCH 2/8] README: Remove "computed properties" section This is no longer relevant with angle bracket syntax and just makes the addon harder to understand. --- README.md | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/README.md b/README.md index f270ec26..3be51898 100644 --- a/README.md +++ b/README.md @@ -90,28 +90,6 @@ as data attributes on the `
` wrapping the component template:
``` -### Usage in Computed Properties - -Instead of assigning `data-test-comment-id` in this example template: - -```handlebars -{{#each comments as |comment|}} - {{comment-list-item comment=comment data-test-comment-id=comment.id}} -{{/each}} -``` - -you may also use computed properties on the component: - -```js -export default Ember.Component({ - comment: null, - 'data-test-comment-id': Ember.computed.readOnly('comment.id'), -}); -``` - -As with `data-test-*` attributes in the templates, these properties, whether -computed or not, will be removed automatically in production builds. - ### Usage with tagless components Since tagless components do not have a root element, `data-test-*` attributes From 23c527c125f1ea12943eeb6545000c400f6c7cf9 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:00:36 +0100 Subject: [PATCH 3/8] README: Remove obsolete "Deprecations" section This helper hasn't been available for quite some time. --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index 3be51898..a3066511 100644 --- a/README.md +++ b/README.md @@ -196,13 +196,6 @@ was triggered by `ember test`. That means that if you use `ember test --environment=production` the test selectors will still work, but for `ember build -prod` they will be stripped out. -Deprecations ------------------------------------------------------------------------------- - -The `testSelector` helper was deprecated in [v0.3.7](https://github.com/simplabs/ember-test-selectors/releases/tag/v0.3.7). -There's a codemod available at https://github.com/lorcan/test-selectors-codemod -that can help make the necessary transformations to address the deprecation. - License ------------------------------------------------------------------------------ From da52ce43099ce8ed7400cfaa7f66e73bc1d394ec Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:01:05 +0100 Subject: [PATCH 4/8] README: Update "Usage" section --- README.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a3066511..fa746c9d 100644 --- a/README.md +++ b/README.md @@ -54,28 +54,25 @@ automatically removed from `production` builds: ```hbs
-

{{post.title}}

+

{{post.title}}

{{post.body}}

+
``` -Once you've done that you can use attribute selectors to look up the elements: +Once you've done that you can use attribute selectors to look up and interact +with those elements: ```js -// in Acceptance Tests: +assert.dom('[data-test-post-title]').hasText('Ember is great!'); -find('[data-test-post-title]') -find('[data-test-resource-id="2"]') - -// in Component Integration Tests: - -this.$('[data-test-post-title]').click() -this.$('[data-test-resource-id="2"]').click() +await click('[data-test-like-button]'); ``` ### Usage in Components -You can also use `data-test-*` attributes on components: +You can also use `data-test-*` attributes on components in curly component +invocation: ```handlebars {{comments-list data-test-comments-for=post.id}} From 9f74e95e4f0f21db7f41517bc43b9edf1b6d5e74 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:03:22 +0100 Subject: [PATCH 5/8] README: Add "Usage in Ember addons" section --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index fa746c9d..dbf5e867 100644 --- a/README.md +++ b/README.md @@ -173,6 +173,14 @@ will yield ``` +### Usage in Ember addons + +If you want to use ember-test-selectors in an addon make sure that it appears +in the `dependencies` section of the `package.json` file, not in the +`devDependencies`. This ensures that the selectors are also stripped correctly +even if the app that uses the addon does not use ember-test-selectors itself. + + Configuration ------------------------------------------------------------------------------ From c19b042543b030d7136377bb2ab5633c290c41cf Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:06:11 +0100 Subject: [PATCH 6/8] README: Use ES6 classes and angle brackets --- README.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index dbf5e867..df9d1b77 100644 --- a/README.md +++ b/README.md @@ -99,21 +99,21 @@ attribute to a tagless component, for example a tagless wrapper component: ```js // comment-wrapper.js -export default Ember.Component({ - tagName: '' -}); +export default class ComponentWrapper extends Component { + tagName = ''; +} ``` ```hbs {{!-- comment-wrapper.hbs --}} Comment: -{{comment-list-item comment=comment data-test-comment-id=data-test-comment-id}} + ``` ```handlebars {{!-- comment-list.hbs --}} {{#each comments as |comment|}} - {{comment-wrapper comment=comment data-test-comment-id=comment.id}} + {{/each}} ``` @@ -122,10 +122,10 @@ component, you can specify `supportsDataTestProperties` on the class: ```js // comment-wrapper.js -export default Ember.Component({ - tagName: '', - supportsDataTestProperties: true -}); +export default class ComponentWrapper extends Component { + tagName = ''; + supportsDataTestProperties = true; +} ``` `supportsDataTestProperties`, like `data-test-*` properties, will be stripped @@ -143,10 +143,9 @@ then pass arbitrary test selectors through splattributes, as follows: ```js // special-button.js -export default Ember.Component({ - tagName: '', - supportsDataTestProperties: true -}); +export default class SpecialButton extends Component { + tagName = ''; +} ``` ```hbs From 1c9fdaac06a1034fe0264edbdaba3b993989d704 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:16:25 +0100 Subject: [PATCH 7/8] README: Simplify and modernize "Usage in Components" section --- README.md | 107 +++++++----------------------------------------------- 1 file changed, 14 insertions(+), 93 deletions(-) diff --git a/README.md b/README.md index df9d1b77..40e476a4 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ automatically removed from `production` builds:

{{post.title}}

{{post.body}}

- +
``` @@ -69,108 +69,29 @@ assert.dom('[data-test-post-title]').hasText('Ember is great!'); await click('[data-test-like-button]'); ``` -### Usage in Components +### Usage with Components -You can also use `data-test-*` attributes on components in curly component -invocation: - -```handlebars -{{comments-list data-test-comments-for=post.id}} -``` - -These `data-test-*` attributes will be bound automatically and available -as data attributes on the `
` wrapping the component template: - -```html -
- -
-``` - -### Usage with tagless components - -Since tagless components do not have a root element, `data-test-*` attributes -passed to them cannot be bound to the DOM. If you try to pass a `data-test-*` -attribute to a tagless component, or define one in its Javascript class, -`ember-test-selectors` will throw an assertion error. - -However, there are some cases where you might want to pass a `data-test-*` -attribute to a tagless component, for example a tagless wrapper component: - -```js -// comment-wrapper.js -export default class ComponentWrapper extends Component { - tagName = ''; -} -``` +You can use the same syntax also for component invocations: ```hbs -{{!-- comment-wrapper.hbs --}} -Comment: - + ``` -```handlebars -{{!-- comment-list.hbs --}} -{{#each comments as |comment|}} - -{{/each}} -``` +Inside the `Spinner` component template the `data-test-spinner` attribute will +be applied to the element that has `...attributes` on it, or on the component +wrapper `div` element if you don't use `tagName = ''`. -In this case, to prevent the assertion on the specific `comment-wrapper` -component, you can specify `supportsDataTestProperties` on the class: +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: -```js -// comment-wrapper.js -export default class ComponentWrapper extends Component { - tagName = ''; - supportsDataTestProperties = true; -} -``` - -`supportsDataTestProperties`, like `data-test-*` properties, will be stripped -from the build. - -#### With splattributes -Splattributes of angle brackets invocations, introduced in Ember.js 3.4 or -available through the -[ember-angle-bracket-invocation-polyfill](https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill) -for earlier versions of Ember.js, work well with test selectors and tagless -components. - -For instance, we have a `SpecialButton` that wraps a ` -``` - -Then - -```hbs - - Invite - +```handlebars +{{spinner color="blue" data-test-spinner=true}} ``` -will yield - +Please note that this only works for components based on `@ember/component`, +but not `@glimmer/component`. -```html - -``` ### Usage in Ember addons From 9bb2e15c41bcffb2399c93a8646d012c7876cbcb Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Fri, 22 Nov 2019 13:28:50 +0100 Subject: [PATCH 8/8] README: Clarify `@glimmer/component` situation --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 40e476a4..3bba8ce8 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,9 @@ Inside the `Spinner` component template the `data-test-spinner` attribute will 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: @@ -89,8 +92,8 @@ on the wrapper element too: {{spinner color="blue" data-test-spinner=true}} ``` -Please note that this only works for components based on `@ember/component`, -but not `@glimmer/component`. +Please note that the automatic argument binding only works for components based +on `@ember/component`, but not `@glimmer/component`. ### Usage in Ember addons