emberjs / emberjs/ember-test-helpers

Consider supporting custom elements

Open
#1,212 3 comments 2 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.