mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 17:30:09 +02:00
[Editor] Add a first test to test the new alt text flow
This commit is contained in:
parent
b6b99a7b75
commit
debcb2267e
3 changed files with 267 additions and 7 deletions
|
@ -16,6 +16,7 @@
|
||||||
import {
|
import {
|
||||||
applyFunctionToEditor,
|
applyFunctionToEditor,
|
||||||
awaitPromise,
|
awaitPromise,
|
||||||
|
clearInput,
|
||||||
closePages,
|
closePages,
|
||||||
copy,
|
copy,
|
||||||
copyToClipboard,
|
copyToClipboard,
|
||||||
|
@ -24,6 +25,7 @@ import {
|
||||||
getFirstSerialized,
|
getFirstSerialized,
|
||||||
getRect,
|
getRect,
|
||||||
getSerialized,
|
getSerialized,
|
||||||
|
isVisible,
|
||||||
kbBigMoveDown,
|
kbBigMoveDown,
|
||||||
kbBigMoveRight,
|
kbBigMoveRight,
|
||||||
kbSelectAll,
|
kbSelectAll,
|
||||||
|
@ -39,6 +41,7 @@ import {
|
||||||
waitForSelectedEditor,
|
waitForSelectedEditor,
|
||||||
waitForSerialized,
|
waitForSerialized,
|
||||||
waitForStorageEntries,
|
waitForStorageEntries,
|
||||||
|
waitForUnselectedEditor,
|
||||||
} from "./test_utils.mjs";
|
} from "./test_utils.mjs";
|
||||||
import { fileURLToPath } from "url";
|
import { fileURLToPath } from "url";
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
|
@ -835,4 +838,228 @@ describe("Stamp Editor", () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("New alt-text flow", () => {
|
||||||
|
let pages;
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
pages = await loadAndWait(
|
||||||
|
"empty.pdf",
|
||||||
|
".annotationEditorLayer",
|
||||||
|
null,
|
||||||
|
null,
|
||||||
|
{
|
||||||
|
enableAltText: true,
|
||||||
|
enableUpdatedAddImage: true,
|
||||||
|
enableGuessAltText: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(async () => {
|
||||||
|
for (const [, page] of pages) {
|
||||||
|
if (await isVisible(page, "#newAltTextDialog")) {
|
||||||
|
await page.keyboard.press("Escape");
|
||||||
|
await page.waitForSelector("#newAltTextDisclaimer", {
|
||||||
|
visible: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
await page.evaluate(() => {
|
||||||
|
window.uiManager.reset();
|
||||||
|
});
|
||||||
|
// Disable editing mode.
|
||||||
|
await switchToStamp(page, /* disable */ true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
await closePages(pages);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("must check the new alt text flow (part 1)", async () => {
|
||||||
|
// Run sequentially to avoid clipboard issues.
|
||||||
|
for (const [browserName, page] of pages) {
|
||||||
|
await switchToStamp(page);
|
||||||
|
|
||||||
|
// Add an image.
|
||||||
|
await copyImage(page, "../images/firefox_logo.png", 0);
|
||||||
|
const editorSelector = getEditorSelector(0);
|
||||||
|
await page.waitForSelector(editorSelector);
|
||||||
|
await waitForSerialized(page, 1);
|
||||||
|
|
||||||
|
// Wait for the dialog to be visible.
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
||||||
|
// Wait for the spinner to be visible.
|
||||||
|
await page.waitForSelector("#newAltTextDescriptionContainer.loading");
|
||||||
|
// Check we've the disclaimer.
|
||||||
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
|
||||||
|
|
||||||
|
// Check that the dialog has the correct title: "Edit..."
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check that AI guessed the correct alt text.
|
||||||
|
await page.waitForFunction(
|
||||||
|
`document.getElementById("newAltTextDescriptionTextarea").value ===
|
||||||
|
"Fake alt text"`
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check that the dialog has the correct title: "Edit..."
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check we've the disclaimer.
|
||||||
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
|
||||||
|
|
||||||
|
// Clear the input and check that the title changes to "Add..."
|
||||||
|
await clearInput(
|
||||||
|
page,
|
||||||
|
"#newAltTextDescriptionTextarea",
|
||||||
|
/* waitForInputEvent = */ true
|
||||||
|
);
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Add')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check we haven't the disclaimer.
|
||||||
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
|
||||||
|
|
||||||
|
// Add a new alt text and check that the title changes to "Edit..."
|
||||||
|
await page.type("#newAltTextDescriptionTextarea", "Hello World");
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Check we haven't the disclaimer after the modification.
|
||||||
|
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
|
||||||
|
|
||||||
|
// Click on the Not Now button.
|
||||||
|
await page.click("#newAltTextNotNow");
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
||||||
|
await waitForSelectedEditor(page, editorSelector);
|
||||||
|
|
||||||
|
// Wait for the alt-text button to be visible.
|
||||||
|
const buttonSelector = `${editorSelector} button.altText.new`;
|
||||||
|
await page.waitForSelector(buttonSelector, { visible: true });
|
||||||
|
|
||||||
|
// Check the text in the button.
|
||||||
|
let text = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).textContent,
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
let ariaLabel = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
expect(text === ariaLabel && text)
|
||||||
|
.withContext(`In ${browserName}`)
|
||||||
|
.toEqual("Review alt text");
|
||||||
|
|
||||||
|
// Unselect and select the editor and check that the badge is visible.
|
||||||
|
await page.keyboard.press("Escape");
|
||||||
|
await waitForUnselectedEditor(page, editorSelector);
|
||||||
|
await page.waitForSelector(".editToolbar", { visible: false });
|
||||||
|
await page.waitForSelector(".noAltTextBadge", { visible: true });
|
||||||
|
|
||||||
|
await page.evaluate(() => {
|
||||||
|
window.uiManager.selectAll();
|
||||||
|
});
|
||||||
|
await waitForSelectedEditor(page, editorSelector);
|
||||||
|
await page.waitForSelector(".editToolbar", { visible: true });
|
||||||
|
await page.waitForSelector(".noAltTextBadge", { visible: false });
|
||||||
|
|
||||||
|
// Click on the Review button.
|
||||||
|
await page.click(buttonSelector);
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
||||||
|
|
||||||
|
// Check that the dialog has the correct title: "Edit..."
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Click on create automatically toggle button.
|
||||||
|
await page.click("#newAltTextCreateAutomaticallyButton");
|
||||||
|
await clearInput(
|
||||||
|
page,
|
||||||
|
"#newAltTextDescriptionTextarea",
|
||||||
|
/* waitForInputEvent = */ true
|
||||||
|
);
|
||||||
|
|
||||||
|
// Save the empty text.
|
||||||
|
await page.click("#newAltTextSave");
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
||||||
|
await waitForSelectedEditor(page, editorSelector);
|
||||||
|
await page.waitForSelector(buttonSelector, { visible: true });
|
||||||
|
|
||||||
|
// Check the text in the button.
|
||||||
|
text = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).textContent,
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
ariaLabel = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
expect(text === ariaLabel && text)
|
||||||
|
.withContext(`In ${browserName}`)
|
||||||
|
.toEqual("Missing alt text");
|
||||||
|
|
||||||
|
// Unselect and select the editor and check that the badge is visible.
|
||||||
|
await page.keyboard.press("Escape");
|
||||||
|
await waitForUnselectedEditor(page, editorSelector);
|
||||||
|
await page.waitForSelector(".editToolbar", { visible: false });
|
||||||
|
await page.waitForSelector(".noAltTextBadge", { visible: true });
|
||||||
|
await page.evaluate(() => {
|
||||||
|
window.uiManager.selectAll();
|
||||||
|
});
|
||||||
|
await waitForSelectedEditor(page, editorSelector);
|
||||||
|
await page.waitForSelector(".editToolbar", { visible: true });
|
||||||
|
await page.waitForSelector(".noAltTextBadge", { visible: false });
|
||||||
|
|
||||||
|
// Click on the Review button.
|
||||||
|
await page.click(buttonSelector);
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: true });
|
||||||
|
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Add')"
|
||||||
|
);
|
||||||
|
// Add a new alt text and check that the title changes to "Edit..."
|
||||||
|
await page.type("#newAltTextDescriptionTextarea", "Hello World");
|
||||||
|
await page.waitForFunction(
|
||||||
|
"document.getElementById('newAltTextTitle').textContent.startsWith('Edit')"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Click on the Save button.
|
||||||
|
await page.click("#newAltTextSave");
|
||||||
|
await page.waitForSelector("#newAltTextDialog", { visible: false });
|
||||||
|
|
||||||
|
// Check the text in the button.
|
||||||
|
text = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).firstChild.textContent,
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
ariaLabel = await page.evaluate(
|
||||||
|
sel => document.querySelector(sel).getAttribute("aria-label"),
|
||||||
|
buttonSelector
|
||||||
|
);
|
||||||
|
expect(text === ariaLabel && text)
|
||||||
|
.withContext(`In ${browserName}`)
|
||||||
|
.toEqual("Alt text added");
|
||||||
|
|
||||||
|
await page.hover(buttonSelector);
|
||||||
|
|
||||||
|
// Wait for the tooltip to be visible.
|
||||||
|
const tooltipSelector = `${buttonSelector} .tooltip`;
|
||||||
|
await page.waitForSelector(tooltipSelector, { visible: true });
|
||||||
|
|
||||||
|
const tooltipText = await page.evaluate(
|
||||||
|
sel => document.querySelector(`${sel}`).textContent,
|
||||||
|
tooltipSelector
|
||||||
|
);
|
||||||
|
expect(tooltipText).toEqual("Hello World");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -84,6 +84,13 @@ function closePages(pages) {
|
||||||
return Promise.all(pages.map(([_, page]) => closeSinglePage(page)));
|
return Promise.all(pages.map(([_, page]) => closeSinglePage(page)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isVisible(page, selector) {
|
||||||
|
return page.evaluate(
|
||||||
|
sel => document.querySelector(sel)?.checkVisibility(),
|
||||||
|
selector
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
async function closeSinglePage(page) {
|
async function closeSinglePage(page) {
|
||||||
// Avoid to keep something from a previous test.
|
// Avoid to keep something from a previous test.
|
||||||
await page.evaluate(async () => {
|
await page.evaluate(async () => {
|
||||||
|
@ -119,13 +126,23 @@ function waitForTimeout(milliseconds) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clearInput(page, selector) {
|
async function clearInput(page, selector, waitForInputEvent = false) {
|
||||||
|
const action = async () => {
|
||||||
await page.click(selector);
|
await page.click(selector);
|
||||||
await kbSelectAll(page);
|
await kbSelectAll(page);
|
||||||
await page.keyboard.press("Backspace");
|
await page.keyboard.press("Backspace");
|
||||||
await page.waitForFunction(
|
await page.waitForFunction(
|
||||||
`document.querySelector('${selector}').value === ""`
|
`document.querySelector('${selector}').value === ""`
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
return waitForInputEvent
|
||||||
|
? waitForEvent({
|
||||||
|
page,
|
||||||
|
eventName: "input",
|
||||||
|
action,
|
||||||
|
selector,
|
||||||
|
})
|
||||||
|
: action();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSelector(id) {
|
function getSelector(id) {
|
||||||
|
@ -711,6 +728,7 @@ export {
|
||||||
getSerialized,
|
getSerialized,
|
||||||
getSpanRectFromText,
|
getSpanRectFromText,
|
||||||
hover,
|
hover,
|
||||||
|
isVisible,
|
||||||
kbBigMoveDown,
|
kbBigMoveDown,
|
||||||
kbBigMoveLeft,
|
kbBigMoveLeft,
|
||||||
kbBigMoveRight,
|
kbBigMoveRight,
|
||||||
|
|
15
web/app.js
15
web/app.js
|
@ -385,6 +385,21 @@ const PDFViewerApplication = {
|
||||||
parseInt(params.get("spreadmodeonload"))
|
parseInt(params.get("spreadmodeonload"))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
if (params.has("enablealttext")) {
|
||||||
|
AppOptions.set("enableAltText", params.get("enablealttext") === "true");
|
||||||
|
}
|
||||||
|
if (params.has("enableupdatedaddimage")) {
|
||||||
|
AppOptions.set(
|
||||||
|
"enableUpdatedAddImage",
|
||||||
|
params.get("enableupdatedaddimage") === "true"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (params.has("enableguessalttext")) {
|
||||||
|
AppOptions.set(
|
||||||
|
"enableGuessAltText",
|
||||||
|
params.get("enableguessalttext") === "true"
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue