resolve #5717 Theme builder: headervView property is not deserialized. (

#5718) Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Jul 22, 2024 · 5367523 · 5367523
1 parent 07d07db
commit 5367523
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 2 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/theme-model.ts b/packages/survey-creator-core/src/components/tabs/theme-model.ts
@@ -474,7 +474,11 @@ export class ThemeModel extends Base implements ITheme {
     delete _json["cssVariables"];
 
     super.fromJSON(_json, options);
-    this.header.fromJSON(json.header || {});
+
+    const _headerJson = {};
+    assign(_headerJson, json.header);
+    if (!!json["headerView"]) _headerJson["headerView"] = json["headerView"];
+    this.header.fromJSON(_headerJson || {});
 
     if (json.cssVariables) {
       this["primaryColor"] = json.cssVariables["--sjs-primary-backcolor"];

diff --git a/packages/survey-creator-core/tests/tabs/theme-header-model.tests.ts b/packages/survey-creator-core/tests/tabs/theme-header-model.tests.ts
@@ -23,6 +23,7 @@ test("IHeader de/serialization", (): any => {
     themeName: "custom",
     colorPalette: "light",
     isPanelless: true,
+    headerView: "advanced",
     header: {
       "height": 300,
       "inheritWidthFrom": "survey",
@@ -40,6 +41,9 @@ test("IHeader de/serialization", (): any => {
     }
   };
   themeModel.fromJSON(themeJson);
+  const header = themeModel.header as HeaderModel;
+  expect(header["headerView"]).toBe("advanced");
+
   const result = themeModel.toJSON();
   expect(result.header).toStrictEqual(themeJson.header!);
 });

diff --git a/packages/survey-creator-core/tests/tabs/theme-model-property-grid.tests.ts b/packages/survey-creator-core/tests/tabs/theme-model-property-grid.tests.ts
@@ -896,7 +896,7 @@ test("set headerViewContainer advanced", (): any => {
   expect(currentThemeCssVariables["--sjs-header-backcolor"]).toBe("#5094ed");
 });
 
-test("restore headerViewContainer values", (): any => {
+test("restore basic headerViewContainer values", (): any => {
   const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
   creator.JSON = { questions: [{ type: "text", name: "q1" }] };
   creator.theme = {
@@ -983,6 +983,94 @@ test("restore headerViewContainer values", (): any => {
   });
 });
 
+test("restore advanced headerViewContainer values", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  creator.theme = {
+    "cssVariables": {
+      "--sjs-corner-radius": "20px",
+      "--sjs-base-unit": "9.6px",
+      "--sjs-font-size": "17.6px",
+      "--sjs-header-backcolor": "#5094ed",
+      "--sjs-font-surveytitle-family": "Courier New",
+      "--sjs-font-surveytitle-weight": "400",
+      "--sjs-font-surveytitle-size": "41px",
+      "--sjs-font-surveydescription-family": "Trebuchet MS",
+      "--sjs-font-surveydescription-weight": "800",
+      "--sjs-font-surveydescription-size": "21px",
+      "--sjs-font-headertitle-family": "Georgia",
+      "--sjs-font-headertitle-weight": "800",
+      "--sjs-font-headertitle-color": "rgba(219, 15, 15, 0.91)",
+      "--sjs-font-headertitle-size": "39px",
+      "--sjs-font-headerdescription-family": "Verdana",
+      "--sjs-font-headerdescription-weight": "800",
+      "--sjs-font-headerdescription-color": "rgba(50, 16, 218, 0.45)",
+      "--sjs-font-headerdescription-size": "19px"
+    },
+    "header": {
+      "height": 300,
+      "inheritWidthFrom": "container",
+      "textAreaWidth": 600,
+      "backgroundImage": "https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg",
+      "backgroundImageOpacity": 0.5,
+      "backgroundImageFit": "fill",
+      "overlapEnabled": true,
+      "logoPositionX": "center",
+      "logoPositionY": "middle",
+      "titlePositionX": "center",
+      "titlePositionY": "middle",
+      "descriptionPositionX": "center",
+      "descriptionPositionY": "middle"
+    },
+    "headerView": "advanced",
+  };
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+  themePlugin.activate();
+  const groupHeader = themePlugin.propertyGrid.survey.pages[0].getElementByName("header");
+  const headerViewContainer = groupHeader.elements[0].contentPanel;
+  headerViewContainer.getQuestionByName("");
+
+  expect(headerViewContainer.getQuestionByName("headerView").value).toBe("advanced");
+  expect(headerViewContainer.getQuestionByName("logoPosition").value).toBe("left");
+  expect(headerViewContainer.getQuestionByName("inheritWidthFrom").value).toBe("container");
+  expect(headerViewContainer.getQuestionByName("backgroundColor").value).toBe("#5094ed");
+  expect(headerViewContainer.getQuestionByName("backgroundColorSwitch").value).toBe("custom");
+  expect(headerViewContainer.getQuestionByName("backgroundImage").value).toBe("https://t4.ftcdn.net/jpg/02/83/13/61/360_F_283136113_b3VRHNiOPFMOluzYJPpfuoH8Czh9c743.jpg");
+  expect(headerViewContainer.getQuestionByName("backgroundImageFit").value).toBe("fill");
+  expect(headerViewContainer.getQuestionByName("backgroundImageOpacity").value).toBe(50);
+  expect(headerViewContainer.getQuestionByName("overlapEnabled").value).toBe(true);
+  expect(headerViewContainer.getQuestionByName("logoPositionX").value).toBe("center");
+  expect(headerViewContainer.getQuestionByName("logoPositionY").value).toBe("middle");
+  expect(headerViewContainer.getQuestionByName("titlePositionX").value).toBe("center");
+  expect(headerViewContainer.getQuestionByName("titlePositionY").value).toBe("middle");
+  expect(headerViewContainer.getQuestionByName("descriptionPositionX").value).toBe("center");
+  expect(headerViewContainer.getQuestionByName("descriptionPositionY").value).toBe("middle");
+  expect(headerViewContainer.getQuestionByName("textAreaWidth").value).toBe(600);
+  expect(headerViewContainer.getQuestionByName("height").value).toBe(300);
+  expect(headerViewContainer.getQuestionByName("headerDescription").value).toStrictEqual({
+    "color": "rgba(50, 16, 218, 0.45)",
+    "family": "Verdana",
+    "size": 19,
+    "weight": "800",
+  });
+  expect(headerViewContainer.getQuestionByName("headerTitle").value).toStrictEqual({
+    "color": "rgba(219, 15, 15, 0.91)",
+    "family": "Georgia",
+    "size": 39,
+    "weight": "800",
+  });
+  expect(headerViewContainer.getQuestionByName("surveyDescription").value).toStrictEqual({
+    "family": "Trebuchet MS",
+    "size": 21,
+    "weight": "800",
+  });
+  expect(headerViewContainer.getQuestionByName("surveyTitle").value).toStrictEqual({
+    "family": "Courier New",
+    "size": 41,
+    "weight": "400",
+  });
+});
+
 test("Check subcategory order", (): any => {
   Serializer.addProperty("theme", {
     name: "custom-question-title",