Rating Scale - The Label Alignment option remains active even though …

…Min and Max value labels are unspecified (#5343) * Rating Scale - The Label Alignment option remains active even though Min and Max value labels are unspecified Fixes #5337 * #5337 - fix property name --------- Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
surveyjs · Mar 21, 2024 · 9ef1d8c · 9ef1d8c
1 parent 9fc40d4
commit 9ef1d8c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/packages/survey-creator-core/src/components/question-rating.ts b/packages/survey-creator-core/src/components/question-rating.ts
@@ -132,11 +132,17 @@ export class QuestionRatingAdornerViewModel extends Base {
       .append("svc-item-value-controls__button--disabled", !this.enableRemove)
       .append("svc-item-value-controls__remove").toString();
   }
+
+  public get hasTopLabel(): boolean {
+    return (this.element.rateDescriptionLocation == "top" ||
+            this.element.rateDescriptionLocation == "topBottom") &&
+            !!this.element.minRateDescription;
+  }
   public get controlsClassNames(): string {
     return new CssClassBuilder()
       .append("svc-rating-question-controls")
       .append("svc-item-value-controls")
-      .append("svc-rating-question-controls--labels-top", this.element.rateDescriptionLocation == "top" || this.element.rateDescriptionLocation == "topBottom").toString();
+      .append("svc-rating-question-controls--labels-top", this.hasTopLabel).toString();
   }
   get addTooltip() {
     return getLocString("pe.addItem");

diff --git a/packages/survey-creator-core/tests/components.tests.ts b/packages/survey-creator-core/tests/components.tests.ts
@@ -600,6 +600,46 @@ test("QuestionRatingAdornerViewModel button styles", () => {
   expect(ratingAdorner.removeClassNames).toBe("svc-item-value-controls__button svc-item-value-controls__remove");
 });
 
+test("QuestionRatingAdornerViewModel controlsClassNames", () => {
+  const creator = new CreatorTester();
+  creator.maximumRateValues = 4;
+  creator.JSON = {
+    elements: [{ type: "rating", name: "q1", rateMax: 3 }]
+  };
+  const question = <QuestionRatingModel>creator.survey.getAllQuestions()[0];
+
+  const ratingAdorner = new QuestionRatingAdornerViewModel(
+    creator,
+    question,
+    <any>{}
+  );
+  expect(ratingAdorner.hasTopLabel).toBe(false);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls");
+  question.minRateDescription = "min";
+  question.rateDescriptionLocation = "leftRight";
+  expect(ratingAdorner.hasTopLabel).toBe(false);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls");
+
+  question.minRateDescription = "min";
+  question.rateDescriptionLocation = "top";
+  expect(ratingAdorner.hasTopLabel).toBe(true);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls svc-rating-question-controls--labels-top");
+
+  question.minRateDescription = "min";
+  question.rateDescriptionLocation = "topBottom";
+  expect(ratingAdorner.hasTopLabel).toBe(true);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls svc-rating-question-controls--labels-top");
+
+  question.minRateDescription = "";
+  question.rateDescriptionLocation = "top";
+  expect(ratingAdorner.hasTopLabel).toBe(false);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls");
+
+  question.minRateDescription = "";
+  question.rateDescriptionLocation = "topBottom";
+  expect(ratingAdorner.hasTopLabel).toBe(false);
+  expect(ratingAdorner.controlsClassNames).toBe("svc-rating-question-controls svc-item-value-controls");
+});
 test("QuestionRatingAdornerViewModel respect maximumRateValues with rate values", () => {
   const creator = new CreatorTester();
   creator.maximumRateValues = 4;