feat: minimal app e2e

apps/got-e2e/playwright.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm exec nx serve game-of-thrones',
+    command: 'pnpm exec nx serve got',
     url: 'http://localhost:4200',
     reuseExistingServer: !process.env.CI,
     cwd: workspaceRoot,
@@ -36,15 +36,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     // Uncomment for mobile browsers support
     /* {

apps/got-e2e/project.json

@@ -1,9 +1,9 @@
 {
-  "name": "game-of-thrones-e2e",
+  "name": "got-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/got-e2e/src",
-  "implicitDependencies": ["game-of-thrones"],
-  "// targets": "to see all targets run: nx show project game-of-thrones-e2e --web",
+  "implicitDependencies": ["got"],
+  "// targets": "to see all targets run: nx show project got-e2e --web",
   "targets": {}
 }

apps/got-e2e/src/base.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test('defualt breadcrumbs for books', async ({ page }) => {
+  await page.getByText('Books').click();
+
+  const breadcrumb = page.locator('xng-breadcrumb');
+  await expect(breadcrumb).toContainText('books');
+
+  const breadcrumbList = page.locator('.xng-breadcrumb-list');
+  await expect(breadcrumbList).not.toContainText('/');
+});
+
+test('breadcrumbs for book with id', async ({ page }) => {
+  await page.getByText('Books').click();
+
+  await page.locator('app-books .list-item a').first().click();
+  await expect(page.locator('xng-breadcrumb')).toHaveText('books/1');
+
+  await page.locator('app-book .list-item a').first().click();
+  await expect(page.locator('xng-breadcrumb')).toHaveText('books/1/characters/2');
+});
+
+test('valid path via breadcrumb navigation', async ({ page }) => {
+  await page.getByText('Books').click();
+  await page.locator('app-books .list-item a').first().click();
+  await page.locator('app-book .list-item a').first().click();
+
+  await page.getByRole('link', { name: 'books/1' }).click();
+  await expect(page).toHaveURL('/books/1');
+});

apps/got/jest.config.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 export default {
-  displayName: 'game-of-thrones',
+  displayName: 'got',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/got',

apps/got/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "game-of-thrones",
+  "name": "got",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "app",
@@ -47,18 +47,18 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "game-of-thrones:build:production"
+          "buildTarget": "got:build:production"
         },
         "development": {
-          "buildTarget": "game-of-thrones:build:development"
+          "buildTarget": "got:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "game-of-thrones:build"
+        "buildTarget": "got:build"
       }
     },
     "lint": {

apps/got/src/app/app.component.spec.ts

@@ -14,12 +14,12 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome game-of-thrones');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome got');
   });
 
-  it(`should have as title 'game-of-thrones'`, () => {
+  it(`should have as title 'got'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('game-of-thrones');
+    expect(app.title).toEqual('got');
   });
 });

apps/got/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>game-of-thrones</title>
+    <title>got</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

apps/minimal-e2e/playwright.config.ts

@@ -36,15 +36,15 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     // Uncomment for mobile browsers support
     /* {

apps/minimal-e2e/src/base.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test('toggle breadcrumbs visibility with ngIf', async ({ page }) => {
+  await expect(page.locator('xng-breadcrumb')).toBeHidden();
+  await page.getByRole('button', { name: 'Toggle Breadcrumb Visibility' }).click();
+  await expect(page.locator('xng-breadcrumb').first()).toHaveText('Dashboard');
+  await page.getByRole('button', { name: 'Toggle Breadcrumb Visibility' }).click();
+  await expect(page.locator('xng-breadcrumb')).toBeHidden();
+});
+
+test('show breadcrumbs when routeReuseStrategy is false', async ({ page }) => {
+  await page.getByText('Toggle Breadcrumb Visibility').click();
+  await page.getByRole('link', { name: 'Order Details' }).click();
+
+  const breadcrumbs = page.locator('xng-breadcrumb').first();
+  await expect(breadcrumbs).toHaveText('Companies/Company Name/Orders/Order Details');
+});
+
+test('show breadcrumbs if dynamically set with autoGenerate false', async ({ page }) => {
+  await page.getByText('Toggle Breadcrumb Visibility').click();
+  await page.getByRole('link', { name: 'Order Items' }).click();
+
+  const autoGeneratedBreadcrumbs = page.locator('xng-breadcrumb').first();
+  await expect(autoGeneratedBreadcrumbs).toContainText('Companies/Company Name/Orders/Order Details/items');
+
+  const autoGenerationDisabledBreadcrumbs = page.locator('xng-breadcrumb').nth(1);
+  await expect(autoGenerationDisabledBreadcrumbs).toContainText('Companies/Company Name/Orders/Order Details');
+
+  await page.getByRole('button', { name: 'Set Order Items Label' }).click();
+  await expect(autoGenerationDisabledBreadcrumbs).toContainText('Companies/Company Name/Orders/Order Details/My Order Items');
+});