Fix salary-range tests to match Angular source

- salary-range-form.page.ts: rename titleInput to nameInput (form uses
  formControlName="name" not "title"); fix selectors for all inputs
- data.fixtures.ts: rename SalaryRangeData.title to name; remove currency
  field (form has no currency input); update createSalaryRangeData()
- salary-range-crud.spec.ts: add name to fillForm() calls; rewrite RBAC
  test (Manager CAN create/edit, only HRAdmin can delete per appHasRole
  directives); fix delete to use ConfirmDialogComponent Material dialog
  with waitForResponse; fix search to use range name not currency value
- salary-range-validation.spec.ts: use mat-error element selector (not
  .mat-error class); use focus+blur pattern (no markAllAsTouched on
  submit); fix zero-salary test (Validators.min(0) makes 0 valid);
  replace "reject zero" test with "accept zero as valid"; add name
  maxLength test; fix negative value error text match

Author: workcontrolgit

fixtures/data.fixtures.ts

@@ -33,10 +33,9 @@ export interface PositionData {
 }
 
 export interface SalaryRangeData {
-  title?: string;
+  name?: string;
   minSalary?: number;
   maxSalary?: number;
-  currency?: string;
 }
 
 /**
@@ -174,10 +173,9 @@ export function createSalaryRangeData(overrides: SalaryRangeData = {}): Required
   const baseMax = overrides.maxSalary || baseMin + 30000;
 
   return {
-    title: overrides.title || `Test Salary Range ${rangeNumber}`,
+    name: overrides.name || `Test Salary Range ${rangeNumber}`,
     minSalary: baseMin,
     maxSalary: baseMax,
-    currency: overrides.currency || 'USD',
   };
 }
 

page-objects/salary-range-form.page.ts

@@ -4,39 +4,37 @@ import { BaseFormPage } from './base-form.page';
 /**
  * Salary Range Form Page Object
  *
- * Covers the create/edit salary range form (HRAdmin only).
- * Shared behaviour (submit, cancel, validation, success) comes from BaseFormPage.
+ * Angular source facts:
+ * - Form fields: name (required, maxLength(100)), minSalary (required, min(0)), maxSalary (required, min(0))
+ * - Custom validator: minSalary must be less than maxSalary (shows when form.touched)
+ * - No currency field in the form — currency is not part of the form
+ * - Submit button is NOT disabled by validation (no [disabled]="salaryRangeForm.invalid")
+ * - onSubmit() does NOT call markAllAsTouched() — errors only appear after focus+blur
  */
 export class SalaryRangeFormPage extends BaseFormPage {
-  readonly titleInput: Locator;
+  readonly nameInput: Locator;
   readonly minSalaryInput: Locator;
   readonly maxSalaryInput: Locator;
 
   constructor(page: Page) {
     super(page, '/salary-ranges');
 
-    this.titleInput = page.locator('input[formControlName="title"], input[name*="title"]');
-    this.minSalaryInput = page.locator(
-      'input[formControlName="minSalary"], input[name*="minSalary"], input[name*="min"]'
-    );
-    this.maxSalaryInput = page.locator(
-      'input[formControlName="maxSalary"], input[name*="maxSalary"], input[name*="max"]'
-    );
+    this.nameInput = page.locator('input[formControlName="name"]');
+    this.minSalaryInput = page.locator('input[formControlName="minSalary"]');
+    this.maxSalaryInput = page.locator('input[formControlName="maxSalary"]');
   }
 
   protected async isFormStillFilled(): Promise<boolean> {
-    const titleValue = await this.titleInput.inputValue().catch(() => '');
-    if (titleValue.length > 0) return true;
-    // Fall back to checking min salary (salary range may not have a title field)
+    const nameValue = await this.nameInput.inputValue().catch(() => '');
+    if (nameValue.length > 0) return true;
     const minValue = await this.minSalaryInput.inputValue().catch(() => '');
     return minValue.length > 0;
   }
 
   // ── Field fill methods ──────────────────────────────────────────────────
 
-  async fillTitle(title: string) {
-    const isVisible = await this.titleInput.isVisible({ timeout: 2000 }).catch(() => false);
-    if (isVisible) await this.titleInput.fill(title);
+  async fillName(name: string) {
+    await this.nameInput.fill(name);
   }
 
   async fillMinSalary(amount: number | string) {
@@ -49,8 +47,8 @@ export class SalaryRangeFormPage extends BaseFormPage {
 
   // ── fillForm convenience method ─────────────────────────────────────────
 
-  async fillForm(data: { title?: string; minSalary?: number; maxSalary?: number }) {
-    if (data.title) await this.fillTitle(data.title);
+  async fillForm(data: { name?: string; minSalary?: number; maxSalary?: number }) {
+    if (data.name) await this.fillName(data.name);
     if (data.minSalary !== undefined) await this.fillMinSalary(data.minSalary);
     if (data.maxSalary !== undefined) await this.fillMaxSalary(data.maxSalary);
   }

tests/salary-ranges/salary-range-crud.spec.ts

@@ -7,16 +7,19 @@ import { SalaryRangeFormPage } from '../../page-objects/salary-range-form.page';
 /**
  * Salary Range CRUD Tests
  *
- * Tests for salary range management operations:
- * - List salary ranges
- * - Create salary range (HRAdmin)
- * - Edit salary range
- * - Delete salary range
+ * Angular source facts:
+ * - Create/Edit buttons: *appHasRole="['HRAdmin', 'Manager']" — both roles can create/edit
+ * - Delete button: *appHasRole="['HRAdmin']" — only HRAdmin can delete
+ * - Form fields: name (required), minSalary (required, min(0)), maxSalary (required, min(0))
+ * - Delete uses ConfirmDialogComponent (Material dialog) — NOT window.confirm()
+ * - Delete API endpoint: /SalaryRanges/{id} — use case-insensitive URL match
+ * - Salary values displayed as currency: $50,000 (not raw number)
+ * - No route guard on /salary-ranges list (both Manager and Employee can view)
+ * - Route guard (hrAdminGuard or managerGuard) on create/edit — need to confirm
  */
 
 test.describe('Salary Range CRUD', () => {
   test.beforeEach(async ({ page }) => {
-    // Login as HRAdmin (likely required for salary ranges)
     await loginAsRole(page, 'hradmin');
     const list = new SalaryRangeListPage(page);
     await list.goto();
@@ -40,12 +43,16 @@ test.describe('Salary Range CRUD', () => {
       await list.clickCreate();
 
       const salaryData = createSalaryRangeData({
+        name: `TestRange_${Date.now()}`,
         minSalary: 50000,
         maxSalary: 80000,
-        currency: 'USD',
       });
 
-      await form.fillForm({ minSalary: salaryData.minSalary, maxSalary: salaryData.maxSalary });
+      await form.fillForm({
+        name: salaryData.name,
+        minSalary: salaryData.minSalary,
+        maxSalary: salaryData.maxSalary,
+      });
       await form.submit();
 
       const result = await form.verifySubmissionSuccess();
@@ -62,17 +69,16 @@ test.describe('Salary Range CRUD', () => {
     const firstRange = list.getRow(0);
 
     if (await firstRange.isVisible({ timeout: 3000 })) {
-      // Click edit button (or fall back to row click)
-      const editButton = firstRange.locator('button, a').filter({ hasText: /edit|update/i }).first();
-      if (await editButton.isVisible({ timeout: 2000 })) {
-        await editButton.click();
-        await page.waitForTimeout(1000);
-      } else {
-        await firstRange.click();
-        await page.waitForTimeout(1000);
+      const editButton = firstRange.locator('button').filter({ hasText: /edit/i }).first();
+      if (!(await editButton.isVisible({ timeout: 2000 }))) {
+        test.skip();
+        return;
       }
 
-      if (await form.maxSalaryInput.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await editButton.click();
+      await page.waitForTimeout(1000);
+
+      if (await form.maxSalaryInput.isVisible({ timeout: 3000 }).catch(() => false)) {
         await form.fillMaxSalary(100000);
       }
 
@@ -89,63 +95,70 @@ test.describe('Salary Range CRUD', () => {
     const list = new SalaryRangeListPage(page);
     const form = new SalaryRangeFormPage(page);
 
-    // First create a test salary range to delete
-    if (await list.hasCreatePermission()) {
-      await list.clickCreate();
-
-      const salaryData = createSalaryRangeData({
-        minSalary: 30000,
-        maxSalary: 45000,
-      });
-
-      await form.fillForm({ minSalary: salaryData.minSalary, maxSalary: salaryData.maxSalary });
-      await form.submit();
-
-      await page.waitForTimeout(2000);
+    if (!(await list.hasCreatePermission())) {
+      test.skip();
+      return;
+    }
 
-      // Navigate back to list
-      await list.goto();
+    // Create a salary range to delete
+    const uniqueName = `ToDelete_${Date.now()}`;
+    await list.clickCreate();
+    await form.fillForm({ name: uniqueName, minSalary: 30000, maxSalary: 45000 });
+    await form.submit();
+    await page.waitForTimeout(2000);
 
-      // Find the salary range row (look for the max value)
-      const rangeRow = list.getRowByText('45000');
+    // Navigate back to list
+    await list.goto();
+    await page.waitForLoadState('networkidle');
 
-      if (await rangeRow.isVisible({ timeout: 3000 }).catch(() => false)) {
-        const deleteButton = rangeRow.locator('button').filter({ hasText: /delete|remove/i }).first();
+    // Find the row by unique name
+    const rangeRow = list.getRowByText('ToDelete');
+    if (!(await rangeRow.isVisible({ timeout: 3000 }).catch(() => false))) {
+      test.skip();
+      return;
+    }
 
-        if (await deleteButton.isVisible({ timeout: 2000 })) {
-          await deleteButton.click();
-          await page.waitForTimeout(1000);
+    const deleteButton = rangeRow.locator('button').filter({ hasText: /delete/i }).first();
+    if (!(await deleteButton.isVisible({ timeout: 2000 }))) {
+      test.skip();
+      return;
+    }
 
-          // Confirm deletion
-          const confirmButton = page.locator('button').filter({ hasText: /yes|confirm|delete/i });
-          await confirmButton.last().click();
+    await deleteButton.click();
 
-          await page.waitForTimeout(2000);
+    // Salary range delete uses ConfirmDialogComponent (Angular Material dialog)
+    const dialogConfirm = page.locator('mat-dialog-actions button').filter({ hasText: /Delete/i });
+    await dialogConfirm.waitFor({ state: 'visible', timeout: 5000 });
 
-          const successIndicator = page.locator('mat-snack-bar, .toast, .notification').filter({ hasText: /success|deleted|removed/i });
-          const hasSuccess = await successIndicator.isVisible({ timeout: 3000 }).catch(() => false);
+    const [deleteResponse] = await Promise.all([
+      page.waitForResponse(
+        resp => resp.url().toLowerCase().includes('/salaryranges/') && resp.request().method() === 'DELETE',
+        { timeout: 10000 }
+      ),
+      dialogConfirm.click(),
+    ]);
 
-          expect(hasSuccess).toBe(true);
-        } else {
-          test.skip();
-        }
-      } else {
-        test.skip();
-      }
-    } else {
-      test.skip();
-    }
+    expect(deleteResponse.status()).toBe(200);
   });
 
   test('should search salary ranges', async ({ page }) => {
     const list = new SalaryRangeListPage(page);
 
     if (await list.searchInput.isVisible({ timeout: 2000 })) {
-      await list.search('50000');
+      // Get the name from the first row (1st column is Range Name)
+      const firstRow = list.getRow(0);
+      const firstCellText = (await firstRow.locator('td, mat-cell').first().textContent() || '').trim();
+
+      if (!firstCellText) {
+        test.skip();
+        return;
+      }
+
+      await list.search(firstCellText);
+      await page.waitForTimeout(1000);
 
       const rowCount = await list.getRowCount();
-      // Either has results or shows empty state
-      expect(rowCount).toBeGreaterThanOrEqual(0);
+      expect(rowCount).toBeGreaterThanOrEqual(1);
     } else {
       test.skip();
     }
@@ -159,10 +172,7 @@ test.describe('Salary Range CRUD', () => {
     if (await firstRow.isVisible({ timeout: 3000 })) {
       const rowText = await firstRow.textContent();
 
-      // Should contain salary values (with or without currency symbol)
-      expect(rowText).toMatch(/\d{2,}/); // At least 2 digits for salary
-
-      // May contain currency symbols or separators
+      // Salary values are displayed as $50,000 currency format
       const hasCurrencyFormat = /[$€£¥]|\d{1,3}(,\d{3})*/.test(rowText || '');
       expect(hasCurrencyFormat).toBe(true);
     } else {
@@ -177,36 +187,33 @@ test.describe('Salary Range CRUD', () => {
     const columnHeaders = page.locator('th, mat-header-cell').filter({ hasText: /min|max|salary/i });
 
     if (await columnHeaders.first().isVisible({ timeout: 2000 })) {
-      // Get initial order
       const firstRow = list.getRow(0);
       const initialFirstValue = await firstRow.textContent();
 
-      // Click to sort
       await columnHeaders.first().click();
       await page.waitForTimeout(1000);
 
-      // Get new order
       const newFirstValue = await list.getRow(0).textContent();
 
-      // Values might have changed (sorted) — basic check that values exist
       expect(initialFirstValue).toBeTruthy();
       expect(newFirstValue).toBeTruthy();
     } else {
       test.skip();
     }
   });
 
-  test('should not allow non-HRAdmin to create salary range', async ({ page }) => {
+  test('should show Create and Edit buttons for Manager (not Delete)', async ({ page }) => {
+    // Manager can create and edit salary ranges but NOT delete
     await logout(page);
     await loginAsRole(page, 'manager');
 
     const list = new SalaryRangeListPage(page);
     await list.goto();
 
     const canCreate = await list.hasCreatePermission();
-    const accessDenied = await page.locator('text=/access.*denied|forbidden|unauthorized/i').isVisible({ timeout: 2000 }).catch(() => false);
-    const noTable = !(await list.table.isVisible({ timeout: 2000 }).catch(() => true));
+    const canDelete = await list.hasDeletePermission();
 
-    expect(!canCreate || accessDenied || noTable).toBe(true);
+    expect(canCreate).toBe(true);   // Manager CAN create (appHasRole=['HRAdmin','Manager'])
+    expect(canDelete).toBe(false);  // Manager CANNOT delete (appHasRole=['HRAdmin'])
   });
 });