Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provided more information for QUnit DOM v1 release #521

Merged
merged 1 commit into from
Feb 7, 2020
Merged

Provided more information for QUnit DOM v1 release #521

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions source/2020-02-07-the-ember-times-issue-134.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,10 @@ You can find the design system and code on [GitHub](https://github.com/gossi/hok

[QUnit DOM](https://github.com/simplabs/qunit-dom) provides **readable assertions for QUnit** and has been shipped with Ember since v3.1. If you haven't tried QUnit DOM yet, we recommend [checking out its API](https://github.com/simplabs/qunit-dom/blob/master/API.md) to see how you can simplify your tests.

Last week, QUnit DOM [announced its v1.0 release](https://twitter.com/TobiasBieniek/status/1223998561605627904) to mark the project's stability. One of the new features is **assertion chaining**:
Last week, QUnit DOM [announced its v1.0 release](https://twitter.com/TobiasBieniek/status/1223998561605627904) to mark the project's stability.
We extend our thanks to [Tobias Bieniek (@Turbo87)](https://github.com/Turbo87) and everyone who have helped with the project!

With version 1.0, you can use **assertion chaining**:

```javascript
assert.dom('[data-test-input="Email"]')
Expand All @@ -68,7 +71,22 @@ assert.dom('[data-test-input="Email"]')
.hasValue('[email protected]');
```

We extend our thanks to everyone who have contributed to the project!
You can also try out a new assertion, `hasProperty`, to check for DOM properties. There can be subtle differences between `hasAttribute` (to check for HTML attributes) and `hasProperty` (for DOM properties):

```javascript
// These two assertions are equivalent.
assert.dom('[data-test-input="I Agree"]')
.hasAttribute('checked', '')
.hasProperty('checked', true);

// These three assertions are equivalent.
assert.dom('[data-test-button="Delete"]')
.hasClass('btn').hasClass('btn-red')
.hasAttribute('class', 'btn btn-red')
.hasProperty('className', 'btn btn-red');
```

To learn more about when you might use `hasAttribute` or `hasProperty`, please visit [the tutorial by JavaScript.info](https://javascript.info/dom-attributes-and-properties).

---

Expand Down