Add functional tests #5977

packages/survey-angular-ui/src/question.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { Question } from "survey-core";
 import { AngularComponentFactory } from "./component-factory";
 import { EmbeddedViewContentComponent } from "./embedded-view-content.component";
+import { getComponentName } from "./question";
 
 @Component({
   selector: "sv-ng-question",
@@ -18,13 +19,7 @@ export class QuestionComponent extends EmbeddedViewContentComponent {
       this.model.afterRender(this.rootEl?.nativeElement);
     }
   }
-  public getComponentName(): string {
-    if (this.model.customWidget) return "survey-customwidget";
-    if (this.model.isDefaultRendering()) {
-      return this.model.getTemplate() + "-question";
-    }
-    return this.model.getComponentName();
-  }
+  public getComponentName(): string { return getComponentName(this.model); }
   public getQuestionContentWrapperComponentName(): string {
     return (<any>this.model.survey).getQuestionContentWrapperComponentName(this.model) || this.getComponentName();
   }

packages/survey-angular-ui/src/question.ts

@@ -25,4 +25,12 @@ export class QuestionAngular<T extends Question = Question> extends BaseAngular<
     }
     super.ngOnDestroy();
   }
+}
+
+export function getComponentName(question: Question): string {
+  if (question.customWidget) return "survey-customwidget";
+  if (question.isDefaultRendering()) {
+    return question.getTemplate() + "-question";
+  }
+  return question.getComponentName();
 }

packages/survey-angular-ui/src/questions/custom.component.ts

@@ -1,7 +1,7 @@
 import { Question } from "survey-core";
 import { QuestionCustomModel } from "survey-core";
 import { Component } from "@angular/core";
-import { QuestionAngular } from "../question";
+import { QuestionAngular, getComponentName } from "../question";
 import { AngularComponentFactory } from "../component-factory";
 
 @Component({
@@ -12,12 +12,7 @@ export class CustomQuestionComponent extends QuestionAngular<QuestionCustomModel
   get contentQuestion(): Question {
     return this.model.contentQuestion;
   }
-  getComponentName(element: Question): string {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return element.getTemplate() + "-question";
-  }
+  getComponentName(element: Question): string { return getComponentName(element); }
 }
 
 AngularComponentFactory.Instance.registerComponent("custom-question", CustomQuestionComponent);

packages/survey-angular-ui/src/questions/matrixcell.component.ts

@@ -7,12 +7,13 @@ import {
   MatrixDropdownRowModelBase,
   SurveyModel
 } from "survey-core";
+import { getComponentName } from "../question";
 
 @Component({
   selector: "sv-ng-matrix-cell",
   templateUrl: "./matrixcell.component.html",
   styles: [":host { display: none; }"]
-  })
+})
 export class MatrixCellComponent extends BaseAngular<Question> {
   @Input() question!: QuestionMatrixDropdownModelBase;
   @Input() cell!: QuestionMatrixDropdownRenderedCell;
@@ -54,12 +55,7 @@ export class MatrixCellComponent extends BaseAngular<Question> {
     };
   }
 
-  getComponentName(element: Question) {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return element.getType()+"-question";
-  }
+  getComponentName(element: Question) { return getComponentName(element); }
   getHeaders(): string {
     return this.cell.headers;
   }

src/react/reactSurvey.tsx

@@ -275,10 +275,7 @@ export class Survey extends SurveyElementBase<any, any>
 
   //ISurveyCreator
   public createQuestionElement(question: Question): JSX.Element | null {
-    return ReactQuestionFactory.Instance.createQuestion(
-      !question.isDefaultRendering || question.isDefaultRendering()
-        ? question.getTemplate()
-        : question.getComponentName(),
+    return ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering() ? question.getTemplate() : question.getComponentName(),
       {
         question: question,
         isDisplayMode: question.isInputReadOnly,

src/vue/custom.vue

@@ -9,7 +9,7 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
-import { default as QuestionVue } from "./question";
+import { default as QuestionVue, getComponentName } from "./question";
 import { Question } from "survey-core";
 import { QuestionCustomModel } from "survey-core";
 
@@ -19,10 +19,7 @@ export class Custom extends QuestionVue<QuestionCustomModel> {
     return this.question.contentQuestion;
   }
   getComponentName(element: Question): string {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return "survey-" + element.getTemplate();
+    return getComponentName(element);
   }
 }
 Vue.component("survey-custom", Custom);

src/vue/element.vue

@@ -79,7 +79,8 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
-import { Base, SurveyModel, Question, SurveyElement, QuestionRowModel } from "survey-core";
+import { Base, SurveyModel, Question, QuestionRowModel } from "survey-core";
+import { getComponentName } from "./question";
 import { BaseVue } from "./base";
 
 @Component
@@ -91,12 +92,8 @@ export class SurveyElementVue extends BaseVue {
   protected getModel(): Base {
     return this.element;
   }
-    getComponentName(element: Question) {
-    if (element.customWidget) return "survey-customwidget";
-    if (element.getType() === "panel" || element.isDefaultRendering()) {
-      return "survey-" + element.getTemplate();
-    }
-    return element.getComponentName();
+  getComponentName(element: Question) {
+    return getComponentName(element);
   }
   getContentClass(element: Question) {
     return element.cssContent;

src/vue/flowpanelelement.vue

@@ -36,6 +36,7 @@ import { Component, Prop } from "vue-property-decorator";
 import { Question } from "survey-core";
 import { SurveyModel } from "survey-core";
 import { FlowPanelModel } from "survey-core";
+import { getComponentName } from "./question";
 
 @Component
 export class FlowPanelElement extends Vue {
@@ -95,10 +96,7 @@ export class FlowPanelElement extends Vue {
   }
   //duplicated code from element.vue
   getComponentName(element: Question) {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return "survey-" + element.getTemplate();
+    return getComponentName(element);
   }
   // duplicated code from reactpages.tsx
   private hasTextChildNodesOnly(node: Node): boolean {

src/vue/matrixcell.vue

@@ -77,6 +77,7 @@ import {
   QuestionMatrixDropdownRenderedCell,
   CssClassBuilder,
 } from "survey-core";
+import { getComponentName } from "./question";
 
 @Component
 export class MatrixCell extends Vue {
@@ -85,10 +86,7 @@ export class MatrixCell extends Vue {
 
   isVisible: boolean = false;
   getComponentName(element: Question | any) {
-    if (element.customWidget) {
-      return "survey-customwidget";
-    }
-    return "survey-" + element.getType();
+    return getComponentName(element);
   }
   getHeaders(): string {
     return this.cell.headers;

src/vue/multipletextitem.vue

@@ -48,6 +48,7 @@ import { default as QuestionVue } from "./question";
 import { MultipleTextItemModel, Question } from "survey-core";
 import { QuestionMultipleTextModel } from "survey-core";
 import BaseVue from "./base";
+import { getComponentName } from "./question";
 
 @Component
 export class MultipleTextItem extends BaseVue {
@@ -60,10 +61,7 @@ export class MultipleTextItem extends BaseVue {
     return this.item.editor;
   }
   getComponentName(question: Question) {
-    if (question.customWidget) {
-      return "survey-customwidget";
-    }
-    return "survey-text";
+    return getComponentName(question);
   }
 }
 Vue.component("survey-multipletext-item", MultipleTextItem);

src/vue/question.ts

@@ -30,4 +30,10 @@ export class QuestionVue<T extends Question> extends BaseVue {
   }
 }
 
+export function getComponentName(question: Question): string {
+  if (question.customWidget) return "survey-customwidget";
+  if(question.isDefaultRendering && question.isDefaultRendering() || question.isPanel) return "survey-" + question.getTemplate();
+  return question.getComponentName();
+}
+
 export default QuestionVue;

testCafe/questions/component_single_question.ts

@@ -0,0 +1,56 @@
+import { frameworks, url, initSurvey, getListItemByText, completeButton, getSurveyResult } from "../helper";
+import { Selector, ClientFunction } from "testcafe";
+const title = "component_single_question";
+const questionDropdownSelect = Selector(".sv_q_dropdown_control");
+const json_question = {
+  elements: [
+    {
+      type: "newquestion",
+      name: "q1"
+    },
+  ],
+};
+const json_matrix = {
+  elements: [
+    {
+      type: "matrixdynamic",
+      name: "matrix",
+      columns: [{ name: "col1", cellType: "newquestion" }],
+      rowCount: 1,
+    },
+  ],
+};
+const createComponent = ClientFunction(() => {
+  window["Survey"].ComponentCollection.Instance.add({
+    name: "newquestion",
+    questionJSON: {
+      type: "dropdown",
+      choices: ["a", "b", "c"],
+    },
+  });
+});
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}.html`;
+
+  test("Component as a single question", async (t) => {
+    await createComponent();
+    await initSurvey(framework, json_question);
+    await t
+      .click(questionDropdownSelect)
+      .click(getListItemByText("b"))
+      .click(completeButton);
+    const surveyResult = await getSurveyResult();
+    await t.expect(surveyResult.q1).eql("b");
+  });
+  test("Component as a cell question", async (t) => {
+    await createComponent();
+    await initSurvey(framework, json_matrix);
+    await t
+      .click(questionDropdownSelect)
+      .click(getListItemByText("b"))
+      .click(completeButton);
+    const surveyResult = await getSurveyResult();
+    await t.expect(surveyResult.matrix[0].col1).eql("b");
+  });
+});