MorphDoc/packages/preview-engine/tests/docx-media-runtime.test.ts

// @vitest-environment happy-dom

import { beforeEach, describe, expect, it } from "vitest";
import { collectDocxMediaCaptureTargets } from "../src/index.js";

describe("DOCX 媒体捕获计划", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
    window.scrollTo(0, 0);
  });

  it("按文档顺序标记图片、Mermaid 和 ECharts", () => {
    document.body.innerHTML = `
      <article id="write">
        <figure class="md-document-image-block">
          <img class="md-document-image" alt="架构截图">
          <figcaption>系统架构</figcaption>
        </figure>
        <div class="mermaid"><svg aria-label="处理流程"></svg></div>
        <figure class="md-echarts">
          <div class="md-echarts-host" aria-label="年度收入">
            <svg></svg>
          </div>
          <figcaption>收入趋势</figcaption>
        </figure>
      </article>
    `;
    const media = Array.from(
      document.querySelectorAll<HTMLElement | SVGSVGElement>(
        "img, svg"
      )
    );
    const article = document.querySelector<HTMLElement>("#write")!;
    article.getBoundingClientRect = () =>
      ({
        x: 0,
        y: 0,
        left: 0,
        top: 0,
        right: 700,
        bottom: 900,
        width: 700,
        height: 900,
        toJSON: () => ({})
      }) as DOMRect;
    const horizontalPositions = [0, 200, 400];
    media.forEach((element, index) => {
      const left = horizontalPositions[index]!;
      element.getBoundingClientRect = () =>
        ({
          x: left,
          y: 20 + index * 100,
          left,
          top: 20 + index * 100,
          right: left + 300,
          bottom: 170 + index * 100,
          width: 300,
          height: 150,
          toJSON: () => ({})
        }) as DOMRect;
    });

    const targets = collectDocxMediaCaptureTargets(document, {
      contentWidthPx: 700,
      contentHeightPx: 900
    });

    expect(
      targets.map(
        ({ id, kind, kindOrdinal, altText, caption, alignment }) => ({
          id,
          kind,
          kindOrdinal,
          altText,
          caption,
          alignment
        })
      )
    ).toEqual([
      {
        id: "docx-media-1",
        kind: "image",
        kindOrdinal: 1,
        altText: "架构截图",
        caption: "系统架构",
        alignment: "left"
      },
      {
        id: "docx-media-2",
        kind: "mermaid",
        kindOrdinal: 1,
        altText: "处理流程",
        caption: undefined,
        alignment: "center"
      },
      {
        id: "docx-media-3",
        kind: "echarts",
        kindOrdinal: 1,
        altText: "年度收入",
        caption: "收入趋势",
        alignment: "right"
      }
    ]);
    expect(
      media.map((element) => element.dataset.docxMediaId)
    ).toEqual(["docx-media-1", "docx-media-2", "docx-media-3"]);
    expect(targets[0]?.rasterScale).toBe(3.125);
  });

  it("限制超大媒体的显示尺寸和 PNG 像素规模", () => {
    document.body.innerHTML = `
      <article id="write">
        <img class="md-document-image" alt="">
      </article>
    `;
    const image = document.querySelector("img")!;
    const article = document.querySelector<HTMLElement>("#write")!;
    article.getBoundingClientRect = () =>
      ({
        x: 0,
        y: 0,
        left: 0,
        top: 0,
        right: 800,
        bottom: 900,
        width: 800,
        height: 900,
        toJSON: () => ({})
      }) as DOMRect;
    image.getBoundingClientRect = () =>
      ({
        x: 0,
        y: 0,
        left: 0,
        top: 0,
        right: image.style.width ? 800 : 4000,
        bottom: image.style.width ? 600 : 3000,
        width: image.style.width ? 800 : 4000,
        height: image.style.width ? 600 : 3000,
        toJSON: () => ({})
      }) as DOMRect;

    const [target] = collectDocxMediaCaptureTargets(document, {
      contentWidthPx: 800,
      contentHeightPx: 900
    });

    expect(target?.displayWidthPx).toBeLessThanOrEqual(800);
    expect(target?.displayHeightPx).toBeLessThanOrEqual(900);
    expect(target?.alignment).toBe("center");
    expect(
      (target?.captureWidthPx ?? 0) *
        (target?.rasterScale ?? 0)
    ).toBeLessThanOrEqual(4096);
    expect(target?.altText).toBe("图片 1");
  });
});