101 lines
No EOL
4.1 KiB
TypeScript
101 lines
No EOL
4.1 KiB
TypeScript
import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
|
|
/**
|
|
* Tests for Dashboard UI improvements including:
|
|
* - Row layout for stats section
|
|
* - Dynamic filtering of events without page reload
|
|
*/
|
|
import { test, expect } from '@playwright/test';
|
|
import { LoginPage } from './pages/LoginPage';
|
|
import { DashboardPage } from './pages/DashboardPage';
|
|
|
|
test.describe('Dashboard UI improvements', () => {
|
|
let dashboardPage: DashboardPage;
|
|
let loginPage: LoginPage;
|
|
|
|
// Set up for each test - login and navigate to dashboard
|
|
test.beforeEach(async ({ page }) => {
|
|
// STAGING_URL is now imported from config
|
|
loginPage = new LoginPage(page);
|
|
dashboardPage = new DashboardPage(page);
|
|
|
|
// Login as trainer
|
|
await page.goto(PATHS.login);
|
|
await page.fill('#user_login', 'test_trainer');
|
|
await page.fill('#user_pass', 'Test123!');
|
|
await page.click('#wp-submit');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Verify we're on the dashboard
|
|
await expect(page).toHaveURL(/.*\/hvac-dashboard\/.*/);
|
|
});
|
|
|
|
// Test the new row layout for stats
|
|
test('Stats section should display in a row layout', async ({ page }) => {
|
|
// Verify stats section is visible
|
|
await expect(page.locator('.hvac-stats-row')).toBeVisible();
|
|
|
|
// Verify multiple stat columns exist
|
|
const columnCount = await page.locator('.hvac-stat-col').count();
|
|
expect(columnCount).toBeGreaterThanOrEqual(4);
|
|
|
|
// Take a screenshot for visual verification
|
|
await page.screenshot({ path: 'test-results/dashboard-stats-row.png' });
|
|
|
|
// Success!
|
|
console.log('✅ Stats section is displayed in a row layout');
|
|
});
|
|
|
|
// Test dynamic filtering functionality
|
|
test('Event filters should dynamically update events table without page reload', async ({ page }) => {
|
|
// Verify filter buttons exist
|
|
const filterButtons = await page.locator('.hvac-event-filters a').count();
|
|
expect(filterButtons).toBeGreaterThanOrEqual(2); // At least a couple filter buttons
|
|
|
|
// Click Draft filter and wait for table to update
|
|
console.log('Clicking Draft filter');
|
|
await page.click('a:has-text("Draft")');
|
|
await page.waitForTimeout(1000); // Wait for AJAX to complete
|
|
|
|
// Take a screenshot showing filtered content
|
|
await page.screenshot({ path: 'test-results/dashboard-filter-draft.png' });
|
|
|
|
// Verify filter button shows active state (either by class or style)
|
|
const isDraftActive = await page.evaluate(() => {
|
|
const activeButton = document.querySelector('a.hvac-filter-active, a.ast-button-primary');
|
|
return activeButton ? activeButton.textContent.includes('Draft') : false;
|
|
});
|
|
|
|
console.log('Is Draft filter active:', isDraftActive);
|
|
|
|
// Click All filter to go back
|
|
console.log('Clicking All filter');
|
|
await page.click('a:has-text("All")');
|
|
await page.waitForTimeout(1000); // Wait for AJAX to complete
|
|
|
|
// Take final screenshot
|
|
await page.screenshot({ path: 'test-results/dashboard-filter-all.png' });
|
|
|
|
// Success!
|
|
console.log('✅ Filter functionality works without page reload');
|
|
});
|
|
|
|
// Test filtering with multiple statuses
|
|
test('Multiple filter buttons should be clickable', async ({ page }) => {
|
|
// Array of statuses to test (subset for quicker tests)
|
|
const statuses = ['Draft', 'Publish', 'All'];
|
|
|
|
// For each status, check if clickable
|
|
for (const status of statuses) {
|
|
// Click the filter
|
|
console.log(`Testing ${status} filter`);
|
|
await page.click(`a:has-text("${status}")`);
|
|
await page.waitForTimeout(500);
|
|
|
|
// Take a screenshot for each filter
|
|
await page.screenshot({ path: `test-results/dashboard-filter-${status.toLowerCase()}.png` });
|
|
}
|
|
|
|
// Success!
|
|
console.log('✅ All filter buttons are clickable');
|
|
});
|
|
}); |