121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
/**
|
||
* User stories covered: Features 16 & 19 — Desktop Required screen
|
||
* - Non-mobile-role users (AUDITOR, TECHNICAL) at 375×812 see DesktopRequired overlay
|
||
* - The overlay covers the page (fixed inset-0 z-40)
|
||
* - The overlay contains a sign-out button
|
||
* - Clicking sign-out redirects to /login
|
||
*
|
||
* Mobile roles (MANAGER, SUPERUSER, ACCOUNTS) do NOT see the overlay — they get MobileBottomNav.
|
||
* Non-mobile roles: TECHNICAL, MANNING, AUDITOR, ADMIN.
|
||
*
|
||
* DesktopRequired uses `class="md:hidden fixed inset-0"` — it is always in the DOM but
|
||
* only visible below the md breakpoint (768px). At 375px viewport it IS visible.
|
||
*
|
||
* 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 16 — Desktop Required overlay for non-mobile roles", () => {
|
||
test("US-16a: AUDITOR at mobile viewport sees Desktop Required overlay", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.AUDITOR);
|
||
|
||
// DesktopRequired overlay contains the heading "Desktop Required"
|
||
await expect(page.getByText("Desktop Required")).toBeVisible();
|
||
console.log("✓ Desktop Required overlay visible for AUDITOR at mobile viewport");
|
||
});
|
||
|
||
test("US-16c: TECHNICAL user at mobile viewport also sees Desktop Required overlay", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.TECH);
|
||
|
||
await expect(page.getByText("Desktop Required")).toBeVisible();
|
||
console.log("✓ Desktop Required overlay visible for TECHNICAL at mobile viewport");
|
||
});
|
||
|
||
test("US-16b: Desktop Required overlay contains a sign-out button", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.AUDITOR);
|
||
|
||
await expect(page.getByText("Desktop Required")).toBeVisible();
|
||
// DesktopRequired renders a button with text "Sign out" (with LogOut icon)
|
||
const signOutBtn = page.getByRole("button", { name: /sign out/i });
|
||
await expect(signOutBtn).toBeVisible();
|
||
console.log("✓ Sign out button visible in Desktop Required overlay");
|
||
});
|
||
|
||
test("US-16b: overlay is rendered with fixed positioning that covers the page", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.AUDITOR);
|
||
|
||
// The overlay div has classes "md:hidden fixed inset-0 z-40"
|
||
const overlay = page
|
||
.locator("div.fixed.inset-0")
|
||
.or(page.locator("div[class*='fixed'][class*='inset-0']"));
|
||
await expect(overlay.first()).toBeVisible();
|
||
console.log("✓ Fixed inset overlay element is visible");
|
||
});
|
||
|
||
test("US-16a: MANAGER at mobile viewport does NOT see Desktop Required overlay", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.MANAGER);
|
||
|
||
// Manager has mobile experience — should see MobileBottomNav, not DesktopRequired
|
||
await expect(page.getByText("Desktop Required")).not.toBeVisible();
|
||
console.log(
|
||
"✓ Desktop Required overlay correctly absent for MANAGER at mobile viewport"
|
||
);
|
||
});
|
||
|
||
test("US-16a: ACCOUNTS at mobile viewport does NOT see Desktop Required overlay", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.ACCOUNTS);
|
||
|
||
await expect(page.getByText("Desktop Required")).not.toBeVisible();
|
||
console.log(
|
||
"✓ Desktop Required overlay correctly absent for ACCOUNTS at mobile viewport"
|
||
);
|
||
});
|
||
});
|
||
|
||
test.describe("Feature 19 — Mobile sign-out from Desktop Required screen", () => {
|
||
test("US-19a: AUDITOR at mobile sees Sign out button in Desktop Required overlay", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.AUDITOR);
|
||
|
||
await expect(page.getByText("Desktop Required")).toBeVisible();
|
||
const signOutBtn = page.getByRole("button", { name: /sign out/i });
|
||
await expect(signOutBtn).toBeVisible();
|
||
console.log("✓ Sign out button present in Desktop Required overlay");
|
||
});
|
||
|
||
test("US-19b: clicking Sign out from Desktop Required redirects to /login", async ({
|
||
page,
|
||
}) => {
|
||
await page.setViewportSize(MOBILE_VIEWPORT);
|
||
await login(page, USERS.AUDITOR);
|
||
|
||
await expect(page.getByText("Desktop Required")).toBeVisible();
|
||
await page.getByRole("button", { name: /sign out/i }).click();
|
||
|
||
await expect(page).toHaveURL(/\/login/, { timeout: 10_000 });
|
||
console.log("✓ Sign out from Desktop Required overlay redirects to /login");
|
||
});
|
||
});
|