You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: exercises/03.best-practices/05.solution.page-navigation/README.mdx
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,7 +36,7 @@ This will result in the following component tree being rendered:
36
36
37
37
Now that my tested component has a parent router, it can access all the router-related information, like the `useNavigate()` hook without issues.
38
38
39
-
<callout-success>Don't be hesitant to create wrappers to suit the needs of individual tests. Custom wrappers is not something you usually reuse.</callout-success>
39
+
<callout-success>Don't be hesitant to create wrappers to suit the needs of individual tests. Custom wrappers are not something you usually reuse.</callout-success>
40
40
41
41
## Testing links
42
42
@@ -75,25 +75,25 @@ Let me explain.
75
75
76
76
Any navigation on the web consists of the source and the destination. In the case of our `<DiscountCodeForm />`, the source is the "Back to cart" link while the destination is the cart page. In other words, _there are two pages involved_ (thus the navigation).
77
77
78
-
**But we aren't testing pages here**. We are testing components. It is crucial we keep in mind what's within our component's power and what is not.
78
+
**But we aren't testing pages here**. We are testing components. It is crucial we keep in mind what's within our component's control and what is not.
79
79
80
-
So, what is in our component's power?
80
+
Let's focus on what our component can actually control:
81
81
82
82
- Render the link;
83
83
- Make sure it leads to the right page.
84
84
85
-
What gets rendered on that page or whether the page exists at all isn't the responsibility of `<DiscountCodeForm />`. It cannot be responsible for the other end of this navigation, and so it cannot include it in its tests.
85
+
What gets rendered on that page or whether the page exists at all isn't the responsibility of `<DiscountCodeForm />`. It cannot be responsible for the other end of this navigation, and so we should not include it in its tests.
86
86
87
-
Ask yourself this: Do I want the `<DiscountCodeForm />`tests to fail if something is off on the cart page? You really don't. You would want the cart pagetests to fail in that case, wouldn't you?
87
+
Think about it: should a `<DiscountCodeForm />`test fail because of issues on the cart page? Of course not. That's what the cart page's own tests are for.
88
88
89
89
> This once again brings me to 📜 [The Golden Rule of Assertions](https://www.epicweb.dev/the-golden-rule-of-assertions), proving how invaluable it is when making decisions around your tests.
90
90
91
91
## Testing navigation
92
92
93
93
But where should you test the actual navigation then?
94
94
95
-
<callout-success>Test the actual navigation in end-to-end tests, and test is_implicitly_.</callout-success>
95
+
<callout-success>Test the actual navigation in end-to-end tests, and test it_implicitly_.</callout-success>
96
96
97
-
Getting from one page to another is a part of the user's journey. Naturally, both counterparts of the navigation would have to exist for that journey to complete. This is where you act as the user, click on links or buttons, and assert what page they land on.
97
+
Getting from one page to another is a part of the user's journey. Naturally, both sides of the navigation would have to exist for that journey to complete. This is where you act as the user, click on links or buttons, and assert which page they land on.
98
98
99
-
**Testing navigation on the integration level is unreliable**. There may be other components in the router tree that affect the navigation. For example, some other route may render a `position:fixed` element with incorrect styles that would obstruct the link you are trying to click, making it inaccessible. You won't catch that rendering components in isolation. You will catch that in an end-to-end test.
99
+
**Testing navigation on the integration level is unreliable**. There may be other components in the router tree that affect things. For example, some other route may render a `position:fixed` element with incorrect styles that would obstruct the link you are trying to click, making it inaccessible. You won't catch that when rendering components in isolation, but you will in an end-to-end test.
0 commit comments