Skip to content

Commit

Permalink
Merge pull request #176 from xg-wang/patch-1
Browse files Browse the repository at this point in the history
Remove `this.setupRouter` from tests
  • Loading branch information
chancancode authored Mar 8, 2021
2 parents d002ef7 + 3b339e4 commit d09b653
Showing 1 changed file with 7 additions and 37 deletions.
44 changes: 7 additions & 37 deletions src/markdown/tutorial/part-2/09-route-params.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,43 +114,9 @@ Alright, we have just one more step left here: updating the tests. We can add an
git add tests/integration/components/rental-test.js
```
If we run the tests in the browser, everything should...
If we run the tests in the browser, everything should just pass!
```run:screenshot width=1024 height=768 retina=true filename=fail.png alt="The test failed"
visit http://localhost:4200/tests?nocontainer&nolint&deterministic
wait #qunit-banner.qunit-fail
```
...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.
```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
@@ -8,2 +8,6 @@

+ hooks.beforeEach(function () {
+ this.owner.setupRouter();
+ });
+
test('it renders information about a rental property', async function (assert) {
```
> Zoey says...
>
> As its name implies, the `beforeEach` hook runs *once* before each `test` 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 `afterEach` hook!
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.
```run:command hidden=true cwd=super-rentals
ember test --path dist
git add tests/integration/components/rental-test.js
```
```run:screenshot width=1024 height=768 retina=true filename=pass.png alt="Tests are passing after our modifications"
```run:screenshot width=1024 height=768 retina=true filename=pass.png alt="Tests are passing"
visit http://localhost:4200/tests?nocontainer&nolint&deterministic
wait #qunit-banner.qunit-pass
```
Expand Down Expand Up @@ -358,7 +324,11 @@ Now that we have this template in place, we can add some tests for this new comp
});
```
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&mdash;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&mdash;hopefully it feels easy, too!
> Zoey says...
>
> As its name implies, the `beforeEach` hook runs *once* before each `test` 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 `afterEach` hook!
```run:command hidden=true cwd=super-rentals
ember test --path dist
Expand Down

0 comments on commit d09b653

Please sign in to comment.