Ajout des tests en plus du parcours dans les tests

README.md

@@ -63,10 +63,10 @@ make test
 
 Les tests sont réalisés avec `puppeteer` et `jest`.
 
-Pour lancer les tests et voir le navigateur (permet de débugger) :
+Pour lancer les tests et voir le navigateur (en mode debug) :
 
 ```
-SHOW=true make test
+DEBUG=1 make test
 ```
 
 

public/js/app.js

@@ -5,6 +5,7 @@ var pdfjsLib = window['pdfjs-dist/build/pdf'];
 // The workerSrc property shall be specified.
 pdfjsLib.GlobalWorkerOptions.workerSrc = '/vendor/pdf.worker.js?legacy';
 
+var canvasEditions = [];
 
 // Asynchronous download of PDF
 var loadingTask = pdfjsLib.getDocument(url);
@@ -15,7 +16,6 @@ loadingTask.promise.then(function(pdf) {
     var copiedObject = null;
     var activeCanvas = null;
     var activeCanvasPointer = null;
-    var canvasEditions = [];
     var pdfRenderTasks = [];
     var pdfPages = [];
     var svgCollections = [];
@@ -396,7 +396,6 @@ loadingTask.promise.then(function(pdf) {
     document.getElementById('input-text-signature').addEventListener('keydown', function(event) {
         document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
         if(event.key == 'Enter') {
-            document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
             document.getElementById('btn_modal_ajouter').click()
         }
     })
@@ -657,7 +656,7 @@ loadingTask.promise.then(function(pdf) {
           var pageIndex = page.pageNumber - 1;
 
           document.getElementById('form_pdf').insertAdjacentHTML('beforeend', '<input name="svg[' + pageIndex + ']" id="data-svg-' + pageIndex + '" type="hidden" value="" />');
-          document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>');
+          document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm canvas-pdf"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>');
 
           var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex);
           var canvasEditionHTML = document.getElementById('canvas-edition-' + pageIndex);

tests/signature.test.js

@@ -1,7 +1,7 @@
 const puppeteer = require('puppeteer');
 const cp = require("child_process");
 var headless = true;
-if(process.env.SHOW) {
+if(process.env.DEBUG) {
     headless = false;
 }
 var page = null;
@@ -10,6 +10,8 @@ var server = null
 var host = "localhost:"+(9000 + Math.floor((Math.random() * 1000)));
 
 describe("Signature d'un pdf", () => {
+    var originX;
+    var originY;
     beforeAll(async () => {
         server = cp.spawn("php", ["-S", host, "-t", "public"]);
         browser = await puppeteer.launch({ headless: headless });
@@ -20,51 +22,82 @@ describe("Signature d'un pdf", () => {
     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()
+        await page.waitForSelector('#canvas-pdf-15', {visible: true});
+        expect(await page.evaluate(() => { return document.querySelectorAll('.canvas-pdf').length })).toBe(16);
     });
     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.waitForTimeout(200);
-        await page.click('#signature-pad');
+        await page.mouse.move(600,150);
+        await page.mouse.down();
+        await page.mouse.move(700,250, {steps: 20});
+        await page.mouse.up();
+        await page.mouse.move(600,250);
+        await page.mouse.down();
+        await page.mouse.move(700,150,{steps: 20});
+        await page.mouse.up();
         await page.waitForSelector('button#btn_modal_ajouter:not([disabled])');
         await page.waitForTimeout(100);
         await page.click('button#btn_modal_ajouter');
         await page.waitForTimeout(300);
+        expect(await page.evaluate(() => { return document.querySelector("#label_svg_0 img").src })).toMatch(/^data:image\/svg\+xml;base64,.+/);
     });
     it('Ajout de la signature dans le pdf', async () => {
-        await page.mouse.click(100,100);
+        originX = await page.evaluate(() => { return document.querySelector("#canvas-container-0").offsetLeft; });
-        await page.waitForTimeout(100);
+        originY = await page.evaluate(() => { return document.querySelector("#canvas-container-0").offsetTop; });
+        await page.mouse.click(originX + 50, originY + 50);
+        await page.waitForTimeout(300);
+        expect(await page.evaluate(() => { return canvasEditions[0].getObjects().length; })).toBe(1);
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].getScaledHeight())})).toBe(100);
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].getScaledWidth())})).toBe(100);
+        expect(await page.evaluate(() => { return Math.abs(Math.round(canvasEditions[0].getObjects()[0].left))})).toBe(0);
+        expect(await page.evaluate(() => { return Math.abs(Math.round(canvasEditions[0].getObjects()[0].top))})).toBe(0);
     });
     it('Déplacement de la signature', async () => {
         await page.mouse.down();
         await page.waitForTimeout(100);
-        await page.mouse.move(400,400);
+        await page.mouse.move(originX + 350, originY + 350);
+        await page.mouse.up();
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].left)})).toBe(300);
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].top)})).toBe(300);
+        await page.waitForTimeout(100);
+    });
+    it('Redimensionnement de la signature', async () => {
+        await page.mouse.move(originX + 400, originY + 400);
+        await page.mouse.down();
+        await page.waitForTimeout(100);
+        await page.mouse.move(originX + 450, originY + 450);
         await page.mouse.up();
         await page.waitForTimeout(100);
-  // Redimensionnement de la signature
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].getScaledHeight())})).toBe(150);
-  await page.mouse.move(460,450);
+        expect(await page.evaluate(() => { return Math.round(canvasEditions[0].getObjects()[0].getScaledWidth())})).toBe(150);
-  await page.mouse.down();
+    });
-  await page.waitForTimeout(100);
+    it("Ajout d'une seconde signature", async () => {
-  await page.mouse.move(500,500);
+        await page.click("#label_svg_0");
-  await page.mouse.up();
+        await page.waitForTimeout(100);
-  await page.waitForTimeout(100);
+        await page.mouse.click(100,100);
-  // Ajout d'une seconde signature
+        expect(await page.evaluate(() => { return canvasEditions[0].getObjects().length; })).toBe(2);
-  await page.click("#label_svg_0");
+    });
-  await page.waitForTimeout(100);
+    it("Suppression de la seconde signature", async () => {
-  await page.mouse.click(100,100);
+        await page.mouse.click(100,100);
-  // Suppression de la seconde signature
+        await page.waitForTimeout(100);
-  await page.mouse.click(100,100);
+        await page.keyboard.press('Delete');
-  await page.waitForTimeout(100);
+        expect(await page.evaluate(() => { return canvasEditions[0].getObjects().length; })).toBe(1);
-  await page.keyboard.press('Delete');
+    })
-  // Suppression de la signature de la liste
+    it("Suppression de la signature de la liste", async () => {
-  await page.click("#label_svg_0 .btn-svg-list-suppression")
+        await page.click("#label_svg_0 .btn-svg-list-suppression")
-  await page.waitForTimeout(100);
+        await page.waitForTimeout(100);
-  });
+        expect(await page.evaluate(() => { return document.querySelector("#label_svg_0 img") })).toBeNull();
-  afterAll(async () => {
+    });
-  await browser.close();
+    afterAll(async () => {
-  await server.kill();
+        if(process.env.DEBUG) {
+            return;
+        }
+        await server.kill();
+        await browser.close();
     });
 });