116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
/**
|
||
* User stories covered: Feature 20 — Mobile Home tab in bottom navigation
|
||
* - MANAGER at 375×812 sees a "Home" tab in the bottom nav bar
|
||
* - Tapping Home tab navigates to /dashboard
|
||
* - ACCOUNTS at mobile sees Home, Payments, and Profile tabs
|
||
*
|
||
* MobileBottomNav renders for MANAGER (MANAGER_TABS: Home, Approvals, Profile)
|
||
* and ACCOUNTS (ACCOUNTS_TABS: Home, Payments, Profile).
|
||
*
|
||
* Created: 2026-05-17
|
||
*/
|
||
import { test, expect } from "@playwright/test";
|
||
import { login, USERS } from "../helpers/login";
|
||
|
||
const MOBILE_VIEWPORT = { width: 375, height: 812 };
|
||
|
||
test.describe("Feature 20 — Mobile Home tab in bottom navigation", () => {
|
||
test("US-20a: MANAGER at mobile sees bottom nav with Home tab", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
|
||
// MobileBottomNav renders for MANAGER — contains a "Home" link to /dashboard
|
||
const homeTab = page.getByRole("link", { name: /home/i }).filter({
|
||
has: page.locator("[href='/dashboard']"),
|
||
});
|
||
// More lenient: just look for a link that says "Home" pointing to /dashboard
|
||
const homeLink = page.locator("nav a[href='/dashboard']");
|
||
await expect(homeLink).toBeVisible();
|
||
console.log("✓ Home tab (link to /dashboard) visible in MANAGER mobile bottom nav");
|
||
});
|
||
|
||
test("US-20b: tapping Home tab navigates to /dashboard", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
// Navigate away first
|
||
await page.goto("/approvals");
|
||
|
||
const homeLink = page.locator("nav a[href='/dashboard']");
|
||
await expect(homeLink).toBeVisible();
|
||
await homeLink.click();
|
||
|
||
await expect(page).toHaveURL(/\/dashboard/, { timeout: 10_000 });
|
||
console.log("✓ Tapping Home tab navigates to /dashboard");
|
||
});
|
||
|
||
test("US-20a: MANAGER mobile nav has Approvals tab", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
|
||
const approvalsLink = page.locator("nav a[href='/approvals']");
|
||
await expect(approvalsLink).toBeVisible();
|
||
console.log("✓ Approvals tab visible in MANAGER mobile bottom nav");
|
||
});
|
||
|
||
test("US-20a: MANAGER mobile nav has Profile tab", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
|
||
const profileLink = page.locator("nav a[href='/profile']");
|
||
await expect(profileLink).toBeVisible();
|
||
console.log("✓ Profile tab visible in MANAGER mobile bottom nav");
|
||
});
|
||
|
||
test("US-20c: ACCOUNTS mobile nav has Home, Payments, and Profile tabs", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.ACCOUNTS);
|
||
|
||
const homeLink = page.locator("nav a[href='/dashboard']");
|
||
const paymentsLink = page.locator("nav a[href='/payments']");
|
||
const profileLink = page.locator("nav a[href='/profile']");
|
||
|
||
await expect(homeLink).toBeVisible();
|
||
await expect(paymentsLink).toBeVisible();
|
||
await expect(profileLink).toBeVisible();
|
||
console.log("✓ ACCOUNTS mobile bottom nav shows Home, Payments, and Profile tabs");
|
||
});
|
||
|
||
test("US-20c: ACCOUNTS Home tab navigates to /dashboard", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.ACCOUNTS);
|
||
|
||
await page.goto("/payments");
|
||
|
||
const homeLink = page.locator("nav a[href='/dashboard']");
|
||
await homeLink.click();
|
||
|
||
await expect(page).toHaveURL(/\/dashboard/, { timeout: 10_000 });
|
||
console.log("✓ ACCOUNTS Home tab in mobile nav navigates to /dashboard");
|
||
});
|
||
|
||
test("US-20a: MANAGER mobile bottom nav has 3 tabs total", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
|
||
// MANAGER_TABS = [Home, Approvals, Profile] → 3 tabs
|
||
const navLinks = page.locator("nav.md\\:hidden a, nav[class*='md:hidden'] a");
|
||
const count = await navLinks.count();
|
||
expect(count).toBe(3);
|
||
console.log(`✓ MANAGER mobile bottom nav has ${count} tabs`);
|
||
});
|
||
|
||
test("US-20c: ACCOUNTS mobile bottom nav has 3 tabs total", async ({ page }) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.ACCOUNTS);
|
||
|
||
// ACCOUNTS_TABS = [Home, Payments, Profile] → 3 tabs
|
||
const navLinks = page.locator("nav.md\\:hidden a, nav[class*='md:hidden'] a");
|
||
const count = await navLinks.count();
|
||
expect(count).toBe(3);
|
||
console.log(`✓ ACCOUNTS mobile bottom nav has ${count} tabs`);
|
||
});
|
||
});
|