Registry / testing / ember-native-dom-helpers

ember-native-dom-helpers

library0.7.0jsnpmunverified

Ember Native DOM Helpers (`ember-native-dom-helpers`) provides a set of testing utilities for Ember.js integration and acceptance tests, designed to simulate native DOM events. Originally conceived as an experimental project, it played a crucial role in shaping the official `@ember/test-helpers` API, which is now the recommended solution for most testing needs in Ember CLI applications. The package, currently at version 0.7.0 (though marked as 'Pre 1.0' in the README), introduced helpers like `click`, `fillIn`, `find`, and `tap` that fire native events and are runloop-aware, abstracting away the complexities of browser inconsistencies and Ember's async testing patterns. Its primary differentiator was moving away from jQuery-based event dispatching to native events. However, most of its core functionality has been integrated into `@ember/test-helpers`, making this addon largely superseded. Only `scrollTo` and `selectFiles` remain unique to this package. Its release cadence is minimal, reflecting its historical role rather than active feature development.

testing

npm install ember-native-dom-helpers

github ↗package ↗

INSTALL

IMPORT

SIG · EMBER-NATIVE-DOM-H

ember-native-dom-helpers

testingjavascriptv0.7.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

click

✓ import { click } from 'ember-native-dom-helpers';

✗ const { click } = require('ember-native-dom-helpers');

Primarily used in modern Ember CLI applications that utilize ES modules. The functionality is now largely available in `@ember/test-helpers`.

fillIn

✓ import { fillIn } from 'ember-native-dom-helpers';

A common helper for input interactions. Most users should now prefer `fillIn` from `@ember/test-helpers`.

find

✓ import { find } from 'ember-native-dom-helpers';

For selecting a single DOM element. Note that `find` returns `null` if no element is found, a behavior change from older jQuery-based selectors. Prefer `find` from `@ember/test-helpers`.

scrollTo

✓ import { scrollTo } from 'ember-native-dom-helpers';

This is one of the few helpers still unique to this package, designed for testing asynchronous scroll events.

settings

✓ import settings from 'ember-native-dom-helpers/test-support/settings';

✗ import { settings } from 'ember-native-dom-helpers/test-support/settings';

Used for configuring addon-wide settings, such as the `rootElement` for tests. It's a default export from a sub-path.

Demonstrates how to use `ember-native-dom-helpers` for various interactions (filling input, clicking, key events, triggering events) within an Ember component integration test, asserting DOM changes.

import { click, fillIn, find, findAll, keyEvent, triggerEvent } from 'ember-native-dom-helpers'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; moduleForComponent('my-component', 'Integration | Component | my-component', { integration: true }); test('I can interact with my component', async function(assert) { this.render(hbs` {{my-component}} <input class="some-input"> <button class="main-button">Click Me</button> <input class="other-input"> <div class="some-drop-area"></div> <div class="result-of-event-happened"></div> <ul class="result-list-item"><li>1</li><li>2</li><li>3</li></ul> `); await fillIn('.some-input', 'some text'); await click('.main-button'); await keyEvent('.other-input', 'keyup', 40); // down arrow await triggerEvent('.some-drop-area', 'mouseenter'); assert.ok(find('.result-of-event-happened'), 'Element showing event result is present'); assert.equal(findAll('.result-list-item').length, 3, 'Found expected number of list items'); });

Debug

Known issues

breakingThe vast majority of helpers provided by `ember-native-dom-helpers` (e.g., `click`, `fillIn`, `find`, `tap`) are now included and actively maintained within the official `@ember/test-helpers` package. Using this addon for these common helpers is discouraged and can lead to conflicts or outdated behavior.

fix

Migrate your tests to use the equivalent helpers from `@ember/test-helpers`. Only `scrollTo` and `selectFiles` remain unique to this addon.

affects: >=0.7.0

gotchaWhen migrating from older Ember testing patterns, be aware that jQuery-based events (e.g., `this.$().click()`) behave differently from native DOM events. Native events, as fired by this addon, can prevent issues like actions being called twice or subtle behavioral discrepancies in tests.

fix

Ensure all test interactions use native DOM event helpers (either from this addon or, preferably, `@ember/test-helpers`) to accurately simulate user interactions and avoid unexpected side effects.

affects: >=0.2.0

deprecatedThis addon is largely deprecated and in maintenance mode. Its primary purpose was to help bikeshed the API for native DOM test helpers, which have since been integrated into Ember's default testing suite. Active development and new features are focused on `@ember/test-helpers`.

fix

Unless you specifically require the `scrollTo` or `selectFiles` helpers (which are not in `@ember/test-helpers`), you should avoid using this addon for new tests and migrate existing tests to `@ember/test-helpers` for better compatibility and future-proofing.

affects: >=0.7.0

Errors

Common errors & fixes

Touch events not working in Firefox/Chrome tests

Browser configuration in Testem might not be enabling touch events for testing environments.

fix

Consult the addon's README (v0.3.1 release notes mention this) or Testem documentation for specific configurations required to enable touch events in your `testem.js` file for relevant browsers.

`find` helper returns `null` when no element is found, instead of `undefined` or an empty array.

The `find` helper was explicitly designed in version 0.2.1 to return `null` if no matching element is found, to clearly indicate absence.

fix

Update your assertions to explicitly check for `null` when using `find`, for example: `assert.strictEqual(find('.non-existent-element'), null);`. If you expect multiple results and want an empty array for no matches, use `findAll()` instead.

Upgrade

Version history

0.7.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/cibernox/ember-native-dom-helpers ↗

packagehttps://www.npmjs.com/package/ember-native-dom-helpers ↗