import { mkdirSync } from "node:fs"; import path from "node:path"; import { expect, test, type Browser, type Page, type Route } from "@playwright/test"; import { resolveMobileNotificationTargetLink, resolveNotificationTargetLink, } from "../../src/lib/notificationLinks"; const ROOT_DIR = path.resolve(process.cwd(), ".."); const SCREENSHOT_DIR = path.join(ROOT_DIR, "output/playwright/mobile-ia-flow-remediation"); const IOS_WECOM_UA = "Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 wxwork/4.1.20 MicroMessenger/8.0.1 Language/zh_CN"; type RolePreset = "employee" | "manager" | "finance" | "admin"; type MockNotification = { id: string; type: string; title: string; body: string | null; targetType: string | null; targetId: string | null; readAt: string | null; createdAt: string; }; type FinanceSummaryOverride = { pendingBatchCount: number; failedItemCount: number; riskCount: number; paymentBatchEnabled: boolean; href: string; }; function envelope(data: unknown) { return { requestId: "mock-dg7-mobile-information-dedupe", data }; } async function fulfillJson(route: Route, data: unknown, status = 200) { await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(envelope(data)), }); } function screenshotPath(fileName: string) { mkdirSync(SCREENSHOT_DIR, { recursive: true }); return path.join(SCREENSHOT_DIR, fileName.endsWith(".png") ? fileName : `${fileName}.png`); } function buildMe(role: RolePreset) { const roleMeta: Record = { employee: { employeeNo: "E-DG7", name: "测试员工", email: "employee@hyinda.com", roleCodes: ["employee"] }, manager: { employeeNo: "M-DG7", name: "测试审批人", email: "manager@hyinda.com", roleCodes: ["manager"] }, finance: { employeeNo: "F-DG7", name: "测试财务", email: "finance@hyinda.com", roleCodes: ["finance"] }, admin: { employeeNo: "A-DG7", name: "测试管理员", email: "admin@hyinda.com", roleCodes: ["admin"] }, }; const meta = roleMeta[role]; return { id: `employee-dg7-${role}`, employeeNo: meta.employeeNo, name: meta.name, phone: "13800000000", email: meta.email, departmentId: "dept-dg7", directManagerId: role === "manager" ? null : "employee-dg7-manager", status: "active", notificationPushEnabled: true, roleCodes: meta.roleCodes, profileCompleteness: { hasEmergencyContact: true, hasBankAccount: true, hasAvatar: false, hasIdNumber: false, score: 60, }, wecomBinding: { externalUserId: `wxwork-dg7-${role}`, createdAt: "2026-05-12T08:00:00.000Z", }, }; } function navigationItem(key: string, href: string, label: string, icon: string) { return { key, href, label, icon, placement: "main", permissionCodes: [], featureFlagKey: null }; } const leaveType = { id: "leave-type-dg7", code: "annual", name: "年假", description: null, enabled: true, requiresAttachment: false, attachmentMimeTypes: [], sortOrder: 1, policy: { id: "leave-policy-dg7", annualQuotaDays: 5, enabled: true, description: null, }, createdAt: null, updatedAt: null, }; const leaveDetail = { id: "leave-dg7-approved", ownerId: "employee-dg7-employee", departmentId: "dept-dg7", status: "approved", startDate: "2026-05-12", endDate: "2026-05-12", startSession: "am", endSession: "pm", requestedDays: 1, reason: "年假", attachment: null, leaveType: { id: leaveType.id, code: leaveType.code, name: leaveType.name, requiresAttachment: false, attachmentMimeTypes: [], }, owner: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, pendingWorkflow: null, approvalHistory: [ { id: "history-leave-dg7", taskId: "task-leave-dg7", actorId: "employee-dg7-manager", actorName: "测试审批人", actorEmployeeNo: "M-DG7", action: "approve", comment: "同意", createdAt: "2026-05-12T09:00:00.000Z", }, ], createdAt: "2026-05-12T08:00:00.000Z", updatedAt: "2026-05-12T09:00:00.000Z", }; const purchaseDetail = { id: "purchase-dg7-approved", requestNo: "CG20260512001", applicantId: "employee-dg7-employee", submitterId: "employee-dg7-employee", departmentId: "dept-dg7", legalEntityId: "legal-dg7", costCenterId: "cost-dg7", supplierId: "supplier-dg7", documentCategoryId: null, budgetPoolId: null, title: "办公用品采购", reason: "补充办公用品", currencyCode: "CNY", totalAmount: "320.00", expectedDeliveryDate: "2026-05-20", status: "approved", createdAt: "2026-05-12T08:00:00.000Z", updatedAt: "2026-05-12T09:00:00.000Z", applicant: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, submitter: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, department: { id: "dept-dg7", name: "研发部" }, legalEntity: { id: "legal-dg7", code: "HYD", name: "海音达" }, costCenter: { id: "cost-dg7", code: "RD", name: "研发中心", legalEntityId: "legal-dg7" }, supplier: { id: "supplier-dg7", code: "SUP-DG7", name: "测试供应商" }, documentCategory: null, budgetPool: null, items: [ { id: "purchase-item-dg7", description: "键盘", specification: "无线", quantity: "2", unitPrice: "160.00", lineAmount: "320.00", isAssetCandidate: false, createdAt: null, updatedAt: null, }, ], attachments: [ { id: "attachment-dg7", originalName: "采购说明.pdf", mimeType: "application/pdf", fileSize: 10240, uploadedBy: "employee-dg7-employee", createdAt: "2026-05-12T08:10:00.000Z", uploader: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, }, ], pendingWorkflow: null, approvalHistory: [ { id: "history-purchase-dg7", taskId: "task-purchase-dg7", actorId: "employee-dg7-manager", actorName: "测试审批人", actorEmployeeNo: "M-DG7", action: "approve", comment: "同意", createdAt: "2026-05-12T09:00:00.000Z", }, ], archiveOrder: null, permissions: { canEditDraft: false, canSubmit: false, canWithdraw: false, canArchiveOrder: false, }, riskFlags: [], }; function buildNotifications() { return [ { id: "notification-task-dg7", type: "workflow.task_assigned", title: "报销待审批", body: "报销单 BX20260512001 等待处理", targetType: "workflow_task", targetId: "task-dg7", readAt: null, createdAt: "2026-05-12T08:15:00.000Z", }, { id: "notification-purchase-dg7", type: "purchase_request.approved", title: "采购已通过", body: "采购单 CG20260512001 已通过", targetType: "purchase_request", targetId: purchaseDetail.id, readAt: null, createdAt: "2026-05-12T08:10:00.000Z", }, { id: "notification-leave-dg7", type: "leave.approved", title: "请假已通过", body: "年假申请已通过", targetType: "leave_request", targetId: leaveDetail.id, readAt: null, createdAt: "2026-05-12T08:05:00.000Z", }, ] satisfies MockNotification[]; } function workflowTaskSummary(status: "pending" | "completed" = "pending") { const isCompleted = status === "completed"; const completedAt = isCompleted ? new Date().toISOString() : null; return { id: isCompleted ? "task-dg7-completed" : "task-dg7", instanceId: "instance-dg7", stepId: "step-dg7", stepName: "主管审批", assigneeId: "employee-dg7-manager", assigneeRole: null, status, outcome: isCompleted ? "approved" : null, createdAt: "2026-05-12T08:00:00.000Z", completedAt, workflowInstance: { entityType: "reimbursement", entityId: "reimbursement-dg7", currentStatus: isCompleted ? "approved" : "reviewing", }, businessSummary: { reference: "BX20260512001", title: "差旅报销", applicantName: "测试员工", amount: "168.00", duration: null, businessStatus: isCompleted ? "approved" : "reviewing", }, allowedActions: isCompleted ? [] : ["approve", "reject", "return", "transfer"], }; } function workflowTaskDetail(status: "pending" | "completed" = "pending") { const isCompleted = status === "completed"; const completedAt = isCompleted ? new Date().toISOString() : null; const history = [ { id: "history-workflow-submit-dg7", taskId: null, actorId: "employee-dg7-employee", actorName: "测试员工", actorEmployeeNo: "E-DG7", action: "submit", comment: "提交审批", payload: null, createdAt: "2026-05-12T08:00:00.000Z", }, { id: isCompleted ? "history-workflow-approve-dg7" : "history-workflow-transfer-dg7", taskId: isCompleted ? "task-dg7-completed" : "task-dg7", actorId: "employee-dg7-manager", actorName: "测试审批人", actorEmployeeNo: "M-DG7", action: isCompleted ? "approve" : "transfer", comment: isCompleted ? "同意报销" : "转给财务复核", payload: isCompleted ? null : { transferToEmployeeId: "employee-dg7-finance" }, createdAt: isCompleted ? "2026-05-12T09:00:00.000Z" : "2026-05-12T08:30:00.000Z", }, ]; return { task: { id: isCompleted ? "task-dg7-completed" : "task-dg7", instanceId: "instance-dg7", stepId: "step-dg7", stepName: "主管审批", assigneeId: "employee-dg7-manager", assigneeRole: null, status, outcome: isCompleted ? "approved" : null, comment: null, createdAt: "2026-05-12T08:00:00.000Z", completedAt, }, workflowInstance: { id: "instance-dg7", entityType: "reimbursement", currentStatus: isCompleted ? "approved" : "reviewing", currentStepId: isCompleted ? null : "step-dg7", contextData: { standardViolations: [] }, startedAt: "2026-05-12T08:00:00.000Z", completedAt: isCompleted ? "2026-05-12T09:00:00.000Z" : null, }, reimbursement: { id: "reimbursement-dg7", formNumber: "BX20260512001", status: isCompleted ? "approved" : "reviewing", reimbursementDate: "2026-05-12", totalAmount: "168.00", description: "差旅报销", owner: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, submitter: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, }, leaveRequest: null, purchaseRequest: null, travelRequest: null, allowedActions: isCompleted ? [] : ["approve", "reject", "return", "transfer"], history, }; } function reimbursementListItem() { return { id: "reimbursement-dg7", formNumber: "BX20260512001", status: "reviewing", reimbursementDate: "2026-05-12", totalAmount: "168.00", description: "差旅报销", payment: { paymentVoucherNo: null, paymentDate: null, paymentChannel: null, paidAt: null, paidBy: null, }, owner: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, submitter: { id: "employee-dg7-employee", employeeNo: "E-DG7", name: "测试员工" }, project: null, pendingWorkflow: { instanceId: "instance-dg7", stepId: "step-dg7", allowedActions: [], task: { id: "task-dg7", stepName: "主管审批", assigneeId: "employee-dg7-manager", assigneeRole: null, }, }, createdAt: "2026-05-12T08:00:00.000Z", updatedAt: "2026-05-12T08:00:00.000Z", }; } function reimbursementDetail() { return { ...reimbursementListItem(), submitterId: "employee-dg7-employee", ownerId: "employee-dg7-employee", departmentId: "dept-dg7", department: { id: "dept-dg7", name: "研发部" }, submittedAt: "2026-05-12T08:00:00.000Z", projectId: null, linkedTravelRequestId: null, linkedTravelRequest: null, invoices: [ { id: "invoice-dg7", status: "bound", invoiceCode: "044001900111", invoiceNumber: "12345678", invoiceDate: "2026-05-10", sellerName: "测试供应商", totalAmount: "168.00", originalName: "发票.pdf", linkedItemId: "item-dg7", }, ], attachments: [ { id: "attachment-reimbursement-dg7", originalName: "报销说明.pdf", mimeType: "application/pdf", fileSize: 20480, fileSha256: "sha256-dg7", uploadedBy: { id: "employee-dg7-employee", name: "测试员工", employeeNo: "E-DG7" }, createdAt: "2026-05-12T08:05:00.000Z", }, ], budgetHint: null, workflowProgress: { currentStepIndex: 1, totalSteps: 2, steps: [ { id: "step-submit", name: "提交", status: "completed" }, { id: "step-dg7", name: "主管审批", status: "current" }, ], }, approvalHistory: [ { id: "history-reimbursement-dg7", taskId: "task-dg7", actorName: "测试审批人", action: "submit", comment: "提交审批", stepName: "提交", createdAt: "2026-05-12T08:00:00.000Z", }, ], riskFlags: [], items: [ { id: "item-dg7", expenseTypeId: "expense-type-dg7", expenseDate: "2026-05-12", amount: "168.00", description: "差旅报销", expenseType: { id: "expense-type-dg7", code: "travel", name: "交通费", category: "travel", enabled: true, }, }, ], }; } async function mockApis( page: Page, role: RolePreset, notifications: MockNotification[], financeSummaryOverride?: FinanceSummaryOverride, ) { await page.route((url) => url.pathname.startsWith("/api/"), async (route) => { const request = route.request(); const url = new URL(request.url()); const pathName = url.pathname; if (pathName === "/api/auth/sso/providers") { await fulfillJson(route, []); return; } if (pathName === "/api/auth/wecom/config") { await fulfillJson(route, { enabled: true, entryEnabled: true, oauthEnabled: true, corpId: "ww-test", agentId: "1000002", loginUrl: "/api/auth/wecom/login?returnTo=%2Fmobile", bindEnabled: true, defaultReturnTo: "/mobile", status: "ready", statusReasons: [], }); return; } if (pathName === "/api/auth/login" || pathName === "/api/auth/refresh") { await route.fulfill({ status: 200, contentType: "application/json", headers: { "set-cookie": "has_session=1; Path=/; SameSite=Lax" }, body: JSON.stringify(envelope({ accessToken: `mock-dg7-${role}-token`, expiresIn: 900, mustChangePassword: false })), }); return; } if (pathName === "/api/me") { await fulfillJson(route, buildMe(role)); return; } if (pathName === "/api/system/navigation") { await fulfillJson(route, { workspace: { id: "workspace-dg7", persisted: true, profile: "small_team_internal", orgMode: "single_company", primaryEntryMode: "wecom", notificationStrategy: "in_app", devicePriority: "mobile", moduleVisibility: {}, createdAt: null, updatedAt: null, updatedBy: null, }, sections: { main: [ navigationItem("portal", "/portal", "工作台", "home"), navigationItem("expense", "/reimbursements", "报销", "request_quote"), navigationItem("leave", "/leave-requests", "请假记录", "event_available"), ], admin: [], backup: [], }, recommendedRolePresets: [], }); return; } if (pathName === "/api/portal/home") { const isFinance = role === "finance"; await fulfillJson(route, { workspace: { id: "workspace-dg7", persisted: true, profile: "small_team_internal" }, greeting: { name: buildMe(role).name }, cards: [], pendingTasks: { count: role === "manager" ? 1 : 0, href: "/workflow/tasks" }, myApplications: [], riskSummary: null, announcements: [], quickLinks: [], roleCapabilities: { canSubmitApplications: role !== "admin", canApproveTasks: role === "manager" || role === "finance", canUseFinance: isFinance, canManageSystem: role === "admin", canViewTeam: role === "manager", isAdminOnly: role === "admin", }, financeSummary: isFinance ? financeSummaryOverride ?? { pendingBatchCount: 2, failedItemCount: 1, riskCount: 3, paymentBatchEnabled: false, href: "/ap-operations", } : null, recentActivities: [], }); return; } if (pathName === "/api/attendance/me/today") { await fulfillJson(route, { workDate: "2026-05-12", needClockIn: false, exemptionReason: null, item: null }); return; } if (pathName === "/api/workflow/tasks/summary") { await fulfillJson(route, { scope: "mine", pendingTotal: role === "manager" ? 1 : 0, overdueTotal: 0, earliestPendingAt: role === "manager" ? "2026-05-12T08:00:00.000Z" : null, averagePendingAgeHours: role === "manager" ? 1 : 0, byEntityType: role === "manager" ? [{ key: "reimbursement", pendingTotal: 1, overdueTotal: 0 }] : [], byStep: role === "manager" ? [{ key: "主管审批", pendingTotal: 1, overdueTotal: 0 }] : [], byAssigneeRole: [], }); return; } if (pathName === "/api/workflow/tasks") { const workflowStatus = url.searchParams.get("status") === "completed" ? "completed" : "pending"; await fulfillJson(route, { page: 1, pageSize: Number(url.searchParams.get("pageSize") ?? 100), total: role === "manager" ? 1 : 0, items: role === "manager" ? [workflowTaskSummary(workflowStatus)] : [], }); return; } if (pathName === "/api/workflow/tasks/task-dg7") { await fulfillJson(route, workflowTaskDetail()); return; } if (pathName === "/api/workflow/tasks/task-dg7-completed") { await fulfillJson(route, workflowTaskDetail("completed")); return; } if (pathName === "/api/workflow/approvers") { await fulfillJson(route, { page: 1, pageSize: 100, total: 0, items: [] }); return; } if (pathName === "/api/notifications" && request.method() === "GET") { const unreadOnly = url.searchParams.get("unreadOnly") === "1" || url.searchParams.get("unreadOnly") === "true"; const typeFilter = url.searchParams.get("type"); const types = typeFilter ? typeFilter.split(",") : null; const items = notifications.filter((item) => { if (unreadOnly && item.readAt) return false; if (types && !types.includes(item.type)) return false; return true; }); await fulfillJson(route, { page: 1, pageSize: Number(url.searchParams.get("pageSize") ?? 20), total: items.length, unreadOnly, unreadCount: notifications.filter((item) => !item.readAt).length, items, }); return; } const markReadMatch = pathName.match(/^\/api\/notifications\/([^/]+)\/mark-read$/); if (markReadMatch && request.method() === "POST") { const item = notifications.find((candidate) => candidate.id === markReadMatch[1]); if (item) { item.readAt = "2026-05-12T08:20:00.000Z"; } await fulfillJson(route, { id: markReadMatch[1], readAt: item?.readAt ?? null }); return; } if (pathName === "/api/notifications/mark-all-read" && request.method() === "POST") { for (const item of notifications) { item.readAt = item.readAt ?? "2026-05-12T08:20:00.000Z"; } await fulfillJson(route, { updatedCount: notifications.length }); return; } if (pathName === "/api/reimbursements" && request.method() === "GET") { await fulfillJson(route, { page: 1, pageSize: Number(url.searchParams.get("pageSize") ?? 20), total: 1, scope: "own", items: [reimbursementListItem()], }); return; } if (pathName === "/api/reimbursements/reimbursement-dg7" && request.method() === "GET") { await fulfillJson(route, reimbursementDetail()); return; } if (pathName === "/api/expense-types") { await fulfillJson(route, { items: [ { id: "expense-type-dg7", code: "travel", name: "交通费", category: "travel", enabled: true, }, ], }); return; } if (pathName === "/api/leave-types") { await fulfillJson(route, { items: [leaveType] }); return; } if (pathName === "/api/leave-balances") { await fulfillJson(route, { employeeId: "employee-dg7-employee", items: [ { leaveType, policy: leaveType.policy, granted: 5, adjusted: 0, reserved: 0, used: 1, available: 4, periodStart: "2026-01-01", periodEnd: "2026-12-31", }, ], }); return; } if (pathName === `/api/leave-requests/${leaveDetail.id}`) { await fulfillJson(route, leaveDetail); return; } if (pathName === "/api/leave-requests") { await fulfillJson(route, { page: 1, pageSize: Number(url.searchParams.get("pageSize") ?? 20), total: 1, scope: "own", items: [leaveDetail], }); return; } if (pathName === `/api/purchase-requests/${purchaseDetail.id}`) { await fulfillJson(route, purchaseDetail); return; } if (pathName === "/api/purchase-requests" && request.method() === "GET") { await fulfillJson(route, { page: 1, pageSize: Number(url.searchParams.get("pageSize") ?? 20), total: 1, mine: true, items: [purchaseDetail], }); return; } await fulfillJson(route, { message: `unhandled mock api: ${pathName}` }, 404); }); } async function loginForMobile(page: Page, role: RolePreset) { await page.goto("/login"); const accountLoginButton = page.getByRole("button", { name: "使用账号密码登录" }); if (await accountLoginButton.isVisible({ timeout: 1_000 }).catch(() => false)) { await accountLoginButton.click(); } await expect(page.getByTestId("login-identifier")).toBeVisible(); await page.getByTestId("login-identifier").fill(`${role}@hyinda.com`); await page.getByTestId("login-password").fill("password"); await page.getByTestId("login-submit").click(); await page.waitForURL(/\/(portal|mobile)/, { timeout: 30_000 }); await page.waitForLoadState("networkidle").catch(() => undefined); } async function newMobilePage(browser: Browser, width = 390) { const context = await browser.newContext({ viewport: { width, height: width < 360 ? 568 : 844 }, isMobile: true, hasTouch: true, userAgent: IOS_WECOM_UA, locale: "zh-CN", serviceWorkers: "block", }); return { context, page: await context.newPage() }; } async function expectNoMobileShellRegression(page: Page) { await page.waitForLoadState("networkidle").catch(() => undefined); const metrics = await page.evaluate(() => { function isVisible(element: Element) { const rect = element.getBoundingClientRect(); const style = getComputedStyle(element); return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none"; } return { width: window.innerWidth, scrollWidth: Math.max(document.documentElement.scrollWidth, document.body?.scrollWidth ?? 0), visibleTables: Array.from(document.querySelectorAll("table")).filter(isVisible).length, pcShellGridCount: document.querySelectorAll(".page-shell-grid").length, clippedStatusSlots: Array.from(document.querySelectorAll(".mobile-status-slot")) .filter(isVisible) .filter((slot) => slot.scrollWidth > slot.clientWidth + 1) .map((slot) => slot.innerText.trim()), }; }); expect(metrics.scrollWidth).toBeLessThanOrEqual(metrics.width + 2); expect(metrics.visibleTables).toBe(0); expect(metrics.pcShellGridCount).toBe(0); expect(metrics.clippedStatusSlots).toEqual([]); } async function expectMobileApprovalStatusSlots(page: Page) { const slots = await page.evaluate(() => Array.from(document.querySelectorAll(".mobile-status-slot--approval")) .filter((slot) => { const rect = slot.getBoundingClientRect(); const style = getComputedStyle(slot); return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none"; }) .map((slot) => { const rect = slot.getBoundingClientRect(); const badge = slot.querySelector(".mobile-status-badge"); const badgeRect = badge?.getBoundingClientRect(); return { text: slot.innerText.trim(), width: rect.width, badgeWidth: badgeRect?.width ?? 0, }; }), ); expect(slots.length).toBeGreaterThan(0); for (const slot of slots) { expect(slot.text.length).toBeGreaterThanOrEqual(2); expect(slot.width).toBeGreaterThanOrEqual(54); expect(slot.badgeWidth).toBeGreaterThanOrEqual(54); } } async function expectMobileDetailHeaderSpacing(page: Page, testId: string) { const metrics = await page.getByTestId(testId).evaluate((header) => { const backButton = header.querySelector("button[aria-label='返回']"); const title = header.querySelector(".mobile-detail-header__title"); const backRect = backButton?.getBoundingClientRect(); const titleRect = title?.getBoundingClientRect(); return backRect && titleRect ? { backWidth: backRect.width, gap: titleRect.left - backRect.right, } : null; }); expect(metrics).not.toBeNull(); expect(metrics!.backWidth).toBeGreaterThanOrEqual(44); expect(metrics!.gap).toBeGreaterThanOrEqual(12); } async function expectApprovalActionsStable(page: Page) { const actions = await page.evaluate(() => Array.from(document.querySelectorAll(".mobile-approval-action-grid > button")).map((button) => { const rect = button.getBoundingClientRect(); return { left: rect.left, right: rect.right, top: rect.top, width: rect.width, }; }), ); expect(actions).toHaveLength(3); const firstTop = actions[0].top; for (const action of actions) { expect(Math.abs(action.top - firstTop)).toBeLessThanOrEqual(2); expect(action.width).toBeGreaterThanOrEqual(64); } expect(actions[0].right).toBeLessThanOrEqual(actions[1].left + 2); expect(actions[1].right).toBeLessThanOrEqual(actions[2].left + 2); } async function expectActionTileGapStable(page: Page) { const gaps = await page.evaluate(() => Array.from(document.querySelectorAll("[data-testid='mobile-action-grid'] .mobile-icon-action")).map((tile) => { const icon = tile.querySelector(".mobile-icon-action__icon"); const label = tile.querySelector(".mobile-icon-action__label"); if (!icon || !label) return null; return label.getBoundingClientRect().top - icon.getBoundingClientRect().bottom; }).filter((value): value is number => value !== null), ); expect(gaps.length).toBeGreaterThan(0); for (const gap of gaps) { expect(gap).toBeGreaterThanOrEqual(5); } } async function expectCommonActionsDoNotDuplicateBottomTabs(page: Page) { const labels = await page.evaluate(() => ({ actions: Array.from(document.querySelectorAll("[data-testid^='mobile-action-'][data-testid$='-label']")) .map((item) => item.textContent?.trim()) .filter(Boolean), bottomTabs: Array.from(document.querySelectorAll("[data-testid^='mobile-nav-'][data-testid$='-label']")) .map((item) => item.textContent?.trim()) .filter(Boolean), })); expect(labels.actions).not.toContain("首页"); expect(labels.actions).not.toContain("审批"); expect(labels.actions).not.toContain("进度"); expect(labels.actions).not.toContain("报销"); expect(labels.actions).not.toContain("我的"); expect(labels.actions.filter((label) => labels.bottomTabs.includes(label)).length).toBe(0); } test.describe("MIF7 移动信息架构整改", () => { test("付款责任通知在 PC 与移动通知中心都可直达付款批次", () => { const target = { targetType: "payment_batch", targetId: "batch/dg7" }; expect(resolveNotificationTargetLink(target)).toBe("/payment-batches?id=batch%2Fdg7"); expect(resolveMobileNotificationTargetLink(target)).toBe("/mobile/payment-batches?id=batch%2Fdg7"); }); test.skip(process.env.E2E_MODE === "live", "MIF7 本地专项使用 mock 数据验证信息架构。"); test("首页常用入口不重复底部 Tab,员工进度页按状态分标签", async ({ browser }) => { for (const width of [320, 360, 375, 390, 393, 414, 430]) { const notifications = buildNotifications(); const mobile = await newMobilePage(browser, width); try { await mockApis(mobile.page, "employee", notifications); await loginForMobile(mobile.page, "employee"); await mobile.page.goto("/mobile"); await expect(mobile.page.getByTestId("mobile-nav-approvals-label")).toHaveText("进度"); await expect(mobile.page.getByTestId("mobile-action-approvals-label")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-pending-summary")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-action-grid")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-action-purchase-label")).toHaveText("采购"); await expect(mobile.page.getByTestId("mobile-action-asset-scan")).toHaveCount(0); await expectCommonActionsDoNotDuplicateBottomTabs(mobile.page); await expectActionTileGapStable(mobile.page); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath(`home-employee-w${width}`), fullPage: true }); await mobile.page.getByTestId("mobile-nav-approvals").click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals$/); await expect(mobile.page.getByTestId("mobile-approvals-progress")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-progress-tab-draft")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-progress-tab-reviewing")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-progress-tab-approved")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-progress-tab-returned")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-approvals-list")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-approvals-approve")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-approval-progress-card")).toHaveCount(3); await expectMobileApprovalStatusSlots(mobile.page); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath(`employee-progress-w${width}`), fullPage: true }); await mobile.page.goto("/mobile/leave?view=records&status=approved"); await expect(mobile.page.getByTestId("mobile-leave-view-records")).toHaveAttribute("data-state", "active"); await expect(mobile.page.getByTestId("mobile-leave-record-card")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-leave-balances")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-leave-balances")).toContainText("企业微信主办"); await expect(mobile.page.getByTestId("mobile-leave-balance-summary")).toContainText("4.0"); await expect(mobile.page.getByTestId("mobile-leave-form")).toHaveCount(0); await mobile.page.goto("/mobile/purchase-requests?status=approved"); await expect(mobile.page.getByTestId("mobile-purchase-requests-list")).toBeVisible(); await expect(mobile.page.getByLabel("当前列表搜索")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-purchase-request-card")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-purchase-tab-approved")).toHaveAttribute("data-state", "active"); } finally { await mobile.context.close(); } } }); test("审批人首页只保留轻待办摘要,审批页按待我审批和已处理分组", async ({ browser }) => { const notifications = buildNotifications(); const mobile = await newMobilePage(browser, 390); try { await mockApis(mobile.page, "manager", notifications); await loginForMobile(mobile.page, "manager"); await mobile.page.goto("/mobile"); await expect(mobile.page.getByTestId("mobile-nav-approvals-label")).toHaveText("待我审批"); await expect(mobile.page.getByTestId("mobile-pending-summary")).toHaveCount(1); await expect(mobile.page.getByTestId("mobile-notifications")).not.toContainText("报销待审批"); await expect(mobile.page.getByTestId("mobile-action-approvals")).toHaveCount(0); await expectCommonActionsDoNotDuplicateBottomTabs(mobile.page); await expect(mobile.page.getByTestId("mobile-pending-summary-count")).toHaveText("1"); await expect(mobile.page.getByTestId("mobile-pending-summary-primary")).toHaveCount(1); await expect(mobile.page.getByTestId("mobile-pending-summary-primary")).not.toContainText("待处理"); await expect(mobile.page.getByRole("link", { name: "查看全部审批" })).toBeVisible(); await mobile.page.screenshot({ path: screenshotPath("home-manager-pending-summary"), fullPage: true }); const badgeMetrics = await mobile.page.evaluate(() => { const nav = document.querySelector("[data-testid='mobile-nav-approvals']"); const icon = nav?.querySelector("[aria-hidden='true']"); const badge = nav?.querySelector("[data-testid='mobile-nav-approvals-badge']"); if (!icon || !badge) return null; const iconRect = icon.getBoundingClientRect(); const badgeRect = badge.getBoundingClientRect(); return { iconLeft: iconRect.left, iconRight: iconRect.right, badgeLeft: badgeRect.left, badgeRight: badgeRect.right, }; }); expect(badgeMetrics).not.toBeNull(); expect(badgeMetrics!.badgeLeft).toBeLessThanOrEqual(badgeMetrics!.iconRight + 4); expect(badgeMetrics!.badgeRight).toBeGreaterThanOrEqual(badgeMetrics!.iconLeft - 14); await mobile.page.getByTestId("mobile-pending-summary").getByRole("link").first().click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\/task-dg7$/); await expect(mobile.page.getByTestId("mobile-approvals-detail")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-approvals-list")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-approvals-detail")).not.toContainText("业务单号"); await expect(mobile.page.getByTestId("mobile-approvals-detail")).toContainText("报销单 BX20260512001"); await expect(mobile.page.getByTestId("mobile-approvals-history")).toContainText("提交 · 测试员工"); await expect(mobile.page.getByTestId("mobile-approvals-history")).toContainText("转审 · 测试审批人"); await expect(mobile.page.getByTestId("mobile-approvals-history")).not.toContainText("transferToEmployeeId"); await expectMobileApprovalStatusSlots(mobile.page); await expectMobileDetailHeaderSpacing(mobile.page, "mobile-approvals-detail-header"); await expectApprovalActionsStable(mobile.page); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath("manager-approval-push-detail"), fullPage: true }); await mobile.page.getByTestId("mobile-approvals-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile$/); await mobile.page.getByTestId("mobile-pending-summary").getByRole("link").first().click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\/task-dg7$/); await mobile.page.getByTestId("mobile-approval-reimbursement-detail-link").click(); await expect(mobile.page).toHaveURL(/\/mobile\/reimbursements\/reimbursement-dg7$/); await expect(mobile.page.getByTestId("mobile-reimbursement-items")).toBeVisible(); await mobile.page.getByTestId("mobile-reimbursement-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\/task-dg7$/); await expectApprovalActionsStable(mobile.page); await mobile.page.goto("/mobile/approvals"); await expect(mobile.page.getByRole("tab", { name: "待我审批" })).toBeVisible(); await expect(mobile.page.getByRole("tab", { name: "已处理" })).toBeVisible(); await expect(mobile.page.getByTestId("mobile-approvals-queue")).toHaveCount(0); await mobile.page.getByRole("tab", { name: "已处理" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\?taskTab=completed$/); await expect(mobile.page.getByTestId("mobile-approvals-task-task-dg7-completed")).toBeVisible(); await mobile.page.getByTestId("mobile-approvals-task-task-dg7-completed").click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\/task-dg7-completed$/); await expect(mobile.page.getByTestId("mobile-approvals-detail-header")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); await mobile.page.getByTestId("mobile-approvals-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\?taskTab=completed$/); await expect(mobile.page.getByRole("tab", { name: "已处理" })).toHaveAttribute("data-state", "active"); await mobile.page.screenshot({ path: screenshotPath("approver-task-tabs"), fullPage: true }); } finally { await mobile.context.close(); } }); test("通知中心事件化,点击通知直达业务详情且返回来源页", async ({ browser }) => { const notifications = buildNotifications(); const mobile = await newMobilePage(browser, 390); try { await mockApis(mobile.page, "employee", notifications); await loginForMobile(mobile.page, "employee"); await mobile.page.goto("/mobile"); await expect(mobile.page.getByTestId("mobile-home-notification-card")).toHaveCount(3); await mobile.page.getByTestId("mobile-home-notification-card").filter({ hasText: "采购已通过" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/purchase-requests\/purchase-dg7-approved$/); await expect(mobile.page.getByTestId("mobile-purchase-detail-header")).toBeVisible(); await mobile.page.getByTestId("mobile-purchase-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile$/); await mobile.page.goto("/mobile/notifications"); await expect(mobile.page.getByTestId("mobile-notification-card")).toHaveCount(3); await expect(mobile.page.getByTestId("mobile-notification-card").first()).toContainText("事件"); await expect(mobile.page.getByTestId("mobile-approvals-approve")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-approvals-reject")).toHaveCount(0); await mobile.page.screenshot({ path: screenshotPath("notifications-event-inbox"), fullPage: true }); await mobile.page.getByTestId("mobile-notification-card").filter({ hasText: "采购已通过" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/purchase-requests\/purchase-dg7-approved$/); await expect(mobile.page.getByTestId("mobile-purchase-detail-header")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-purchase-detail-summary")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath("purchase-detail-shell"), fullPage: true }); await mobile.page.getByTestId("mobile-purchase-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/notifications/); await mobile.page.goto("/mobile/notifications"); await mobile.page.getByTestId("mobile-notification-card").filter({ hasText: "请假已通过" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/leave\/leave-dg7-approved$/); await expect(mobile.page.getByTestId("mobile-leave-detail-header")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-leave-record-card")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-leave-form")).toHaveCount(0); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath("notification-direct-leave-detail"), fullPage: true }); await mobile.page.getByTestId("mobile-leave-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/notifications/); } finally { await mobile.context.close(); } }); test("报销详情统一详情壳,直接进入请假详情返回进度标签", async ({ browser }) => { const notifications = buildNotifications(); const mobile = await newMobilePage(browser, 390); try { await mockApis(mobile.page, "employee", notifications); await loginForMobile(mobile.page, "employee"); await mobile.page.goto("/mobile/reimbursements"); await expect(mobile.page.getByLabel("当前列表搜索")).toBeVisible(); await mobile.page.getByTestId("mobile-reimbursements-tab-approved").click(); await expect(mobile.page).toHaveURL(/\/mobile\/reimbursements\?status=approved$/); await mobile.page.evaluate(() => { const scroller = document.querySelector(".hyb-mobile-shell .overflow-y-auto"); if (scroller) { scroller.scrollTo({ top: 600, behavior: "auto" }); return; } window.scrollTo({ top: 600, behavior: "auto" }); }); await mobile.page.getByTestId("mobile-reimbursement-card").first().getByRole("link").click(); await expect(mobile.page).toHaveURL(/\/mobile\/reimbursements\/reimbursement-dg7$/); await expect(mobile.page.getByTestId("mobile-reimbursement-detail-header")).toBeVisible(); await expect .poll(() => mobile.page.evaluate(() => document.querySelector(".hyb-mobile-shell .overflow-y-auto")?.scrollTop ?? window.scrollY), ) .toBeLessThanOrEqual(2); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); await mobile.page.getByTestId("mobile-reimbursement-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/reimbursements\?status=approved$/); await expect(mobile.page.getByTestId("mobile-reimbursements-tab-approved")).toHaveAttribute("data-state", "active"); await mobile.page.goto("/mobile/reimbursements/reimbursement-dg7"); await expect(mobile.page.getByTestId("mobile-reimbursement-detail-header")).toBeVisible(); await expect(mobile.page.getByTestId("mobile-bottom-nav")).toHaveCount(0); const sectionOrder = await mobile.page.evaluate(() => [ "mobile-reimbursement-items", "mobile-reimbursement-attachments", "mobile-reimbursement-processing-progress", ].map((testId) => document.querySelector(`[data-testid='${testId}']`)?.getBoundingClientRect().top ?? -1), ); expect(sectionOrder[0]).toBeLessThan(sectionOrder[1]); expect(sectionOrder[1]).toBeLessThan(sectionOrder[2]); await expectNoMobileShellRegression(mobile.page); await mobile.page.screenshot({ path: screenshotPath("reimbursement-detail-shell"), fullPage: true }); await mobile.page.goto("/mobile/leave/leave-dg7-approved"); await expect(mobile.page.getByTestId("mobile-leave-detail-header")).toBeVisible(); await mobile.page.getByTestId("mobile-leave-detail-header").getByRole("button", { name: "返回" }).click(); await expect(mobile.page).toHaveURL(/\/mobile\/approvals\?progress=approved/); await expect(mobile.page.getByTestId("mobile-leave-form")).toHaveCount(0); } finally { await mobile.context.close(); } }); test("财务首页角色化摘要只对财务角色展示", async ({ browser }) => { const financeMobile = await newMobilePage(browser, 390); try { await mockApis(financeMobile.page, "finance", buildNotifications()); await loginForMobile(financeMobile.page, "finance"); await financeMobile.page.goto("/mobile"); await expect(financeMobile.page.getByTestId("mobile-finance-summary")).toBeVisible(); await expect(financeMobile.page.getByTestId("mobile-finance-summary")).toContainText("待付款"); await expect(financeMobile.page.getByTestId("mobile-finance-summary")).toContainText("异常"); await expect(financeMobile.page.getByTestId("mobile-finance-summary")).toContainText("4"); await expect(financeMobile.page.getByTestId("mobile-finance-disabled-state")).toHaveCount(0); await expectNoMobileShellRegression(financeMobile.page); await financeMobile.page.screenshot({ path: screenshotPath("home-finance-summary"), fullPage: true }); await financeMobile.page.goto("/mobile/me"); await expect(financeMobile.page.getByRole("link", { name: /财务/ })).toHaveCount(0); await financeMobile.page.goto("/mobile#finance"); await expect(financeMobile.page).toHaveURL(/\/mobile#finance$/); await expect(financeMobile.page.getByTestId("mobile-finance-summary")).toBeInViewport(); await expect(financeMobile.page.getByTestId("mobile-finance-disabled-state")).toHaveCount(0); await expectNoMobileShellRegression(financeMobile.page); } finally { await financeMobile.context.close(); } const firstUseFinanceMobile = await newMobilePage(browser, 390); try { await mockApis(firstUseFinanceMobile.page, "finance", buildNotifications(), { pendingBatchCount: 0, failedItemCount: 0, riskCount: 0, paymentBatchEnabled: true, href: "/payment-batches", }); await loginForMobile(firstUseFinanceMobile.page, "finance"); await firstUseFinanceMobile.page.goto("/mobile"); const financeSummary = firstUseFinanceMobile.page.getByTestId("mobile-finance-summary"); await expect(financeSummary).toBeVisible(); await expect(financeSummary).toContainText("待付款"); await expect(financeSummary.getByRole("link", { name: "进入付款" })).toHaveAttribute("href", "/mobile/payment-batches"); await financeSummary.getByRole("link", { name: "进入付款" }).click(); await expect(firstUseFinanceMobile.page).toHaveURL(/\/mobile\/payment-batches$/); } finally { await firstUseFinanceMobile.context.close(); } const adminMobile = await newMobilePage(browser, 390); try { await mockApis(adminMobile.page, "admin", buildNotifications()); await loginForMobile(adminMobile.page, "admin"); await adminMobile.page.goto("/mobile"); await expect(adminMobile.page.getByTestId("mobile-finance-summary")).toHaveCount(0); await adminMobile.page.goto("/mobile/me"); await expect(adminMobile.page.getByRole("link", { name: /财务/ })).toHaveCount(0); } finally { await adminMobile.context.close(); } }); });