Repository: mozilla/pdf.js
File: test/integration/thumbnail_view_spec.mjs (JavaScript)

Code before:
import { closePages, loadAndWait, waitForTimeout } from "./test_utils.mjs";

describe("PDF Thumbnail View", () => {
  describe("Works without errors", () => {
    let pages;

    beforeEach(async () => {
      pages = await loadAndWait("tracemonkey.pdf", "#sidebarToggleButton");
    });

    afterEach(async () => {
      await closePages(pages);
    });

    it("should render thumbnails without errors", async () => {
      await Promise.all(
        pages.map(async ([browserName, page]) => {
          await page.click("#sidebarToggleButton");

          const thumbSelector = "#thumbnailView .thumbnailImage";
          await page.waitForSelector(thumbSelector, { visible: true });

          await page.evaluate(() => {
            window.PDFViewerApplication.pdfViewer.currentScaleValue = "50";
          });
          await waitForTimeout(500); // Give time for rendering.

          const src = await page.$eval(thumbSelector, el => el.src);
          expect(src)
            .withContext(`In ${browserName}`)
            .toMatch(/^data:image\//);
        })
      );
    });
  });
});


Review comment (suggestion):
It's not really clear to me why the `currentScaleValue` is changed here because AFAICT  changing the zoom level doesn't change the thumbnails (I tried in the viewer just now). I tried running this line in the web console of the viewer and it zooms to 5000% which is probably also not what you meant to do here.

What does change the thumbnails is rotating the page for example, so you could do that to trigger a re-rendering of the thumbnails.

What would be a good order of assertions before _and_ after the re-rendering is:

- Wait for `thumbSelector` to be visible (you already have this).
- Wait for the `data-loaded="true"` attribute to appear on `thumbnail` as an indicator that loading finished.
- Check if `src="data:image" is present (you already have this).
- Ideally, if feasible with the data URL, check if the image content contains non-zero pixels like you already made for the `should work with the legacy canvasContext parameter` test.

Code after:
import { closePages, loadAndWait } from "./test_utils.mjs";

describe("PDF Thumbnail View", () => {
  describe("Works without errors", () => {
    let pages;

    beforeEach(async () => {
      pages = await loadAndWait("tracemonkey.pdf", "#sidebarToggleButton");
    });

    afterEach(async () => {
      await closePages(pages);
    });

    it("should render thumbnails without errors", async () => {
      await Promise.all(
        pages.map(async ([browserName, page]) => {
          await page.click("#sidebarToggleButton");

          const thumbSelector = "#thumbnailView .thumbnailImage";
          await page.waitForSelector(thumbSelector, { visible: true });

          await page.waitForSelector(
            '#thumbnailView .thumbnail[data-loaded="true"]'
          );

          const src = await page.$eval(thumbSelector, el => el.src);
          expect(src)
            .withContext(`In ${browserName}`)
            .toMatch(/^data:image\//);
        })
      );
    });
  });
});