emberjs / emberjs/ember-test-helpers
Consider supporting custom elements
- Dominant language
- JavaScript
- Stars
- 188
- Forks
- 254
- PR merge metrics
- No merged PRs in 30d
Description
I have a custom element `my-text-input` whose important properties and events mirror that of an ``, e.g. It has a `value` property and dispatches `input` and `change` events.
Many of the existing test helpers have checks that prevent them from being used on custom elements because they call these methods in order to provide helpful error messages when an unexpected element occurs.
- https://github.com/emberjs/ember-test-helpers/blob/d17d27ca912bfdffca7b9bae5d9670b734b78274/addon-test-support/%40ember/test-helpers/dom/-is-form-control.ts#L16-L25
- https://github.com/emberjs/ember-test-helpers/blob/d17d27ca912bfdffca7b9bae5d9670b734b78274/addon-test-support/%40ember/test-helpers/dom/-is-select-element.ts#L8-L12
I'm wondering if there is a way to weaken these checks so that custom elements can be used. I'm leaning towards allowing custom elements (i.e. elements with a hyphen in the tag name) to bypass the checks. Maybe behind a flag.
You might wonder: is `my-text-input` built with an `` under the hood? Can we simply target that directly? In my case, the underlying implementation is indeed a native `` but it is inside shadow DOM which makes it tedious to access in tests e.g. `fillIn(find('my-text-input').shadowRoot.querySelector('input'), 'new text')`. More importantly, it should really be treated as an implementation detail that is not leaked to consumers.
The alternative to implementing this suggestion is to have the design system ship its own mirror of the ember test helpers that are coupled to the internals of each custom element and know to delegate to the appropriate underlying inputs.
Contributor guide
Research direction
Start by reading addon-test-support/@ember/test-helpers/dom/-is-form-control.ts and -is-select-element.ts, focusing on the checks that reject custom elements. Review how the related helpers use these checks, then define done as allowing elements such as my-text-input while preserving helpful validation for unsupported native elements; the issue does not name specific tests to run.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing-qa, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100