76 lines
No EOL
2.9 KiB
TypeScript
76 lines
No EOL
2.9 KiB
TypeScript
/**
|
|
* Test for Dashboard Layout Improvements
|
|
*
|
|
* This test verifies that the dashboard stats section renders with
|
|
* proper row layout
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Trainer Dashboard Layout', () => {
|
|
test('should display stats section in a row layout', async ({ page }) => {
|
|
// Login Steps
|
|
await page.goto('/community-login/');
|
|
|
|
const usernameField = page.locator('#user_login');
|
|
const passwordField = page.locator('#user_pass');
|
|
const loginButton = page.locator('#wp-submit');
|
|
|
|
// Use environment variables or default test credentials
|
|
const username = process.env.TEST_USERNAME || 'test_trainer';
|
|
const password = process.env.TEST_PASSWORD || 'Test123!';
|
|
|
|
await usernameField.fill(username);
|
|
await passwordField.fill(password);
|
|
await loginButton.click();
|
|
|
|
// Wait for dashboard to load
|
|
await page.waitForURL('/hvac-dashboard/', { timeout: 15000 });
|
|
console.log('Successfully logged in and redirected to dashboard.');
|
|
|
|
// Take a screenshot for visual verification
|
|
await page.screenshot({ path: 'dashboard-stats-layout.png', fullPage: false });
|
|
|
|
// Verify that the stats section exists with row layout
|
|
const statsSection = page.locator('.hvac-stats-row');
|
|
await expect(statsSection).toBeVisible();
|
|
|
|
// Verify that we have multiple stat columns
|
|
const statColumns = page.locator('.hvac-stat-col');
|
|
const count = await statColumns.count();
|
|
expect(count).toBeGreaterThanOrEqual(4); // We should have at least 4 stat cards
|
|
|
|
// Check for horizontal layout (desktop view)
|
|
// This test confirms stats are in a row by verifying the second card is to the right of the first
|
|
if (page.viewportSize()?.width && page.viewportSize().width >= 768) {
|
|
const firstCard = await statColumns.nth(0).boundingBox();
|
|
const secondCard = await statColumns.nth(1).boundingBox();
|
|
|
|
if (firstCard && secondCard) {
|
|
// In row layout, the second card should be to the right of the first
|
|
expect(secondCard.x).toBeGreaterThan(firstCard.x);
|
|
console.log('Stats cards display in a row as expected (second card x-position is to the right of first card)');
|
|
}
|
|
} else {
|
|
console.log('Viewport too narrow for row layout test, cards may be stacked vertically');
|
|
}
|
|
|
|
// Check that all cards have same height for visual consistency
|
|
const heights = [];
|
|
for (let i = 0; i < Math.min(count, 4); i++) {
|
|
const box = await statColumns.nth(i).boundingBox();
|
|
if (box) {
|
|
heights.push(box.height);
|
|
}
|
|
}
|
|
|
|
// Check if all heights are approximately the same (within 5px tolerance)
|
|
if (heights.length >= 2) {
|
|
const baseHeight = heights[0];
|
|
for (let i = 1; i < heights.length; i++) {
|
|
expect(Math.abs(heights[i] - baseHeight)).toBeLessThanOrEqual(5);
|
|
}
|
|
console.log('All stat cards have consistent heights');
|
|
}
|
|
});
|
|
}); |