#6019 all platforms and more tests

surveyjs · Nov 5, 2024 · 95219d5 · 95219d5
1 parent c7b4bac
commit 95219d5
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 77 deletions.
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
@@ -426,6 +426,10 @@ test("Question adorner - do not render content when initially collapsed", async
       {
         type: "text",
         name: "question1"
+      },
+      {
+        type: "panel",
+        name: "panel1"
       }
     ]
   };
@@ -434,8 +438,12 @@ test("Question adorner - do not render content when initially collapsed", async
   await t.hover(getToolboxItemByText("Single-Line Input"));
   const qContent = Selector(".svc-question__content--text");
   const qCollapseButton = Selector(".svc-question__content--text #collapse");
+  const pContent = Selector(".svc-question__content--panel");
+  const pCollapseButton = Selector(".svc-question__content--panel #collapse");
   await t.expect(qCollapseButton.visible).ok();
   await t.click(qCollapseButton);
+  await t.expect(pCollapseButton.visible).ok();
+  await t.click(pCollapseButton);
 
   await t.click(Selector(".svc-tabbed-menu-item").withText("Preview"));
   await t.click(Selector(".svc-tabbed-menu-item").withText("Designer"));
@@ -445,6 +453,13 @@ test("Question adorner - do not render content when initially collapsed", async
   await t.expect(qContent.find(".sd-element").exists).ok();
   await t.click(qCollapseButton);
   await t.expect(qContent.find(".sd-element").exists).ok();
+
+  await t.expect(pContent.find(".sd-element").exists).notOk();
+  await t.click(pCollapseButton);
+  await t.expect(pContent.find(".sd-element").exists).ok();
+  await t.click(pCollapseButton);
+  await t.expect(pContent.find(".sd-element").exists).ok();
+
   await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "never"; })();
 });
 

diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
@@ -3,9 +3,9 @@
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
     <div *ngIf="adorner.showHiddenTitle" [class]="adorner.cssCollapsedHiddenHeader">
-      <div [class]="adorner.cssCollapsedHiddenTitle">
-        <sv-ng-string *ngIf="!!model.hasTitle" [model]="model.locTitle"></sv-ng-string>
-        <span *ngIf="!model.hasTitle" class="svc-fake-title">{{model.name}}</span>
+      <sv-ng-element-title *ngIf="!!model.hasTitle" [element]="model.element"></sv-ng-string>
+      <div *ngIf="!model.hasTitle" [class]="adorner.cssCollapsedHiddenTitle">
+          <span class="svc-fake-title">{{model.name}}</span>
       </div>
     </div>
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }"
@@ -22,43 +22,44 @@
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
         </div>
       </div>
-      <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
-
-      <div *ngIf="adorner.isEmptyElement" class="svc-panel__placeholder_frame-wrapper">
-        <div class="svc-panel__placeholder_frame">
-          <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
-          <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
-            (click)="addNewQuestion($event)">
-            <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
-              sv-ng-svg-icon></svg>
-            <span class="svc-add-new-item-button__text">
-              {{ adorner.addNewQuestionText }}
-            </span>
+      <ng-container *ngIf="model.needToRenderContent">
+        <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
+        <div *ngIf="adorner.isEmptyElement" class="svc-panel__placeholder_frame-wrapper">
+          <div class="svc-panel__placeholder_frame">
+            <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
+            <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
+              (click)="addNewQuestion($event)">
+              <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
+                sv-ng-svg-icon></svg>
+              <span class="svc-add-new-item-button__text">
+                {{ adorner.addNewQuestionText }}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <ng-template *ngIf="adornerComponent && adorner.element.isInteractiveDesignElement"
-        [component]="{ name: adornerComponent, data: { adorner: adorner, question: model } }">
-      </ng-template>
+        <ng-template *ngIf="adornerComponent && adorner.element.isInteractiveDesignElement"
+          [component]="{ name: adornerComponent, data: { adorner: adorner, question: model } }">
+        </ng-template>
 
-      <div *ngIf="!adorner.isEmptyElement && adorner.showAddQuestionButton"
-        class="svc-panel__add-new-question-container">
-        <div class="svc-panel__question-type-selector-popup"> <sv-ng-popup
-            [popupModel]="adorner.questionTypeSelectorModel.popupModel"></sv-ng-popup>
-        </div>
+        <div *ngIf="!adorner.isEmptyElement && adorner.showAddQuestionButton"
+          class="svc-panel__add-new-question-container">
+          <div class="svc-panel__question-type-selector-popup"> <sv-ng-popup
+              [popupModel]="adorner.questionTypeSelectorModel.popupModel"></sv-ng-popup>
+          </div>
 
-        <div class="svc-panel__add-new-question-wrapper">
-          <ng-template
-            [component]="{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }">
-          </ng-template>
+          <div class="svc-panel__add-new-question-wrapper">
+            <ng-template
+              [component]="{ name: 'svc-add-new-question-btn', data: { model: { data: adorner }, buttonClass: 'svc-action-button', renderPopup: false } }">
+            </ng-template>
+          </div>
         </div>
-      </div>
 
-      <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content-actions"
-        (focusin)="adorner.select(adorner, $event)">
-        <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
-      </div>
+        <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content-actions"
+          (focusin)="adorner.select(adorner, $event)">
+          <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
+        </div>
+      </ng-container>
     </div>
   </div>
 </ng-template>
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
@@ -3,9 +3,9 @@
     (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)"
     [attr.data-sv-drop-target-survey-element]="adorner.element.name || null" #container>
     <div *ngIf="adorner.showHiddenTitle" [class]="adorner.cssCollapsedHiddenHeader">
-      <div [class]="adorner.cssCollapsedHiddenTitle">
-        <sv-ng-string *ngIf="!!model.hasTitle" [model]="model.locTitle"></sv-ng-string>
-        <span *ngIf="!model.hasTitle" class="svc-fake-title">{{model.name}}</span>
+      <sv-ng-element-title *ngIf="!!model.hasTitle" [element]="model.element"></sv-ng-string>
+        <div *ngIf="!model.hasTitle" [class]="adorner.cssCollapsedHiddenTitle">
+          <span class="svc-fake-title">{{model.name}}</span>
       </div>
     </div>
     <div [class]="adorner.css()" [key2click]="{ disableTabStop: true }" (click)="adorner.select(adorner, $event)">
@@ -20,6 +20,7 @@
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
         </div>
       </div>
+      <ng-container *ngIf="model.needToRenderContent">
       <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
       <div *ngIf="adorner.isEmptyElement && !showPlaceholderComponent" class="svc-panel__placeholder_frame-wrapper">
         <div class="svc-panel__placeholder_frame">
@@ -37,6 +38,7 @@
       <div class="svc-question__content-actions" (focusin)="adorner.select(adorner, $event)">
         <sv-action-bar [model]="adorner.actionContainer" [handleClick]="false"></sv-action-bar>
       </div>
+      </ng-container>
     </div>
   </div>
 </ng-template>
diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html
@@ -2,14 +2,14 @@
   data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
   <!-- ko if: $data.showHiddenTitle -->
   <div data-bind="css: $data.cssCollapsedHiddenHeader">
-    <div data-bind="css: $data.cssCollapsedHiddenTitle">
-      <!-- ko if: !!$data.element.hasTitle -->
-      <!-- ko template: { name: 'survey-string', data: $data.element.locTitle } --><!-- /ko -->
+    <!-- ko if: !!$data.element.hasTitle -->
+      <!-- ko component: { name: 'survey-element-title', params: { element: $data.element } } --><!-- /ko -->
       <!-- /ko -->
       <!-- ko ifnot: !!$data.element.hasTitle -->
-      <span class="svc-fake-title" data-bind="text: element.name"></span>
-      <!-- /ko -->
-    </div>
+      <div data-bind="css: $data.cssCollapsedHiddenTitle">
+        <span class="svc-fake-title" data-bind="text: element.name"></span>
+      </div>
+    <!-- /ko -->
   </div>
   <!-- /ko -->
   <div
@@ -28,6 +28,7 @@
       </div>
     </div>
     <!-- /ko -->
+    <!-- ko if: $data.needToRenderContent -->
     <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: templateData } } -->
     <!-- /ko -->
     <!-- ko if: koIsEmptyElement() -->
@@ -62,12 +63,12 @@
       </div>
     </div>
     <!-- /ko -->
-
     <!-- ko if: $data.element.isInteractiveDesignElement -->
     <div class="svc-question__content-actions" data-bind="event: {focusin: koSelect}">
       <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer, handleClick: false } } -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
+    <!-- /ko -->
   </div>
 </div>
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html
@@ -2,14 +2,15 @@
   data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">
   <!-- ko if: $data.showHiddenTitle -->
   <div data-bind="css: $data.cssCollapsedHiddenHeader">
-    <div data-bind="css: $data.cssCollapsedHiddenTitle">
-      <!-- ko if: !!$data.element.hasTitle -->
-      <!-- ko template: { name: 'survey-string', data: $data.element.locTitle } --><!-- /ko -->
+    <!-- ko if: !!$data.element.hasTitle -->
+      <!-- ko component: { name: 'survey-element-title', params: { element: $data.element } } -->
       <!-- /ko -->
-      <!-- ko ifnot: !!$data.element.hasTitle -->
-      <span class="svc-fake-title" data-bind="text: element.name"></span>
-      <!-- /ko -->
-    </div>
+    <!-- /ko -->
+    <!-- ko ifnot: !!$data.element.hasTitle -->
+      <div data-bind="css: $data.cssCollapsedHiddenTitle">
+        <span class="svc-fake-title" data-bind="text: element.name"></span>
+      </div>
+    <!-- /ko -->
   </div>
   <!-- /ko -->
   <div data-bind="click: koSelect, key2click: { disableTabStop: true }, clickBubble: false, css: css()">
@@ -28,6 +29,7 @@
       </div>
     </div>
     <!-- /ko -->
+    <!-- ko if: $data.needToRenderContent -->
     <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: templateData } } -->
     <!-- /ko -->
     <!-- ko if: koIsEmptyElement() && !$data.placeholderComponentData -->
@@ -57,5 +59,6 @@
       <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer, handleClick: false } } -->
       <!-- /ko -->
     </div>
+    <!-- /ko -->
   </div>
 </div>
diff --git a/packages/survey-creator-react/src/adorners/Question.tsx b/packages/survey-creator-react/src/adorners/Question.tsx
@@ -90,7 +90,7 @@ export class QuestionAdornerComponent extends CreatorModelElement<
         <div className="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
         {allowInteractions ? this.renderHeader() : null}
         {content}
-        {this.renderFooter()}
+        {this.model.needToRenderContent ? this.renderFooter() : null}
       </div>,
       undefined, { disableTabStop: this.disableTabStop() });
   }
@@ -108,8 +108,8 @@ export class QuestionAdornerComponent extends CreatorModelElement<
   }
 
   protected renderQuestionTitle(): JSX.Element {
-    const element = this.model.element as Question | PanelModel;
     if (!this.model.showHiddenTitle) return null;
+    const element = this.model.element as Question | PanelModel;
     return (
       <div
         ref={node => node && (!this.model.renderedCollapsed ?

diff --git a/packages/survey-creator-vue/example/src/components/Example.vue b/packages/survey-creator-vue/example/src/components/Example.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { SurveyCreatorModel } from 'survey-creator-core';
 const creator = new SurveyCreatorModel({ pageEditMode: "bypage" });
+creator.expandCollapseButtonVisibility = "onhover";
 import { SurveyCreatorComponent } from "survey-creator-vue";
 </script>
 <template>

diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -13,13 +13,13 @@
       v-if="adorner.showHiddenTitle"
       :class="adorner.cssCollapsedHiddenHeader"
     >
-      <div :class="adorner.cssCollapsedHiddenTitle">
-        <SvComponent
+      <SvComponent
           v-if="!!adorner.element.hasTitle"
-          :is="'survey-string'"
-          :locString="adorner.element.locTitle"
-        />
-        <span v-else class="svc-fake-title">{{ adorner.element.name }}</span>
+          :is="'survey-element-title'"
+          :element="adorner.element"
+      />
+      <div v-else :class="adorner.cssCollapsedHiddenTitle">
+        <span  class="svc-fake-title">{{ adorner.element.name }}</span>
       </div>
     </div>
     <div
@@ -64,6 +64,7 @@
           ></SvComponent>
         </div>
       </div>
+      <template v-if="adorner.needToRenderContent">
       <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
       <div
         v-if="adorner.isEmptyElement"
@@ -122,6 +123,7 @@
           :handleClick="false"
         ></SvComponent>
       </div>
+      </template>
     </div>
   </div>
 </template>

diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -11,13 +11,13 @@
     data-bind="css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"
   >
     <div v-if="model.showHiddenTitle" :class="model.cssCollapsedHiddenHeader">
-      <div :class="model.cssCollapsedHiddenTitle">
-        <SvComponent
+      <SvComponent
           v-if="!!element.hasTitle"
-          :is="'survey-string'"
-          :locString="element.locTitle"
-        />
-        <span v-else class="svc-fake-title">{{ element.name }}</span>
+          :is="'survey-element-title'"
+          :element="element"
+      />
+      <div v-else :class="model.cssCollapsedHiddenTitle">
+        <span class="svc-fake-title">{{ element.name }}</span>
       </div>
     </div>
     <div
@@ -64,7 +64,7 @@
           ></SvComponent>
         </div>
       </div>
-
+      <template v-if="model.needToRenderContent">
       <SvComponent
         :is="'sv-template-renderer'"
         :componentName="componentName"
@@ -87,17 +87,6 @@
           getPlaceholderComponentData && getPlaceholderComponentData(model)
         "
       ></SvComponent>
-      <!-- ko if: koIsEmptyElement() && !!$data.placeholderComponentData -->
-      <!-- ko let: { question: placeholderComponentData.data }  -->
-      <!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: placeholderComponentData } } -->
-      <!-- /ko -->
-      <!-- /ko -->
-      <!-- /ko -->
-
-      <!-- ko if: adornerComponent -->
-      <!-- ko component: { name: adornerComponent, params: { model: $data } } -->
-      <!-- /ko -->
-      <!-- /ko -->
       <SvComponent
         v-if="adornerComponent"
         :is="adornerComponent"
@@ -124,7 +113,8 @@
           :handleClick="false"
         ></SvComponent>
       </div>
-    </div>
+    </template>
+  </div>
   </div>
 </template>
 <script lang="ts" setup>

diff --git a/...RegressionTests/tests/designer/etalons/panel-adorner-collapsed-first-render.png b/...RegressionTests/tests/designer/etalons/panel-adorner-collapsed-first-render.png
diff --git a/...ressionTests/tests/designer/etalons/question-adorner-collapsed-first-render.png b/...ressionTests/tests/designer/etalons/question-adorner-collapsed-first-render.png
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -2156,6 +2156,11 @@ test("Question adorner - collapsed", async (t) => {
     await t.click(qContent.nth(1), { offsetX: 10, offsetY: 10 });
     await t.click(qCollapseButton.filterVisible());
     await takeElementScreenshot("panel-adorner-collapsed.png", qContent.nth(1), t, comparer);
+
+    await t.click(Selector(".svc-tabbed-menu-item").withText("Preview"));
+    await t.click(Selector(".svc-tabbed-menu-item").withText("Designer"));
+    await takeElementScreenshot("question-adorner-collapsed-first-render.png", qContent.nth(0), t, comparer);
+    await takeElementScreenshot("panel-adorner-collapsed-first-render.png", qContent.nth(1), t, comparer);
   });
 });