Skip to content

Commit

Permalink
Merge pull request ember-learn#521 from ijlee2/blog/embertimes-134
Browse files Browse the repository at this point in the history
Provided more information for QUnit DOM v1 release
  • Loading branch information
amyrlam authored and jayjayjpg committed Feb 7, 2020
2 parents 43a609a + 60d9087 commit c81ff36
Showing 1 changed file with 37 additions and 11 deletions.
48 changes: 37 additions & 11 deletions source/2020-02-07-the-ember-times-issue-134.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: The Ember Times - Issue No. XXS
author: Chris Ng, Anne-Greeth van Herwijnen, Isaac Lee, the crowd
author: Chris Ng, Anne-Greeth van Herwijnen, Isaac Lee, Jessica Jordan, the crowd
tags: Recent Posts, Newsletter, Ember.js Times, Ember Times, 2020
alias : "blog/2020/xx/xx-the-ember-times-issue-XXX.html"
responsive: true
Expand All @@ -11,6 +11,7 @@ responsive: true
How structuring your Figma can make your developer life easier 🎨,
QUnit DOM announces v1.0 release πŸŽ‚,
Check out the ember-changeset 3.0.0 Release πŸŽ‰,
polyfilled ember-data packages syntax for all Ember apps πŸ“¦,

READMORE

Expand All @@ -20,7 +21,7 @@ READMORE

[Thomas Gossmann @gossi](https://github.com/gossi) has started a blog post series on Figma, Ember and Storybook. It is a 3 part series. [Part 1](https://gos.si/blog/full-featured-themes-in-figma/) has been published and will tell you all about how to organise your design in Figma. So if you want to learn something about themes and design tokens, go ahead and read [Part 1: Full Featured Themes in Figma](https://gos.si/blog/full-featured-themes-in-figma/) .

Part 2 on design tokens in Ember and part 3 on documentation within the Ember Ecosystem are on their way. Follow [@unistyler](https://twitter.com/unistyler) on Twitter to be notified when they are published.
Part 2 on design tokens in Ember and part 3 on documentation within the Ember Ecosystem are on their way. Follow [@unistyler](https://twitter.com/unistyler) on Twitter to be notified when they are published.

You can find the design system and code on [GitHub](https://github.com/gossi/hokulea).

Expand Down Expand Up @@ -60,7 +61,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 @@ -69,17 +73,39 @@ assert.dom('[data-test-input="Email"]')
.hasValue('zoey@ember.js');
```

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).

---

## [Section title in sentence case 🐹](#section-url)
## [Back to the future with Ember Data packages polyfill πŸ“¦πŸš€](https://github.com/ember-data/babel-plugin-ember-data-packages-polyfill)

<change section title emoji>
<consider adding some bold to your paragraph>
The [ember-data packages API](https://emberjs.github.io/rfcs/0395-ember-data-packages.html) allows you to import objects and methods from smaller packages in the ember-data module following guidelines similar to the ones established in the [Ember Modules RFC#176](https://github.com/emberjs/rfcs/pull/176). With real and resolvable package paths, many developers can directly benefit from them with improved code reference information in their IDE. The ember-data packages API is available [since ember-data 3.11](https://blog.emberjs.com/2019/07/15/ember-3-11-released.html).

There's nothing like a new, shiny API that makes your developer life easier. Even better if you can already use that API in your application
without any upgrading! Users of ember-data with **version 3.10 and below** get to benefit
from the new way of importing with the help of the [ember-data packages polyfill](https://github.com/ember-data/babel-plugin-ember-data-packages-polyfill)!

The polyfill ensures that any instances of the Packages API import statements are transformed back to the legacy "DS" EmberData import syntax.
You can opt-in to using the polyfill in your app, by upgrading your ember-cli-babel dependency to [version 7.14](https://github.com/babel/ember-cli-babel/releases/tag/v7.14.0) or higher for this [new feature](https://github.com/babel/ember-cli-babel/pull/318).

Wanna learn more about how to use the new packages import syntax for ember-data? Be sure to give the [Ember 3.11 release post]((https://blog.emberjs.com/2019/07/15/ember-3-11-released.html) another read
for practical code examples on how to use it and pop by the [#ember-data channel on the Ember Discord](https://discordapp.com/invite/emberjs) for more questions and discussions.

<add your name to author list, top and bottom>
<add blurb and emoji to "SOME-INTRO-HERE">

---

Expand Down Expand Up @@ -113,7 +139,7 @@ This release requires Ember 3.13 and above and the use of @tracked will help emb

## [Contributors' Corner πŸ‘](https://guides.emberjs.com/release/contributing/repositories/)

<p>This week we'd like to thank our siblings for their contributions to Ember and related repositories! πŸ’–</p>
<p>This week we'd like to thank <a href="https://github.com/bobisjan" target="gh-user">@bobisjan</a>, <a href="https://github.com/chancancode" target="gh-user">@chancancode</a>, <a href="https://github.com/xg-wang" target="gh-user">@xg-wang</a>, <a href="https://github.com/pzuraq" target="gh-user">@pzuraq</a>, <a href="https://github.com/efx" target="gh-user">@efx</a>, <a href="https://github.com/rwwagner90" target="gh-user">@rwwagner90</a>, <a href="https://github.com/jenweber" target="gh-user">@jenweber</a>, <a href="https://github.com/lifeart" target="gh-user">@lifeart</a>, <a href="https://github.com/chadhietala" target="gh-user">@chadhietala</a>, <a href="https://github.com/mansona" target="gh-user">@mansona</a> and <a href="https://github.com/pichfl" target="gh-user">@pichfl</a> for their contributions to Ember and related repositories! πŸ’–</p>

---

Expand Down Expand Up @@ -141,4 +167,4 @@ That's another wrap! ✨

Be kind,

Chris Ng, Anne-Greeth van Herwijnen, Isaac Lee, the crowd and the Learning Team
Chris Ng, Anne-Greeth van Herwijnen, Isaac Lee, Jessica Jordan, the crowd and the Learning Team

0 comments on commit c81ff36

Please sign in to comment.