Skip to content

Commit

Permalink
Merge pull request #17018 from calixteman/alt_text_test
Browse files Browse the repository at this point in the history 
[Editor] Add an integration test for the new alt-text flow
  • Loading branch information
@calixteman
calixteman authored Sep 24, 2023
2 parents 9b46404 + de55345 commit 48d7559
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 0 deletions.
156 changes: 156 additions & 0 deletions test/integration/stamp_editor_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const {
waitForAnnotationEditorLayer,
} = require("./test_utils.js");
const path = require("path");
const fs = require("fs");

describe("Stamp Editor", () => {
describe("Basic operations", () => {
Expand Down Expand Up @@ -198,4 +199,159 @@ describe("Stamp Editor", () => {
);
});
});

describe("Alt text dialog", () => {
let pages;

beforeAll(async () => {
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 50);
});

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

it("must check that the alt-text flow is correctly implemented", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.click("#editorStamp");

const data = fs
.readFileSync(path.join(__dirname, "../images/firefox_logo.png"))
.toString("base64");
await page.evaluate(async imageData => {
const resp = await fetch(`data:image/png;base64,${imageData}`);
const blob = await resp.blob();

await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
}, data);

await page.keyboard.down("Control");
await page.keyboard.press("v");
await page.keyboard.up("Control");

// Wait for the alt-text button to be visible.
const buttonSelector = "#pdfjs_internal_editor_0 button.altText";
await page.waitForSelector(buttonSelector);

// Click on the alt-text button.
await page.click(buttonSelector);

// Wait for the alt-text dialog to be visible.
await page.waitForSelector("#altTextDialog", { visible: true });

// Click on the alt-text editor.
const textareaSelector = "#altTextDialog textarea";
await page.click(textareaSelector);
await page.type(textareaSelector, "Hello World");

// Click on save button.
const saveButtonSelector = "#altTextDialog #altTextSave";
await page.click(saveButtonSelector);

// Wait for the alt-text button to have the correct icon.
await page.waitForSelector(`${buttonSelector}.done`);

// Hover the button.
await page.hover(buttonSelector);

// Wait for the tooltip to be visible.
const tooltipSelector = `${buttonSelector} .tooltip`;
await page.waitForSelector(tooltipSelector, { visible: true });

let tooltipText = await page.evaluate(
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Hello World");

// Now we change the alt-text and check that the tooltip is updated.
await page.click(buttonSelector);
await page.waitForSelector("#altTextDialog", { visible: true });
await page.evaluate(sel => {
document.querySelector(`${sel}`).value = "";
}, textareaSelector);
await page.click(textareaSelector);
await page.type(textareaSelector, "Dlrow Olleh");
await page.click(saveButtonSelector);
await page.waitForSelector(`${buttonSelector}.done`);
await page.hover(buttonSelector);
await page.waitForSelector(tooltipSelector, { visible: true });
tooltipText = await page.evaluate(
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Dlrow Olleh");

// Now we just check that cancel didn't change anything.
await page.click(buttonSelector);
await page.waitForSelector("#altTextDialog", { visible: true });
await page.evaluate(sel => {
document.querySelector(`${sel}`).value = "";
}, textareaSelector);
await page.click(textareaSelector);
await page.type(textareaSelector, "Hello PDF.js");
const cancelButtonSelector = "#altTextDialog #altTextCancel";
await page.click(cancelButtonSelector);
await page.waitForSelector(`${buttonSelector}.done`);
await page.hover(buttonSelector);
await page.waitForSelector(tooltipSelector, { visible: true });
tooltipText = await page.evaluate(
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
// The tooltip should still be "Dlrow Olleh".
expect(tooltipText).toEqual("Dlrow Olleh");

// Now we switch to decorative.
await page.click(buttonSelector);
await page.waitForSelector("#altTextDialog", { visible: true });
const decorativeSelector = "#altTextDialog #decorativeButton";
await page.click(decorativeSelector);
await page.click(saveButtonSelector);
await page.waitForSelector(`${buttonSelector}.done`);
await page.hover(buttonSelector);
await page.waitForSelector(tooltipSelector, { visible: true });
tooltipText = await page.evaluate(
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Marked as decorative");

// Now we switch back to non-decorative.
await page.click(buttonSelector);
await page.waitForSelector("#altTextDialog", { visible: true });
const descriptionSelector = "#altTextDialog #descriptionButton";
await page.click(descriptionSelector);
await page.click(saveButtonSelector);
await page.waitForSelector(`${buttonSelector}.done`);
await page.hover(buttonSelector);
await page.waitForSelector(tooltipSelector, { visible: true });
tooltipText = await page.evaluate(
sel => document.querySelector(`${sel}`).innerText,
tooltipSelector
);
expect(tooltipText).toEqual("Dlrow Olleh");

// Now we remove the alt-text and check that the tooltip is removed.
await page.click(buttonSelector);
await page.waitForSelector("#altTextDialog", { visible: true });
await page.evaluate(sel => {
document.querySelector(`${sel}`).value = "";
}, textareaSelector);
await page.click(saveButtonSelector);
await page.waitForSelector(`${buttonSelector}:not(.done)`);
await page.hover(buttonSelector);
await page.evaluate(
sel => document.querySelector(sel) === null,
tooltipSelector
);
})
);
});
});
});
2 changes: 2 additions & 0 deletions test/test.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -947,6 +947,8 @@ async function startBrowser(browserName, startUrl = "") {
"gfx.canvas.accelerated": false,
// Enable the `round` CSS function.
"layout.css.round.enabled": true,
// This allow to copy some data in the clipboard.
"dom.events.asyncClipboard.clipboardItem": true,
};
}

Expand Down

0 comments on commit 48d7559

Please sign in to comment.