Work for surveyjs/private-tasks#469 - Advanced/Basic Header (#9495)

* Work for surveyjs/private-tasks#469 - Advanced/Basic Header

* Updated etalons

* Fixed snapshot test

* Try to fix vr-test

* Try to fix vr-test

---------

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

packages/survey-core/src/survey.ts

@@ -1066,9 +1066,6 @@ export class SurveyModel extends SurveyElementCore
       }
     });
 
-    if (this.headerView === "advanced") {
-      this.insertAdvancedHeader(new Cover());
-    }
     this.layoutElements.push({
       id: "timerpanel",
       template: "survey-timerpanel",
@@ -8185,6 +8182,7 @@ export class SurveyModel extends SurveyElementCore
       }
     });
     if (this.headerView === "advanced" || "header" in theme) {
+      this.headerView = "advanced";
       this.removeLayoutElement("advanced-header");
       const advHeader = new Cover();
       advHeader.fromTheme(theme);
@@ -8589,7 +8587,7 @@ Serializer.addClass("survey", [
   { name: "gridLayoutEnabled:boolean", default: false },
   { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
   { name: "fitToContainer:boolean", default: true, visible: false },
-  { name: "headerView", default: "advanced", choices: ["basic", "advanced"], visible: false },
+  { name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
   { name: "backgroundImage:file", visible: false },
   { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
   { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false },

packages/survey-core/tests/surveytests.ts

@@ -18297,6 +18297,7 @@ QUnit.test("getContainerContent - do not show buttons progress on completed page
 });
 QUnit.test("getContainerContent - do not show advanced header on completed page", function (assert) {
   const json = {
+    headerView: "advanced",
     pages: [
       {
         "elements": [
@@ -18349,6 +18350,7 @@ QUnit.test("getContainerContent - do not show advanced header on completed page"
 });
 QUnit.test("getContainerContent - do show advanced header on completed page if showHeaderOnCompletePage is set", function (assert) {
   const json = {
+    headerView: "advanced",
     pages: [
       {
         "elements": [
@@ -19212,7 +19214,7 @@ QUnit.test("survey.applyTheme", function (assert) {
   assert.equal(survey.backgroundImageAttachment, "scroll", "before applyTheme");
   assert.equal(survey.backgroundOpacity, 1, "before applyTheme");
   assert.equal(survey["isCompact"], false, "before applyTheme");
-  assert.equal(survey.headerView, "advanced", "before applyTheme");
+  assert.equal(survey.headerView, "basic", "before applyTheme");
 
   survey.applyTheme({
     "cssVariables": {
@@ -19235,7 +19237,7 @@ QUnit.test("survey.applyTheme", function (assert) {
   assert.equal(survey.backgroundImageAttachment, "fixed");
   assert.equal(survey.backgroundOpacity, 0.6);
   assert.equal(survey["isCompact"], true);
-  assert.equal(survey.headerView, "advanced", "after applyTheme");
+  assert.equal(survey.headerView, "basic", "after applyTheme");
 });
 QUnit.test("survey.applyTheme respects headerView", function (assert) {
   const survey = new SurveyModel({
@@ -19245,19 +19247,23 @@ QUnit.test("survey.applyTheme respects headerView", function (assert) {
     ]
   });
 
-  assert.equal(survey.headerView, "advanced", "before applyTheme");
-  survey.applyTheme({
-    "headerView": "basic"
-  });
-  assert.equal(survey.headerView, "basic", "apply basic header");
+  assert.equal(survey.headerView, "basic", "before applyTheme");
 
   survey.applyTheme({
     "headerView": "advanced"
   });
   assert.equal(survey.headerView, "advanced", "apply advanced header");
 
+  survey.applyTheme({
+    "headerView": "basic"
+  });
+  assert.equal(survey.headerView, "basic", "apply basic header");
+
   survey.applyTheme({});
-  assert.equal(survey.headerView, "advanced", "apply empty theme");
+  assert.equal(survey.headerView, "basic", "apply empty theme");
+
+  survey.applyTheme({ header: {} });
+  assert.equal(survey.headerView, "advanced", "apply theme with header");
 });
 QUnit.test("page/panel delete do it recursively", function (assert) {
   const survey = new SurveyModel({
@@ -19903,11 +19909,11 @@ QUnit.test("Do not run defaultValueExpression on survey.data, #7423", function (
   assert.deepEqual(q3.value, [], "q3.value #3");
   assert.notOk(q4.value, "q4.value #3");
 });
-QUnit.test("theme assignment doesn't affect headerView", function (assert) {
+QUnit.test("theme assignment affects headerView", function (assert) {
   let survey = new SurveyModel({});
-  assert.equal(survey.headerView, "advanced", "default value");
-  survey.theme = { header: {} } as any;
-  assert.equal(survey.headerView, "advanced", "keep default value");
+  assert.equal(survey.headerView, "basic", "default value");
+  survey.applyTheme({ header: {} } as any);
+  assert.equal(survey.headerView, "advanced", "changed to advanced");
 });
 QUnit.test("defaultValueExpression expression stops working after survey.clear(), #7448", function (assert) {
   const survey = new SurveyModel({
@@ -20436,6 +20442,7 @@ QUnit.test("getContainerContent - show advanced header on start page", function
   const json = {
     showNavigationButtons: "none",
     "firstPageIsStartPage": true,
+    headerView: "advanced",
     title: "My title",
     pages: [
       {

tests/markup/etalon_survey.ts

@@ -194,7 +194,7 @@ registerMarkupTests(
       },
       event: "onAfterRenderSurvey",
       getElement: el => {
-        return <HTMLElement>el?.querySelector(".sv-header__cell.sv-header__cell--bottom.sv-header__cell--left") as HTMLElement;
+        return <HTMLElement>el?.querySelector(".sv-header__cell.sv-header__cell--middle.sv-header__cell--right") as HTMLElement;
       },
       snapshot: "survey-header-advanced"
     },

tests/markup/snapshots/survey-header-advanced.snap.html

@@ -1,4 +1,4 @@
-<div class="sv-header__cell-content" style="align-items:flex-start; justify-content:flex-end; max-width:300%; text-align:start;">
+<div class="sv-header__cell-content" style="align-items:flex-end; justify-content:center; max-width:200%; text-align:end;">
 	<div class="sv-header__title">
 		<h3 aria-label="Test" class="sd-title">
 			<span class="sv-string-viewer">Test</span>

visualRegressionTests/tests/defaultV2/advancedHeader.ts

@@ -551,6 +551,7 @@ frameworks.forEach(framework => {
       await initSurvey(framework, {
         title: "My Survey",
         logo: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAeAB4AAD//gASTEVBRFRPT0xTIHYyMC4wAP/bAIQABQUFCAUIDAcHDAwJCQkMDQwMDAwNDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQEFCAgKBwoMBwcMDQwKDA0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0N/8QBogAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoLAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+hEAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/8AAEQgBqwGjAwEiAAIRAQMRAf/aAAwDAQACEQMRAD8A96ooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKlhgedgqAnP5UARU9I2kOEBJ9q6W10FQ26Zs+w/rXQRWkUH+rUL+HNAHEx6TcPztx9avR6BKfvED6V1wXFPoA5L/hHj/e/Sj/hHm/vV1mKMUAcXLoUyDK4bFZ76fPGMlDivRaCAeKAPLyuODxSdK7660uG4GcbT6jiucu9GeH5o/mH60AYlFKylDgjBpKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoorb0vSzcESycIOnvQBHp+kvdkO3yoP1rsoLWO3XYgAAqYAKMDgCnCgBgXFPoooAKKKKACiiigAooooAKjKZqSigDIv9LjuASBh+xrkLm0e1ba4xXo1Vbu0S7jKN+B9KAPOCMUVdu7R7V9rDjsaqYoAbRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFPijMrBB1JxQBp6VYfbHy2di9ff2rt1jEYCqMAdBUNnaraRhF9OfrVqgAxRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBRvrRbqMrjnsa4KSMxEq3BFel1zmt2IK+cg5HWgDkaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigArotBs97+c3Ren1rna9C0yLybdRjBxzQBfooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACopoxKhQ9xUtFAHmtzCbeRkPY1BXReIIdrhwOo61ztABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBPap5kqp6kV6Qg2qB6CuC0mPfcr7c139ABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAGPrUHmwEj+HmuGr0TUF3QOP8AZP8AKvOzwaACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigDV0Y4uVrvK4LRzi5Wu9oAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAqX3+pf/AHT/ACrzo9a9EvyFgfP90/yrzs9aAEooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAtWT+XMrehr0ZTkA15gDtORXomnzedCrZycc0AXKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAyNbk8u3PqTiuFNdP4gmyyxg8DnHvXMmgBKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACul0C62EwnvyK5qp7eYwOHHY0AelUVBbTi4QOO4qegAooooAKKKKACiiigAooooAKKKKACiiigAooooAKbI4jUsegGadXOa5fiNfJQ/MeuPSgDnryc3ErOe54qmaAaDQAlFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABSikooA3NIvjbvsc/Ia7NWBGRXmanFdDpmp7CI5Dx2NAHW0UgIIyOlLQAUUUUAFFFFABRRRQAUUUUAFFFFABRRUFxcLbKXY4xQAy8ultYy7HB7CvO5pDM5dupNXL+9a8fJ+6OgqhQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAop4OKjooA39P1drf5JMsnb2rrIZ0nXchBFeaVatr2W0OYjj27UAej0VzlprqyYWX5T69q3o5lkGVINAEtFFFABRRRQAUUUZoAKKqXF7FbDLn8K5q7113OIflFAG7eanHaA5OWHYVyN5fPdn5unYVSdzKdzHJNMoADRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABUsc7xHKMVNRUUAbEWtXEYwTu+tXV8RMv31/KuaoNAHXDxAn9001vECjoprlRS0Ab02vyNwgArOl1O4l43FQewqiabQAu49yTSZoooAM0UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUoUtwKAEoq9FptxLjCnHrWtH4eY/fbH0oA5uiuwTQIUPJJq4ui2w/h/WgDhgKXFd+NNt14CL+VI2mW7fwAfTigDz802u7k0W3cYA2n1qk3h5MfKeaAORorcn0KaLlMNWXLaSwffUigCvRS4xSYoAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKVVLHA5NACVJFE0zBUGSa2bHR3kO6UbV/nXT29pFbqFRQMUAc3baEz8yHA9K3bfTYYOQOR61o0o4oAVRjjpS0gpaACiiigAooooAKKKKACmPGrjDAEe9PooAxbnRIpjlflPtXO3OkzW5JxlfUV3lIy7higDzFlK8Gm1295paT8j5WrmrnTpbbqMgdxQBm0UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFadhpr3jDsnUn/CgCva2b3TbUHHc11+n6UlmMthnPc9vpVyC1S2G2MYFWgKAFxRjFFFABiiiigAooooAKKKKACiiigAooooAKKKKACiiigAxTWjVhggEU6igDmNS0UcyQD/gNcu6NGcMCD716fWVqGmpdrkfK/rQBwdFWLi2e2Yo4xiq+KACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoorZ0vTTdHe/CCgBNN0trk73GEH612kaCMBVGAKcqBAFXgCnCgBaKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigCleWKXa4Yc9jXDXVu1q5Rh9DXo1Z9/YreJtPXsaAPPzSVYuLdrZyjdqr4oAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoop8UZlYIvJNAFuwsmvZAo4Uck130MKwIEQYAqpYWwtIwo69zWhQAYo6UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAZWpact0u4cOOhrh5EMZKnqK9Nrl9bsAo85B9cUActRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAJ0rrNEs9i+aw5PSsCwtvtUyofu5yfoOa9ASMIABwBQACpRTQKdQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFNdQ42nkGnUUAefala/ZZSB908is+u81S1E0LHGWUZFcHjHFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRVi0h8+VUHc0AdLolr5aeaerdK6IdKgjjEShV6CphQA4UtIKWgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAEYZGK4PVbT7NKcfdbkV3tYus2vnQlh95eaAOIopTSUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAV0OgW4eQyn+Hp+Nc9XbaFEY4MkYLEn8OKANvFGKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo5kEilT3FSUUAea3Efluy+hqCtfWYTFOTjAbkVkUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAqjcQPU16NaJ5car6AV55D/rF/wB4fzr0eLoPoKAJqKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigDmfEMfyq/ocVyldp4gH7gf7wri6ACiiigAooooAKKKKACiiigD/9k=",
+        headerView: "advanced",
         pages: [
           {
             name: "page1",
@@ -573,6 +574,19 @@ frameworks.forEach(framework => {
         ],
       });
 
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "header": {
+            inheritWidthFrom: "survey",
+            "logoPositionX": "left",
+            "logoPositionY": "top",
+            "titlePositionX": "left",
+            "titlePositionY": "bottom",
+            "descriptionPositionX": "left",
+            "descriptionPositionY": "bottom"
+          }
+        });
+      })();
       await resetFocusToBody();
       await takeElementScreenshot("survey-advanced-header-correct-height.png", Selector(".sd-root-modern"), t, comparer);
     });