如何在Cypress中确认opnseadragon镜像已加载？

Question

我正在 Cypress 中为 openseadragon React 组件编写单元测试。 opneseadragon 中是否有一个选项可以知道图像已加载。

React 组件是

const { DEV } = import.meta.env;

interface OpenSeaDragonImageProps {
  tileSourcesUrl: string;
}

const OpenSeaDragonImage = ({ tileSourcesUrl }: OpenSeaDragonImageProps) => {
  const viewerRef = useRef<OpenSeadragon.Viewer | null>(null);

  useEffect(() => {
    viewerRef.current = OpenSeadragon({
      id: "osdviewer",
      tileSources: tileSourcesUrl,
      zoomInButton: "navControlZoomIn",
      zoomOutButton: "navControlZoomOut",
      homeButton: "navControlReset",
    });

    if (window.Cypress && DEV) {
      window.osdViewer = viewerRef.current;
    }

    return () => viewerRef.current?.destroy();
  }, [tileSourcesUrl]);

  return (
    <div className={styles.osd}>
      <div id="osdviewer" className={styles.osdViewer} />

      <Stack spacing={4} className={styles.nav}>
        <ButtonGroup variant="text">
          <Button className={styles.navButton}>
            <NoGrid />
          </Button>
        </ButtonGroup>

        <ButtonGroup variant="text">
          <Button id="navControlReset" className={styles.navButton}>
            <Reset className={styles.navButtonIcon} />
          </Button>
        </ButtonGroup>

        <ButtonGroup id="navControl" orientation="vertical" variant="text">
          <Button id="navControlZoomIn" className={styles.navButton}>
            <ZoomIn className={styles.navButtonIcon} />
          </Button>
          <Button id="navControlZoomOut" className={styles.navButton}>
            <ZoomOut className={styles.navButtonIcon} />
          </Button>
        </ButtonGroup>
      </Stack>
    </div>
  );
};

导出默认的OpenSeaDragonImage；

这是当前的测试代码。

import { Viewer } from "openseadragon";
import OpenSeaDragonImage from "./OpenSeaDragonImage";

declare global {
  interface Window {
    osdViewer: Viewer;
  }
}

context(OpenSeaDragonImage.name, () => {
  describe("OpenSeaDragon view", () => {
    beforeEach(() => {
      cy.mount(
        <OpenSeaDragonImage tileSourcesUrl="https://openseadragon.github.io/example-images/highsmith/highsmith.dzi" />
      );
      cy.get(".openseadragon-container").should("exist");
    });

    it("Should OSD view zoom-in with custom button", () => {
      cy.window().then((window) => {
        expect(window.osdViewer.viewport.getZoom()).to.equal(1);

        window.osdViewer.addHandler("open", function () {
          cy.get("#navControlZoomIn").as("zoomIn");
          cy.get("@zoomIn").click();
          cy.get("@zoomIn").then(() => {
            expect(window.osdViewer.viewport.getZoom()).to.equal(2);
          });
        });
      });
    });

    it("Should OSD view zoom-out with custom button", () => {
      cy.window().then((window) => {
        cy.get("#navControlZoomIn").dblclick();

        window.osdViewer.addHandler("open", function () {
          cy.get("#navControlZoomOut").as("zoomOut");
          cy.get("@zoomOut").click();
          cy.get("@zoomOut").then(() => {
            expect(window.osdViewer.viewport.getZoom()).to.equal(2);
          });
        });
      });
    });

    it("Should OSD view reset view in custom button", () => {
      cy.window().then((window) => {
        cy.get("#navControlZoomIn").dblclick();

        window.osdViewer.addHandler("open", function () {
          cy.get("#navControlReset").as("viewReset");
          cy.get("@viewReset").click();
          cy.get("@viewReset").then(() => {
            expect(window.osdViewer.viewport.getZoom()).to.equal(1);
          });
        });
      });
    });
  });
});

测试缩放按钮和其他测试时未加载图像。

是否有解决方案来查找图像已加载以调用测试？

Answer 1

您想要 full-loaded-change 事件。像这样的东西：

function whenFullyLoaded(tiledImage, callback) {
  if (tiledImage.getFullyLoaded()) {
    setTimeout(callback, 1); // So both paths are asynchronous
  } else {
    tiledImage.addOnceHandler('fully-loaded-change', function() {
      callback(); // Calling it this way keeps the arguments consistent (if we passed callback into addOnceHandler it would get an event on this path but not on the setTimeout path above)
    });
  }
}

whenFullyLoaded(viewer.world.getItemAt(0), function() {
  // Success!
});