ci: LEAP-753: E2E image problems (#1708)

* Fail E2E test if Image is not loaded

* ci: LEAP-753: Replace external image in E2E tests

* Fix one more place with external image

* Fix image sizes in example results

* One more fix for keypoints example

* Various fixes for image.transformer.test

- Calculate natural image size to calculate a real zoom on init (~1.05)
- Remove unnecessary waits, especially the one for 10(!) seconds
- Enable DEV-3377 FF to fix region shift on zoom
- Enable DEV-3793 FF to use relative coords for proper calculations
- Fix the way FF applied — they should be set before the `I.amOnPage()`
- Precision is increased to 2 (lower precisions result in rounding errors)
- Added comments to understand the flow of the test and exact calculations

* Also fix Ctrl+Z to a proper "CommandOrControl + z"

* Fix linting in tests

* Fix line endings

* Small fix - remove excess number conversion in helper

e2e/examples/image-keypoints.js

@@ -9,7 +9,7 @@ const config = `
 `;
 
 const data = {
-  image: 'https://user.fm/files/v2-901310d5cb3fa90e0616ca10590bacb3/spacexmoon-800x501.jpg',
+  image: 'https://data.heartex.net/open-images/train_0/mini/0030019819f25b28.jpg',
 };
 
 const result = [
@@ -18,14 +18,14 @@ const result = [
     from_name: 'tag',
     to_name: 'img',
     image_rotation: 0,
-    original_height: 501,
-    original_width: 800,
+    original_height: 576,
+    original_width: 768,
     type: 'keypointlabels',
     origin: 'manual',
     value: {
       x: 49.60000000000001,
       y: 52.34042553191488,
-      width: 0.6471078324314267,
+      width: 0.6120428759942558,
       keypointlabels: ['Hello'],
     },
   },
@@ -34,14 +34,14 @@ const result = [
     from_name: 'tag',
     to_name: 'img',
     image_rotation: 0,
-    original_height: 501,
-    original_width: 800,
+    original_height: 576,
+    original_width: 768,
     type: 'keypointlabels',
     origin: 'manual',
     value: {
       x: 47.73333333333334,
       y: 52.765957446808514,
-      width: 0.6666666666666666,
+      width: 0.6305418719211823,
       keypointlabels: ['World'],
     },
   },

e2e/fragments/AtImageView.js

@@ -79,6 +79,12 @@ module.exports = {
     I.waitForVisible('canvas', 5);
   },
 
+  async getNaturalSize() {
+    const sizes = await I.executeScript(Helpers.getNaturalSize);
+
+    return sizes;
+  },
+
   async getCanvasSize() {
     const sizes = await I.executeScript(Helpers.getCanvasSize);
 

e2e/tests/helpers.js

@@ -234,7 +234,7 @@ const convertToFixed = (data, fractionDigits = 2) => {
   if (['string', 'number'].includes(typeof data)) {
     const n = Number(data);
 
-    return Number.isNaN(n) ? data : Number.isInteger(n) ? n : +Number(n).toFixed(fractionDigits);
+    return Number.isNaN(n) ? data : Number.isInteger(n) ? n : +n.toFixed(fractionDigits);
   }
   if (Array.isArray(data)) {
     return data.map(n => convertToFixed(n, fractionDigits));
@@ -533,6 +533,14 @@ async function generateImageUrl({ width, height }) {
   return canvas.toDataURL();
 }
 
+const getNaturalSize = () => {
+  const imageObject = window.Htx.annotationStore.selected.objects.find(o => o.type === 'image');
+
+  return {
+    width: imageObject.naturalWidth,
+    height: imageObject.naturalHeight,
+  };
+};
 const getCanvasSize = () => {
   const imageObject = window.Htx.annotationStore.selected.objects.find(o => o.type === 'image');
 
@@ -859,6 +867,7 @@ module.exports = {
   areEqualRGB,
   hasKonvaPixelColorAtPoint,
   getKonvaPixelColorFromPoint,
+  getNaturalSize,
   getCanvasSize,
   getImageSize,
   getImageFrameSize,

e2e/tests/image.gestures.test.js

@@ -36,7 +36,7 @@ const createShape = {
     byMultipleClicks(x, y, radius, opts = {}) {
       const points = [];
 
-      for (let i = 5; i--; ) {
+      for (let i = 5; i--;) {
         points.push([x + Math.sin(((2 * Math.PI) / 5) * i) * radius, y - Math.cos(((2 * Math.PI) / 5) * i) * radius]);
         points.push([
           x + (Math.sin(((2 * Math.PI) / 5) * (i - 0.5)) * radius) / 3,
@@ -209,7 +209,7 @@ Scenario('Creating regions by various gestures', async function({ I, AtImageView
   for (const [idx, region] of Object.entries(regions)) {
     I.pressKey(region.hotKey);
     AtImageView[region.action](...region.params);
-    AtSidebar.seeRegions(+idx+1);
+    AtSidebar.seeRegions(+idx + 1);
   }
   const result = await I.executeScript(serialize);
 

e2e/tests/image.magic-wand.test.js

@@ -3,7 +3,6 @@ const {
   hasKonvaPixelColorAtPoint,
   setKonvaLayersOpacity,
   serialize,
-  waitForImage,
 } = require('./helpers');
 const assert = require('assert');
 

e2e/tests/image.test.js

@@ -148,10 +148,10 @@ Scenario('Image with perRegion tags', async function({ I, AtImageView, AtSidebar
   assert.deepStrictEqual(result[0].value.rectanglelabels, ['Moonwalker']);
 });
 
-const outOfBoundsFFs = new DataTable(['FF_DEV_3793'])
+const outOfBoundsFFs = new DataTable(['FF_DEV_3793']);
 
 outOfBoundsFFs.add([true]);
-outOfBoundsFFs.add([false])
+outOfBoundsFFs.add([false]);
 
 Data(outOfBoundsFFs)
   .Scenario('Can\'t create rectangles outside of canvas', async ({