test: ✅ add keyword filtering browser test

yjaaidi · yjaaidi · commit 5e554ae80c50 · 2025-11-03T15:18:31.000+01:00
diff --git a/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/501-recipe-preview-ct-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/501-recipe-preview-ct-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/501-recipe-preview-ct-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/501-recipe-preview-ct-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/502-recipe-filter-ct-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/502-recipe-filter-ct-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/502-recipe-filter-ct-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/502-recipe-filter-ct-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/503-recipe-search-ct-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/503-recipe-search-ct-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/503-recipe-search-ct-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/503-recipe-search-ct-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/601-testronaut-solution/src/app/recipe/recipe-search.browser.spec.ts b/apps/601-testronaut-solution/src/app/recipe/recipe-search.browser.spec.ts
@@ -16,6 +16,16 @@ describe(RecipeSearch.name, () => {
     await expect.element(getRecipeNameEls().nth(1)).toHaveTextContent('Salad');
   });
 
+  it('filters recipes by keywords', async () => {
+    const { getRecipeNameEls, updateFilter } = await mountRecipeSearch();
+
+    await updateFilter({
+      keywords: 'Burg',
+    });
+
+    await expect.element(getRecipeNameEls()).toHaveTextContent('Burger');
+  });
+
   async function mountRecipeSearch() {
     TestBed.configureTestingModule({
       providers: [provideRecipeRepositoryFake()],
@@ -32,6 +42,9 @@ describe(RecipeSearch.name, () => {
       getRecipeNameEls() {
         return page.getByRole('heading');
       },
+      async updateFilter({ keywords }: { keywords: string }) {
+        await page.getByLabelText('Keywords').fill(keywords);
+      },
     };
   }
 });
diff --git a/apps/601-testronaut-starter/src/app/recipe/recipe-search.browser.spec.ts b/apps/601-testronaut-starter/src/app/recipe/recipe-search.browser.spec.ts
