diff --git a/guides/release/testing/test-types.md b/guides/release/testing/test-types.md index 6771cd1ba6..a128bb22ce 100644 --- a/guides/release/testing/test-types.md +++ b/guides/release/testing/test-types.md @@ -90,7 +90,7 @@ module('Unit | Service | flash-messages', function(hooks) { }); ``` -By calling `setupTest()`, you gain access to a few things. First is Ember's [Dependency Injection](../../applications/dependency-injection/) system. In short, you can [look up](https://api.emberjs.com/ember/release/classes/ApplicationInstance/methods/lookup?anchor=lookup) anything in your application, with a little help from `this.owner`. Second, you gain access to some common utility functions, `this.get()` and `this.set()`, in your tests. Finally, you can use `pauseTest()` to [debug your tests](../#toc_how-to-debug-tests). +By calling `setupTest()`, you gain access to a few things. First is Ember's [Dependency Injection](../../applications/dependency-injection/) system. In short, you can [look up](https://api.emberjs.com/ember/release/classes/ApplicationInstance/methods/lookup?anchor=lookup) anything in your application, with a little help from `this.owner`. Also, you can use `pauseTest()` to [debug your tests](../#toc_how-to-debug-tests). ## Rendering Tests @@ -147,7 +147,7 @@ Here are more examples where rendering tests are ideal: In order for rendering tests to work, you must call [`setupRenderingTest()`](https://github.com/emberjs/ember-qunit#setup-rendering-tests) and pass the `hooks` object. -What does `setupRenderingTest()` do? First, it uses `setupTest()` behind the scenes. Just like in [Unit Tests](../test-types/#toc_what-to-watch-out-for), you have access to `this.owner`, `this.get()`, `this.set()`, and `pauseTest()`. +What does `setupRenderingTest()` do? First, it uses `setupTest()` behind the scenes. Just like in [Unit Tests](../test-types/#toc_what-to-watch-out-for), you have access to `this.owner` and `pauseTest()`. In addition, `setupRenderingTest()` allows Ember's renderer to use helpers for rendering and DOM interaction, such as `render`, `click`, and `fillIn`. You can also use `this.element` to access the DOM element that results from `render`. diff --git a/guides/release/testing/testing-helpers.md b/guides/release/testing/testing-helpers.md index 4d949caaee..1bb05ac265 100644 --- a/guides/release/testing/testing-helpers.md +++ b/guides/release/testing/testing-helpers.md @@ -56,15 +56,18 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'my-app-name/tests/helpers'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +import { trackedObject } from '@ember/reactive/collections'; module('Integration | Helper | format currency', function(hooks) { setupRenderingTest(hooks); test('formats 199 with $ as currency sign', async function(assert) { - this.set('value', 199); - this.set('sign', '$'); + const data = trackedObject({ + value: 199, + sign: '$', + }); - await render(hbs`{{format-currency value sign=sign}}`); + await render(hbs`{{format-currency data.value sign=data.sign}}`); assert.equal(this.element.textContent.trim(), '$1.99'); }); @@ -76,21 +79,25 @@ We can now also properly test if a helper will respond to property changes. ```javascript {data-filename=tests/integration/helpers/format-currency-test.js} import { module, test } from 'qunit'; import { setupRenderingTest } from 'my-app-name/tests/helpers'; -import { render } from '@ember/test-helpers'; +import { render, rerender } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Helper | format currency', function(hooks) { setupRenderingTest(hooks); test('formats 199 with $ as currency sign', async function(assert) { - this.set('value', 199); - this.set('sign', '$'); + const data = trackedObject({ + value: 199, + sign: '$', + }); - await render(hbs`{{format-currency value sign=sign}}`); + await render(hbs`{{format-currency data.value sign=data.sign}}`); assert.equal(this.element.textContent.trim(), '$1.99'); - this.set('sign', '€'); + data.sign = '€'; + + await rerender(); assert.equal(this.element.textContent.trim(), '€1.99', 'Value is formatted with €'); });