// spec: specs/gymflow-test-plan.md // seed: tests/core-auth.spec.ts import { test, expect } from '@playwright/test'; test.describe('I. Core & Authentication', () => { test('B. Navigation - Mobile Bottom Navigation Bar', async ({ page }) => { // 1. Log in as a regular user. await page.goto('http://localhost:3000/'); await page.getByRole('textbox', { name: 'user@gymflow.ai' }).fill('admin@gymflow.ai'); await page.locator('input[type="password"]').fill('admin1234'); await page.getByRole('button', { name: 'Login' }).click(); // 2. Ensure the browser window is narrow enough to trigger mobile layout (e.g., <768px width). await page.setViewportSize({ width: 375, height: 667 }); // 3. Verify the bottom navigation bar is present. await expect(page.getByRole('button', { name: 'Tracker' })).toBeVisible(); // 4. Click on each navigation item (Tracker, Plans, History, Stats, AI Coach, Profile). // Click on 'Plans' await page.getByRole('button', { name: 'Plans' }).click(); // Expected: The corresponding section of the application is displayed for each click. await expect(page.getByText('My Plans')).toBeVisible(); // Click on 'History' await page.getByRole('button', { name: 'History' }).click(); await expect(page.getByText('History')).toBeVisible(); // Click on 'Stats' await page.getByRole('button', { name: 'Stats' }).click(); await expect(page.getByText('Stats')).toBeVisible(); // Click on 'AI Coach' await page.getByRole('button', { name: 'AI Coach' }).click(); await expect(page.getByText('AI Coach')).toBeVisible(); // Click on 'Profile' await page.getByRole('button', { name: 'Profile' }).click(); await expect(page.getByText('Profile')).toBeVisible(); // Click on 'Tracker' to complete the cycle await page.getByRole('button', { name: 'Tracker', exact: true }).click(); await expect(page.getByText('Ready?')).toBeVisible(); // Expected: The bottom navigation bar remains visible and functional. await expect(page.getByRole('button', { name: 'Tracker' })).toBeVisible(); }); });