Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions guides/release/testing/test-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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`.

Expand Down
23 changes: 15 additions & 8 deletions guides/release/testing/testing-helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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 €');
});
Expand Down
Loading