{"id":13119,"library":"ember-native-dom-helpers","title":"Ember Native DOM Test Helpers","description":"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.","status":"deprecated","version":"0.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/cibernox/ember-native-dom-helpers","tags":["javascript","ember-addon","testing","helpers","native","events"],"install":[{"cmd":"npm install ember-native-dom-helpers","lang":"bash","label":"npm"},{"cmd":"yarn add ember-native-dom-helpers","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-native-dom-helpers","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily used in modern Ember CLI applications that utilize ES modules. The functionality is now largely available in `@ember/test-helpers`.","wrong":"const { click } = require('ember-native-dom-helpers');","symbol":"click","correct":"import { click } from 'ember-native-dom-helpers';"},{"note":"A common helper for input interactions. Most users should now prefer `fillIn` from `@ember/test-helpers`.","symbol":"fillIn","correct":"import { fillIn } from 'ember-native-dom-helpers';"},{"note":"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`.","symbol":"find","correct":"import { find } from 'ember-native-dom-helpers';"},{"note":"This is one of the few helpers still unique to this package, designed for testing asynchronous scroll events.","symbol":"scrollTo","correct":"import { scrollTo } from 'ember-native-dom-helpers';"},{"note":"Used for configuring addon-wide settings, such as the `rootElement` for tests. It's a default export from a sub-path.","wrong":"import { settings } from 'ember-native-dom-helpers/test-support/settings';","symbol":"settings","correct":"import settings from 'ember-native-dom-helpers/test-support/settings';"}],"quickstart":{"code":"import { click, fillIn, find, findAll, keyEvent, triggerEvent } from 'ember-native-dom-helpers';\nimport { moduleForComponent, test } from 'ember-qunit';\nimport hbs from 'htmlbars-inline-precompile';\n\nmoduleForComponent('my-component', 'Integration | Component | my-component', {\n  integration: true\n});\n\ntest('I can interact with my component', async function(assert) {\n  this.render(hbs`\n    {{my-component}}\n    <input class=\"some-input\">\n    <button class=\"main-button\">Click Me</button>\n    <input class=\"other-input\">\n    <div class=\"some-drop-area\"></div>\n    <div class=\"result-of-event-happened\"></div>\n    <ul class=\"result-list-item\"><li>1</li><li>2</li><li>3</li></ul>\n  `);\n\n  await fillIn('.some-input', 'some text');\n  await click('.main-button');\n  await keyEvent('.other-input', 'keyup', 40); // down arrow\n  await triggerEvent('.some-drop-area', 'mouseenter');\n\n  assert.ok(find('.result-of-event-happened'), 'Element showing event result is present');\n  assert.equal(findAll('.result-list-item').length, 3, 'Found expected number of list items');\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"Migrate your tests to use the equivalent helpers from `@ember/test-helpers`. Only `scrollTo` and `selectFiles` remain unique to this addon.","message":"The 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.","severity":"breaking","affected_versions":">=0.7.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=0.2.0"},{"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.","message":"This 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`.","severity":"deprecated","affected_versions":">=0.7.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Browser configuration in Testem might not be enabling touch events for testing environments.","error":"Touch events not working in Firefox/Chrome tests"},{"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.","cause":"The `find` helper was explicitly designed in version 0.2.1 to return `null` if no matching element is found, to clearly indicate absence.","error":"`find` helper returns `null` when no element is found, instead of `undefined` or an empty array."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}