Skip to content

Commit caae977

Browse files
kettanaitokettanaito
committed
04/01: remove second test
1 parent afe252c commit caae977

File tree

4 files changed

+16
-88
lines changed

4 files changed

+16
-88
lines changed

‎exercises/04.debugging/01.problem.dom-snapshots/README.mdx

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,10 @@
33
Your component tests consist of two parts:
44

55
- A rendered UI;
6-
- Test actions interacting with that UI.
6+
- Test actions interacting with that UI and asserting on the result.
77

88
While you can observe and analyze certain actions in a test, it's a bit tricker when it comes to debugging the rendered markup. For once, your UI components are not a 1-1 representation of the final DOM. There can be side effects and user actions that result in the elements appearing or disappearing on the page. Looking at the component's code alone won't cut it.
99

1010
Sometimes you just need to take a look at the current state of the DOM _during_ the test. This is where DOM snapshots come in!
1111

12-
👨‍💼 In this exercise, your task is to **track down and fix a nasty bug** that found its way in the code. To do that, you will observe the rendered markup as it changes from the test actions, using a `debug()` utility function. Complete the instructions in the <InlineFile file="./src/tic-tac-toe.browser.test.tsx">`tic-tac-toe.browser.test.tsx`</InlineFile> test suite and have the tests passing.
13-
14-
---
15-
16-
This is where taking _spapshots_ comes in handy. At any point of your test, you can take a look at the current state of the DOM to see if it's what you expect it to be. You can do that by calling the `debug()` utility function returned from `render()`:
17-
18-
```tsx
19-
const { debug } = render(<p>Hello world</p>)
20-
debug()
21-
```
22-
23-
```html
24-
<body>
25-
<p>Hello world</p>
26-
</body>
27-
```
28-
29-
---
30-
31-
- How to use `debug()` from `render()`.
32-
- You can debug the entire rendered tree by calling `debug()`.
33-
- You can debug a subportion of the tree but calling `debug(locator)` or even an array of locators.
12+
👨‍💼 In this exercise, your task is to **track down and fix a nasty bug** that found its way into the code. To do that, you will observe the rendered markup as it changes from one test action to another, using a `debug()` utility function. Complete the instructions in the <InlineFile file="./src/tic-tac-toe.browser.test.tsx">`tic-tac-toe.browser.test.tsx`</InlineFile> test suite and have the tests passing via `npm test`.

‎exercises/04.debugging/01.problem.dom-snapshots/src/tic-tac-toe.browser.test.tsx

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,3 @@ test('places cross marks in a horizontal line', async () => {
1919
const squares = page.getByRole('button').elements().slice(3, 6)
2020
expect(squares.map((element) => element.textContent)).toEqual(['✗', '✗', '✗'])
2121
})
22-
23-
// test('...', async () => {
24-
// /**
25-
// * @fixme @todo
26-
// */
27-
28-
// // A bunch of video thumbnails that render a lot of UI
29-
// // but you are interested only in certain elements, like "Watch now" links.
30-
// //
31-
// // OR any kind of list with interactive elements like buttons next to each element.
32-
// const { debug } = render(
33-
// <VideoFeed>
34-
// <Video />
35-
// <Video />
36-
// <Video />
37-
// <Video />
38-
// <Video />
39-
// </VideoFeed>,
40-
// )
41-
42-
// // A large component tree and we can print all elements
43-
// // matching this role.
44-
// // debug(page.getByRole('button').all())
45-
// })

‎exercises/04.debugging/01.solution.dom-snapshots/README.mdx

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -113,27 +113,23 @@ Alright! The first test is back to green. But what about the second one?
113113

114114
Sometimes the rendered element tree is too large to digest all at once. This is where isolating it to a particular element or a set of elements is a huge time-saver to get to the bottom of the issue.
115115

116-
As it turns out, this is exactly the case for the second failing test.
116+
You can print a single or multiple elements by providing their locators to the `debug()` function:
117117

118-
> TODO: Complete the solution once the second failing test is there.
118+
```tsx nonumber
119+
debug(page.getByRole('button', { name /middle/ }))
120+
```
119121

120-
---
122+
For example, the code above will print all the buttons that have `middle` in their accessible name. Note that the elements you provide to `debug()` don't have to be related in any way. This means you can cherry-pick only those sections of the markup that interest you:
121123

122-
This is where taking _spapshots_ comes in handy. At any point of your test, you can take a look at the current state of the DOM to see if it's what you expect it to be. You can do that by calling the `debug()` utility function returned from `render()`:
124+
```tsx nonumber
125+
debug(
126+
// Print a certain link.
127+
page.getByRole('link', { name: 'Go back' }),
123128

124-
```tsx
125-
const { debug } = render(<p>Hello world</p>)
126-
debug()
127-
```
129+
// Print all buttons on the page.
130+
page.getByRole('button').elements(),
128131

129-
```html
130-
<body>
131-
<p>Hello world</p>
132-
</body>
132+
// Print a direct HTMLElement reference.
133+
document.querySelector('nav ul > li:nth-child(2)'),
134+
)
133135
```
134-
135-
---
136-
137-
- How to use `debug()` from `render()`.
138-
- You can debug the entire rendered tree by calling `debug()`.
139-
- You can debug a subportion of the tree but calling `debug(locator)` or even an array of locators.

‎exercises/04.debugging/01.solution.dom-snapshots/src/tic-tac-toe.browser.test.tsx

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,3 @@ test('places cross marks in a horizontal line', async () => {
1414
const squares = page.getByRole('button').elements().slice(3, 6)
1515
expect(squares.map((element) => element.textContent)).toEqual(['✗', '✗', '✗'])
1616
})
17-
18-
test('...', async () => {
19-
/**
20-
* @fixme @todo
21-
*/
22-
// A bunch of video thumbnails that render a lot of UI
23-
// but you are interested only in certain elements, like "Watch now" links.
24-
//
25-
// OR any kind of list with interactive elements like buttons next to each element.
26-
const { debug } = render(
27-
<VideoFeed>
28-
<Video />
29-
<Video />
30-
<Video />
31-
<Video />
32-
<Video />
33-
</VideoFeed>,
34-
)
35-
36-
// A large component tree and we can print all elements
37-
// matching this role.
38-
// debug(page.getByRole('button').all())
39-
})

0 commit comments

Comments
 (0)