[Tests] e2e: Check GetMap Body with hash

tests/end2end/playwright/axis_orientation.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const { gotoMap } = require('./globals')
+const { gotoMap, digestBuffer } = require('./globals')
 
 test.describe('Axis Orientation', () => {
 
@@ -32,6 +32,12 @@ test.describe('Axis Orientation', () => {
         const contentLength = await getMapResponse?.headerValue('Content-Length');
         expect(parseInt(contentLength ? contentLength : '0')).toBeGreaterThan(5552);
 
+        const getMapBody = await getMapResponse?.body();
+        if (getMapBody) {
+            expect(getMapBody.length).toBeGreaterThan(5552);
+            expect(getMapBody.length).toBeLessThan(112500); // could be 112384 or 112499
+            expect(await digestBuffer(getMapBody.buffer)).toBe('225268cf035599cd66fde2970a73d0d78db63b13');
+        }
 
         // Catch GetTile request;
         let GetTiles = [];
@@ -82,6 +88,14 @@ test.describe('Axis Orientation', () => {
         // image size lesser than disorder axis
         expect(parseInt(contentLength ? contentLength : '0')).toBeLessThan(240115);
 
+        const getMapBody = await getMapResponse?.body();
+        if (getMapBody) {
+            expect(getMapBody.length).toBeGreaterThan(5552);
+            expect(getMapBody.length).toBeLessThan(240115);
+            expect(getMapBody.length).toBeLessThan(168650); // could be 168630 or 168641
+            expect(await digestBuffer(getMapBody.buffer)).toBe('71f81b4e902f03350116cf22783de34cf548199d');
+        }
+
         // Catch GetTile request;
         let GetTiles = [];
         await page.route('https://tile.openstreetmap.org/*/*/*.png', (route) => {

tests/end2end/playwright/base-layers.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const { gotoMap } = require('./globals')
+const { gotoMap, digestBuffer } = require('./globals')
 
 test.describe('Base layers', () => {
 
@@ -23,14 +23,69 @@ test.describe('Base layers', () => {
 
         let getMapRequestPromise = page.waitForRequest(/REQUEST=GetMap/);
         await page.locator('lizmap-treeview #node-quartiers').click();
-        await getMapRequestPromise;
-
+        let getMapRequest = await getMapRequestPromise;
+        let getMapUrl = getMapRequest.url();
+        expect(getMapUrl).toContain('SERVICE=WMS');
+        expect(getMapUrl).toContain('VERSION=1.3.0');
+        expect(getMapUrl).toContain('REQUEST=GetMap');
+        expect(getMapUrl).toContain('FORMAT=image%2Fpng');
+        expect(getMapUrl).toContain('TRANSPARENT=true');
+        expect(getMapUrl).toContain('LAYERS=quartiers');
+        expect(getMapUrl).toContain('CRS=EPSG%3A3857');
+        expect(getMapUrl).toContain('STYLES=default');
+        expect(getMapUrl).toContain('WIDTH=958');
+        expect(getMapUrl).toContain('HEIGHT=633');
+        expect(getMapUrl).toMatch(/BBOX=412967.36\d+%2C5393197.84\d+%2C449580.69\d+%2C5417390.16\d+/);
+
+        let getMapResponse = await getMapRequest.response();
+        expect(getMapResponse).not.toBeNull();
+        expect(getMapResponse?.ok()).toBe(true);
+        expect(await getMapResponse?.headerValue('Content-Type')).toBe('image/png');
+        // image size greater than transparent
+        let contentLength = await getMapResponse?.headerValue('Content-Length');
+        expect(parseInt(contentLength ? contentLength : '0')).toBeGreaterThan(5552);
+
+        let getMapBody = await getMapResponse?.body();
+        if (getMapBody) {
+            expect(getMapBody.length).toBeGreaterThan(5552);
+            expect(getMapBody.length).toBeLessThan(12600); // Could be 12499 or 12516
+            expect(await digestBuffer(getMapBody.buffer)).toBe('016afadc9e38a0f68eaca459962fe8e771ce4431');
+        }
+
+        getMapRequestPromise = page.waitForRequest(/REQUEST=GetMap/);
         await page.locator('#navbar button.btn.zoom-in').click();
-        await getMapRequestPromise;
+        getMapRequest = await getMapRequestPromise;
+        getMapUrl = getMapRequest.url();
+        expect(getMapUrl).toContain('SERVICE=WMS');
+        expect(getMapUrl).toContain('VERSION=1.3.0');
+        expect(getMapUrl).toContain('REQUEST=GetMap');
+        expect(getMapUrl).toContain('FORMAT=image%2Fpng');
+        expect(getMapUrl).toContain('TRANSPARENT=true');
+        expect(getMapUrl).toContain('LAYERS=quartiers');
+        expect(getMapUrl).toContain('CRS=EPSG%3A3857');
+        expect(getMapUrl).toContain('STYLES=default');
+        expect(getMapUrl).toContain('WIDTH=958');
+        expect(getMapUrl).toContain('HEIGHT=633');
+        expect(getMapUrl).toMatch(/BBOX=422120.69\d+%2C5399245.92\d+%2C440427.36\d+%2C5411342.08\d+/);
         await expect(page.locator('#overview-bar .ol-scale-text')).toHaveText('1 : ' + (72224).toLocaleString(locale));
 
+        getMapResponse = await getMapRequest.response();
+        expect(getMapResponse).not.toBeNull();
+        expect(getMapResponse?.ok()).toBe(true);
+        expect(await getMapResponse?.headerValue('Content-Type')).toBe('image/png');
+        // image size greater than transparent
+        contentLength = await getMapResponse?.headerValue('Content-Length');
+        expect(parseInt(contentLength ? contentLength : '0')).toBeGreaterThan(5552);
+
+        getMapBody = await getMapResponse?.body();
+        if (getMapBody) {
+            expect(getMapBody.length).toBeGreaterThan(5552);
+            expect(getMapBody.length).toBeLessThan(20600); // Could be 20531
+            expect(await digestBuffer(getMapBody.buffer)).toBe('f705af679d87084c698c610446981768dde70e2a');
+        }
+
+        // No request performs by OpenLayers
         await page.locator('#navbar button.btn.zoom-out').click();
-        await getMapRequestPromise;
         await expect(page.locator('#overview-bar .ol-scale-text')).toHaveText('1 : ' + (144448).toLocaleString(locale));
     });
 })

tests/end2end/playwright/globals.js

@@ -1,5 +1,6 @@
 // @ts-check
 const { expect } = require('@playwright/test');
+const { subtle } = globalThis.crypto;
 
 export async function gotoMap(url, page, check = true) {
     // TODO keep this function synchronized with the Cypress equivalent
@@ -24,3 +25,12 @@ export async function gotoMap(url, page, check = true) {
     // Wait to be sure the map is ready
     await page.waitForTimeout(1000)
 }
+
+export async function digestBuffer(buff) {
+    const hashBuffer = await subtle.digest('sha-1', buff);
+    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+    const hashHex = hashArray
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join(""); // convert bytes to hex string
+    return hashHex;
+}