Skip to content

Commit a9acb10

Browse files
committed
docs: πŸ“ update exercise instructions for clarity and consistency
1 parent 550da77 commit a9acb10

File tree

4 files changed

+23
-10
lines changed

4 files changed

+23
-10
lines changed

β€Ždocs/instructions/1-recipe-search.mdβ€Ž

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ pnpm test
3636

3737
```ts
3838
it('...', async () => {
39-
await renderComponent();
40-
})
39+
await renderComponent();
40+
});
4141
```
4242

4343
#### 4. Query DOM and check that a burger and a pizza are displayed
@@ -56,7 +56,7 @@ The `RecipeSearch` component should display a list of recipes fetched from a rem
5656

5757
### πŸ“ Steps
5858

59-
#### 1. Run tests:
59+
#### 1. Run tests
6060

6161
```sh
6262
pnpm test
@@ -68,7 +68,6 @@ Wait for the `recipes` property to contain a burger and a pizza.
6868

6969
Cf. [πŸ“– Appendices](#-appendices)
7070

71-
7271
#### 3. Checkout the implementation if you went with the TDD approach:
7372

7473
```sh

β€Ždocs/instructions/2-test-doubles.mdβ€Ž

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Navigate to the second exercise:
1212
pnpm cook start 2-test-double
1313
```
1414

15-
## 🎯 Goal: Implement Test Doubles for Better Test Isolation
15+
## 🎯 Goal #1: Use test doubles to narrow down the exercised code
1616

1717
In this exercise, you'll learn to use test doubles _(Fakes to be more specific)_ to make tests more reliable, faster, and independent of external dependencies like HTTP calls.
1818

@@ -31,14 +31,18 @@ In this exercise, you'll learn to use test doubles _(Fakes to be more specific)_
3131
TestBed.inject(RecipeRepositoryFake).setRecipes(...);
3232
```
3333

34-
#### 3. Update Test Helper Functions
34+
#### 3. Update test helper functions
3535

36-
#### 4. Run Tests
36+
#### 4. Run tests
3737

3838
```sh
3939
pnpm test
4040
```
4141

42+
## 🎯 Goal #2: `RecipeSearch` filters recipes by keywords
43+
44+
Add a test that checks that `RecipeSearch` filters recipes by keywords when the user types keywords in an input labeled "Keywords".
45+
4246
## πŸ“– Appendices
4347

4448
### Object Mother

β€Ždocs/instructions/3-refactor-signals.mdβ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ In this exercise, you'll modernize the `RecipeSearch` component by refactoring f
2424
pnpm cook checkout-impl
2525
```
2626

27-
#### 2. Run tests:
27+
#### 2. Run tests
2828

2929
```sh
3030
pnpm test

β€Ždocs/instructions/4-vitest-browser.mdβ€Ž

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ In this exercise, you'll learn to use Vitest's browser mode for testing componen
1818

1919
### πŸ“ Steps
2020

21-
#### 1. Rename test from `recipe-search.ng.integration.spec.ts` to `recipe-search.ng.browser.spec.ts`
21+
#### 1. Rename test from `recipe-search.integration.spec.ts` to `recipe-search.browser.spec.ts`
2222

23-
#### 2. Run tests:
23+
#### 2. Run tests
2424

2525
```sh
2626
pnpm test
@@ -34,8 +34,18 @@ import { page } from '@vitest/browser/context';
3434
await page.getByLabelText('Keywords').fill(keywords);
3535
```
3636

37+
#### 4. Figure out why the tests are failing
38+
3739
## πŸ“– Appendices
3840

41+
### Asserting with Vitest Browser
42+
43+
```ts
44+
const els = page.getByRole('...');
45+
await expect.poll(() => els.all()).toHaveLength(42);
46+
await expect.element(els.nth(30)).toHaveTextContent('...');
47+
```
48+
3949
### Visual Debugging
4050

4151
For debugging browser tests:

0 commit comments

Comments
Β (0)