Refactoring image picker visual tests (#6304)

* update imagepicker values * update imagepicker values * update imagepicker values --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Dec 23, 2024 · 3dd2df0 · 3dd2df0
1 parent fa5fe7e
commit 3dd2df0
Show file tree

Hide file tree

Showing 32 changed files with 28 additions and 23 deletions.
diff --git a/visualRegressionTests-V2/tests/designer/etalons/image-adorner.png b/visualRegressionTests-V2/tests/designer/etalons/image-adorner.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/image-picker-hover.png b/visualRegressionTests-V2/tests/designer/etalons/image-picker-hover.png
diff --git a/...onTests-V2/tests/designer/etalons/image-picker-responsive-col-count-3-hover.png b/...onTests-V2/tests/designer/etalons/image-picker-responsive-col-count-3-hover.png
diff --git a/...essionTests-V2/tests/designer/etalons/image-picker-responsive-dragging-file.png b/...essionTests-V2/tests/designer/etalons/image-picker-responsive-dragging-file.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/image-picker-responsive-hover.png b/visualRegressionTests-V2/tests/designer/etalons/image-picker-responsive-hover.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/imagepicker-loading.png b/visualRegressionTests-V2/tests/designer/etalons/imagepicker-loading.png
diff --git a/...lRegressionTests-V2/tests/designer/etalons/logo-image-adorners-choose-hover.png b/...lRegressionTests-V2/tests/designer/etalons/logo-image-adorners-choose-hover.png
diff --git a/...alRegressionTests-V2/tests/designer/etalons/logo-image-adorners-clear-hover.png b/...alRegressionTests-V2/tests/designer/etalons/logo-image-adorners-clear-hover.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/logo-image-adorners-hover.png b/visualRegressionTests-V2/tests/designer/etalons/logo-image-adorners-hover.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/logo-image-adorners.png b/visualRegressionTests-V2/tests/designer/etalons/logo-image-adorners.png
diff --git a/visualRegressionTests/helper.ts b/visualRegressionTests/helper.ts
@@ -49,4 +49,9 @@ export const screenshotComparerOptions = {
   },
   generatePatch: false,
   highlightColor: { r: 0xff, g: 0, b: 0xff },
-};
+};
+
+export var downArrowImageLink = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACFCAYAAAAenrcsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAALISURBVHhe7dvLbdtAGIVRKyW4QZfhGlyGa2E/bkEBYSKJFemKzyE5c87GXAo/7gdKC1+6rru+AHf9Gv4CdwgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAv9yO8Pb18fwdD6fr+/DE2N4g0x05jh6Z//8pQkEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAILl3XXYfnqrx9fQxPlPL5+j481aPKN4g49lHj3X3FgkAgEFQZSI3fhc/Ab5ATEUlZtd676q9YIimj5jtX/xtEJNuq/b5N/EgXyTZauGsTgfREsq5W7tlMID2RrKOlOzYVSE8ky7R2v+YC6Ylknhbv1mQgPZFM0+q9mg2kJ5JxWr5T04H0RJK1fp/mA+mJ5D53EcgfxvCTe3wTyD+M4ps7/CWQG62PQxw/CeSOVkcijv8J5IHWxiKO+wQStDIacTwmkCdqH484MoGMUOuIxPGcQEaqbUziGEcgE9QyKnGMJ5CJzj4ucUwjkBnOOjJxTCeQmc42NnHMI5AFzjI6ccwnkIWOPj5xLCOQFRx1hOJYTiArOdoYxbEOgazoKKMUx3oEsrK9xymOdQlkA3uNVBzrE8hGSo9VHNsQyIZKjVYc2xHIxrYerzi2JZACthqxOLYnkELWHrM4yhBIQWuNWhzlCKSwpeMWR1kC2cHckYujPIHsZOrYxbEPgexo7OjFsR+B7OzZ+MWxL4EcwKMIxLE/gRzEbQziOIZL13XX4Rm44Q0CgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUDgoZeX345nhpcQYL2CAAAAAElFTkSuQmCC";
+export var rigthArrowImageLink = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACFCAYAAAAenrcsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAALJSURBVHhe7dzNjdtADIBRb0pIgykjNaSMrUX9pIVNBHgBQ5Bo/UtDvnfx+Cr4AzUH86Pruq8HMOrH8xMYIRAICAQCAoGAQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoGAQCDgH4U38uvvn+fp8fj8+ft54komyE28xtEbfucaArkBMdyXQC4mjnsTyIXEcX8CuYg42iCQC4ijHQI5mTjaIpATiaM9AjmJONokkBOIo10COZg42iaQA4mjfQI5iDhyEMgBxJGHQHYmjlwEsiNx5COQnYgjJ4HsQBx5CWQjceQmkA3EkZ9AVhJHDQJZQRx1WPuzkDimZVxVZIIsII5YxucjkJnEUZNAZhBHXQJ5Qxy1CSQgDgQyQRz0BDJCHHwTyIA4eCWQF+JgSCBP4mCMQP4TB1PKByIOIqUDEQfvlA1EHMxRMhBxMFe5QMTBEqUCEQdLlQlEHKxRIhBxsFb6QMTBFqkDEQdbpQ1EHOwhZSDiYC8lLumwlkAgkDKQjBv+uEbaCSIS9pD6FUskbJX+DiIStihxSRcJa5UIpCcS1igTSE8kLFUqkJ5IWKJcID2RMFfJQHoiYY6ygfREwjulA+mJhEj5QHoiYYpAnkTCGIG8EAlDAhkQCa8EMkIkfBPIBJHQE0hAJAjkDZHUJpAZRFKXQGYSSU0CWUAksYzP56Pruq/nmZnO2twoyOuZICv44dYhkJVEUoNANhBJfgLZSCS5CWQHIslLIDsRSU4C2ZFI8hHIzkSSi0AOIJI8BHIQkeQgkAOJpH0COZhI2iaQE4ikXQI5iUjaJJATiaQ9AjmZSNoikAuIpB0CuYhI2iCQC4nk/gRyMZHcm0BuQCT3JZCbGEYimnuw9gcCJggEBAIBgUBAIBAQCAQEAgGBQEAgEBAIBAQCAYFAQCAQEAgEBAIBgUBAIBAQCAQEAgGBwKTH4x+QJ6duSQLV/gAAAABJRU5ErkJggg==";
+export var leftArrowImageLink = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACFCAYAAAAenrcsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAALISURBVHhe7dzNcZxAEIDRlUNwgg7DMTgMxUI+TkEupC3Jq2V7+Yfpfu/CcAW+mrnQL13XvV2AQT+uV2CAQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoGAQCAgEAgIBAICgYA/Ck/k198/19Xl8vrz93XFkewgJ/F/HL3v9xxDICcmkuMJ5OREciyBNEAkxxFII0RyDIE0RCT7E0hjRLIvgTRIJPsRSKNEsg+BNEwk2xNI40SyLYEkIJLtCCQJkWxDIImIZH0CSUYk6xJIQiJZj0CSEsk6BJKYSJYTSHIiWUYgBYhkPoEUIZJ5BFKISKZLO/bHx/CYkULjpdxBxBHzfMZzxCpKJOMIpDCRPCeQ4kQSEwgiCQiEdyIZJhA+ieSeQLghklsC4Y5IvgiEQSL5IBAeEolAeKJ6JALhqcqRCIRRqkYiEEarGIlAmKRaJAJhskqRCIRZqkQiEGarEIlAWCR7JAJhscyRCIRVZI1EIKwmYyQCgYBAICAQVpNxYqNAWEXWcaYCYbHMs34FwiLZB2ELhNkqTIkXCLNUiKMnECarEkdPIExSKY6eQBitWhw9gTBKxTh6AuGpqnH0BEKochw9gfBQ9Th6AmGQOD4IhDvi+CIQbojjlkD4JI57AuGdOIYJBHEEBFKcOGICKUwczwmkKHGMkzIQLz/m+Yz30nXd23XNgfaaSiiOaRyxChHHdAIpQhzzCKQAccwnkOTEsYxAEhPHcgJJShzrEEhC4liPQJIRx7oEkog41ieQJMSxDYEkII7tCKRx4tiWQBomju0JpFHi2IdAGiSO/QikMeLYl0AaIo79CaQR4jiGQBogjuMI5OTEcSyBnJg4jieQk/gegzjOwdgfCNhBICAQCAgEAgKBgEAgIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQeulz+AcZap24+5oKPAAAAAElFTkSuQmCC";
+export var upArrowImageLink = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACFCAYAAAAenrcsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAALCSURBVHhe7dvRcdpAGIVRSAk0mDKoIWVQi/pJCyQZa8Y2gYskpF2xe84L8hvzz/0MfvBxGIbrAbjrx/gK3CEQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCPzL7Y78/P1rfDocLqfz+ERNPkF24msc/9z+TB0C2YFHMYikPoFU9iwCkdQlkIqmjl8k9QikkrmjF0kdAqlg6dhFUp5ACnt15CIpSyAFrTVukZQjkELWHrVIyhBIAVuNWSTbE8jGth6xSLYlkA2VGq9ItiOQjZQerUi2IZAN1BqrSNYnkJXVHqlI1iWQFe1lnCJZj0BWsrdRimQdAlnBXscoktcJ5EV7H6FIXiOQF7zL+ESynEAWerfRiWQZgSzwrmMTyXwCmendRyaSeQQyQyvjEsl0ApmotVGJZBqBTNDqmETynECeaH1EIskEEvQyHpE8JpAHehuNSO4TyB29jkUk/xPIjd5HIpLvBPKFcXxwh08CGRnFd+7xQSB/GcN97iIQI3ii9/t0HYg4pun5Tt0GIo55er1Xl4GIY5ke79ZdIOJ4TW/36yoQcayjpzt2E4g41tXLPbsIRBzb6OGuzQcijm21ft+mAxFHGS3fudlAxFFWq/duMhBx1NHi3bv4Ix2WEggETQZyOZ3HJ0pq8e7HYRiu4zMTtPA92y+Q6XzFgkAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoHMdDmdx6f39O7vv7TjMAzX8Rm44RMEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoHAQ4fDH0O9wbeYZugeAAAAAElFTkSuQmCC";
diff --git a/visualRegressionTests/tests/designer/drag-drop.ts b/visualRegressionTests/tests/designer/drag-drop.ts
@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { url, setJSON, takeElementScreenshot, explicitErrorHandler, getPropertyGridCategory, changeToolboxScrolling, patchDragDropToDisableDrop, wrapVisualTest, resetHoverToCreator, getPagesLength, RatingToolboxItem, setShowAddQuestionButton, setAllowEditSurveyTitle, hideAllAdornerActions } from "../../helper";
+import { url, setJSON, takeElementScreenshot, explicitErrorHandler, getPropertyGridCategory, changeToolboxScrolling, patchDragDropToDisableDrop, wrapVisualTest, resetHoverToCreator, getPagesLength, RatingToolboxItem, setShowAddQuestionButton, setAllowEditSurveyTitle, hideAllAdornerActions, upArrowImageLink, downArrowImageLink, leftArrowImageLink } from "../../helper";
 
 const title = "DragDrop Screenshot";
 
@@ -427,20 +427,20 @@ test("Drag Drop ImagePicker (choices) drop to invalid area", async (t) => {
               "name": "question1",
               "choices": [
                 {
-                  "value": "lion",
-                  "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+                  "value": "up",
+                  "imageLink": upArrowImageLink
                 },
                 {
                   "value": "giraffe",
                   "imageLink": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
                 },
                 {
-                  "value": "panda",
-                  "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
+                  "value": "down",
+                  "imageLink": downArrowImageLink
                 },
                 {
-                  "value": "camel",
-                  "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
+                  "value": "left",
+                  "imageLink": leftArrowImageLink
                 }
               ]
             }

diff --git a/visualRegressionTests/tests/designer/etalons/image-adorner.png b/visualRegressionTests/tests/designer/etalons/image-adorner.png
diff --git a/visualRegressionTests/tests/designer/etalons/image-picker-hover.png b/visualRegressionTests/tests/designer/etalons/image-picker-hover.png
diff --git a/...ssionTests/tests/designer/etalons/image-picker-responsive-col-count-3-hover.png b/...ssionTests/tests/designer/etalons/image-picker-responsive-col-count-3-hover.png
diff --git a/...egressionTests/tests/designer/etalons/image-picker-responsive-dragging-file.png b/...egressionTests/tests/designer/etalons/image-picker-responsive-dragging-file.png
diff --git a/...sionTests/tests/designer/etalons/image-picker-responsive-dragging-file_mask.png b/...sionTests/tests/designer/etalons/image-picker-responsive-dragging-file_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/image-picker-responsive-hover.png b/visualRegressionTests/tests/designer/etalons/image-picker-responsive-hover.png
diff --git a/...alRegressionTests/tests/designer/etalons/image-picker-responsive-hover_mask.png b/...alRegressionTests/tests/designer/etalons/image-picker-responsive-hover_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/imagepicker-loading.png b/visualRegressionTests/tests/designer/etalons/imagepicker-loading.png
diff --git a/visualRegressionTests/tests/designer/etalons/imagepicker-loading_mask.png b/visualRegressionTests/tests/designer/etalons/imagepicker-loading_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners-choose-hover.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners-choose-hover.png
diff --git a/...egressionTests/tests/designer/etalons/logo-image-adorners-choose-hover_mask.png b/...egressionTests/tests/designer/etalons/logo-image-adorners-choose-hover_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners-clear-hover.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners-clear-hover.png
diff --git a/...RegressionTests/tests/designer/etalons/logo-image-adorners-clear-hover_mask.png b/...RegressionTests/tests/designer/etalons/logo-image-adorners-clear-hover_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners-hover.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners-hover.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners-hover_mask.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners-hover_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners.png
diff --git a/visualRegressionTests/tests/designer/etalons/logo-image-adorners_mask.png b/visualRegressionTests/tests/designer/etalons/logo-image-adorners_mask.png
diff --git a/visualRegressionTests/tests/designer/image.ts b/visualRegressionTests/tests/designer/image.ts
@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper";
+import { url, setJSON, explicitErrorHandler, wrapVisualTest, takeElementScreenshot, upArrowImageLink } from "../../helper";
 
 const title = "Image Screenshot";
 
@@ -19,7 +19,7 @@ const json = {
         {
           "type": "image",
           "name": "question2",
-          "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+          "imageLink": upArrowImageLink
         }
       ]
     }

diff --git a/visualRegressionTests/tests/designer/imagepicker.ts b/visualRegressionTests/tests/designer/imagepicker.ts
@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper";
+import { url, setJSON, explicitErrorHandler, wrapVisualTest, takeElementScreenshot, upArrowImageLink, rigthArrowImageLink, downArrowImageLink, leftArrowImageLink } from "../../helper";
 
 const title = "ImagePicker Screenshot";
 
@@ -17,22 +17,22 @@ const json = {
           "name": "question1",
           "choices": [
             {
-              "value": "lion",
-              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+              "value": "left",
+              "imageLink": leftArrowImageLink
             },
             {
-              "value": "giraffe",
-              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
+              "value": "down",
+              "imageLink": downArrowImageLink
             },
             {
-              "value": "panda",
-              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
+              "value": "up",
+              "imageLink": upArrowImageLink
             },
             {
-              "value": "camel",
-              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
-            }
-          ]
+              "value": "right",
+              "imageLink": rigthArrowImageLink
+            },
+          ],
         }
       ]
     }

diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility, setShowToolbox, setShowSidebar, getSurveyListItemByText } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility, setShowToolbox, setShowSidebar, getSurveyListItemByText, upArrowImageLink } from "../../helper";
 
 const title = "Designer surface";
 
@@ -974,7 +974,7 @@ test("Logo image adorners", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(1920, 1900);
     const json = {
-      logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+      logo: upArrowImageLink,
       elements: [
         {
           type: "text",