test: ✅ add first e2e test

Author: yjaaidi

apps/404-recipe-filter-material-starter/e2e/example.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+  await page.getByLabel('keywords').click();
+  await page.getByLabel('keywords').fill('Bur');
+
+  await expect(page.getByRole('heading', { level: 2 })).toHaveText(['Burger']);
+  await expect(page.getByRole('button', { name: 'ADD' })).toBeVisible();
+});

apps/404-recipe-filter-material-starter/e2e/recipe-search.spec.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'npx nx serve 404-recipe-filter-material-starter',
+      command: 'npx nx serve 404-recipe-filter-material-starter -c testing',
       url: 'http://localhost:4200',
       reuseExistingServer: true,
       cwd: workspaceRoot,

apps/404-recipe-filter-material-starter/playwright.config.ts

@@ -45,6 +45,19 @@
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
+        },
+        "testing": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true,
+          "fileReplacements": [
+            {
+              "replace": "{projectRoot}/src/environments/environment.ts",
+              "with": "{projectRoot}/src/environments/environment.testing.ts"
+            }
+          ]
         }
       },
       "defaultConfiguration": "production"
@@ -57,6 +70,9 @@
         },
         "development": {
           "buildTarget": ":build:development"
+        },
+        "testing": {
+          "buildTarget": ":build:testing"
         }
       },
       "defaultConfiguration": "development",

apps/404-recipe-filter-material-starter/project.json

@@ -1,9 +1,29 @@
 import {
   ApplicationConfig,
+  inject,
+  provideAppInitializer,
   provideZonelessChangeDetection,
 } from '@angular/core';
 import { provideHttpClient } from '@angular/common/http';
+import { environment } from '../environments/environment';
+import { provideRecipeRepositoryFake } from './recipe/recipe-repository.fake';
+import { RecipeRepositoryFake } from './recipe/recipe-repository.fake';
+import { recipeMother } from './testing/recipe.mother';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideZonelessChangeDetection()],
+  providers: [
+    provideHttpClient(),
+    provideZonelessChangeDetection(),
+    ...(environment.useFakes
+      ? [
+          provideRecipeRepositoryFake(),
+          provideAppInitializer(() => {
+            inject(RecipeRepositoryFake).setRecipes([
+              recipeMother.withBasicInfo('Burger').build(),
+              recipeMother.withBasicInfo('Salad').build(),
+            ]);
+          }),
+        ]
+      : []),
+  ],
 };

apps/404-recipe-filter-material-starter/src/app/app.config.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  useFakes: false,
 };

apps/404-recipe-filter-material-starter/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  useFakes: true,
+};

apps/404-recipe-filter-material-starter/src/environments/environment.testing.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  useFakes: false,
 };
 
 /*