Merge pull request #19512 from calixteman/signature_test2

[Editor] Add two integration tests for the signature feature
mozilla · Feb 18, 2025 · 5bc3cb8 · 5bc3cb8
2 parents 426c730 + 3fe55ba
commit 5bc3cb8
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 6 deletions.
diff --git a/test/integration/ink_editor_spec.mjs b/test/integration/ink_editor_spec.mjs
@@ -16,7 +16,6 @@
 import {
   awaitPromise,
   closePages,
-  createPromise,
   dragAndDrop,
   getAnnotationSelector,
   getEditors,
@@ -33,17 +32,13 @@ import {
   switchToEditor,
   waitForAnnotationModeChanged,
   waitForNoElement,
+  waitForPointerUp,
   waitForSelectedEditor,
   waitForSerialized,
   waitForStorageEntries,
   waitForTimeout,
 } from "./test_utils.mjs";
 
-const waitForPointerUp = page =>
-  createPromise(page, resolve => {
-    window.addEventListener("pointerup", resolve, { once: true });
-  });
-
 const selectAll = async page => {
   await kbSelectAll(page);
   await page.waitForFunction(

diff --git a/test/integration/signature_editor_spec.mjs b/test/integration/signature_editor_spec.mjs
@@ -14,14 +14,21 @@
  */
 
 import {
+  awaitPromise,
   closePages,
   getEditorSelector,
   getRect,
   loadAndWait,
   switchToEditor,
+  waitForPointerUp,
   waitForTimeout,
 } from "./test_utils.mjs";
 
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const switchToSignature = switchToEditor.bind(null, "Signature");
 
 describe("Signature Editor", () => {
@@ -207,6 +214,122 @@ describe("Signature Editor", () => {
         })
       );
     });
+
+    it("must check drawing with the mouse", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToSignature(page);
+          await page.click("#editorSignatureAddSignature");
+
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: true,
+          });
+
+          await page.click("#addSignatureDrawButton");
+          const drawSelector = "#addSignatureDraw";
+          await page.waitForSelector(drawSelector, { visible: true });
+
+          let description = await page.$eval(
+            descriptionInputSelector,
+            el => el.value
+          );
+          expect(description).withContext(browserName).toEqual("");
+          await page.waitForSelector(`${addButtonSelector}:disabled`);
+
+          const { x, y, width, height } = await getRect(page, drawSelector);
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(x + 0.1 * width, y + 0.1 * height);
+          await page.mouse.down();
+          await page.mouse.move(x + 0.3 * width, y + 0.3 * height);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+          await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
+
+          // The save button should be enabled now.
+          await page.waitForSelector(
+            "#addSignatureSaveContainer:not([disabled])"
+          );
+          await page.waitForSelector("#addSignatureSaveCheckbox[checked=true]");
+
+          // The description has been filled in automatically.
+          await page.waitForFunction(
+            `document.querySelector("${descriptionInputSelector}").value !== ""`
+          );
+          description = await page.$eval(
+            descriptionInputSelector,
+            el => el.value
+          );
+          expect(description).withContext(browserName).toEqual("Signature");
+
+          await page.click("#addSignatureAddButton");
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: false,
+          });
+
+          await page.waitForSelector(
+            ".canvasWrapper > svg use[href='#path_p1_0']"
+          );
+        })
+      );
+    });
+
+    it("must check adding an image", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToSignature(page);
+          await page.click("#editorSignatureAddSignature");
+
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: true,
+          });
+
+          await page.click("#addSignatureImageButton");
+          await page.waitForSelector("#addSignatureImagePlaceholder", {
+            visible: true,
+          });
+
+          let description = await page.$eval(
+            descriptionInputSelector,
+            el => el.value
+          );
+          expect(description).withContext(browserName).toEqual("");
+          await page.waitForSelector(`${addButtonSelector}:disabled`);
+
+          const input = await page.$("#addSignatureFilePicker");
+          await input.uploadFile(
+            `${path.join(__dirname, "../images/firefox_logo.png")}`
+          );
+          await page.waitForSelector(`#addSignatureImage > path:not([d=""])`);
+
+          // The save button should be enabled now.
+          await page.waitForSelector(
+            "#addSignatureSaveContainer:not([disabled])"
+          );
+          await page.waitForSelector("#addSignatureSaveCheckbox[checked=true]");
+
+          // The description has been filled in automatically.
+          await page.waitForFunction(
+            `document.querySelector("${descriptionInputSelector}").value !== ""`
+          );
+          description = await page.$eval(
+            descriptionInputSelector,
+            el => el.value
+          );
+          expect(description)
+            .withContext(browserName)
+            .toEqual("firefox_logo.png");
+
+          await page.click("#addSignatureAddButton");
+          await page.waitForSelector("#addSignatureDialog", {
+            visible: false,
+          });
+
+          await page.waitForSelector(
+            ".canvasWrapper > svg use[href='#path_p1_0']"
+          );
+        })
+      );
+    });
   });
 
   describe("Bug 1948741", () => {

diff --git a/test/integration/test_utils.mjs b/test/integration/test_utils.mjs
@@ -199,6 +199,12 @@ async function waitAndClick(page, selector, clickOptions = {}) {
   await page.click(selector, clickOptions);
 }
 
+function waitForPointerUp(page) {
+  return createPromise(page, resolve => {
+    window.addEventListener("pointerup", resolve, { once: true });
+  });
+}
+
 function getSelector(id) {
   return `[data-element-id="${id}"]`;
 }
@@ -895,6 +901,7 @@ export {
   waitForEvent,
   waitForNoElement,
   waitForPageRendered,
+  waitForPointerUp,
   waitForSandboxTrip,
   waitForSelectedEditor,
   waitForSerialized,