feat: ✨ add 701-recipe-search-e2e#30
Conversation
823003a to
afd65b1
Compare
There was a problem hiding this comment.
Pull request overview
Adds a new “701” exercise pair (starter + solution) for recipe-search end-to-end testing with Playwright, and wires CI to execute Nx e2e targets.
Changes:
- Added two new Angular apps (
701-e2e-search-recipes-starterand701-e2e-search-recipes-solution) including app code, Vitest/Jest setup, and Playwright configuration. - Added a Playwright e2e spec for recipe search filtering.
- Extended the GitHub Actions test workflow with a dedicated
e2ejob runningnx affected -t e2e.
Reviewed changes
Copilot reviewed 127 out of 131 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/701-e2e-search-recipes-starter/wallaby.js | Wallaby configuration pointing to the app’s Vitest config. |
| apps/701-e2e-search-recipes-starter/vitest.config.mts | Vitest multi-project setup (jsdom + browser mode) for the app. |
| apps/701-e2e-search-recipes-starter/vitest-angular-preset.ts | Shared Vitest/Angular preset with DEBUG_BROWSER tuning. |
| apps/701-e2e-search-recipes-starter/vite.config.mts | Vite config with Analog plugin workaround and Nx TS paths. |
| apps/701-e2e-search-recipes-starter/tsconfig.spec.json | TypeScript config for specs (Vitest globals, bundler resolution). |
| apps/701-e2e-search-recipes-starter/tsconfig.json | Base TS config + project references for the app. |
| apps/701-e2e-search-recipes-starter/tsconfig.editor.json | Editor-focused TS config (types, include/exclude). |
| apps/701-e2e-search-recipes-starter/tsconfig.app.json | App TS config for Angular build input files. |
| apps/701-e2e-search-recipes-starter/src/test-setup.ts | Vitest setup (styles, jest-dom, TestBed setup). |
| apps/701-e2e-search-recipes-starter/src/test-setup-jest.ts | Jest setup (styles, jest-dom, TestBed setup, it.todo shim). |
| apps/701-e2e-search-recipes-starter/src/styles.css | Global styles incl. Angular Material theme import. |
| apps/701-e2e-search-recipes-starter/src/polyfills.ts | Angular polyfills including zone.js import. |
| apps/701-e2e-search-recipes-starter/src/main.ts | Angular bootstrap entrypoint. |
| apps/701-e2e-search-recipes-starter/src/index.html | App shell HTML. |
| apps/701-e2e-search-recipes-starter/src/favicon.ico | App favicon asset. |
| apps/701-e2e-search-recipes-starter/src/environments/environment.ts | Dev environment config. |
| apps/701-e2e-search-recipes-starter/src/environments/environment.prod.ts | Prod environment config. |
| apps/701-e2e-search-recipes-starter/src/assets/.gitkeep | Keeps assets folder in git. |
| apps/701-e2e-search-recipes-starter/src/app/user/sign-in-button.ng.ts | Sign in/out UI component for auth toggling. |
| apps/701-e2e-search-recipes-starter/src/app/user/sign-in-button.browser.spec.ts | Browser-mode test coverage for sign-in button behavior. |
| apps/701-e2e-search-recipes-starter/src/app/user/is-signed-in.guard.ts | Route guard enforcing sign-in and initial redirect behavior. |
| apps/701-e2e-search-recipes-starter/src/app/user/is-signed-in.guard.browser.spec.ts | Browser-mode tests for guard navigation behavior. |
| apps/701-e2e-search-recipes-starter/src/app/user/current-user.ts | Current user signal store + API. |
| apps/701-e2e-search-recipes-starter/src/app/user/auth.ts | Simple auth service to set/clear CurrentUser. |
| apps/701-e2e-search-recipes-starter/src/app/testing/recipe.mother.ts | Test data builder for recipes. |
| apps/701-e2e-search-recipes-starter/src/app/shared/title.ng.ts | Navbar component used as app header/title shell. |
| apps/701-e2e-search-recipes-starter/src/app/shared/local-storage.ts | LocalStorage abstraction token (DI factory to browser localStorage). |
| apps/701-e2e-search-recipes-starter/src/app/shared/local-storage.fake.ts | In-memory LocalStorage fake + provider helper for tests. |
| apps/701-e2e-search-recipes-starter/src/app/shared/catalog.ng.ts | Layout component for recipe card grid. |
| apps/701-e2e-search-recipes-starter/src/app/shared/card.ng.ts | Card UI component (optional image + content slot). |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe.ts | Recipe domain types + create helpers. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe.router-helper.ts | Route helper for recipe search path/url. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.shallow.spec.ts | Shallow (Testing Library) tests for recipe search behavior. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.shallow.browser.spec.ts | Browser shallow test for recipe search rendering. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.ng.ts | Recipe search component using signals + rxResource. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.isolated.spec.ts | Isolated service/component-style test for filtering behavior. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.integration.vitest.spec.ts | Integration tests (Testing Library) compatible w/ Jest+Vitest. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-search.browser.spec.ts | Browser-mode tests for filtering and add-to-meal-plan behavior. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-repository.ts | HttpClient-based recipe repository with local ingredient-count filter. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-repository.fake.ts | Fake recipe repository for tests (filtering logic). |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-preview.ng.ts | Recipe preview component (card + name + content slot). |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-filter.vitest.spec.ts | Unit test for debounce behavior (Vitest timers). |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-filter.ng.ts | Filter form component using Angular signal forms + debounce. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-filter.browser.spec.ts | Browser-mode test for debounce output behavior. |
| apps/701-e2e-search-recipes-starter/src/app/recipe/recipe-filter-criteria.ts | Filter criteria model + defaults. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/recipe-add-button.ng.ts | Add-to-meal-plan button with disabled state computation. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-repository.ts | LocalStorage-backed meal repository implementation. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-repository.spec.ts | MealRepository tests incl. invalid storage value scenario. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-repository.fake.ts | In-memory MealRepository fake + provider helper. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-repository.fake.spec.ts | Contract test coverage for MealRepositoryFake. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-repository.contract.ts | Shared contract test suite for meal repositories. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-planner.ts | Meal planner service (signals) coordinating repository + add logic. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-planner.spec.ts | MealPlanner tests for add/duplicates/repo integration/notifications. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-planner.router-helper.ts | Route helper for meal-plan path/url. |
| apps/701-e2e-search-recipes-starter/src/app/meal-planner/meal-plan.ng.ts | Meal plan component showing saved meals. |
| apps/701-e2e-search-recipes-starter/src/app/app.routes.ts | App routing (search + guarded meal plan + default redirect). |
| apps/701-e2e-search-recipes-starter/src/app/app.ng.ts | Root app component with navbar + links + sign-in button. |
| apps/701-e2e-search-recipes-starter/src/app/app.config.ts | ApplicationConfig providing router. |
| apps/701-e2e-search-recipes-starter/project.json | Nx project configuration for the starter app. |
| apps/701-e2e-search-recipes-starter/playwright.config.ts | Playwright config using Nx preset + webServer integration. |
| apps/701-e2e-search-recipes-starter/jest.config.ts | Jest configuration for the starter app. |
| apps/701-e2e-search-recipes-starter/eslint.config.mjs | Flat ESLint config for the starter app (Angular + Vitest). |
| apps/701-e2e-search-recipes-starter/e2e/recipe-search.spec.ts | Playwright e2e spec for keyword filtering. |
| apps/701-e2e-search-recipes-solution/wallaby.js | Wallaby configuration pointing to the app’s Vitest config. |
| apps/701-e2e-search-recipes-solution/vitest.config.mts | Vitest multi-project setup (jsdom + browser mode) for the app. |
| apps/701-e2e-search-recipes-solution/vitest-angular-preset.ts | Shared Vitest/Angular preset with DEBUG_BROWSER tuning. |
| apps/701-e2e-search-recipes-solution/vite.config.mts | Vite config with Analog plugin workaround and Nx TS paths. |
| apps/701-e2e-search-recipes-solution/tsconfig.spec.json | TypeScript config for specs (Vitest globals, bundler resolution). |
| apps/701-e2e-search-recipes-solution/tsconfig.json | Base TS config + project references for the app. |
| apps/701-e2e-search-recipes-solution/tsconfig.editor.json | Editor-focused TS config (types, include/exclude). |
| apps/701-e2e-search-recipes-solution/tsconfig.app.json | App TS config for Angular build input files. |
| apps/701-e2e-search-recipes-solution/src/test-setup.ts | Vitest setup (styles, jest-dom, TestBed setup). |
| apps/701-e2e-search-recipes-solution/src/test-setup-jest.ts | Jest setup (styles, jest-dom, TestBed setup, it.todo shim). |
| apps/701-e2e-search-recipes-solution/src/styles.css | Global styles incl. Angular Material theme import. |
| apps/701-e2e-search-recipes-solution/src/polyfills.ts | Angular polyfills including zone.js import. |
| apps/701-e2e-search-recipes-solution/src/main.ts | Angular bootstrap entrypoint. |
| apps/701-e2e-search-recipes-solution/src/index.html | App shell HTML. |
| apps/701-e2e-search-recipes-solution/src/favicon.ico | App favicon asset. |
| apps/701-e2e-search-recipes-solution/src/environments/environment.ts | Dev environment config. |
| apps/701-e2e-search-recipes-solution/src/environments/environment.prod.ts | Prod environment config. |
| apps/701-e2e-search-recipes-solution/src/assets/.gitkeep | Keeps assets folder in git. |
| apps/701-e2e-search-recipes-solution/src/app/user/sign-in-button.ng.ts | Sign in/out UI component for auth toggling. |
| apps/701-e2e-search-recipes-solution/src/app/user/sign-in-button.browser.spec.ts | Browser-mode test coverage for sign-in button behavior. |
| apps/701-e2e-search-recipes-solution/src/app/user/is-signed-in.guard.ts | Route guard enforcing sign-in and initial redirect behavior. |
| apps/701-e2e-search-recipes-solution/src/app/user/is-signed-in.guard.browser.spec.ts | Browser-mode tests for guard navigation behavior. |
| apps/701-e2e-search-recipes-solution/src/app/user/current-user.ts | Current user signal store + API. |
| apps/701-e2e-search-recipes-solution/src/app/user/auth.ts | Simple auth service to set/clear CurrentUser. |
| apps/701-e2e-search-recipes-solution/src/app/testing/recipe.mother.ts | Test data builder for recipes. |
| apps/701-e2e-search-recipes-solution/src/app/shared/title.ng.ts | Navbar component used as app header/title shell. |
| apps/701-e2e-search-recipes-solution/src/app/shared/local-storage.ts | LocalStorage abstraction token (DI factory to browser localStorage). |
| apps/701-e2e-search-recipes-solution/src/app/shared/local-storage.fake.ts | In-memory LocalStorage fake + provider helper for tests. |
| apps/701-e2e-search-recipes-solution/src/app/shared/catalog.ng.ts | Layout component for recipe card grid. |
| apps/701-e2e-search-recipes-solution/src/app/shared/card.ng.ts | Card UI component (optional image + content slot). |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe.ts | Recipe domain types + create helpers. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe.router-helper.ts | Route helper for recipe search path/url. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.shallow.spec.ts | Shallow (Testing Library) tests for recipe search behavior. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.shallow.browser.spec.ts | Browser shallow test for recipe search rendering. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.ng.ts | Recipe search component using signals + rxResource. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.isolated.spec.ts | Isolated service/component-style test for filtering behavior. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.integration.vitest.spec.ts | Integration tests (Testing Library) compatible w/ Jest+Vitest. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-search.browser.spec.ts | Browser-mode tests for filtering and add-to-meal-plan behavior. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-repository.ts | HttpClient-based recipe repository with local ingredient-count filter. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-repository.fake.ts | Fake recipe repository for tests (filtering logic). |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-preview.ng.ts | Recipe preview component (card + name + content slot). |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-filter.vitest.spec.ts | Unit test for debounce behavior (Vitest timers). |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-filter.ng.ts | Filter form component using Angular signal forms + debounce. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-filter.browser.spec.ts | Browser-mode test for debounce output behavior. |
| apps/701-e2e-search-recipes-solution/src/app/recipe/recipe-filter-criteria.ts | Filter criteria model + defaults. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/recipe-add-button.ng.ts | Add-to-meal-plan button with disabled state computation. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-repository.ts | LocalStorage-backed meal repository implementation. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-repository.spec.ts | MealRepository tests incl. invalid storage value scenario. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-repository.fake.ts | In-memory MealRepository fake + provider helper. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-repository.fake.spec.ts | Contract test coverage for MealRepositoryFake. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-repository.contract.ts | Shared contract test suite for meal repositories. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-planner.ts | Meal planner service (signals) coordinating repository + add logic. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-planner.spec.ts | MealPlanner tests for add/duplicates/repo integration/notifications. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-planner.router-helper.ts | Route helper for meal-plan path/url. |
| apps/701-e2e-search-recipes-solution/src/app/meal-planner/meal-plan.ng.ts | Meal plan component showing saved meals. |
| apps/701-e2e-search-recipes-solution/src/app/app.routes.ts | App routing (search + guarded meal plan + default redirect). |
| apps/701-e2e-search-recipes-solution/src/app/app.ng.ts | Root app component with navbar + links + sign-in button. |
| apps/701-e2e-search-recipes-solution/src/app/app.config.ts | ApplicationConfig providing router. |
| apps/701-e2e-search-recipes-solution/project.json | Nx project configuration for the solution app. |
| apps/701-e2e-search-recipes-solution/playwright.config.ts | Playwright config using Nx preset + webServer integration. |
| apps/701-e2e-search-recipes-solution/jest.config.ts | Jest configuration for the solution app. |
| apps/701-e2e-search-recipes-solution/eslint.config.mjs | Flat ESLint config for the solution app (Angular + Vitest). |
| apps/701-e2e-search-recipes-solution/e2e/recipe-search.spec.ts | Playwright e2e spec placeholder (currently skipped/WIP). |
| .github/workflows/test.yml | Adds an e2e CI job running Playwright via Nx affected target. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - uses: actions/upload-artifact@v4 | ||
| if: always() | ||
| with: | ||
| name: 🎭 Playwright Report | ||
| path: dist/.playwright | ||
| include-hidden-files: true | ||
| retention-days: 7 |
There was a problem hiding this comment.
The workflow uploads a Playwright report artifact named "🎭 Playwright Report" in both the existing testronaut job and the new e2e job. With actions/upload-artifact@v4, uploading multiple artifacts with the same name in the same workflow run can fail or produce confusing merges. Consider making the artifact name unique per job (e.g., include ${{ github.job }} or suffix with E2E), or explicitly set overwrite/merge behavior if you intend a single combined artifact.
There was a problem hiding this comment.
@copilot apply changes based on this feedback
There was a problem hiding this comment.
Fixed in 288d94e — the two artifact upload steps now use distinct names: 🎭 Playwright Report - Testronaut and 🎭 Playwright Report - E2E.
Agent-Logs-Url: https://github.com/marmicode/pragmatic-angular-testing/sessions/56c9f02a-5086-476b-82b0-0dda7f823586 Co-authored-by: yjaaidi <2674658+yjaaidi@users.noreply.github.com>
Uh oh!
There was an error while loading. Please reload this page.