test: tidy up

Author: yjaaidi

apps/whiskmate/src/app/recipe/recipe-filter-form.ng.ts

@@ -11,12 +11,12 @@ import {
   selector: 'wm-recipe-filter-form',
   imports: [ReactiveFormsModule],
   template: `<form [formGroup]="form">
-      <label>
-        Keywords
-        <input name="keywords" formControlName="keywords" />
-      </label>
-      <button type="submit" (click)="submit()">Search</button>
-    </form>`,
+    <label>
+      Keywords
+      <input name="keywords" formControlName="keywords" />
+    </label>
+    <button type="submit" (click)="submit()">Search</button>
+  </form>`,
 })
 export class RecipeFilterForm {
   filterChange = output<RecipeFilterCriteria>();

apps/whiskmate/src/app/recipe/recipe-search.browser.spec.ts

@@ -0,0 +1,78 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
+import type { Recipe } from './recipe';
+import {
+  provideRecipeRepositoryFake,
+  RecipeRepositoryFake,
+} from './recipe-repository/recipe-repository.fake';
+import { RecipeSearch } from './recipe-search.ng';
+import { recipeMother } from './recipe.mother';
+
+describe(RecipeSearch.name, () => {
+  it('shows prompt before search', async () => {
+    const burger = recipeMother.withBasicInfo('Burger').build();
+    const salad = recipeMother.withBasicInfo('Salad').build();
+
+    const { recipeNames, keywordsInput, searchButton } =
+      await setUpRecipeSearch([burger, salad]);
+
+    await expect.element(keywordsInput).toBeVisible();
+    await expect.element(searchButton).toBeVisible();
+    await expect.element(recipeNames).not.toBeInTheDocument();
+  });
+
+  it('displays results after search', async () => {
+    const burger = recipeMother.withBasicInfo('Burger').build();
+    const salad = recipeMother.withBasicInfo('Salad').build();
+
+    const { keywordsInput, searchButton } = await setUpRecipeSearch([
+      burger,
+      salad,
+    ]);
+
+    await keywordsInput.fill('');
+    await searchButton.click();
+
+    await expect
+      .element(page.getByTestId('recipe-name').filter({ hasText: 'Burger' }))
+      .toBeVisible();
+    await expect
+      .element(page.getByTestId('recipe-name').filter({ hasText: 'Salad' }))
+      .toBeVisible();
+  });
+
+  it('shows empty state when no matches', async () => {
+    const burger = recipeMother.withBasicInfo('Burger').build();
+
+    const { keywordsInput, searchButton, emptyState } = await setUpRecipeSearch(
+      [burger],
+    );
+
+    await keywordsInput.fill('xyz');
+    await searchButton.click();
+
+    await expect.element(emptyState).toHaveTextContent(/no recipes found/i);
+  });
+});
+
+async function setUpRecipeSearch(recipes: Recipe[]) {
+  TestBed.resetTestingModule();
+
+  await TestBed.configureTestingModule({
+    imports: [RecipeSearch],
+    providers: [provideRecipeRepositoryFake()],
+  }).compileComponents();
+
+  const repository = TestBed.inject(RecipeRepositoryFake);
+  repository.configure({ recipes });
+
+  TestBed.createComponent(RecipeSearch);
+
+  return {
+    recipeNames: page.getByTestId('recipe-name'),
+    emptyState: page.getByTestId('empty-state'),
+    keywordsInput: page.getByLabelText('Keywords'),
+    searchButton: page.getByRole('button', { name: 'Search' }),
+  };
+}

apps/whiskmate/src/app/recipe/recipe-search.ng.ts

@@ -1,20 +1,18 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  computed,
   inject,
   signal,
 } from '@angular/core';
-import { rxResource, toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { of, switchMap } from 'rxjs';
+import { rxResource } from '@angular/core/rxjs-interop';
 import { Catalog } from '../shared/catalog.ng';
 import {
   createDefaultRecipeFilterCriteria,
   type RecipeFilterCriteria,
 } from './recipe-filter-criteria';
 import { RecipeFilterForm } from './recipe-filter-form.ng';
-import { RecipeRepository } from './recipe-repository/recipe-repository';
 import { RecipePreview } from './recipe-preview.ng';
+import { RecipeRepository } from './recipe-repository/recipe-repository';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,