Merge branch 'testing-302-recipe-search-isolated' into testing-303-re…

…cipe-search-integration-starter
marmicode · Nov 3, 2023 · b701bb5 · b701bb5
2 parents 343755e + 0ba2d0c
commit b701bb5
Show file tree

Hide file tree

Showing 18 changed files with 58 additions and 35 deletions.
diff --git a/apps/whiskmate/src/test-setup.ts b/apps/whiskmate/src/test-setup.ts
@@ -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
@@ -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(

diff --git a/docs/101-meal-planner.md b/docs/101-meal-planner.md
@@ -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
@@ -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:
 

diff --git a/docs/102-meal-planner-reactive.md b/docs/102-meal-planner-reactive.md
@@ -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
@@ -49,7 +49,7 @@ class MealPlanner {
 
 1. it notifies subscribers when new recipes are added.
 
-# 📝 Steps
+## 📝 Steps
 
 1. Run tests:
 

diff --git a/docs/201-meal-planner-indirect-output.md b/docs/201-meal-planner-indirect-output.md
@@ -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
@@ -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

diff --git a/docs/202-meal-planner-indirect-input.md b/docs/202-meal-planner-indirect-input.md
@@ -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
@@ -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

diff --git a/docs/301-recipe-search-isolated.md b/docs/301-recipe-search-isolated.md
@@ -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

diff --git a/docs/302-recipe-search-integration.md b/docs/302-recipe-search-integration.md
@@ -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.)_
 
@@ -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
@@ -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`

diff --git a/docs/303-recipe-search-shallow.md b/docs/303-recipe-search-shallow.md
@@ -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>`
@@ -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:

diff --git a/docs/304-recipe-search-async-pipe.md b/docs/304-recipe-search-async-pipe.md
@@ -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:
 
@@ -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:

diff --git a/docs/401-recipe-filter.md b/docs/401-recipe-filter.md
@@ -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

diff --git a/docs/402-recipe-filter-interaction.md b/docs/402-recipe-filter-interaction.md
@@ -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

diff --git a/docs/701-recipe-filter-with-harness.md b/docs/701-recipe-filter-with-harness.md
@@ -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:
 

diff --git a/docs/702-recipe-filter-harness.md b/docs/702-recipe-filter-harness.md
@@ -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:
 

diff --git a/docs/801-recipe-preview-cypress-component-testing.md b/docs/801-recipe-preview-cypress-component-testing.md
@@ -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
 

diff --git a/docs/802-recipe-filter-cypress-component-testing.md b/docs/802-recipe-filter-cypress-component-testing.md
@@ -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:
 

diff --git a/docs/803-recipe-search-cypress-component-testing.md b/docs/803-recipe-search-cypress-component-testing.md
@@ -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:
 
@@ -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).
 
@@ -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()`.
 

diff --git a/docs/804-cypress-component-testing-with-harnesses.md b/docs/804-cypress-component-testing-with-harnesses.md
@@ -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
 

diff --git a/tools/sync-testing.sh b/tools/sync-testing.sh
@@ -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 \