Merge pull request surveyjs#3238 from surveyjs/feature/issue-3237-css…

…-isanswered

Fix: question.isAnswered and question.cssTitle do not update correctl…

src/vue/components/default-title/default-title.vue

@@ -41,11 +41,13 @@ export class DefaultTitle extends Vue {
 
   mounted() {
     this.isCollapsed = this.element.isCollapsed;
-
     this.element.stateChangedCallback = () => {
       this.isCollapsed = this.element.isCollapsed;
     };
   }
+  beforeDestroy() {
+    this.element.stateChangedCallback = null;
+  }
 }
 
 Vue.component("sv-default-title", DefaultTitle);

src/vue/element.vue

@@ -46,12 +46,17 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
-import { SurveyModel, Question, IElement } from "survey-core";
+import { Base, SurveyModel, Question, SurveyElement } from "survey-core";
+import { BaseVue } from "./base";
+
 @Component
-export class SurveyElementVue extends Vue {
+export class SurveyElementVue extends BaseVue {
   @Prop() css: any;
   @Prop() survey: SurveyModel;
-  @Prop() element: IElement;
+  @Prop() element: SurveyElement;
+  protected getModel(): Base {
+    return this.element;
+  }
   getComponentName(element: Question) {
     if (element.customWidget) return "survey-customwidget";
     if (element.getType() === "panel" || element.isDefaultRendering()) {

src/vue/elementheader.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="getHeaderClass(element)" @click="clickTitleFunction">
+  <div :class="element.cssHeader" @click="clickTitleFunction">
     <h5
       v-if="element.hasTitle"
-      :class="getTitleClass(element)"
+      :class="element.cssTitle"
       v-bind:aria-label="element.locTitle.renderedHtml"
       v-bind:id="element.ariaTitleId"
       v-bind:tabindex="element.titleTabIndex"
@@ -36,24 +36,13 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
-import { SurveyModel } from "survey-core";
-import { IElement, Question, doKey2ClickUp } from "survey-core";
+import { SurveyElement, doKey2ClickUp } from "survey-core";
 
 @Component
 export class ElementHeader extends Vue {
-  @Prop() element: IElement;
+  @Prop() element: SurveyElement;
   @Prop() css: any;
 
-  beforeDestroy() {
-    this.element.stateChangedCallback = null;
-  }
-
-  getTitleClass(element: Question) {
-    return element.cssTitle;
-  }
-  getHeaderClass(element: Question) {
-    return element.cssHeader;
-  }
   keyup(evt: any) {
     doKey2ClickUp(evt);
   }

testCafe/survey/questionsIsAnswered.js

@@ -0,0 +1,50 @@
+import { frameworks, url_test, initSurvey } from "../helper";
+import { Selector, ClientFunction } from "testcafe";
+const assert = require("assert");
+const title = `questions isAnswered title style`;
+
+const json = {
+    elements: [
+      {type: "radiogroup", name: "q1", choices: ["item 1", "item 2"], showClearButton: true},
+      {type: "radiogroup", name: "q2", choices: ["item 3", "item 4"], defaultValue: "item 3"},
+      {type: "checkbox", name: "q3", choices: ["item 5", "item 6"]},
+      {type: "checkbox", name: "q4", choices: ["item 7", "item 8"], defaultValue: ["item 7"]},
+    ],
+};
+
+const applyTheme = ClientFunction((theme) => {
+  Survey.StylesManager.applyTheme(theme);
+});
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title} modern`
+    .page`${url_test}modern/${framework}.html`.beforeEach(async (t) => {
+    await applyTheme("modern");
+    await initSurvey(framework, json);
+  });
+
+  test(`Check is Answered title css class`, async (t) => {
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q1").exists).notOk();
+    await t.click(Selector("span").withText("item 1"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q1").exists).ok();
+    await t.click(Selector("input[value=Clear]"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q1").exists).notOk();
+
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q2").exists).ok();
+    await t.click(Selector("span").withText("item 3"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q2").exists).ok();
+
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q3").exists).notOk();
+    await t.click(Selector("span").withText("item 5"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q3").exists).ok();
+    await t.click(Selector("span").withText("item 5"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q3").exists).notOk();
+
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q4").exists).ok();
+    await t.click(Selector("span").withText("item 8"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q4").exists).ok();
+    await t.click(Selector("span").withText("item 7"));
+    await t.click(Selector("span").withText("item 8"));
+    await t.expect(Selector("h5.sv-question__title--answer").find("span").withText("q4").exists).notOk();
+  });
+});

tests/surveyquestiontests.ts

@@ -5171,7 +5171,7 @@ QUnit.test(
     survey.pages[0].addQuestion(q2);
     var q1 = <QuestionRadiogroupModel>survey.getQuestionByName("q1");
     (q1.choices = ["item1", "item2", "item3"]),
-      assert.equal(q1.visibleChoices.length, 6, "Show None+hasOther+new: 3+3");
+    assert.equal(q1.visibleChoices.length, 6, "Show None+hasOther+new: 3+3");
     assert.equal(
       q2.visibleChoices.length,
       7,
@@ -5362,3 +5362,52 @@ QUnit.test("QuestionExpression expression validator", function(assert) {
   assert.equal(question.value, 10);
   assert.notOk(question.hasErrors(), "There is no errors");
 });
+QUnit.test("Check isAnswered property", function(assert) {
+  const survey = new SurveyModel({
+    elements: [
+      { type: "text", name: "q1" },
+      { type: "radiogroup", name: "q2", choices: [1, 2, 3] },
+      { type: "radiogroup", name: "q3", choices: [1, 2, 3], defaultValue: 2 },
+      { type: "checkbox", name: "q4", choices: [1, 2, 3] },
+      { type: "checkbox", name: "q5", choices: [1, 2, 3], defaultValue: [2] }
+    ],
+  });
+  const prevStyle = survey.css.question.titleOnAnswer;
+  survey.css.question.titleOnAnswer = "answer";
+  const q1 = survey.getQuestionByName("q1");
+  const q2 = survey.getQuestionByName("q2");
+  const q3 = survey.getQuestionByName("q3");
+  const q4 = survey.getQuestionByName("q4");
+  const q5 = survey.getQuestionByName("q5");
+  assert.notOk(q1.isAnswered);
+  assert.notOk(q2.isAnswered);
+  assert.ok(q3.isAnswered);
+  assert.notOk(q4.isAnswered);
+  assert.ok(q5.isAnswered);
+
+  assert.notOk(q1.cssTitle.indexOf("answer") > 0);
+  assert.notOk(q2.cssTitle.indexOf("answer") > 0);
+  assert.ok(q3.cssTitle.indexOf("answer") > 0);
+  assert.notOk(q4.cssTitle.indexOf("answer") > 0);
+  assert.ok(q5.cssTitle.indexOf("answer") > 0);
+
+  q1.value = "abc";
+  assert.ok(q1.cssTitle.indexOf("answer") > 0);
+  q1.value = "";
+  assert.notOk(q1.cssTitle.indexOf("answer") > 0);
+
+  q2.value = 2;
+  assert.ok(q2.cssTitle.indexOf("answer") > 0);
+  q2.value = undefined;
+  assert.notOk(q2.cssTitle.indexOf("answer") > 0);
+
+  q3.clearValue();
+  assert.notOk(q3.cssTitle.indexOf("answer") > 0);
+
+  q4.value = [1];
+  assert.ok(q4.cssTitle.indexOf("answer") > 0);
+  q4.value = [];
+  assert.notOk(q4.cssTitle.indexOf("answer") > 0);
+
+  survey.css.question.titleOnAnswer = prevStyle;
+});