Testes fonctionnels de la signature d'un pdf avec jest et puppeteer

.gitignore

@@ -1 +1,4 @@
-/data
+data
+package-lock.json
+package.json
+node_modules

Makefile

@@ -0,0 +1,10 @@
+.PHONY: test
+
+node_modules/jest/bin/jest.js:
+	npm install jest
+
+node_modules/puppeteer:
+	npm install puppeteer
+
+test: node_modules/jest/bin/jest.js node_modules/puppeteer
+	./node_modules/jest/bin/jest.js

public/js/app.js

@@ -104,6 +104,7 @@ loadingTask.promise.then(function(pdf) {
             }
         });
         var svgButton = document.createElement('label');
+        svgButton.id = "label_svg_"+i;
         svgButton.classList.add('position-relative');
         svgButton.classList.add('btn');
         svgButton.classList.add('btn-svg');

templates/pdf.html.php

@@ -41,17 +41,17 @@
               <div id="svg_list_signature" class="list-item-add"></div>
               <div class="d-grid gap-2 mb-2 list-item-add">
                   <input type="radio" class="btn-check" id="radio_svg_signature_add" name="svg_2_add" autocomplete="off" value="signature">
-                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="signature" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_signature_add"><i class="bi bi-vector-pen"></i> Signature <small class="text-muted float-end">Ajouter</small></label>
+                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="signature" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_signature_add" id="label_svg_signature_add"><i class="bi bi-vector-pen"></i> Signature <small class="text-muted float-end">Ajouter</small></label>
               </div>
               <div id="svg_list_initials" class="list-item-add"></div>
               <div class="d-grid gap-2 mb-2 list-item-add">
                   <input type="radio" class="btn-check" id="radio_svg_initials_add" name="svg_2_add" autocomplete="off" value="intials">
-                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="initials" data-modalnav="#nav-type-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_initials_add"><i class="bi bi-type"></i> Paraphe <small class="text-muted float-end">Ajouter</small></label>
+                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="initials" data-modalnav="#nav-type-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_initials_add" id="label_svg_initials_add"><i class="bi bi-type"></i> Paraphe <small class="text-muted float-end">Ajouter</small></label>
               </div>
               <div id="svg_list_rubber_stamber" class="list-item-add"></div>
               <div class="d-grid gap-2 mb-2 list-item-add">
                   <input type="radio" class="btn-check" id="radio_svg_rubber_stamber_add" name="svg_2_add" autocomplete="off" value="rubber_stamber">
-                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="rubber_stamber" data-modalnav="#nav-import-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_rubber_stamber_add"><i class="bi bi-card-text"></i> Tampon <small class="text-muted float-end">Ajouter</small></label>
+                  <label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="rubber_stamber" data-modalnav="#nav-import-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_rubber_stamber_add" id="label_svg_rubber_stamber_add"><i class="bi bi-card-text"></i> Tampon <small class="text-muted float-end">Ajouter</small></label>
               </div>
               <div class="d-grid gap-2 mb-2 list-item-add">
                   <input type="radio" class="btn-check" id="radio_svg_text" data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGV4dGFyZWEtdCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMS41IDIuNUExLjUgMS41IDAgMCAxIDMgMWgxMGExLjUgMS41IDAgMCAxIDEuNSAxLjV2My41NjNhMiAyIDAgMCAxIDAgMy44NzRWMTMuNUExLjUgMS41IDAgMCAxIDEzIDE1SDNhMS41IDEuNSAwIDAgMS0xLjUtMS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNXptMSAzLjU2M2EyIDIgMCAwIDEgMCAzLjg3NFYxMy41YS41LjUgMCAwIDAgLjUuNWgxMGEuNS41IDAgMCAwIC41LS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNUEuNS41IDAgMCAwIDEzIDJIM2EuNS41IDAgMCAwLS41LjV2My41NjN6TTIgN2ExIDEgMCAxIDAgMCAyIDEgMSAwIDAgMCAwLTJ6bTEyIDBhMSAxIDAgMSAwIDAgMiAxIDEgMCAwIDAgMC0yeiIvPjxwYXRoIGQ9Ik0xMS40MzQgNEg0LjU2Nkw0LjUgNS45OTRoLjM4NmMuMjEtMS4yNTIuNjEyLTEuNDQ2IDIuMTczLTEuNDk1bC4zNDMtLjAxMXY2LjM0M2MwIC41MzctLjExNi42NjUtMS4wNDkuNzQ4VjEyaDMuMjk0di0uNDIxYy0uOTM4LS4wODMtMS4wNTQtLjIxLTEuMDU0LS43NDhWNC40ODhsLjM0OC4wMWMxLjU2LjA1IDEuOTYzLjI0NCAyLjE3MyAxLjQ5NmguMzg2TDExLjQzNCA0eiIvPjwvc3ZnPgo=" name="svg_2_add" autocomplete="off" value="text">
@@ -90,7 +90,6 @@
                 <button class="btn btn-primary" disabled="disabled" type="submit" id="save_mobile"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
             </div>
         </div>
-    </div>
 
     <div class="modal fade" id="modalAddSvg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog">
@@ -127,6 +126,7 @@
           </div>
         </div>
       </div>
+    </div>
     <span id="is_mobile" class="d-md-none"></span>
 
     <script src="/vendor/bootstrap.min.js?5.1.1"></script>

test/signature.test.js

@@ -0,0 +1,78 @@
+const puppeteer = require('puppeteer');
+const cp = require("child_process");
+var headless = true;
+if(process.env.SHOW) {
+    headless = false;
+}
+var page = null;
+var browser = null;
+var server = null
+var host = "localhost:"+(9000 + Math.floor((Math.random() * 1000)));
+
+describe("Signature d'un pdf", () => {
+    beforeAll(async () => {
+        server = cp.spawn("php", ["-S", host, "-t", "public"]);
+        browser = await puppeteer.launch({ headless: headless });
+        page = await browser.newPage();
+        await page.setViewport({ width: 1200, height: 800 })
+        await page.goto('http://' + host + '/');
+    });
+    it('Upload et chargement du pdf', async () => {
+        await (await page.$("input#input_pdf_upload")).uploadFile(require('path').resolve(__dirname + '/files/document.pdf'));
+        await page.waitForNavigation()
+    });
+    it("Création d'une signature", async () => {
+        await page.waitForSelector('#label_svg_signature_add', {visible: true});
+        await page.waitForTimeout(300);
+        await page.click("#label_svg_signature_add")
+        await page.waitForSelector('#signature-pad', {visible: true});
+        await page.waitForTimeout(100);
+        await page.click('#signature-pad');
+        await page.waitForSelector('button#btn_modal_ajouter:not([disabled])');
+        await page.waitForTimeout(100);
+        await page.click('button#btn_modal_ajouter');
+        await page.waitForTimeout(300);
+    });
+    it('Ajout de la signature dans le pdf', async () => {
+        await page.mouse.click(100,100);
+        await page.waitForTimeout(100);
+    });
+    it('Déplacement de la signature', async () => {
+        await page.mouse.down();
+        await page.waitForTimeout(100);
+        await page.mouse.move(400,400);
+        await page.mouse.up();
+        await page.waitForTimeout(100);
+  // Redimensionnement de la signature
+  await page.mouse.move(460,450);
+  await page.mouse.down();
+  await page.waitForTimeout(100);
+  await page.mouse.move(500,500);
+  await page.mouse.up();
+  await page.waitForTimeout(100);
+  // Ajout d'une seconde signature
+  await page.click("#label_svg_0");
+  await page.waitForTimeout(100);
+  await page.mouse.click(100,100);
+  // Suppression de la seconde signature
+  await page.mouse.click(100,100);
+  await page.waitForTimeout(100);
+  await page.keyboard.press('Delete');
+  // Suppression de la signature de la liste
+  await page.click("#label_svg_0 .btn-svg-list-suppression")
+  await page.waitForTimeout(100);
+  });
+  afterAll(async () => {
+  await browser.close();
+  await server.kill();
+    });
+});
+
+
+
+
+
+
+
+
+