Fix department and employee delete tests

workcontrolgit · workcontrolgit · commit 0885a588e5fa · 2026-02-18T23:18:01.000-05:00
- employee-delete: fix waitForResponse URL filter to be case-insensitive
  (API endpoint is /Employees/ with capital E, not /employees/)
- employee-delete: replace window.confirm() handler with Material dialog
  selector (mat-dialog-actions button) matching ConfirmDialogComponent
- department-crud: remove broken API token usage from afterEach; rewrite
  edit/delete tests to use UI-only flow; fix Material dialog confirm
- department-validation: fix mat-error selector for Angular Material MDC
  (use element type 'mat-error', not class '.mat-error'); fix focus/blur
  pattern to trigger validation; fix whitespace trim test to accept
  navigation-away as success; remove description max length test (no
  description field exists in the API or Angular form)
- department-form.page: remove descriptionInput and fillDescription()
- department-list.page: override searchInput with formControlName=Name
- base-form.page: update validationErrors selector to include
  mat-mdc-form-field-error for Angular Material MDC
- data.fixtures: remove description field from DepartmentData
diff --git a/fixtures/data.fixtures.ts b/fixtures/data.fixtures.ts
@@ -21,7 +21,6 @@ export interface EmployeeData {
 
 export interface DepartmentData {
   name?: string;
-  description?: string;
   location?: string;
   managerId?: number;
 }
@@ -126,7 +125,6 @@ export function createDepartmentData(overrides: DepartmentData = {}): Required<D
   const deptNumber = Math.floor(Math.random() * 1000);
   return {
     name: overrides.name || `Test Department ${deptNumber}`,
-    description: overrides.description || `Test department created for automated testing`,
     location: overrides.location || `Floor ${Math.floor(Math.random() * 10) + 1}`,
     managerId: overrides.managerId || 1,
   };
diff --git a/page-objects/base-form.page.ts b/page-objects/base-form.page.ts
@@ -48,7 +48,7 @@ export class BaseFormPage {
     this.cancelButton = page.locator('button').filter({ hasText: /cancel|back|close/i }).first();
     this.resetButton = page.locator('button').filter({ hasText: /reset|clear/i }).first();
 
-    this.validationErrors = page.locator('.error, .mat-error, .invalid-feedback, [role="alert"]');
+    this.validationErrors = page.locator('mat-error, .mat-error, .mat-mdc-form-field-error, .error, .invalid-feedback, [role="alert"]');
 
     this.dialog = page.locator('mat-dialog, .modal, .dialog, [role="dialog"]');
     this.dialogTitle = page.locator('mat-dialog h2, .modal-title, .dialog-title, h1, h2').first();
diff --git a/page-objects/department-form.page.ts b/page-objects/department-form.page.ts
@@ -9,15 +9,11 @@ import { BaseFormPage } from './base-form.page';
  */
 export class DepartmentFormPage extends BaseFormPage {
   readonly nameInput: Locator;
-  readonly descriptionInput: Locator;
 
   constructor(page: Page) {
     super(page, '/departments');
 
     this.nameInput = page.locator('input[formControlName="name"], input[name*="name"]');
-    this.descriptionInput = page.locator(
-      'textarea[formControlName="description"], textarea[name*="description"], input[formControlName="description"]'
-    );
   }
 
   protected async isFormStillFilled(): Promise<boolean> {
@@ -37,15 +33,9 @@ export class DepartmentFormPage extends BaseFormPage {
     }
   }
 
-  async fillDescription(description: string) {
-    const isVisible = await this.descriptionInput.isVisible({ timeout: 2000 }).catch(() => false);
-    if (isVisible) await this.descriptionInput.fill(description);
-  }
-
   // ── fillForm convenience method ─────────────────────────────────────────
 
-  async fillForm(data: { name: string; description?: string }) {
+  async fillForm(data: { name: string }) {
     await this.fillName(data.name);
-    if (data.description) await this.fillDescription(data.description);
   }
 }
diff --git a/page-objects/department-list.page.ts b/page-objects/department-list.page.ts
@@ -1,14 +1,21 @@
-import { Page } from '@playwright/test';
+import { Page, Locator } from '@playwright/test';
 import { BaseListPage } from './base-list.page';
 
 /**
  * Department List Page Object
  *
  * All shared list behaviour (search, pagination, CRUD buttons, permission checks)
  * comes from BaseListPage.
+ *
+ * Overrides searchInput because the department list uses a mat-autocomplete
+ * bound to formControlName="Name" instead of a plain placeholder/name attribute.
  */
 export class DepartmentListPage extends BaseListPage {
+  override readonly searchInput: Locator;
+
   constructor(page: Page) {
     super(page, '/departments', 'departments');
+    // Department list uses an autocomplete with formControlName="Name"
+    this.searchInput = page.locator('input[formControlName="Name"]');
   }
 }
diff --git a/tests/department-management/department-crud.spec.ts b/tests/department-management/department-crud.spec.ts
@@ -1,7 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { loginAsRole, logout } from '../../fixtures/auth.fixtures';
 import { createDepartmentData } from '../../fixtures/data.fixtures';
-import { createDepartment, deleteDepartment, getTokenForRole } from '../../fixtures/api.fixtures';
 import { DepartmentListPage } from '../../page-objects/department-list.page';
 import { DepartmentFormPage } from '../../page-objects/department-form.page';
 
@@ -17,27 +16,13 @@ import { DepartmentFormPage } from '../../page-objects/department-form.page';
  */
 
 test.describe('Department CRUD', () => {
-  let testDepartmentId: number;
-
   test.beforeEach(async ({ page }) => {
     // Login as Manager (has create/edit permission)
     await loginAsRole(page, 'manager');
     const list = new DepartmentListPage(page);
     await list.goto();
   });
 
-  test.afterEach(async ({ request }) => {
-    // Cleanup: delete test department if it exists
-    if (testDepartmentId) {
-      try {
-        const token = await getTokenForRole(request, 'manager');
-        await deleteDepartment(request, token, testDepartmentId);
-      } catch {
-        // Ignore cleanup errors
-      }
-    }
-  });
-
   test('should display department list', async ({ page }) => {
     const list = new DepartmentListPage(page);
 
@@ -57,10 +42,9 @@ test.describe('Department CRUD', () => {
 
       const departmentData = createDepartmentData({
         name: `TestDept_${Date.now()}`,
-        description: 'Test department for automated testing',
       });
 
-      await form.fillForm({ name: departmentData.name, description: departmentData.description });
+      await form.fillForm({ name: departmentData.name });
       await form.submit();
 
       const result = await form.verifySubmissionSuccess();
@@ -70,104 +54,85 @@ test.describe('Department CRUD', () => {
     }
   });
 
-  test('should edit existing department', async ({ page, request }) => {
+  test('should edit existing department', async ({ page }) => {
     const list = new DepartmentListPage(page);
     const form = new DepartmentFormPage(page);
 
-    // Create a test department via API
-    try {
-      const token = await getTokenForRole(request, 'manager');
-      const departmentData = createDepartmentData({
-        name: `ToEdit_${Date.now()}`,
-        description: 'Department to be edited',
-      });
-
-      const createdDept = await createDepartment(request, token, departmentData);
-      testDepartmentId = createdDept.id || createdDept.departmentId;
-    } catch (error) {
-      console.log('Could not create test department:', error);
+    // Edit the first department in the list (Manager has edit permission)
+    const firstRow = list.getRow(0);
+    if (!(await firstRow.isVisible({ timeout: 3000 }).catch(() => false))) {
       test.skip();
+      return;
     }
 
-    // Reload page to see new department
-    await page.reload();
-    await page.waitForLoadState('networkidle');
-
-    await list.search('ToEdit');
-    const deptRow = list.getRowByText('ToEdit');
+    const editButton = firstRow.locator('button, a').filter({ hasText: /edit|update/i }).first();
+    if (!(await editButton.isVisible({ timeout: 2000 }))) {
+      test.skip();
+      return;
+    }
 
-    if (await deptRow.isVisible({ timeout: 3000 }).catch(() => false)) {
-      // Click edit button (or fall back to row click)
-      const editButton = deptRow.locator('button, a').filter({ hasText: /edit|update/i }).first();
-      if (await editButton.isVisible({ timeout: 2000 })) {
-        await editButton.click();
-        await page.waitForTimeout(1000);
-      } else {
-        await deptRow.click();
-        await page.waitForTimeout(1000);
-      }
+    await editButton.click();
+    await page.waitForTimeout(1000);
 
-      await form.fillDescription('Updated description via E2E test');
-      await form.submit();
+    await form.fillName(`UpdatedDept_${Date.now()}`);
+    await form.submit();
 
-      const result = await form.verifySubmissionSuccess();
-      expect(result.success).toBe(true);
-    } else {
-      test.skip();
-    }
+    const result = await form.verifySubmissionSuccess();
+    expect(result.success).toBe(true);
   });
 
-  test('should delete department', async ({ page, request }) => {
+  test('should delete department', async ({ page }) => {
     const list = new DepartmentListPage(page);
+    const form = new DepartmentFormPage(page);
 
-    // Create a test department via API
-    try {
-      const token = await getTokenForRole(request, 'manager');
-      const departmentData = createDepartmentData({
-        name: `ToDelete_${Date.now()}`,
-        description: 'Department to be deleted',
-      });
-
-      const createdDept = await createDepartment(request, token, departmentData);
-      testDepartmentId = createdDept.id || createdDept.departmentId;
-    } catch (error) {
-      console.log('Could not create test department:', error);
+    if (!(await list.hasCreatePermission())) {
       test.skip();
+      return;
     }
 
-    // Reload page
-    await page.reload();
-    await page.waitForLoadState('networkidle');
-
-    await list.search('ToDelete');
-    const deptRow = list.getRowByText('ToDelete');
+    // Create a department via UI as Manager so we have something to delete
+    const uniqueName = `ToDelete_${Date.now()}`;
+    await list.clickCreate();
+    await form.fillForm({ name: uniqueName });
+    await form.submit();
 
-    if (await deptRow.isVisible({ timeout: 3000 }).catch(() => false)) {
-      const deleteButton = deptRow.locator('button').filter({ hasText: /delete|remove/i }).first();
-
-      if (await deleteButton.isVisible({ timeout: 2000 })) {
-        await deleteButton.click();
-        await page.waitForTimeout(1000);
-
-        // Confirm deletion
-        const confirmButton = page.locator('button').filter({ hasText: /yes|confirm|delete/i });
-        await confirmButton.last().click();
-
-        await page.waitForTimeout(2000);
+    // Switch to HRAdmin — only HRAdmin can delete departments
+    await logout(page);
+    await loginAsRole(page, 'hradmin');
+    await list.goto();
+    await page.waitForLoadState('networkidle');
 
-        const successIndicator = page.locator('mat-snack-bar, .toast, .notification').filter({ hasText: /success|deleted|removed/i });
-        const hasSuccess = await successIndicator.isVisible({ timeout: 3000 }).catch(() => false);
+    // Search using the department list's autocomplete input (formControlName="Name")
+    await list.search(uniqueName);
+    await page.waitForTimeout(1000);
 
-        expect(hasSuccess).toBe(true);
+    const deptRow = list.getRowByText(uniqueName);
+    if (!(await deptRow.isVisible({ timeout: 3000 }).catch(() => false))) {
+      test.skip();
+      return;
+    }
 
-        // Mark as deleted so cleanup doesn't try again
-        testDepartmentId = 0;
-      } else {
-        test.skip();
-      }
-    } else {
+    const deleteButton = deptRow.locator('button').filter({ hasText: /delete|remove/i }).first();
+    if (!(await deleteButton.isVisible({ timeout: 2000 }))) {
       test.skip();
+      return;
     }
+
+    await deleteButton.click();
+
+    // Department uses ConfirmDialogComponent (Angular Material dialog, not window.confirm())
+    // Wait for the dialog to open and click the "Delete" confirm button
+    const dialogConfirm = page.locator('mat-dialog-actions button').filter({ hasText: /Delete/i });
+    await dialogConfirm.waitFor({ state: 'visible', timeout: 5000 });
+    await dialogConfirm.click();
+
+    // Wait for success toaster
+    const successIndicator = page.locator(
+      'mat-snack-bar-container, mat-mdc-snack-bar-container'
+    );
+    await successIndicator.first().waitFor({ state: 'visible', timeout: 8000 });
+    const toastText = await successIndicator.first().textContent();
+    expect(toastText).toMatch(/deleted|removed|success/i);
   });
 
   test('should search departments by name', async ({ page }) => {
@@ -238,7 +203,13 @@ test.describe('Department CRUD', () => {
 
     if (await list.hasCreatePermission()) {
       await list.clickCreate();
-      await form.submit();
+
+      // Touch the name field (focus + blur) to trigger Angular Material validation.
+      // The component's onSubmit() does not call markAllAsTouched(), so errors only
+      // appear after a field has been interacted with and left empty.
+      await form.nameInput.focus();
+      await form.nameInput.blur();
+      await page.waitForTimeout(300);
 
       const errorCount = await form.getValidationErrorCount();
       expect(errorCount).toBeGreaterThan(0);
diff --git a/tests/department-management/department-validation.spec.ts b/tests/department-management/department-validation.spec.ts
diff --git a/tests/employee-management/employee-delete.spec.ts b/tests/employee-management/employee-delete.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -9,15 +9,11 @@ import { BaseFormPage } from './base-form.page';`
`9`	`9`	`*/`
`10`	`10`	`export class DepartmentFormPage extends BaseFormPage {`
`11`	`11`	`readonly nameInput: Locator;`
`12`		`- readonly descriptionInput: Locator;`
`13`	`12`
`14`	`13`	`constructor(page: Page) {`
`15`	`14`	`super(page, '/departments');`
`16`	`15`
`17`	`16`	`this.nameInput = page.locator('input[formControlName="name"], input[name*="name"]');`
`18`		`- this.descriptionInput = page.locator(`
`19`		`- 'textarea[formControlName="description"], textarea[name*="description"], input[formControlName="description"]'`
`20`		`- );`
`21`	`17`	`}`
`22`	`18`
`23`	`19`	`protected async isFormStillFilled(): Promise<boolean> {`
`@@ -37,15 +33,9 @@ export class DepartmentFormPage extends BaseFormPage {`
`37`	`33`	`}`
`38`	`34`	`}`
`39`	`35`
`40`		`- async fillDescription(description: string) {`
`41`		`- const isVisible = await this.descriptionInput.isVisible({ timeout: 2000 }).catch(() => false);`
`42`		`- if (isVisible) await this.descriptionInput.fill(description);`
`43`		`- }`
`44`		`-`
`45`	`36`	`// ── fillForm convenience method ─────────────────────────────────────────`
`46`	`37`
`47`		`- async fillForm(data: { name: string; description?: string }) {`
	`38`	`+ async fillForm(data: { name: string }) {`
`48`	`39`	`await this.fillName(data.name);`
`49`		`- if (data.description) await this.fillDescription(data.description);`
`50`	`40`	`}`
`51`	`41`	`}`