Migrate Playwright suite to .NET UI tests and deprecate TS project

2026-02-06 18:44:40 -05:00
parent 4e56ea3435
commit 562f7e9e37
105 changed files with 1119 additions and 0 deletions
@@ -0,0 +1,307 @@
+import { test, expect } from '@playwright/test';
+import { login, logout, isLoggedIn } from '../helpers/auth.helper';
+import { navigateToRefreshStatus, clickNavLink } from '../helpers/navigation.helper';
+import { getDataGridRowCount, getBadgeStyle, clickButton, StatusBadgeStyles } from '../helpers/radzen.helper';
+
+test.describe('Refresh Status Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await navigateToRefreshStatus(page);
+  });
+
+  test.describe('Page Load and Display', () => {
+    test('page loads and displays Cache Refresh Status heading', async ({ page }) => {
+      // Verify page title
+      await expect(page).toHaveTitle(/Cache Refresh Status - JDE Scoping Tool/);
+
+      // Verify heading is visible
+      await expect(page.locator('h4:has-text("Cache Refresh Status")')).toBeVisible();
+    });
+
+    test('page shows date filter panel', async ({ page }) => {
+      // Verify filter panel card is visible
+      const filterCard = page.locator('.rz-card').first();
+      await expect(filterCard).toBeVisible();
+    });
+
+    test('page shows data grid component', async ({ page }) => {
+      // Wait for loading to complete and grid to appear
+      await page.waitForTimeout(2000);
+      const dataGrid = page.locator('.rz-data-grid');
+      await expect(dataGrid).toBeVisible({ timeout: 15000 });
+    });
+
+    test('no error notification on page load', async ({ page }) => {
+      const errorNotification = page.locator('.rz-notification-error');
+      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
+    });
+  });
+
+  test.describe('Date Filter Panel', () => {
+    test('start time date picker is visible', async ({ page }) => {
+      await expect(page.locator('text=Start Time')).toBeVisible();
+    });
+
+    test('end time date picker is visible', async ({ page }) => {
+      await expect(page.locator('text=End Time')).toBeVisible();
+    });
+
+    test('filter button is visible', async ({ page }) => {
+      const filterButton = page.locator('button:has-text("Filter")');
+      await expect(filterButton).toBeVisible();
+    });
+
+    test('date pickers have default values (last 7 days)', async ({ page }) => {
+      // The page defaults to last 7 days
+      // Just verify the date pickers are present and functional
+      const datePickers = page.locator('.rz-datepicker');
+      const count = await datePickers.count();
+      expect(count).toBeGreaterThanOrEqual(2);
+    });
+
+    test('clicking filter button triggers data reload', async ({ page }) => {
+      // Wait for initial load
+      await page.waitForTimeout(2000);
+
+      // Click filter button
+      const filterButton = page.locator('button:has-text("Filter")');
+      await filterButton.click();
+
+      // Wait for data to reload
+      await page.waitForTimeout(2000);
+
+      // Verify no error
+      const errorNotification = page.locator('.rz-notification-error');
+      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
+    });
+
+    test('date filtering works with custom date range', async ({ page }) => {
+      // Wait for initial load
+      await page.waitForTimeout(2000);
+
+      // The date pickers should be interactive
+      const startDatePicker = page.locator('.rz-datepicker').first();
+      await expect(startDatePicker).toBeVisible();
+
+      // Click filter to reload with current dates
+      await clickButton(page, 'Filter');
+
+      // Wait for reload
+      await page.waitForTimeout(2000);
+
+      // Verify no error occurred
+      const errorNotification = page.locator('.rz-notification-error');
+      await expect(errorNotification).not.toBeVisible({ timeout: 5000 });
+    });
+  });
+
+  test.describe('Data Grid Columns', () => {
+    test('data grid shows Start column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const startHeader = page.locator('.rz-data-grid th:has-text("Start")');
+      await expect(startHeader).toBeVisible();
+    });
+
+    test('data grid shows End column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const endHeader = page.locator('.rz-data-grid th:has-text("End")');
+      await expect(endHeader).toBeVisible();
+    });
+
+    test('data grid shows Branch column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const branchHeader = page.locator('.rz-data-grid th:has-text("Branch")');
+      await expect(branchHeader).toBeVisible();
+    });
+
+    test('data grid shows Profit Center column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const pcHeader = page.locator('.rz-data-grid th:has-text("Profit Center")');
+      await expect(pcHeader).toBeVisible();
+    });
+
+    test('data grid shows Work Center column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const wcHeader = page.locator('.rz-data-grid th:has-text("Work Center")');
+      await expect(wcHeader).toBeVisible();
+    });
+
+    test('data grid shows Was Successful column', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const successHeader = page.locator('.rz-data-grid th:has-text("Was Successful")');
+      await expect(successHeader).toBeVisible();
+    });
+
+    test('all entity record count columns are present', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const headers = page.locator('.rz-data-grid th');
+      const headerTexts = await headers.allTextContents();
+
+      // Verify key columns exist
+      expect(headerTexts.some(h => h.includes('Branch'))).toBe(true);
+      expect(headerTexts.some(h => h.includes('Profit Center'))).toBe(true);
+      expect(headerTexts.some(h => h.includes('Work Center'))).toBe(true);
+      expect(headerTexts.some(h => h.includes('Item'))).toBe(true);
+      expect(headerTexts.some(h => h.includes('Lot'))).toBe(true);
+      expect(headerTexts.some(h => h.includes('Work Order'))).toBe(true);
+    });
+  });
+
+  test.describe('Success/Failure Badges', () => {
+    test('success badge displays with success style (YES)', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      const yesBadge = page.locator('.rz-data-grid .rz-badge:has-text("YES")').first();
+
+      if (await yesBadge.isVisible({ timeout: 3000 }).catch(() => false)) {
+        const style = await getBadgeStyle(yesBadge);
+        expect(style).toBe('success');
+      }
+    });
+
+    test('failure badge displays with danger style (NO)', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      const noBadge = page.locator('.rz-data-grid .rz-badge:has-text("NO")').first();
+
+      if (await noBadge.isVisible({ timeout: 3000 }).catch(() => false)) {
+        const style = await getBadgeStyle(noBadge);
+        expect(style).toBe('danger');
+      }
+    });
+
+    test('Was Successful column shows badges not text', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const rowCount = await getDataGridRowCount(page);
+
+      if (rowCount > 0) {
+        // The Was Successful column should contain badges
+        const successBadges = page.locator('.rz-data-grid tbody .rz-badge');
+        const badgeCount = await successBadges.count();
+
+        // Should have at least one badge (for each row's Was Successful column)
+        if (rowCount > 0) {
+          expect(badgeCount).toBeGreaterThan(0);
+        }
+      }
+    });
+  });
+
+  test.describe('Data Grid Features', () => {
+    test('data grid supports sorting', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      // Click on Start column header to sort
+      const startHeader = page.locator('.rz-data-grid th:has-text("Start")');
+      await startHeader.click();
+      await page.waitForTimeout(500);
+
+      // Verify no error occurred
+      const errorNotification = page.locator('.rz-notification-error');
+      await expect(errorNotification).not.toBeVisible({ timeout: 2000 });
+    });
+
+    test('data grid supports pagination with 20 items per page', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      // Look for pager component
+      const pager = page.locator('.rz-pager');
+      await expect(pager).toBeVisible({ timeout: 5000 });
+    });
+
+    test('data grid supports column resize', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      // Verify the grid is visible and no errors
+      const dataGrid = page.locator('.rz-data-grid');
+      await expect(dataGrid).toBeVisible();
+
+      const errorNotification = page.locator('.rz-notification-error');
+      await expect(errorNotification).not.toBeVisible({ timeout: 2000 });
+    });
+
+    test('data grid text is center aligned', async ({ page }) => {
+      await page.waitForTimeout(2000);
+
+      // The grid has Style="text-align: center;"
+      const dataGrid = page.locator('.rz-data-grid');
+      const style = await dataGrid.getAttribute('style');
+
+      // Verify text-align center is set
+      if (style) {
+        expect(style.includes('text-align: center') || style.includes('text-align:center')).toBe(true);
+      }
+    });
+  });
+
+  test.describe('Date Formatting', () => {
+    test('start date is formatted correctly (MM/dd/yyyy hh:mm tt)', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const rowCount = await getDataGridRowCount(page);
+
+      if (rowCount > 0) {
+        // Get text from Start column (first column)
+        const startCell = page.locator('.rz-data-grid tbody tr').first().locator('td').first();
+        const dateText = await startCell.textContent();
+
+        if (dateText && dateText.trim()) {
+          // Verify date format matches MM/dd/yyyy hh:mm tt pattern
+          const datePattern = /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2} (AM|PM)$/;
+          expect(dateText.trim()).toMatch(datePattern);
+        }
+      }
+    });
+
+    test('end date is formatted correctly when present', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const rowCount = await getDataGridRowCount(page);
+
+      if (rowCount > 0) {
+        // Get text from End column (second column)
+        const endCell = page.locator('.rz-data-grid tbody tr').first().locator('td').nth(1);
+        const dateText = await endCell.textContent();
+
+        if (dateText && dateText.trim()) {
+          // Verify date format matches MM/dd/yyyy hh:mm tt pattern
+          const datePattern = /^\d{2}\/\d{2}\/\d{4} \d{2}:\d{2} (AM|PM)$/;
+          expect(dateText.trim()).toMatch(datePattern);
+        }
+      }
+    });
+  });
+
+  test.describe('Record Count Display', () => {
+    test('record count columns show numeric values', async ({ page }) => {
+      await page.waitForTimeout(2000);
+      const rowCount = await getDataGridRowCount(page);
+
+      if (rowCount > 0) {
+        // Get text from Branch column (third column)
+        const branchCell = page.locator('.rz-data-grid tbody tr').first().locator('td').nth(2);
+        const countText = await branchCell.textContent();
+
+        if (countText && countText.trim()) {
+          // Should be a number
+          const count = parseInt(countText.trim(), 10);
+          expect(Number.isInteger(count) || countText.trim() === '').toBe(true);
+        }
+      }
+    });
+  });
+
+  test.describe('Loading State', () => {
+    test('shows loading indicator while fetching data', async ({ page }) => {
+      // Navigate fresh to catch loading state
+      await page.goto('/refresh-status');
+      await page.waitForLoadState('networkidle', { timeout: 60000 });
+
+      // If there's a loading indicator, it should eventually disappear
+      const loadingIndicator = page.locator('text=Loading refresh status');
+
+      // Either loading is visible briefly or already gone
+      await page.waitForTimeout(3000);
+
+      // After waiting, loading should be gone
+      await expect(loadingIndicator).not.toBeVisible({ timeout: 10000 });
+    });
+  });
+});