@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/e2e/crudforge.iam-live.yml

@@ -0,0 +1,124 @@
+project:
+  name: CRUDForge IAM Live
+  description: Generated Fuse app for live Keycloak QA (useMockAuth false)
+
+output:
+  # Overridden by scripts/e2e-prepare*.js → $CRUDFORGE_TESTING_AREA/crudforge-app
+  directory: "./e2e/.app"
+  structure: "entity-folder"
+  overwritePolicy: "overwrite"
+  embedConfig: true
+  teamPack:
+    enabled: true
+
+validation: true
+
+fuse:
+  enabled: true
+  cleanLayout: true
+  includePrebuilt: false
+  folderType: ""
+  theme:
+    scheme: "light"
+    primary: "#0D1E3A"
+    error: "#b91c1c"
+
+ui:
+  framework: "material"
+  viewMode: "table"
+  formMode: "sidebar"
+  searchMode: "field"
+
+api:
+  baseUrl: "/api"
+  microservice: "book-service"
+  endpointStyle: "kebab-plural"
+  dateLibrary: "dayjs"
+  responseType: "http-response"
+
+mock:
+  enabled: true
+  recordsPerEntity: 12
+
+# Real Keycloak Admin Service (middleware) — keep in sync with test-run.sh + e2e-prepare-iam-live.js
+# Docs: http://62.84.188.166:31740/  (do not point proxies at Keycloak :30080)
+auth:
+  provider: keycloak
+  # Gateway for OIDC token via middleware /realms proxy (not native Keycloak :30080).
+  serverUrl: http://62.84.188.166:31740
+  realm: CRUD-FORDGE
+  clientId: crudforge-client-QA
+  issuerUrl: ""
+  tokenUrl: ""
+  adminBaseUrl: ""
+  useMockAuth: false
+  forwardedProto: https
+  # Prefills the Angular sign-in form (same as KEYCLOAK_ADMIN_* / operator).
+  signInPrefill:
+    username: crud
+    password: crud
+  adminRoles:
+    - ROLE_ADMIN
+    - ADMIN
+    - ROLE_SUPER_ADMIN
+  # Stay signed in by default; enable disabled-account overlay for live QA.
+  session:
+    idleTimeoutMs: 0
+    persistAcrossReload: true
+    crossTabSync: true
+    refreshOnFocus: true
+    statusProbeIntervalMs: 60000
+  disabledAccount:
+    enabled: true
+    countdownSeconds: 20
+    message: "Your account has been disabled. Please contact your administrator."
+    sound: false
+  provision:
+    enabled: true
+    adapter: admin-service
+    adminServiceUrl: http://62.84.188.166:31740/
+    # Resolve to crud / crud via test-run.sh pin + .env.qa
+    adminUsernameEnv: KEYCLOAK_ADMIN_USERNAME
+    adminPasswordEnv: KEYCLOAK_ADMIN_PASSWORD
+    tokenClientId: admin-cli
+    clientId: crudforge-client-QA
+    clientName: CRUDForge Client QA
+    publicClient: true
+    directAccessGrantsEnabled: true
+    redirectUris:
+      - http://127.0.0.1:4202/*
+      - http://localhost:4202/*
+    webOrigins:
+      - http://127.0.0.1:4202
+      - http://localhost:4202
+      - "+"
+    roles:
+      - ROLE_ADMIN
+      - ROLE_CRUDFORGE_QA_USER
+    users:
+      - username: crudforge-qa-admin
+        passwordEnv: CRUDFORGE_QA_ADMIN_PASSWORD
+        email: crudforge-qa-admin@example.com
+        firstName: QA
+        lastName: Admin
+        enabled: true
+        temporaryPassword: false
+        roles:
+          - ROLE_ADMIN
+      - username: crudforge-qa-user
+        passwordEnv: CRUDFORGE_QA_USER_PASSWORD
+        email: crudforge-qa-user@example.com
+        firstName: QA
+        lastName: User
+        enabled: true
+        temporaryPassword: false
+        roles:
+          - ROLE_CRUDFORGE_QA_USER
+    resetExistingPasswords: false
+    stateFile: ".crudforge/provision-state.json"
+
+iam:
+  enabled: true
+
+proxy:
+  write: both

package/e2e/crudforge.iam.yml

@@ -0,0 +1,62 @@
+project:
+  name: CRUDForge IAM E2E
+  description: Generated Fuse app used to QA the Keycloak auth + IAM pack
+
+output:
+  # Overridden by scripts/e2e-prepare*.js → $CRUDFORGE_TESTING_AREA/crudforge-app
+  directory: "./e2e/.app"
+  structure: "entity-folder"
+  overwritePolicy: "overwrite"
+  embedConfig: true
+  teamPack:
+    enabled: true
+
+validation: true
+
+fuse:
+  enabled: true
+  cleanLayout: true
+  includePrebuilt: false
+  folderType: ""
+  theme:
+    scheme: "light"
+    primary: "#0f766e"
+    error: "#b91c1c"
+
+ui:
+  framework: "material"
+  viewMode: "table"
+  formMode: "sidebar"
+  searchMode: "field"
+  snackbarPositionTop: false
+
+api:
+  baseUrl: "/api"
+  microservice: "book-service"
+  endpointStyle: "kebab-plural"
+  dateLibrary: "dayjs"
+  responseType: "http-response"
+
+mock:
+  enabled: true
+  recordsPerEntity: 12
+
+auth:
+  provider: keycloak
+  realm: crudforge
+  clientId: crudforge-admin
+  adminBaseUrl: /auth
+  useMockAuth: true
+  adminRoles:
+    - ROLE_ADMIN
+    - ADMIN
+    - ROLE_SUPER_ADMIN
+
+iam:
+  enabled: true
+  users: true
+  roles: true
+  rolePermissions: true
+  userAccess: true
+  userPermissions: true
+  inheritance: true

package/e2e/tests/field-profile.spec.js

@@ -0,0 +1,152 @@
+const { test, expect } = require('@playwright/test');
+
+// This suite uses a fresh PMB-preset app with Province code=uppercase/name=lowercase.
+// Every authentication/API request is intercepted: no real credentials or backend writes.
+async function setup(page, testInfo) {
+  const diagnostics = [];
+  testInfo.browserDiagnostics = diagnostics;
+  page.on('pageerror', error => diagnostics.push({type:'pageerror',message:error.message,stack:error.stack}));
+  page.on('console', message => { if(message.type()==='error') diagnostics.push({type:'console',message:message.text(),location:message.location()}); });
+  let username = 'alice';
+  const profiles = {
+    alice: {sub:'alice-id',name:'Alice Example',email:'alice@example.test',preferred_username:'alice',picture:'/test-avatar.svg'},
+    bob: {sub:'bob-id',preferred_username:'bob',email:'bob@example.test'},
+  };
+  let payload;
+  const requests = [];
+  const row={id:1,index:'Keep This',provinceCode:'ab',provinceName:'Mixed Name',isActive:true,createdBy:'audit-user',createdDate:'2026-01-01T00:00:00Z'};
+  let rows = Array.from({length:12},(_,index)=>({...row,id:index+1}));
+  await page.route('**/*', async route => {
+    const request=route.request(), url=new URL(request.url());
+    if(url.pathname.endsWith('/token')) {
+      const params=new URLSearchParams(request.postData());
+      username=params.get('username') || username;
+      const claims={...profiles[username],exp:Math.floor(Date.now()/1000)+3600,realm_access:{roles:['ROLE_ADMIN']}};
+      const token='test.'+Buffer.from(JSON.stringify(claims)).toString('base64url')+'.test';
+      return route.fulfill({json:{access_token:token,refresh_token:'test-refresh',expires_in:3600,token_type:'Bearer'}});
+    }
+    if(url.pathname.endsWith('/logout')) return route.fulfill({status:204});
+    if(url.pathname==='/test-avatar.svg') return route.fulfill({contentType:'image/svg+xml',body:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="blue"/></svg>'});
+    if(url.pathname.includes('/services/keycloak-admin/')) return route.fulfill({json:{id:profiles[username].sub,attributes:{province:['VIEW','CREATE','UPDATE']}}});
+    if(url.pathname.includes('/services/pmb-reference-module/api/provinces')) {
+      requests.push({method:request.method(),path:url.pathname,params:Object.fromEntries(url.searchParams)});
+      if(request.method()==='POST') {payload=request.postDataJSON();const created={...payload,id:rows.length+1};rows.push(created);return route.fulfill({json:created});}
+      if(request.method()==='PUT') {payload=request.postDataJSON();rows=rows.map(row=>row.id===payload.id?payload:row);return route.fulfill({json:payload});}
+      if(request.method()==='DELETE') {rows=rows.filter(row=>row.id!==Number(url.pathname.split('/').pop()));return route.fulfill({status:204});}
+      const pageIndex=Number(url.searchParams.get('page')||0),size=Number(url.searchParams.get('size')||10);
+      return route.fulfill({headers:{'X-Total-Count':String(rows.length)},json:/\/provinces\/\d+$/.test(url.pathname)?rows.find(row=>row.id===Number(url.pathname.split('/').pop())):rows.slice(pageIndex*size,(pageIndex+1)*size)});
+    }
+    if(url.pathname.startsWith('/services/') || url.pathname.startsWith('/realms/')) return route.fulfill({status:404,json:{message:'Unmocked test endpoint'}});
+    if(url.hostname!=='127.0.0.1' && url.hostname!=='localhost') return route.abort();
+    return route.continue();
+  });
+  async function login(name='alice') {
+    await page.goto('/auth/sign-in');
+    await page.waitForFunction(() => { const element = document.querySelector('auth-sign-in'); return !!element && !!window.ng?.getComponent(element); });
+    await page.getByLabel('Username or email').fill(name);
+    await page.getByLabel('Password', {exact:true}).fill('test-only');
+    await page.getByRole('button',{name:'Sign in',exact:true}).click();
+    await expect(page.locator('user').first()).toContainText(name==='alice'?'Alice Example':'bob');
+  }
+  return { login, requests, payload:()=>payload, async verifyDiagnostics() {
+    await testInfo.attach('browser-diagnostics.json',{body:JSON.stringify(diagnostics,null,2),contentType:'application/json'});
+    expect(diagnostics).toEqual([]);
+  }};
+}
+
+test('authenticated identity survives refresh and clears when switching accounts',async({page},testInfo)=>{
+  const app=await setup(page,testInfo);
+  await app.login();
+  const user=page.locator('user').first();
+  await expect(user).toContainText('alice@example.test');
+  await expect(user.locator('img')).toHaveAttribute('src','/test-avatar.svg');
+  await user.locator('button').first().click();
+  await expect(page.getByRole('menu')).toContainText('Alice Example');
+  await page.keyboard.press('Escape');
+  await page.reload();
+  await expect(user).toContainText('Alice Example');
+  await user.locator('button').first().click();
+  await page.getByRole('menuitem',{name:'Sign out',exact:true}).click();
+  await expect(page).toHaveURL(/\/auth\/sign-in/);
+  expect(await page.evaluate(()=>Object.keys(localStorage).filter(key=>/accessToken|refreshToken/.test(key)))).toEqual([]);
+  await app.login('bob');
+  await expect(user).toContainText('bob@example.test');
+  await expect(user).not.toContainText('Alice');
+  await expect(user.locator('[aria-label="User initials"]')).toHaveText('B');
+  await page.reload();
+  await expect(user).toContainText('bob@example.test');
+  await expect(page.locator('body')).not.toContainText('CRUDForge User');
+  await app.verifyDiagnostics();
+});
+
+test('audit inputs are absent and case formatting reaches form values and API payloads',async({page},testInfo)=>{
+  const app=await setup(page,testInfo);await app.login();
+  await page.goto('/admin/province');
+  await expect(page.getByRole('heading',{name:'Province Management'})).toBeVisible();
+  await page.getByRole('button',{name:'Open filters'}).click();
+  const filters=page.locator('app-province-filter');
+  for(const label of ['Created By','Created Date','Last Modified By','Last Modified Date']) await expect(filters).not.toContainText(label);
+  await filters.locator('button').filter({has:page.locator('mat-icon[svgIcon="x"]')}).click();
+  await page.locator('app-province-actions mat-select').click();
+  for(const label of ['Created By','Created Date','Last Modified By','Last Modified Date']) await expect(page.getByRole('option',{name:label,exact:true})).toHaveCount(0);
+  await page.keyboard.press('Escape');
+  await page.getByRole('button',{name:'New',exact:true}).click();
+  const form=page.locator('app-province-form');
+  for(const name of ['createdBy','createdDate','lastModifiedBy','lastModifiedDate']) await expect(form.locator(`[formControlName="${name}"]`)).toHaveCount(0);
+  const code=form.locator('[formControlName="provinceCode"]');
+  await code.pressSequentially('hello world');await expect(code).toHaveValue('HELLO WORLD');
+  await code.evaluate(el=>el.setSelectionRange(5,5));await code.pressSequentially('x');
+  await expect(code).toHaveValue('HELLOX WORLD');expect(await code.evaluate(el=>el.selectionStart)).toBe(6);
+  // Insert text through the browser input pipeline, like a paste into the current selection.
+  await code.selectText();await page.keyboard.insertText('pasted text');await expect(code).toHaveValue('PASTED TEXT');
+  await form.locator('[formControlName="provinceName"]').fill('HELLO WORLD');
+  await form.locator('[formControlName="index"]').fill('Keep Case');
+  await expect(form.locator('[formControlName="provinceName"]')).toHaveValue('hello world');
+  await form.getByRole('button',{name:'Save',exact:true}).click();
+  await expect.poll(()=>app.payload()?.provinceCode).toBe('PASTED TEXT');
+  expect(app.payload().provinceName).toBe('hello world');expect(app.payload().index).toBe('Keep Case');
+  await page.locator('button[matTooltip="Edit Province"]').first().click();
+  await page.getByRole('button',{name:'Confirm',exact:true}).click();
+  await expect(code).toHaveValue('AB');await expect(form.locator('[formControlName="provinceName"]')).toHaveValue('mixed name');
+  await form.getByRole('button',{name:'Save',exact:true}).click();
+  await expect.poll(()=>app.payload()?.provinceCode).toBe('AB');
+  expect(app.payload().createdBy).toBe('audit-user');
+  await app.verifyDiagnostics();
+});
+
+test.afterEach(async ({}, testInfo) => {
+  await testInfo.attach('complete-browser-diagnostics.json', {body:JSON.stringify(testInfo.browserDiagnostics || [],null,2),contentType:'application/json'});
+  if(testInfo.status !== testInfo.expectedStatus) console.log(JSON.stringify(testInfo.browserDiagnostics || [],null,2));
+});
+
+
+test('pagination issues one request, resizing persists, and delete refreshes once', async ({page},testInfo) => {
+  const app=await setup(page,testInfo); await app.login();
+  await page.goto('/admin/province');
+  await expect(page.locator('td.mat-column-provinceCode').first()).toBeVisible();
+  const reads=()=>app.requests.filter(r=>r.method==='GET' && r.path.endsWith('/provinces')).length;
+  const before=reads();
+  await page.getByRole('button',{name:'Next page'}).click();
+  await expect(page.locator('td.mat-column-id').first()).toHaveText('11');
+  expect(reads()-before).toBe(1);
+  expect(app.requests.at(-1).params.size).toBe('10');
+  await page.getByRole('button',{name:'Previous page'}).click();
+  await expect(page.locator('td.mat-column-id').first()).toHaveText('1');
+  const header=page.locator('th.mat-column-provinceCode');
+  const handle=header.locator('.resize-handle');
+  const bounds=await handle.boundingBox();const original=(await header.boundingBox()).width;
+  await page.mouse.move(bounds.x+bounds.width/2,bounds.y+bounds.height/2);await page.mouse.down();
+  await page.mouse.move(bounds.x+bounds.width/2+70,bounds.y+bounds.height/2);await page.mouse.up();
+  const saved=await page.evaluate(()=>Number(localStorage.getItem('province-provinceCode-width')));
+  expect(saved).toBeGreaterThan(original+40);
+  await page.reload();await expect(header).toBeVisible();
+  expect((await header.boundingBox()).width).toBeCloseTo(saved,0);
+  await page.locator('button[matTooltip="Delete Province"]').first().click();
+  const dialog=page.getByRole('dialog');await expect(dialog).toBeVisible();
+  await dialog.locator('input').fill('1');
+  const prior=reads();await dialog.getByRole('button',{name:'Confirm',exact:true}).click();
+  await expect(page.locator('td.mat-column-id').first()).toHaveText('2');
+  expect(app.requests.filter(r=>r.method==='DELETE')).toHaveLength(1);
+  expect(reads()-prior).toBe(1);
+  await app.verifyDiagnostics();
+});

package/e2e/tests/generated-crud.spec.js

@@ -0,0 +1,251 @@
+const { test, expect } = require('@playwright/test');
+
+async function signIn(page) {
+  await page.goto('/auth/sign-in');
+  await expect(page.getByText('Sign in', { exact: true }).first()).toBeVisible();
+  const signInButton = page.getByRole('button', { name: 'Sign in' });
+  await expect(signInButton).toBeEnabled();
+  await Promise.all([
+    page.waitForURL(/\/admin(\/|$)/, { timeout: 20_000 }),
+    signInButton.click(),
+  ]);
+}
+
+async function openBooks(page) {
+  await signIn(page);
+  await page.goto('/admin/book');
+  await expect(page.getByRole('heading', { name: /Book Management/i })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Mock title 1', exact: true })).toBeVisible();
+}
+
+async function confirmIfPresent(page) {
+  const confirm = page.getByRole('button', { name: 'Confirm' });
+  if (await confirm.isVisible({ timeout: 2000 }).catch(() => false)) {
+    await confirm.click();
+  }
+}
+
+test.describe('AUTH', () => {
+  test('AUTH-01 Sign in with demo credentials', async ({ page }) => {
+    await signIn(page);
+    await expect(page).toHaveURL(/\/admin/);
+  });
+
+  test('AUTH-02 Sign-in branding and theme button', async ({ page }) => {
+    await page.goto('/auth/sign-in');
+    await expect(page.getByAltText('CRUDForge logo')).toBeVisible();
+    await expect(page.getByText('Welcome to CRUDForge')).toBeVisible();
+    const signInButton = page.getByRole('button', { name: 'Sign in' });
+    await expect(signInButton).toBeVisible();
+    const colorMatch = await signInButton.evaluate((el) => {
+      const background = getComputedStyle(el).backgroundColor;
+      const primary = getComputedStyle(document.documentElement)
+        .getPropertyValue('--theme-color-primary-600')
+        .trim();
+      const ctx = document.createElement('canvas').getContext('2d');
+      ctx.fillStyle = background;
+      const normalizedBackground = ctx.fillStyle;
+      ctx.fillStyle = primary;
+      return {
+        background,
+        primary,
+        matches: normalizedBackground === ctx.fillStyle,
+      };
+    });
+    expect(colorMatch.primary).toBeTruthy();
+    expect(colorMatch.matches, `button ${colorMatch.background} vs theme ${colorMatch.primary}`).toBe(true);
+  });
+});
+
+test.describe('NAV', () => {
+  test('NAV-01 Open Books', async ({ page }) => {
+    await openBooks(page);
+    await expect(page.getByRole('button', { name: 'New' })).toBeVisible();
+  });
+
+  test('NAV-02 Open Authors', async ({ page }) => {
+    await signIn(page);
+    await page.goto('/admin/author');
+    await expect(page.getByRole('heading', { name: /Author Management/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New' })).toBeVisible();
+  });
+});
+
+test.describe('LIST', () => {
+  test('LIST-01 Mock rows render', async ({ page }) => {
+    await openBooks(page);
+    await expect(page.getByText(/Mock title/i).first()).toBeVisible();
+    await expect(page.getByText(/of 12/i)).toBeVisible();
+  });
+
+  test('LIST-02 Pagination', async ({ page }) => {
+    await openBooks(page);
+    const next = page.getByRole('button', { name: /Next page/i });
+    await expect(next).toBeVisible();
+    await next.click();
+    await expect(page.getByText(/11 – 12 of 12|11 - 12 of 12/)).toBeVisible();
+  });
+
+  test('LIST-03 Pin row updates label', async ({ page }) => {
+    await openBooks(page);
+    const pin = page.getByRole('button', { name: 'Pin row' }).first();
+    await pin.click();
+    await expect(page.getByRole('button', { name: 'Unpin row' }).first()).toBeVisible();
+  });
+
+  test('LIST-04 Flag row applies color class', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'Set color flag' }).first().click();
+    await page.getByRole('menuitem', { name: 'Blue' }).click();
+    await expect(page.locator('tr.has-flag').first()).toBeVisible();
+  });
+
+  test('LIST-05 Export menu lists filtered and all', async ({ page }) => {
+    await openBooks(page);
+    await expect(page.getByRole('cell', { name: 'Mock title 1', exact: true })).toBeVisible();
+    const exportButton = page.getByRole('button', { name: 'Export options' });
+    await expect(exportButton).toBeEnabled();
+    await exportButton.click();
+    await expect(page.getByRole('menuitem', { name: 'Export Filtered Data' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Export All Data' })).toBeVisible();
+  });
+});
+
+test.describe('SEARCH', () => {
+  test('SEARCH-01 Field search controls', async ({ page }) => {
+    await openBooks(page);
+    await expect(page.getByPlaceholder('Search…')).toBeVisible();
+    await expect(page.getByRole('combobox').first()).toBeVisible();
+  });
+
+  test('SEARCH-02 Search by title filters mock rows', async ({ page }) => {
+    await openBooks(page);
+    await page.getByPlaceholder('Search…').fill('Mock title 1');
+    await expect(page.getByRole('cell', { name: 'Mock title 1', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Mock title 2', exact: true })).toHaveCount(0);
+    await expect(page.getByText(/of 4/i)).toBeVisible();
+  });
+});
+
+test.describe('FILTER', () => {
+  test('FILTER-01 Open filter drawer', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'Open filters' }).click();
+    await expect(page.getByRole('heading', { name: 'Advanced Filters' })).toBeVisible();
+  });
+
+  test('FILTER-02 Apply title contains filter', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'Open filters' }).click();
+    const titleSection = page.locator('div.rounded-2xl').filter({
+      has: page.getByRole('heading', { name: 'Title', exact: true }),
+    });
+    await titleSection.getByRole('combobox').click();
+    await page.getByRole('option', { name: 'Contains' }).click();
+    await titleSection.getByRole('textbox').fill('Mock title 1');
+    await page.getByRole('button', { name: 'Apply Filters' }).click();
+    await expect(page.getByRole('heading', { name: 'Advanced Filters' })).toBeHidden();
+    await expect(page.getByRole('cell', { name: 'Mock title 1', exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Mock title 2', exact: true })).toHaveCount(0);
+    await expect(page.getByText(/of 4/i)).toBeVisible();
+  });
+});
+
+test.describe('FORM', () => {
+  test('FORM-01 New opens sidebar', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'New' }).click();
+    await expect(page).not.toHaveURL(/\/book\/new$/);
+    const drawer = page.locator('mat-drawer.cforge-form-drawer');
+    await expect(drawer).toBeVisible();
+    await expect(drawer.getByRole('heading', { name: 'New Book' })).toBeVisible();
+  });
+
+  test('FORM-02 Edit opens sidebar', async ({ page }) => {
+    await openBooks(page);
+    await page.locator('button[matTooltip="Edit Book"]').first().click();
+    await confirmIfPresent(page);
+    await expect(page).not.toHaveURL(/\/book\/\d+\/edit$/);
+    const drawer = page.locator('mat-drawer.cforge-form-drawer');
+    await expect(drawer).toBeVisible();
+    await expect(drawer.getByRole('heading', { name: 'Edit Book' })).toBeVisible();
+  });
+
+  test('FORM-03 New validation blocks empty required title', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'New' }).click();
+    const drawer = page.locator('mat-drawer.cforge-form-drawer');
+    await expect(drawer.getByRole('heading', { name: 'New Book' })).toBeVisible();
+    await expect(drawer.getByRole('button', { name: 'Save' })).toBeDisabled();
+  });
+
+  test('FORM-04 New cancel closes drawer', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'New' }).click();
+    const drawer = page.locator('mat-drawer.cforge-form-drawer');
+    await drawer.getByRole('button', { name: 'Cancel' }).click();
+    await expect(drawer).toBeHidden();
+    await expect(page).toHaveURL(/\/admin\/book\/?$/);
+  });
+
+  test('FORM-05 Author new sidebar', async ({ page }) => {
+    await signIn(page);
+    await page.goto('/admin/author');
+    await page.getByRole('button', { name: 'New' }).click();
+    await expect(page).not.toHaveURL(/\/author\/new$/);
+    const drawer = page.locator('mat-drawer.cforge-form-drawer');
+    await expect(drawer).toBeVisible();
+    await expect(drawer.getByRole('heading', { name: 'New Author' })).toBeVisible();
+  });
+});
+
+test.describe('DETAIL', () => {
+  test('DETAIL-01 View details', async ({ page }) => {
+    await openBooks(page);
+    await page.locator('button[matTooltip="View Details"]').first().click();
+    await expect(page).toHaveURL(/\/admin\/book\/\d+\/view/);
+    await expect(page.getByRole('heading', { name: 'Book Details' })).toBeVisible();
+  });
+
+  test('DETAIL-02 Back from detail', async ({ page }) => {
+    await openBooks(page);
+    await page.locator('button[matTooltip="View Details"]').first().click();
+    await page.getByRole('button', { name: 'Back' }).click();
+    await expect(page.getByRole('heading', { name: /Book Management/i })).toBeVisible();
+  });
+});
+
+test.describe('DELETE', () => {
+  test('DELETE-01 Delete confirm cancel keeps row', async ({ page }) => {
+    await openBooks(page);
+    await page.locator('button[matTooltip="Delete Book"]').first().click();
+    await expect(page.getByRole('heading', { name: 'Delete Book' })).toBeVisible();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    await expect(page.getByText('Mock title 1').first()).toBeVisible();
+  });
+});
+
+test.describe('CARD', () => {
+  test('CARD-01 Toggle card view and edit from card', async ({ page }) => {
+    await openBooks(page);
+    await page.getByRole('button', { name: 'Switch to Card View' }).click();
+    await expect(page.getByRole('button', { name: 'Edit' }).first()).toBeVisible();
+    await page.getByRole('button', { name: 'Edit' }).first().click();
+    await confirmIfPresent(page);
+    await expect(page).not.toHaveURL(/\/book\/\d+\/edit$/);
+    await expect(page.locator('mat-drawer.cforge-form-drawer')).toBeVisible();
+  });
+});
+
+test('RELATIONSHIP lazy collection and create dialogs open', async ({ page }) => {
+  await signIn(page);
+  await page.goto('/admin/author');
+  await expect(page.getByRole('heading', { name: 'Author Management' })).toBeVisible();
+  await page.locator('button[matTooltip="Show Book"]').first().click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog.getByRole('heading', { name: 'Book Management' })).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(dialog).toBeHidden();
+  await page.locator('button[matTooltip="Add Book"]').first().click();
+  await expect(page.getByRole('dialog').getByRole('heading', { name: 'New Book for Author' })).toBeVisible();
+});