V1-V6 收口移动视口与 PDF 发票上传

client/tests/e2e/r111-invoice-reimbursement-guard.spec.ts

@@ -483,16 +483,29 @@ async function collectVisualMetrics(page: Page) {
       document.querySelector("nav a[aria-current='page']");
     const activeStyle = activeNav ? getComputedStyle(activeNav) : null;
     const activeRgb = activeStyle ? parseRgb(activeStyle.backgroundColor) : null;
+    const stickyActions = document.querySelector("[data-testid='mobile-reimbursement-sticky-actions']");
+    const stickyRect = stickyActions?.getBoundingClientRect();
+    const addButton = document.querySelector("[data-testid='mobile-reimbursement-sticky-invoice-add']");
+    const submitButton = document.querySelector("[data-testid='reimbursement-submit']");
+    const addRect = addButton?.getBoundingClientRect();
+    const submitRect = submitButton?.getBoundingClientRect();
     const bodyText = document.body?.innerText ?? "";
 
     return {
       width: window.innerWidth,
+      height: window.innerHeight,
       scrollWidth: Math.max(document.documentElement.scrollWidth, document.body?.scrollWidth ?? 0),
       tableCount: Array.from(document.querySelectorAll("table")).filter((item) => item.getBoundingClientRect().height > 0).length,
+      navCount: document.querySelectorAll("[data-testid^='mobile-nav-']").length,
       navHeight: navRect ? Math.round(navRect.height) : 0,
       activeNavBackground: activeStyle?.backgroundColor ?? "",
       activeNavAverage: activeRgb ? Math.round((activeRgb.r + activeRgb.g + activeRgb.b) / 3) : 255,
       activeNavAlpha: activeRgb?.a ?? 0,
+      stickyActionsVisible: Boolean(stickyRect && stickyRect.height > 0 && stickyRect.bottom <= window.innerHeight + 2),
+      stickyBottomGap: stickyRect ? Math.round(window.innerHeight - stickyRect.bottom) : null,
+      stickyHeight: stickyRect ? Math.round(stickyRect.height) : 0,
+      stickyButtonsSameRow: Boolean(addRect && submitRect && Math.abs(addRect.top - submitRect.top) <= 2),
+      stickyButtonMinHeight: Math.min(addRect?.height ?? 0, submitRect?.height ?? 0),
       activeElementTestId: document.activeElement?.getAttribute("data-testid") ?? "",
       bodyText,
     };
@@ -560,11 +573,12 @@ test.describe("R111 国内报销发票与附件双端体验", () => {
       const beforeDialogMetrics = await collectVisualMetrics(mobile.page);
       expect(beforeDialogMetrics.scrollWidth).toBeLessThanOrEqual(beforeDialogMetrics.width + 2);
       expect(beforeDialogMetrics.tableCount).toBe(0);
-      expect(beforeDialogMetrics.navHeight).toBeLessThanOrEqual(68);
-      if (beforeDialogMetrics.activeNavAlpha > 0) {
-        expect(beforeDialogMetrics.activeNavAlpha).toBeGreaterThan(0.9);
-        expect(beforeDialogMetrics.activeNavAverage, beforeDialogMetrics.activeNavBackground).toBeLessThan(245);
-      }
+      expect(beforeDialogMetrics.navCount).toBe(0);
+      expect(beforeDialogMetrics.navHeight).toBe(0);
+      expect(beforeDialogMetrics.stickyActionsVisible).toBe(true);
+      expect(beforeDialogMetrics.stickyBottomGap).toBeLessThanOrEqual(2);
+      expect(beforeDialogMetrics.stickyButtonsSameRow).toBe(true);
+      expect(beforeDialogMetrics.stickyButtonMinHeight).toBeGreaterThanOrEqual(44);
 
       await mobile.page.getByTestId("reimbursement-invoice-add").click();
       await expect(mobile.page.getByTestId("reimbursement-invoice-dialog")).toBeVisible();
@@ -592,20 +606,12 @@ test.describe("R111 国内报销发票与附件双端体验", () => {
       await expect(invoiceDialog.getByText("暂无可添加发票")).toBeVisible();
 
       await invoiceDialog.getByRole("button", { name: "上传" }).click();
-      await expect(invoiceDialog.getByText("拍照或选图片")).toBeVisible();
-      await expect(invoiceDialog.getByText("选择 PDF/文件")).toBeVisible();
-      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-file")).toHaveAttribute("accept", "image/*");
-      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-file")).toHaveAttribute("capture", "environment");
-      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-document")).toHaveAttribute(
-        "accept",
-        /application\/pdf/,
-      );
-      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-document")).not.toHaveAttribute(
-        "capture",
-        /.+/,
-      );
+      await expect(invoiceDialog.getByText("选择 PDF 发票")).toBeVisible();
+      await expect(invoiceDialog.getByText("拍照或选图片")).toHaveCount(0);
+      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-file")).toHaveAttribute("accept", "application/pdf");
+      await expect(mobile.page.getByTestId("reimbursement-invoice-upload-file")).not.toHaveAttribute("capture", /.+/);
 
-      await mobile.page.getByTestId("reimbursement-invoice-upload-document").setInputFiles({
+      await mobile.page.getByTestId("reimbursement-invoice-upload-file").setInputFiles({
         name: "北京悦海堂发票.pdf",
         mimeType: "application/pdf",
         buffer: Buffer.from("%PDF r111 mobile invoice"),