Skip to content

Commit

Permalink
Show file tree
Hide file tree
Showing 40 changed files with 17 additions and 80 deletions.
4 changes: 2 additions & 2 deletions guides/release/tutorial/part-1/orientation.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ To verify that your installation was successful, run:

```shell
$ ember --version
ember-cli: 3.24.0
ember-cli: 3.25.2
node: 12.18.3
os: linux x64
```
Expand All @@ -38,7 +38,7 @@ We can create a new project using Ember CLI's `new` command. It follows the patt
```shell
$ ember new super-rentals
installing app
Ember CLI v3.24.0
Ember CLI v3.25.2

Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals:
create .editorconfig
Expand Down
93 changes: 15 additions & 78 deletions guides/release/tutorial/part-2/route-params.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,84 +174,9 @@ module('Integration | Component | rental', function (hooks) {
});
```

If we run the tests in the browser, everything should...
If we run the tests in the browser, everything should just pass!

<img src="/images/tutorial/part-2/route-params/[email protected]" alt="The test failed" width="1024" height="768">

...wait a minute, our tests didn't pass!

Well, it's about time that we ran into something that didn't Just Work™ on the first try! This is the _advanced_ part of the tutorial after all. 😉

Component tests (like the one we have here) do not set up the router by default, because it's usually not necessary. In this specific case, however, we have a `<LinkTo>` in our component that is relying on the router to generate its URLs.

In this situation, we essentially need to _specifically_ opt-in to explicitly use our router in our component test. We can do this by calling `setupRouter()` in our `beforeEach` hook, which will set up the router before each test.

```js { data-filename="tests/integration/components/rental-test.js" data-diff="+9,+10,+11,+12" }
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | rental', function (hooks) {
setupRenderingTest(hooks);

hooks.beforeEach(function () {
this.owner.setupRouter();
});

test('it renders information about a rental property', async function (assert) {
this.setProperties({
rental: {
id: 'grand-old-mansion',
title: 'Grand Old Mansion',
owner: 'Veruca Salt',
city: 'San Francisco',
location: {
lat: 37.7749,
lng: -122.4194,
},
category: 'Estate',
type: 'Standalone',
bedrooms: 15,
image:
'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
description:
'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
},
});

await render(hbs`<Rental @rental={{this.rental}} />`);

assert.dom('article').hasClass('rental');
assert.dom('article h3').hasText('Grand Old Mansion');
assert
.dom('article h3 a')
.hasAttribute('href', '/rentals/grand-old-mansion');
assert.dom('article .detail.owner').includesText('Veruca Salt');
assert.dom('article .detail.type').includesText('Standalone');
assert.dom('article .detail.location').includesText('San Francisco');
assert.dom('article .detail.bedrooms').includesText('15');
assert.dom('article .image').exists();
assert.dom('article .map').exists();
});
});
```

<div class="cta">
<div class="cta-note">
<div class="cta-note-body">
<div class="cta-note-heading">Zoey says...</div>
<div class="cta-note-message">
<p>As its name implies, the <code>beforeEach</code> hook runs <em>once</em> before each <code>test</code> function is executed. This hook is the ideal place to set up anything that might be needed by all test cases in the file. On the other hand, if you need to do any cleanup after your tests, there is an <code>afterEach</code> hook!</p>
</div>
</div>
<img src="/images/mascots/zoey.png" role="presentation" alt="">
</div>
</div>

Setting up our router before each test function is executed will allow us to properly test that the URLs generated by `<LinkTo>` are exactly what we expect them to be.

<img src="/images/tutorial/part-2/route-params/[email protected]" alt="Tests are passing after our modifications" width="1024" height="768">
<img src="/images/tutorial/part-2/route-params/[email protected]" alt="Tests are passing" width="1024" height="768">

## Accessing Parameters from Dynamic Segments

Expand Down Expand Up @@ -437,7 +362,19 @@ module('Integration | Component | rental/detailed', function (hooks) {
});
```

We can again use the `beforeEach` hook that we learned about earlier, which allows us to have two tests that each focus on a different, single aspect of the component, while also sharing some boilerplate code! This feels similar to other tests that we've already written—hopefully it feels easy, too!
We can use the `beforeEach` hook to share some boilerplate code, which allows us to have two tests that each focus on a different, single aspect of the component. This feels similar to other tests that we've already written—hopefully it feels easy, too!

<div class="cta">
<div class="cta-note">
<div class="cta-note-body">
<div class="cta-note-heading">Zoey says...</div>
<div class="cta-note-message">
<p>As its name implies, the <code>beforeEach</code> hook runs <em>once</em> before each <code>test</code> function is executed. This hook is the ideal place to set up anything that might be needed by all test cases in the file. On the other hand, if you need to do any cleanup after your tests, there is an <code>afterEach</code> hook!</p>
</div>
</div>
<img src="/images/mascots/zoey.png" role="presentation" alt="">
</div>
</div>

<img src="/images/tutorial/part-2/route-params/[email protected]" alt="Tests are passing as expected" width="1024" height="768">

Expand Down
Binary file modified public/images/tutorial/part-1/automated-testing/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/automated-testing/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/automated-testing/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/component-basics/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/component-basics/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/component-basics/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/component-basics/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/component-basics/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/working-with-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/working-with-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-1/working-with-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-2/ember-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-2/ember-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-2/ember-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-2/ember-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/images/tutorial/part-2/ember-data/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ic/images/tutorial/part-2/provider-components/[email protected]
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ages/tutorial/part-2/provider-components/[email protected]
Binary file modified public/images/tutorial/part-2/route-params/[email protected]
Diff not rendered.
Binary file modified public/images/tutorial/part-2/route-params/[email protected]
Binary file modified public/images/tutorial/part-2/route-params/[email protected]
Binary file modified public/images/tutorial/part-2/route-params/[email protected]
Binary file modified public/images/tutorial/part-2/route-params/[email protected]
Binary file modified public/images/tutorial/part-2/service-injection/[email protected]
Binary file modified public/images/tutorial/part-2/service-injection/[email protected]
Binary file modified public/images/tutorial/part-2/service-injection/[email protected]

0 comments on commit ff9725c

Please sign in to comment.