63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
import { IPHONE_DEVICES } from '../fixtures/devices';
|
||
|
|
import { login, navigateTo } from '../smoke/helpers';
|
||
|
|
|
||
|
|
test.use({
|
||
|
|
...IPHONE_DEVICES.iphone16,
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Freeze CSS animations/transitions and hide dev-only overlays
|
||
|
|
* (TanStack Query devtools) so pixel diffs are stable.
|
||
|
|
*/
|
||
|
|
async function freezeAnimations(page: import('@playwright/test').Page) {
|
||
|
|
await page.addStyleTag({
|
||
|
|
content: `
|
||
|
|
*, *::before, *::after {
|
||
|
|
animation-duration: 0s !important;
|
||
|
|
animation-delay: 0s !important;
|
||
|
|
transition-duration: 0s !important;
|
||
|
|
transition-delay: 0s !important;
|
||
|
|
caret-color: transparent !important;
|
||
|
|
}
|
||
|
|
/* Hide TanStack Query devtools so they don't overlap bottom tabs */
|
||
|
|
.tsqd-parent-container {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
test('mobile shell renders bottom tabs and compact topbar on dashboard', async ({ page }) => {
|
||
|
|
await login(page, 'super_admin');
|
||
|
|
await navigateTo(page, '/dashboard');
|
||
|
|
await freezeAnimations(page);
|
||
|
|
// Allow charts and TanStack Query to settle
|
||
|
|
await page.waitForTimeout(1200);
|
||
|
|
|
||
|
|
// Viewport-only screenshot captures the fixed topbar + bottom tabs
|
||
|
|
await expect(page).toHaveScreenshot('mobile-shell-dashboard.png', {
|
||
|
|
fullPage: false,
|
||
|
|
maxDiffPixelRatio: 0.03,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('More sheet opens from bottom tabs', async ({ page }) => {
|
||
|
|
await login(page, 'super_admin');
|
||
|
|
await navigateTo(page, '/dashboard');
|
||
|
|
await freezeAnimations(page);
|
||
|
|
|
||
|
|
// Click the More button inside the primary nav (5th item in the 5-col bottom tab grid)
|
||
|
|
await page
|
||
|
|
.locator('nav[aria-label="Primary navigation"] button', { hasText: 'More' })
|
||
|
|
.click({ force: true });
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
await freezeAnimations(page);
|
||
|
|
|
||
|
|
// Viewport-only screenshot captures the bottom-anchored More drawer
|
||
|
|
await expect(page).toHaveScreenshot('mobile-shell-more-sheet.png', {
|
||
|
|
fullPage: false,
|
||
|
|
maxDiffPixelRatio: 0.03,
|
||
|
|
});
|
||
|
|
});
|