npmpackage.info

Gathering detailed insights and metrics for ember-native-dom-helpers

Other packages similar to ember-native-dom-helpers

ember-native-dom-helpers-codemod

0.2.5

Codemod to transform your jQuery based ember tests to use ember-native-dom-helpers

ember-native-dom-helpers

Test helpers for your integration tests that fire native events

0.7.0

186

MIT

JavaScript

35.83 kB

16,522,925 2.3

Installations

npm install ember-native-dom-helpers

Developer Guide

BETA

Typescript

No

Module System

N/A

Min. Node Version

^4.5 || 6.* || >= 7.*

Node Version

13.12.0

NPM Version

6.14.4 Score

67.3

Supply Chain

Quality

72.6

Maintenance

Vulnerability

95.6

License

Pull Requests

Open

24

Total

116

Closed

11

Merged

81

Issues

Open

23

Total

62

Closed

39

Releases

Scroll me tender

v0.3.10

Updated on Apr 26, 2017

Touch me baby

v0.3.1

Updated on Mar 01, 2017

Find and Find All helpers

v0.3.0

Updated on Feb 27, 2017

Find returns `null` when result is empty

v0.2.1

Updated on Feb 26, 2017

Native find helper

v0.2.0

Updated on Feb 23, 2017

View All 5 releases

Contributors

Unable to fetch Contributors

View All 22 Contributors

Languages

JavaScript

Handlebars

HTML

CSS

JavaScript (96.1%)

Handlebars (2%)

HTML (1.85%)

CSS (0.04%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

cibernox

Download Statistics

Total Downloads

16,522,925

Last Day

1,862

Last Week

9,582

Last Month

39,888

Last Year

883,228

GitHub Statistics

MIT License

186 Stars

242 Commits

37 Forks

10 Watchers

25 Branches

22 Contributors

Updated on May 30, 2024

Bundle Size

116.95 kB

Minified

35.83 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.7.0

Package Id

ember-native-dom-helpers@0.7.0

Size

12.42 kB

NPM Version

6.14.4

Node Version

13.12.0

Published on

Jan 23, 2021

Total Downloads

Cumulative downloads

Total Downloads

16,522,925

Last Day

15.9%

1,862

Compared to previous day

Last Week

20.7%

9,582

Compared to previous week

Last Month

-6%

39,888

Compared to previous month

Last Year

-41.5%

883,228

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Build Status

IMPORTANT: You probably don't need this addon.

In Ember, since ember-(cli-)qunit 3.X (around late 2017) there is a new testing API that already provides almost identical test helpers from the ones in this addon.

This addon was used as an experiment that helped bikeshed the API of the helpers that are now part of default testing API, like click, tap, fillIn and others.

The only two helpers in this addon that are not part of the default set of helpers that ship with Ember's test harness are scrollTo(selectorOrHTMLElement, x, y) and selectFiles(selectorOrHTMLElement, files = []).

Unless you want to use those, you are better served using the helpers provided by @ember/test-helpers.

ember-native-dom-helpers

Test helpers for integration tests that mimic the behaviour of the acceptance test helpers provided by Ember.

Use this addon as a way to start the gradual migration towards the future "testing unification" RFC, which proposes only native DOM.

See the Grand Testing Unification RFC

Status: (Pre) 1.0, although we have a good idea about what the needs are for test helpers, we are working through a few points on what changes are needed when using only standard DOM APIs (i.e. without jQuery).

Usage

Integration tests

1import { click, fillIn, find, findAll, keyEvent, triggerEvent } from 'ember-native-dom-helpers';
2
3moduleForComponent('my-component', 'Integration | Component | my-component', {
4  integration: true
5});
6
7
8test('I can interact with my component', async function(assert) {
9  this.render(hbs```
10    {{my-component}}
11  ```);
12
13  await fillIn('.some-input', 'some text');
14  await click('.main-button');
15  await keyEvent('.other-input', 'keyup', 40); // down arrow
16  await triggerEvent('.some-drop-area', 'mouseenter');
17
18  assert.ok(find('.result-of-event-happened'));
19  assert.equal(findAll('.result-list-item').length, 3);
20})

Acceptance tests

You can use the exact same helpers for your acceptance tests. All interaction helpers like click, fillIn, et al., return a promise that fullfils when "the world has settled" (that is, there are no pending requests or promises, and the runloop has been drained), which is what the andThen acceptance helper used to do. However, this helper can now be replaced by the async/await syntax in ES2017, yielding easier-to-read tests:

1import { visit, click, find, fillIn } from 'ember-native-dom-helpers';
2
3moduleForAcceptance('Acceptance | Sign up');
4
5test('Usage awaiting the world to settle', async function(assert) {
6  await visit('/sign-up');
7
8  await fillIn('.first-name', 'Chuck');
9  await fillIn('.last-name', 'Berry');
10  await click('.submit-btn');
11
12  assert.ok(find('.welcome-msg'), 'There is a welcome banner');
13  assert.equal(find('.welcome-msg-name'), 'Chuck');
14});

Advantages compared with `this.$(selector).click()`

The main advantages are:

Fires native events: In Ember, when adding events with the onclick={{action "foo"}} syntax, dispatching jQuery events leads to the action being called twice. Additionally, there are subtle differences between jQuery and Native events that can bite you. Firing native events fixes that problem, but they are very verbose and there are browser incompatibilities. This addon makes firing native events a no-brainer.
Runloop aware: These helpers automatically spawn a runloop, so you don't need to wrap every interaction with Ember.run(() => /* interact with element */ );.
wait by default: All the helpers return the wait() promise, making it possible to wait for asynchronous side-effects with async/await. (Note that for using async/await in browsers without native support you must install ember-maybe-import-regenerator).
```
1test('some test', async function(assert) {
2  this.render(hbs```{{my-component}}```);
3
4  await click('.my-button');
5
6  assert.ok('something happened');
7});
```
More realistic behaviour: When a user clicks on an element, click is not the only event fired. In a real click, the sequence of events is mousedown, focus, mouseup, click. When a user fills in an input the sequence of events is focus, <mutate-value>, input, and change. The helpers provided by this addon fire those events in the right order, simulating more closely how a real user would interact with the page.

Standard DOM elements returned using a `find`/`findAll` helpers

The find helper uses document.querySelector and will return a single HTMLElement or null.
The findAll helper uses document.querySelectorAll and returns an Array with zero or more elements.
Both find and findAll helpers query the DOM within #ember-testing.
To use a different value from your config/environment.js settings, add to tests/test-helper.js…

1import { settings } from 'ember-native-dom-helpers';
2import config from '../config/environment';
3const { APP: { rootElement } } = config;
4
5settings.rootElement = rootElement || settings.rootElement;

What if I prefer jQuery collections over native DOM?

Fear not. If you prefer to use jQuery, just wrap the result and do your thing:

1assert.equal($(find('.my-class')).attr('aria-owns'), '#id123')

Testing an unsettled world

There is one new helper in this addon that enables some testing patterns that weren't previously easy to perform using traditional methods.

Since the andThen helper waits for the app to settle (no pending requests or promises), and every integration test interaction is wrapped in Ember.run, there is no easy way to test transient state, like loading substates or the state of a component, while some promise is pending, without an awkward setup of timeouts.

Now, however, thanks to explicit usage of promises and the waitUntil helper, you can perform assertions on unsettled states:

1import { visit, click, find, fillIn, waitUntil, currentURL } from 'ember-native-dom-helpers';
2
3moduleForAcceptance('Acceptance | Sign up');
4
5test('Usage awaiting the world to settle', async function(assert) {
6  await visit('/login');
7
8  await fillIn('.email', '007@gov.uk');
9  await fillIn('.password', 'goldeneye');
10  let promise = click('.submit-btn');
11
12  // We wait until the loading substate, that takes 200ms to appear, is displayed
13  await waitUntil(() => find('.substate-spinner'));
14  assert.equal(find('.loading-substate-header').textContent.trim(), 'Loading mission. Please wait, Mr. Bond');
15
16  await promise; // now we wait until the dashboard is fully loaded
17  assert.equal(currentURL(), '/dashboard');
18  assert.equal(find('.section-header').textContent, 'Main dashboard');
19});

I WANT IT NOW, IS THERE A SHORTCUT?

Yes, there is a codemod that will help you transform your test suite to this new style "automatically". Check https://github.com/simonihmig/ember-native-dom-helpers-codemod.

The codemod can't make a perfect conversion, but it will do most of the work for you.

Helpers

click(selectorOrHTMLElement, contextHTMLElement, eventOptions)
tap(selectorOrHTMLElement, eventOptions)
fillIn(selectorOrHTMLElement, text)
find(selector, contextHTMLElement) (query for an element in test DOM, #ember-testing)
findAll(selector, contextHTMLElement) (query for elements in test DOM, #ember-testing)
findWithAssert(selector, contextHTMLElement) (same as find, but raises an Error if no result)
keyEvent(selectorOrHTMLElement, type, keyCode, modifiers) (type being keydown, keyup or keypress, modifiers being object with { ctrlKey: false, altKey: false, shiftKey: false, metaKey: false })
triggerEvent(selectorOrHTMLElement, type, options)
focus(selectorOrHTMLElement)
blur(selectorOrHTMLElement)
scrollTo(selectorOrHTMLElement, x, y)
selectFiles(selectorOrHTMLElement, files = []) (selects the file(s)/Blob(s) to the given input[type=file]. Example
visit(url) (only available in acceptance. Raises an error in integration.)
waitUntil(function, options) (Polls the page until the given callback returns a truthy value, or timesout after 1s)
waitFor(selector, options) (Convenience for the most common use-case of waitUntil. It polls the page until the element with the given selector is on the page, or timesout after 1s. It accepts a count: 3 option to await a specific number of matches.)
currentURL() Identical to the one provided by Ember.
currentPath() Identical to the one provided by Ember.
currentRouteName() Identical to the one provided by Ember.

Notes of `tap`

In order for tap to work, your browser has to support touch events. Desktop Chrome and Firefox have touch events disabled unless the device emulation mode is on. To enable touch events in your CI, you need to configure testem like the testem.js file on this repo.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

133 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-mpcf-4gmh-23w8
Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
Warn: Project is vulnerable to: GHSA-6c3j-c64m-qhgq
Warn: Project is vulnerable to: GHSA-gxr4-xjj5-5px2
Warn: Project is vulnerable to: GHSA-jpcq-cgw6-v4j6
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-46fh-8fc5-xcwx
Warn: Project is vulnerable to: GHSA-h5mp-5q4p-ggf5
Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-446m-mv8f-q348
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-56x4-j7p9-fcf9
Warn: Project is vulnerable to: GHSA-v78c-4p63-2j6c
Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
Warn: Project is vulnerable to: GHSA-pc58-wgmc-hfjr
Warn: Project is vulnerable to: GHSA-vvv8-xw5f-3f88
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-m5h6-hr3q-22h5
Warn: Project is vulnerable to: GHSA-ph34-pc88-72gc
Warn: Project is vulnerable to: GHSA-m6cx-g6qm-p2cx
Warn: Project is vulnerable to: GHSA-x8qc-rrcw-4r46
Warn: Project is vulnerable to: GHSA-4328-8hgf-7wjr
Warn: Project is vulnerable to: GHSA-93f3-23rq-pjfp
Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc
Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p
Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-xfhp-gmh8-r8v2
Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-7xfp-9c55-5vqj
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-qhv9-728r-6jqg
Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

2.3

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ember-native-dom-helpers

ember-native-dom-helpers

Installations

Developer Guide

No

N/A

^4.5 || 6.* || >= 7.*

13.12.0

6.14.4

Score

Pull Requests

24

116

11

81

Issues

23

62

39

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

cibernox

Download Statistics

GitHub Statistics

Bundle Size

116.95 kB

35.83 kB

Maintainers

Package Meta Information

Total Downloads

16,522,925

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

IMPORTANT: You probably don't need this addon.

ember-native-dom-helpers

Usage

Integration tests

Acceptance tests

Advantages compared with this.$(selector).click()

Standard DOM elements returned using a find/findAll helpers

What if I prefer jQuery collections over native DOM?

Testing an unsettled world

I WANT IT NOW, IS THERE A SHORTCUT?

Helpers

Notes of tap

10

10

4

0

0

0

0

0

0

0

2.3

/10

Advantages compared with `this.$(selector).click()`

Standard DOM elements returned using a `find`/`findAll` helpers

Notes of `tap`