diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts index 83898b68d8..b3ac6333ba 100644 --- a/functionalTests/helper.ts +++ b/functionalTests/helper.ts @@ -67,6 +67,7 @@ export const creatorTabDesignerName = "Designer"; export const creatorTabPreviewName = "Preview"; export const creatorTabLogicName = "Logic"; export const creatorTabTranslationName = "Translation"; +export const creatorTabThemeName = "Themes"; export const generalGroupName = "General"; export const logicGroupName = "Conditions"; export const inputMaskSettingsGroupName = "Input Mask Settings"; diff --git a/functionalTests/theme/theme.ts b/functionalTests/theme/theme.ts index 5f7593f40b..737b9f849d 100644 --- a/functionalTests/theme/theme.ts +++ b/functionalTests/theme/theme.ts @@ -1,4 +1,4 @@ -import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON } from "../helper"; +import { creatorTabThemeName, getPropertyGridCategory, getTabbedMenuItemByText, setJSON } from "../helper"; import { ClientFunction, Selector } from "testcafe"; const title = "Theme Editor"; const url = "http://127.0.0.1:8080/testCafe/testcafe-theme-tab"; @@ -38,7 +38,7 @@ test("Editors, loose focus on enter", async (t) => { }; await setJSON(json); - await t.click(getTabbedMenuItemByText("Themes")); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); await t.click(getPropertyGridCategory("Appearance")); const colorQuestionInputSelector = Selector("div[data-name=primaryColor] input.spg-color-editor__input"); diff --git a/packages/survey-creator-core/src/ctr-font-sizes.scss b/packages/survey-creator-core/src/ctr-font-sizes.scss index 80ef192265..8d75af1bdd 100644 --- a/packages/survey-creator-core/src/ctr-font-sizes.scss +++ b/packages/survey-creator-core/src/ctr-font-sizes.scss @@ -1,5 +1,6 @@ @use "./ctr-variables.scss" as *; +.svc-creator-popup, .svc-creator { --sjs-font-size-x075: calc(#{$font-unit} * 0.75); --sjs-font-size-x1: calc(#{$font-unit} * 1); diff --git a/packages/survey-creator-core/src/ctr-sizes.scss b/packages/survey-creator-core/src/ctr-sizes.scss index f1152c7d0b..ef8238d963 100644 --- a/packages/survey-creator-core/src/ctr-sizes.scss +++ b/packages/survey-creator-core/src/ctr-sizes.scss @@ -1,5 +1,6 @@ @use "./ctr-variables.scss" as *; +.svc-creator-popup, .svc-creator { --sjs-spacing-x2: calc(#{$spacing-unit} * 2); --sjs-spacing-x3: calc(#{$spacing-unit} * 3); diff --git a/packages/survey-creator-core/src/lbr-font-sizes.scss b/packages/survey-creator-core/src/lbr-font-sizes.scss index 371ab4ff0e..2fdab130d4 100644 --- a/packages/survey-creator-core/src/lbr-font-sizes.scss +++ b/packages/survey-creator-core/src/lbr-font-sizes.scss @@ -1,5 +1,6 @@ @use "./lbr-variables.scss" as *; +.svc-creator-popup, .svc-creator { --lbr-line-height-x8: calc(#{$lbr-line-height-unit} * 8); --lbr-line-height-x7: calc(#{$lbr-line-height-unit} * 7); diff --git a/packages/survey-creator-core/src/lbr-sizes.scss b/packages/survey-creator-core/src/lbr-sizes.scss index af024ce92a..530ae5d4b9 100644 --- a/packages/survey-creator-core/src/lbr-sizes.scss +++ b/packages/survey-creator-core/src/lbr-sizes.scss @@ -1,5 +1,6 @@ @use "./lbr-variables.scss" as *; +.svc-creator-popup, .svc-creator { --lbr-spacing-x16: calc(#{$lbr-spacing-unit} * 16); --lbr-spacing-x15: calc(#{$lbr-spacing-unit} * 15); diff --git a/visualRegressionTests-V2/tests/designer/etalons/theme-tab-reset-popup-dialog.png b/visualRegressionTests-V2/tests/designer/etalons/theme-tab-reset-popup-dialog.png new file mode 100644 index 0000000000..6f7a1f63cb Binary files /dev/null and b/visualRegressionTests-V2/tests/designer/etalons/theme-tab-reset-popup-dialog.png differ diff --git a/visualRegressionTests/tests/designer/etalons/surface-string-editor-error_mask.png b/visualRegressionTests/tests/designer/etalons/surface-string-editor-error_mask.png new file mode 100644 index 0000000000..d9fc84dfe8 Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/surface-string-editor-error_mask.png differ diff --git a/visualRegressionTests/tests/designer/etalons/theme-tab-reset-popup-dialog.png b/visualRegressionTests/tests/designer/etalons/theme-tab-reset-popup-dialog.png new file mode 100644 index 0000000000..5e26d0826e Binary files /dev/null and b/visualRegressionTests/tests/designer/etalons/theme-tab-reset-popup-dialog.png differ diff --git a/visualRegressionTests/tests/designer/side-bar.ts b/visualRegressionTests/tests/designer/side-bar.ts index dbebeff1e1..04aa5002fd 100644 --- a/visualRegressionTests/tests/designer/side-bar.ts +++ b/visualRegressionTests/tests/designer/side-bar.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, objectSelectorButton, propertyGridSelector, expandButtonSelector, setJSON, takeElementScreenshot, wrapVisualTest, pageNavigator, getListItemByText, changeToolboxSearchEnabled, getAddNewQuestionButton, getTabbedMenuItemByText, creatorTabTranslationName } from "../../helper"; +import { url, objectSelectorButton, propertyGridSelector, expandButtonSelector, setJSON, takeElementScreenshot, wrapVisualTest, pageNavigator, getListItemByText, changeToolboxSearchEnabled, getAddNewQuestionButton, getTabbedMenuItemByText, creatorTabTranslationName, creatorTabThemeName } from "../../helper"; import { largeSurvey } from "./surveys/large-survey"; const title = "Sidebar Screenshot"; @@ -132,7 +132,7 @@ test.page(themeTabUrl)("tabbed mode", async (t) => { await t.click(getAddNewQuestionButton()); await takeElementScreenshot("side-bar-tabbed-property-grid.png", ".svc-side-bar", t, comparer); - await t.click(getTabbedMenuItemByText("Themes")); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); await takeElementScreenshot("side-bar-tabbed-property-grid-theme-general.png", ".svc-side-bar", t, comparer); await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4)); @@ -155,7 +155,7 @@ test.page(themeTabUrl)("boolean switch", async (t) => { window["creator"].showOneCategoryInPropertyGrid = true; })(); - await t.click(getTabbedMenuItemByText("Themes")); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4)); await takeElementScreenshot("boolean-switch-default.png", ".spg-boolean-switch", t, comparer); diff --git a/visualRegressionTests/tests/designer/theme-tab.ts b/visualRegressionTests/tests/designer/theme-tab.ts index 8a16eb2037..991bec1645 100644 --- a/visualRegressionTests/tests/designer/theme-tab.ts +++ b/visualRegressionTests/tests/designer/theme-tab.ts @@ -1,5 +1,5 @@ import { ClientFunction, Selector } from "testcafe"; -import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON, takeElementScreenshot, themeSettingsButtonSelector, wrapVisualTest, url } from "../../helper"; +import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON, takeElementScreenshot, themeSettingsButtonSelector, wrapVisualTest, url, creatorTabThemeName } from "../../helper"; const themeTabUrl = url.replace(/\/testcafe$/, "/testcafe-theme-tab"); const title = "Themes tab"; @@ -15,7 +15,7 @@ test("Check boxshadow settings", async (t) => { await setJSON(json); const root = Selector("div[data-name='--sjs-shadow-small']"); await t.resizeWindow(2000, 2000) - .click(getTabbedMenuItemByText("Themes")) + .click(getTabbedMenuItemByText(creatorTabThemeName)) .click(getPropertyGridCategory("Appearance")) .click(advancedModeSwitcher) .scrollIntoView(root); @@ -32,7 +32,7 @@ test("Check sidebar header", async (t) => { const json = {}; const root = Selector(".svc-side-bar__container-header ").filterVisible(); await t.resizeWindow(2000, 2000) - .click(getTabbedMenuItemByText("Themes")); + .click(getTabbedMenuItemByText(creatorTabThemeName)); await takeElementScreenshot("theme-editor-header.png", root, t, comparer); await ClientFunction(() => { window["creator"].allowCollapseSidebar = false; })(); await takeElementScreenshot("theme-editor-header-no-collapse-button.png", root, t, comparer); @@ -49,7 +49,7 @@ test("toolbar view", async (t) => { { elements: [{ type: "text", name: "question2" }] } ] }); - await t.click(getTabbedMenuItemByText("Themes")); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); await t.resizeWindow(380, 600); await takeElementScreenshot("theme-tab-toolbar_responsive.png", Selector(".svc-footer-bar .svc-toolbar-wrapper"), t, comparer); @@ -69,7 +69,7 @@ test("theme setting property grid", async (t) => { { elements: [{ type: "text", name: "question2" }] } ] }); - await t.click(getTabbedMenuItemByText("Themes")); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); const westResizer = Selector(".svc-resizer-west"); await t.drag(westResizer, -150, 0); @@ -119,4 +119,19 @@ test("theme setting property grid mobile", async (t) => { await ClientFunction(() => document.body.focus())(); await takeElementScreenshot("theme-editor-property-grid-general-group-mobile.png", expandedGroup, t, comparer); }); +}); + +test("Reset theme popup dialog view", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(1280, 900); + await t.click(getTabbedMenuItemByText(creatorTabThemeName)); + + const expandedGroup = Selector(".spg-theme-builder-root .spg-panel.sd-element--expanded"); + await t + .click(getPropertyGridCategory("General")) + .click(expandedGroup.find(".spg-button-group__item-caption").withText("Dark")) + .click(Selector("#svc-reset-theme .svc-toolbar__item")); + + await takeElementScreenshot("theme-tab-reset-popup-dialog.png", Selector(".sv-popup__body-content").filterVisible(), t, comparer); + }); }); \ No newline at end of file