Update visual tests (#6089)

* update visual test etalons

* update visual test etalons

* update visual test etalons

---------

Co-authored-by: OlgaLarina <[email protected]>

functionalTests/helper.ts

@@ -180,6 +180,22 @@ export async function setShowSidebar(newVal: boolean) {
     window["creator"].showSidebar = newVal;
   })(newVal);
 }
+export async function setShowAddQuestionButton(newVal: boolean) {
+  await ClientFunction((newVal) => {
+    window["creator"].showAddQuestionButton = newVal;
+  })(newVal);
+}
+export async function setAllowEditSurveyTitle(newVal: boolean) {
+  await ClientFunction((newVal) => {
+    window["creator"].allowEditSurveyTitle = newVal;
+  })(newVal);
+}
+export async function setExpandCollapseButtonVisibility(newVal: string) {
+  await ClientFunction((newVal) => {
+    window["creator"].expandCollapseButtonVisibility = newVal;
+  })(newVal);
+}
+
 export const explicitErrorHandler = ClientFunction(() => {
   window.addEventListener("error", e => {
     if (e.message === "ResizeObserver loop completed with undelivered notifications." ||

visualRegressionTests-V2/tests/designer/page-navigator.ts

@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { url, setJSON, changeToolboxLocation, changeToolboxScrolling, wrapVisualTest, takeElementScreenshot, changeToolboxSearchEnabled } from "../../helper";
+import { url, setJSON, changeToolboxLocation, changeToolboxScrolling, wrapVisualTest, takeElementScreenshot, changeToolboxSearchEnabled, setAllowEditSurveyTitle, setShowAddQuestionButton } from "../../helper";
 
 const title = "Page Navigator Screenshot";
 
@@ -56,6 +56,8 @@ test("On the right side opened popup", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
 
     await t.resizeWindow(1920, 500);
     await setJSON(json);

visualRegressionTests-V2/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 } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setShowAddQuestionButton, setAllowEditSurveyTitle, setExpandCollapseButtonVisibility } from "../../helper";
 
 const title = "Designer surface";
 
@@ -495,6 +495,7 @@ test("Page and question borders", async (t) => {
       ]
     };
     await setJSON(json);
+    await setAllowEditSurveyTitle(false);
     await ClientFunction(() => {
       (<any>window).creator.toolbox.isCompact = true;
     })();
@@ -2144,9 +2145,7 @@ test("Question adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2198,9 +2197,7 @@ test("Question adorner - no title collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2221,7 +2218,7 @@ test("Question adorner - no title collapsed", async (t) => {
 
 test("Page adorner - collapsed", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(1652, 500);
+    await t.resizeWindow(1000, 500);
     const json = {
       elements: [
         {
@@ -2230,9 +2227,9 @@ test("Page adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-page__content");
     const qCollapseButton = Selector(".svc-page__content #collapse");
@@ -2241,7 +2238,7 @@ test("Page adorner - collapsed", async (t) => {
     await takeElementScreenshot("page-adorner-expanded.png", ".svc-tab-designer_content", t, comparer);
     await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 });
     await t.click(qCollapseButton.filterVisible());
-    await t.hover(".svc-toolbox", { speed: 0.1 });
+    await resetHoverToCreator(t);
     await takeElementScreenshot("page-adorner-collapsed-selected.png", ".svc-tab-designer_content", t, comparer);
     await t.click(".svc-tab-designer_content", { offsetX: 1, offsetY: 1 });
     await takeElementScreenshot("page-adorner-collapsed.png", ".svc-tab-designer_content", t, comparer);
@@ -2263,9 +2260,7 @@ test("Question adorner - collapsed mobile", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2314,6 +2309,7 @@ test("Check page selection when width mode is responsive", async (t) => {
       ]
     };
     await setJSON(json);
+    await setAllowEditSurveyTitle(false);
     const rootSelector = Selector(".svc-tab-designer");
     await t.click(".svc-page", { offsetX: 5, offsetY: 5 });
     await takeElementScreenshot("page-selected-responsive.png", rootSelector, t, comparer);
@@ -2335,9 +2331,8 @@ test("Collapse all and expand all toolbar", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     await t.hover("#collapseAll");
     await takeElementScreenshot("design-surface-toolbar.png", Selector(".svc-tab-designer"), t, comparer);

visualRegressionTests-V2/tests/designer/toolbox.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, changeToolboxSearchEnabled, changeToolboxLocation, getTabbedMenuItemByText, takeElementScreenshot, setJSON, collapseButtonSelector, wrapVisualTest, changeToolboxScrolling, getToolboxItemByText } from "../../helper";
+import { url, changeToolboxSearchEnabled, changeToolboxLocation, getTabbedMenuItemByText, takeElementScreenshot, setJSON, collapseButtonSelector, wrapVisualTest, changeToolboxScrolling, getToolboxItemByText, setAllowEditSurveyTitle, setShowAddQuestionButton } from "../../helper";
 
 const title = "Toolbox Screenshot";
 
@@ -12,13 +12,18 @@ test("Left toolbox", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
     const toolboxElement = Selector(".svc-toolbox");
     const creatorTabElement = Selector(".svc-creator-tab");
 
     await setJSON({ pages: [{ name: "page1" }] });
-    await t.resizeWindow(2560, 1440);
+    await t
+      .resizeWindow(2560, 1440)
+      .click(collapseButtonSelector);
     await takeElementScreenshot("toolbox-left.png", toolboxElement, t, comparer);
 
     await t.hover(toolboxItem);
@@ -51,6 +56,9 @@ test("Right toolbox", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setShowAddQuestionButton(false);
+    await setAllowEditSurveyTitle(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
 
@@ -92,6 +100,9 @@ test("Right toolbox (rtl)", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
 
@@ -172,6 +183,7 @@ test("designer tab view with page navigator", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
     await setJSON({
       pages: [
         {

visualRegressionTests/tests/designer/page-navigator.ts

@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { url, setJSON, changeToolboxLocation, changeToolboxScrolling, wrapVisualTest, takeElementScreenshot, changeToolboxSearchEnabled } from "../../helper";
+import { url, setJSON, changeToolboxLocation, changeToolboxScrolling, wrapVisualTest, takeElementScreenshot, changeToolboxSearchEnabled, setAllowEditSurveyTitle, setShowAddQuestionButton } from "../../helper";
 
 const title = "Page Navigator Screenshot";
 
@@ -56,6 +56,8 @@ test("On the right side opened popup", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
 
     await t.resizeWindow(1920, 500);
     await setJSON(json);

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 } from "../../helper";
+import { url, setJSON, takeElementScreenshot, addQuestionByAddQuestionButton, wrapVisualTest, getTabbedMenuItemByText, creatorTabPreviewName, creatorTabDesignerName, resetHoverToCreator, getPropertyGridCategory, generalGroupName, getListItemByText, surveySettingsButtonSelector, changeToolboxScrolling, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, setAllowEditSurveyTitle, setShowAddQuestionButton, setExpandCollapseButtonVisibility } from "../../helper";
 
 const title = "Designer surface";
 
@@ -495,6 +495,7 @@ test("Page and question borders", async (t) => {
       ]
     };
     await setJSON(json);
+    await setAllowEditSurveyTitle(false);
     await ClientFunction(() => {
       (<any>window).creator.toolbox.isCompact = true;
     })();
@@ -2144,9 +2145,7 @@ test("Question adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2198,9 +2197,7 @@ test("Question adorner - no title collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2221,7 +2218,7 @@ test("Question adorner - no title collapsed", async (t) => {
 
 test("Page adorner - collapsed", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(1652, 500);
+    await t.resizeWindow(1000, 500);
     const json = {
       elements: [
         {
@@ -2230,9 +2227,9 @@ test("Page adorner - collapsed", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-page__content");
     const qCollapseButton = Selector(".svc-page__content #collapse");
@@ -2241,7 +2238,7 @@ test("Page adorner - collapsed", async (t) => {
     await takeElementScreenshot("page-adorner-expanded.png", ".svc-tab-designer_content", t, comparer);
     await t.click(qContent.nth(0), { offsetX: 10, offsetY: 10 });
     await t.click(qCollapseButton.filterVisible());
-    await t.hover(".svc-toolbox", { speed: 0.1 });
+    await resetHoverToCreator(t);
     await takeElementScreenshot("page-adorner-collapsed-selected.png", ".svc-tab-designer_content", t, comparer);
     await t.click(".svc-tab-designer_content", { offsetX: 1, offsetY: 1 });
     await takeElementScreenshot("page-adorner-collapsed.png", ".svc-tab-designer_content", t, comparer);
@@ -2263,9 +2260,7 @@ test("Question adorner - collapsed mobile", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     const qContent = Selector(".svc-question__content");
     const qCollapseButton = Selector(".svc-question__content #collapse");
@@ -2314,6 +2309,7 @@ test("Check page selection when width mode is responsive", async (t) => {
       ]
     };
     await setJSON(json);
+    await setAllowEditSurveyTitle(false);
     const rootSelector = Selector(".svc-tab-designer");
     await t.click(".svc-page", { offsetX: 5, offsetY: 5 });
     await takeElementScreenshot("page-selected-responsive.png", rootSelector, t, comparer);
@@ -2335,9 +2331,8 @@ test("Collapse all and expand all toolbar", async (t) => {
         }
       ]
     };
-    await ClientFunction(() => {
-      window["creator"].expandCollapseButtonVisibility = "onhover";
-    })();
+    await setAllowEditSurveyTitle(false);
+    await setExpandCollapseButtonVisibility("onhover");
     await setJSON(json);
     await t.hover("#collapseAll");
     await takeElementScreenshot("design-surface-toolbar.png", Selector(".svc-tab-designer"), t, comparer);

visualRegressionTests/tests/designer/toolbox.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, changeToolboxSearchEnabled, changeToolboxLocation, getTabbedMenuItemByText, takeElementScreenshot, setJSON, collapseButtonSelector, wrapVisualTest, changeToolboxScrolling, getToolboxItemByText } from "../../helper";
+import { url, changeToolboxSearchEnabled, changeToolboxLocation, getTabbedMenuItemByText, takeElementScreenshot, setJSON, collapseButtonSelector, wrapVisualTest, changeToolboxScrolling, getToolboxItemByText, setAllowEditSurveyTitle, setShowAddQuestionButton } from "../../helper";
 
 const title = "Toolbox Screenshot";
 
@@ -12,13 +12,18 @@ test("Left toolbox", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
     const toolboxElement = Selector(".svc-toolbox");
     const creatorTabElement = Selector(".svc-creator-tab");
 
     await setJSON({ pages: [{ name: "page1" }] });
-    await t.resizeWindow(2560, 1440);
+    await t
+      .resizeWindow(2560, 1440)
+      .click(collapseButtonSelector);
     await takeElementScreenshot("toolbox-left.png", toolboxElement, t, comparer);
 
     await t.hover(toolboxItem);
@@ -51,6 +56,9 @@ test("Right toolbox", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setShowAddQuestionButton(false);
+    await setAllowEditSurveyTitle(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
 
@@ -92,6 +100,9 @@ test("Right toolbox (rtl)", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
+    await setShowAddQuestionButton(false);
+
     const toolboxItem = Selector(".svc-toolbox__item");
     const toolboxItemDots = Selector(".svc-toolbox__tool .sv-dots__item");
 
@@ -172,6 +183,7 @@ test("designer tab view with page navigator", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await changeToolboxScrolling(false);
     await changeToolboxSearchEnabled(false);
+    await setAllowEditSurveyTitle(false);
     await setJSON({
       pages: [
         {