Add title into IToolboxCategoryDefinition and fix unit tests #5485

packages/survey-creator-core/src/toolbox.ts

@@ -12,7 +12,8 @@ import {
   Question,
   Serializer,
   SurveyModel,
-  DragOrClickHelper
+  DragOrClickHelper,
+  HashTable
 } from "survey-core";
 import { SurveyCreatorModel, toolboxLocationType } from "./creator-base";
 import { editorLocalization, getLocString } from "./editorLocalization";
@@ -62,6 +63,7 @@ export interface IQuestionToolbox {
 
 export interface IToolboxCategoryDefinition {
   category: string;
+  title?: string;
   items: Array<string | { name: string, title?: string }>;
 }
 
@@ -221,6 +223,7 @@ export class QuestionToolbox
    * @see isCompact
    */
   @property() forceCompact: boolean;
+  private categoriesTitles: HashTable<string> = {};
 
   constructor(
     private supportedQuestions: Array<string> = null,
@@ -262,6 +265,7 @@ export class QuestionToolbox
     return questionCategoryMap;
   }
   private getCategoryTitle(name: string): string {
+    if(this.categoriesTitles[name]) return this.categoriesTitles[name];
     return getLocString("toolbox_categories." + name);
   }
   private onActiveCategoryChanged(newValue: string) {
@@ -496,9 +500,11 @@ export class QuestionToolbox
       this.updateActionTitle(action);
       this.updateActionTitle(action.innerItem);
     });
-    this.categories.forEach(category => {
-      category.title = this.getCategoryTitle(category.name);
-    });
+    if(Array.isArray(this.categories)) {
+      this.categories.forEach(category => {
+        category.title = this.getCategoryTitle(category.name);
+      });
+    }
   }
   private updateActionTitle(action: IAction): void {
     const newTitle = editorLocalization.getString("qt." + action.id);
@@ -576,8 +582,12 @@ export class QuestionToolbox
     this.actions.forEach(item => {
       item.visible = false;
     });
+    this.categoriesTitles = {};
     const actionList = new Array<IQuestionToolboxItem>();
     categories.forEach(category => {
+      if(!!category.category && !!category.title) {
+        this.categoriesTitles[category.category] = category.title;
+      }
       if (!Array.isArray(category.items)) return;
       category.items.forEach(obj => {
         let name = undefined;

packages/survey-creator-core/tests/localization.tests.ts

@@ -190,13 +190,13 @@ test("Change Creator locale property", (): any => {
   const creator = new CreatorTester({ showLogicTab: true, showTranslationTab: true });
   creator.toolbox.showCategoryTitles = true;
   creator.JSON = { pages: [{ name: "page1", elements: [{ type: "text", name: "q1" }, { type: "expression", name: "q2" }] }] };
-  expect(creator.propertyGrid.getQuestionByName("title").title).toEqual("Survey title");
   const tabButton = creator.tabs.filter(item => item.title === "Logic")[0];
   const tabPreview = creator.tabs.filter(item => item.title === "Preview")[0];
   const textQuestion = creator.toolbox.actions.filter(item => item.title === "Single-Line Input")[0];
   const saveAction = creator.toolbar.actions.filter(item => item.title === "Save Survey")[0];
   const choiceCategory = creator.toolbox.categories.filter(item => item.name === "choice")[0];
   expect(tabPreview).toBeTruthy();
+  const surveyTitle = creator.propertyGrid.getQuestionByName("title").title;
 
   creator.locale = "de";
   expect(creator.propertyGrid.getQuestionByName("title").title).toEqual("Survey titel");
@@ -210,7 +210,7 @@ test("Change Creator locale property", (): any => {
   creator.selectElement(creator.survey);
 
   creator.locale = "";
-  expect(creator.propertyGrid.getQuestionByName("title").title).toEqual("Survey title");
+  expect(creator.propertyGrid.getQuestionByName("title").title).toEqual(surveyTitle);
   expect(tabButton.title).toEqual("Logic");
   expect(choiceCategory.title).toEqual("Choice Questions");
   expect(textQuestion.title).toEqual("Single-Line Input");

packages/survey-creator-core/tests/toolbox.tests.ts

@@ -130,9 +130,9 @@ test("toolbox default categories calculator", (): any => {
     "matrix"
   ]);
   expect(toolbox["getDefaultQuestionCategories"]()).toEqual({
-    "radiogroup": "Choice Questions",
-    "dropdown": "Choice Questions",
-    "matrix": "Matrix Questions" });
+    "radiogroup": "choice",
+    "dropdown": "choice",
+    "matrix": "matrix" });
 });
 
 test("toolbox default categories actions separator", (): any => {
@@ -233,7 +233,7 @@ test("toolbox categories + allowExpandMultipleCategories property", (): any => {
     { name: "comment", category: "comment" },
     { name: "matrix", category: "matrix" }
   ]);
-  expect(toolbox.activeCategory).toEqual("General");
+  expect(toolbox.activeCategory).toEqual("general");
   expect(toolbox.categories[0].collapsed).toBeFalsy();
   toolbox.allowExpandMultipleCategories = true;
   expect(toolbox.categories[0].collapsed).toBeTruthy();
@@ -283,7 +283,7 @@ test("toolbox categories + keepAllCategoriesExpanded property", (): any => {
     { name: "comment", category: "comment" },
     { name: "matrix", category: "matrix" }
   ]);
-  expect(toolbox.activeCategory).toEqual("General");
+  expect(toolbox.activeCategory).toEqual("general");
   expect(toolbox.canCollapseCategories).toBeTruthy();
   toolbox.keepAllCategoriesExpanded = true;
   expect(toolbox.activeCategory).toBeFalsy();
@@ -347,13 +347,14 @@ test("toolbox categories defineCategories, #2", (): any => {
   expect(items[1].name).toBe("comment");
 
   toolbox.defineCategories([
-    { category: "text", items: [{ name: "text" }, "comment"] },
+    { category: "text", title: "Single text item", items: [{ name: "text" }, "comment"] },
     { category: "select", items: ["dropdown", "checkbox", "radiogroup"] },
   ], true);
   expect(toolbox.categories).toHaveLength(3);
   expect(toolbox.categories[0].name).toBe("text");
+  expect(toolbox.categories[0].title).toBe("Single text item");
   expect(toolbox.categories[1].name).toBe("select");
-  expect(toolbox.categories[2].name).toBe("Misc");
+  expect(toolbox.categories[2].name).toBe("misc");
   items = toolbox.categories[0].items;
   expect(items).toHaveLength(2);
   expect(items[0].name).toBe("text");