Fix markup tests #8248

surveyjs · May 7, 2024 · b2a9b5d · b2a9b5d
1 parent 2a134fe
commit b2a9b5d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 9 deletions.
diff --git a/src/question_rating.ts b/src/question_rating.ts
@@ -79,7 +79,7 @@ export class QuestionRatingModel extends Question {
         this.updateColors((this.survey as SurveyModel).themeVariables);
       });
     this.registerFunctionOnPropertiesValueChanged(["displayMode"], () => {
-      this.updateRenderAsBasedOnDisplayMode();
+      this.updateRenderAsBasedOnDisplayMode(true);
     });
     this.registerSychProperties(["autoGenerate"],
       () => {
@@ -503,14 +503,24 @@ export class QuestionRatingModel extends Question {
   * @see rateType
   */
   @property() displayMode: "dropdown" | "buttons" | "auto";
-  private updateRenderAsBasedOnDisplayMode(): void {
-    if(this.renderAs !== "default" && this.renderAs !== "dropdown") return;
-    const newVal = !this.isDesignMode && this.displayMode === "dropdown" ? this.displayMode : "default";
-    this.renderAs = newVal;
+  private updateRenderAsBasedOnDisplayMode(isOnChange?: boolean): void {
+    if(this.isDesignMode) {
+      if(isOnChange || this.renderAs === "dropdown") {
+        this.renderAs = "default";
+      }
+    } else {
+      if(isOnChange || this.displayMode !== "auto") {
+        this.renderAs = this.displayMode === "dropdown" ? "dropdown": "default";
+      }
+    }
   }
   public onSurveyLoad(): void {
     super.onSurveyLoad();
-    this.updateRenderAsBasedOnDisplayMode();
+    if(this.renderAs === "dropdown" && this.displayMode === "auto") {
+      this.displayMode = this.renderAs;
+    } else {
+      this.updateRenderAsBasedOnDisplayMode();
+    }
   }
   /**
   * Specifies the alignment of [`minRateDescription`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#minRateDescription) and [`maxRateDescription`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#maxRateDescription) texts.

diff --git a/tests/question_ratingtests.ts b/tests/question_ratingtests.ts
@@ -1554,9 +1554,9 @@ QUnit.test("rating items custom component", (assert) => {
   const q2 = <QuestionRatingModel>survey2.getQuestionByName("q1");
   assert.equal(q2.itemComponent, "custom-item");
 });
-QUnit.test("renderAs and copying in design-time", (assert) => {
-  var json = {
-    questions: [
+QUnit.test("displayMode and copying in design-time", (assert) => {
+  const json = {
+    elements: [
       {
         type: "rating",
         name: "q1",
@@ -1575,6 +1575,45 @@ QUnit.test("renderAs and copying in design-time", (assert) => {
   survey.pages[0].addElement(q2);
   assert.equal(q2.renderAs, "default", "q2.renderAs, #3");
 });
+QUnit.test("renderAs in design-time", (assert) => {
+  const json = {
+    elements: [
+      {
+        type: "rating",
+        name: "q1",
+        renderAs: "dropdown"
+      },
+    ],
+  };
+  const survey = new SurveyModel();
+  survey.setDesignMode(true);
+  survey.fromJSON(json);
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  assert.equal(q1.displayMode, "dropdown", "q1.renderAs");
+  assert.equal(q1.renderAs, "default", "q1.renderAs");
+});
+QUnit.test("renderAs in runtime", (assert) => {
+  const json = {
+    elements: [
+      {
+        type: "rating",
+        name: "q1",
+        renderAs: "dropdown"
+      },
+    ],
+  };
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "rating",
+        name: "q1",
+        renderAs: "dropdown"
+      },
+    ],
+  });
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  assert.equal(q1.renderAs, "dropdown");
+});
 
 QUnit.test("Generate empty rating", (assert) => {
   const q1 = new QuestionRatingModel("q1");