Skip to content

Commit

Permalink
Merge branch 'testing-201-meal-planner-indirect-output' into testing-…
Browse files Browse the repository at this point in the history
…202-meal-planner-indirect-input-starter
  • Loading branch information
yjaaidi committed Nov 3, 2023
2 parents a6d6d89 + 401a054 commit 1d0cf97
Show file tree
Hide file tree
Showing 18 changed files with 58 additions and 35 deletions.
15 changes: 10 additions & 5 deletions apps/whiskmate/src/test-setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ import 'zone.js';
import 'zone.js/testing';
import '@testing-library/jest-dom';

import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { configure } from '@testing-library/dom';

// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand All @@ -14,11 +21,9 @@ Zone['ProxyZoneSpec'] = {
assertPresent: () => ({ onHasTask: noop, resetDelegate: noop }),
};

import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
configure({
testIdAttribute: 'data-role',
});

getTestBed().resetTestEnvironment();
getTestBed().initTestEnvironment(
Expand Down
4 changes: 2 additions & 2 deletions docs/101-meal-planner.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ git checkout origin/testing-100-meal-planner-starter

- `addRecipe` should throw an error if a recipe has already being added.

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down Expand Up @@ -54,7 +54,7 @@ pnpm test --watch

- Recipe can only be added if not already present. _(i.e. recipes can't be added twice)_

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand Down
4 changes: 2 additions & 2 deletions docs/102-meal-planner-reactive.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ class MealPlanner {

1. it notifies subscribers when new recipes are added.

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down Expand Up @@ -49,7 +49,7 @@ class MealPlanner {

1. it notifies subscribers when new recipes are added.

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand Down
4 changes: 2 additions & 2 deletions docs/201-meal-planner-indirect-output.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ In order to test that the `MealPlanner` is adding the meals in the correct way,

You can use a [Spy](#-steps-with-a-spy), a [Fake](#-steps-with-a-fake), or try both if you have enough time.

# πŸ“ Steps with a Spy
## πŸ“ Steps with a Spy

0. [optional] you can either checkout the updated `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand All @@ -34,7 +34,7 @@ pnpm test --watch

5. Checkout the implementation as mentioned at step 0 if you didn't do it already.

# πŸ“ Steps with a Fake
## πŸ“ Steps with a Fake

0. [optional] you can either checkout the updated `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down
4 changes: 2 additions & 2 deletions docs/202-meal-planner-indirect-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ git checkout origin/testing-202-meal-planner-indirect-input-starter

On startup, the `MealPlanner` should fetch meals from the `MealRepository`.

# πŸ“ Steps with a Spy
## πŸ“ Steps with a Spy

0. [optional] you can either checkout the updated `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand All @@ -31,7 +31,7 @@ pnpm test --watch

6. Checkout the implementation as mentioned at step 0 if you didn't do it already.

# πŸ“ Steps with a Fake
## πŸ“ Steps with a Fake

0. [optional] you can either checkout the updated `MealPlanner` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down
2 changes: 1 addition & 1 deletion docs/301-recipe-search-isolated.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class RecipeSearchComponent {
}
```

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `RecipeSearchComponent` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down
21 changes: 19 additions & 2 deletions docs/302-recipe-search-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
git checkout origin/testing-303-recipe-search-integration-starter
```

# 🎯 Goal: Test `<wm-recipe-search>`
# 🎯 Goal #1: Test `<wm-recipe-search>`

Same goal as [previous exercise](301-recipe-search-isolated.md) _(i.e. `<wm-recipe-search>` should call `RecipeRepository.search()` on startup.)_

Expand All @@ -18,7 +18,7 @@ But let's check the DOM this time.
<h2 data-role="recipe-name">{{ recipe.name }}</h2>
```

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `RecipeSearchComponent` implementation first or go full-on TDD and implement the tests first.
```sh
Expand All @@ -37,6 +37,23 @@ pnpm test --watch

3. Checkout the implementation as mentioned at step 0 if you didn't do it already.

# 🎯 Goal #2: Test `<wm-recipe-search>` using `@testing-library/angular`

Refactor the previous test using `@testing-library/angular` instead of `TestBed`.

## 🍴 Cutleries
- [render](https://testing-library.com/docs/angular-testing-library/api#render)
- `configureTestBed` option:
```ts
render(..., {
configureTestBed(testBed) {
testBed.inject(MyService).doSomething()
}
});
```
- [queries](https://testing-library.com/docs/queries/about/)


# Appendices

## 🎁 Tip: Query DOM with `fixture.debugElement`
Expand Down
6 changes: 3 additions & 3 deletions docs/303-recipe-search-shallow.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Setup

```sh
git checkout origin/testing-305-recipe-search-shallow-starter
git checkout origin/testing-306-recipe-search-shallow-starter
```

# 🎯 Goal: Test `<wm-recipe-search>`
Expand All @@ -14,11 +14,11 @@ But let's check children properties this time.

1. recipes are passed to child components.

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `RecipeSearchComponent` implementation first or go full-on TDD and implement the tests first.
```sh
git checkout origin/testing-306-recipe-search-shallow apps/whiskmate/src/app/recipe/recipe-search.component.ts
git checkout origin/testing-307-recipe-search-shallow apps/whiskmate/src/app/recipe/recipe-search.component.ts
```

1. Run tests:
Expand Down
6 changes: 3 additions & 3 deletions docs/304-recipe-search-async-pipe.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Setup

```sh
git checkout origin/testing-306-recipe-search-shallow
git checkout origin/testing-307-recipe-search-shallow
```

# 🎯 Goal: Use `async` pipe and fix tests

Let's go reactive and see what happens.

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand All @@ -19,7 +19,7 @@ pnpm test --watch
2. Checkout new `RecipeSearchComponent` implementation.

```sh
git checkout origin/testing-307-recipe-search-async-pipe apps/whiskmate/src/app/recipe/recipe-search.component.ts
git checkout origin/testing-308-recipe-search-async-pipe apps/whiskmate/src/app/recipe/recipe-search.component.ts
```

> This will replace the imperative approach:
Expand Down
2 changes: 1 addition & 1 deletion docs/401-recipe-filter.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ New component `<wm-recipe-filter>` should trigger `filterChange` output with a v

This will be later used by `<wm-recipe-search>` to filter results based on user filtering.

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `RecipeFilterComponent` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down
2 changes: 1 addition & 1 deletion docs/402-recipe-filter-interaction.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ git checkout origin/testing-401-recipe-filter

We will test the contract using a shallow test.

# πŸ“ Steps
## πŸ“ Steps

0. [optional] you can either checkout the updated `RecipeSearchComponent` implementation first or go full-on TDD and implement the tests first.
```sh
Expand Down
2 changes: 1 addition & 1 deletion docs/701-recipe-filter-with-harness.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ git checkout origin/testing-700-recipe-filter-material-harness-starter

Update [`recipe-filter.component.spec.ts`](../apps/whiskmate/src/app/recipe/recipe-filter.component.spec.ts) using `MatInputHarness`.

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand Down
2 changes: 1 addition & 1 deletion docs/702-recipe-filter-harness.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Create a harness that abstracts interactions with `RecipeFilterComponent`.

Update [`recipe-filter.component.spec.ts`](../apps/whiskmate/src/app/recipe/recipe-filter.component.spec.ts) in order to use the `RecipeFilterHarness`.

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand Down
2 changes: 1 addition & 1 deletion docs/801-recipe-preview-cypress-component-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Thanks to [Cypress Component Testing](https://docs.cypress.io/guides/component-t

Let's test that `RecipeSearchComponent` is showing the recipe name properly.

# πŸ“ Steps
## πŸ“ Steps

0. [βœ… Already done] Set up Cypress Component Testing

Expand Down
2 changes: 1 addition & 1 deletion docs/802-recipe-filter-cypress-component-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ git checkout origin/testing-802-recipe-filter-ct-starter

Check that `RecipeFilterComponent` triggers the `filterChange` output with the right value when the user interacts with the form.

# πŸ“ Steps
## πŸ“ Steps

1. Run Cypress in component testing mode:

Expand Down
6 changes: 3 additions & 3 deletions docs/803-recipe-search-cypress-component-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ git checkout origin/testing-804-recipe-search-ct-starter

`RecipeSearchComponent` should show all recipes returned by `RecipeRepository`.

# πŸ“ Steps
## πŸ“ Steps

1. Run tests:

Expand All @@ -28,7 +28,7 @@ pnpm ct --watch

`RecipeSearchComponent` should filter recipes based on user criteria.

# πŸ“ Steps
## πŸ“ Steps

1. Set the `keywords` input value as we already did in [`recipe-filter.component.cy.ts`](../apps/whiskmate/src/app/recipe/recipe-filter.component.cy.ts).

Expand All @@ -38,7 +38,7 @@ pnpm ct --watch

`RecipeSearchComponent` should add the recipe to the meal plan when "ADD" button is clicked.

# πŸ“ Steps
## πŸ“ Steps

1. Find the "ADD" button using `cy.findByRole()`.

Expand Down
2 changes: 1 addition & 1 deletion docs/804-cypress-component-testing-with-harnesses.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Thanks to [@jscutlery/cypress-harness](https://github.com/jscutlery/devkit/tree/

Let's clean up our `RecipeSearchComponent` tests from DOM logic and use the `RecipeSearchHarness` as an abstraction instead.

# πŸ“ Steps
## πŸ“ Steps

0. [βœ… Already done] Set up Cypress Harness

Expand Down
7 changes: 4 additions & 3 deletions tools/sync-testing.sh
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ ${TOOLS_PATH}/cascade-changes.sh \
testing-302-recipe-search-isolated \
testing-303-recipe-search-integration-starter \
testing-304-recipe-search-integration \
testing-305-recipe-search-shallow-starter \
testing-306-recipe-search-shallow \
testing-307-recipe-search-async-pipe \
testing-305-recipe-search-integration-testing-library \
testing-306-recipe-search-shallow-starter \
testing-307-recipe-search-shallow \
testing-308-recipe-search-async-pipe \
testing-400-recipe-filter-starter \
testing-401-recipe-filter \
testing-402-recipe-search-filter-interaction \
Expand Down

0 comments on commit 1d0cf97

Please sign in to comment.