diff --git a/src/markdown/tutorial/part-2/09-route-params.md b/src/markdown/tutorial/part-2/09-route-params.md index b04d731..1bb0e9f 100644 --- a/src/markdown/tutorial/part-2/09-route-params.md +++ b/src/markdown/tutorial/part-2/09-route-params.md @@ -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 `` 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 `` 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 ``` @@ -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—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! + +> 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