Bug/7168 - Knockout: fromJSON breaks rendered survey - Question Title…

…s disappear (#7308) * Fixed #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear * Work for #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear * Work for #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear * Work for #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear - added tests for second case * Work for #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear - updated f-test * Work for #7168 - Knockout: fromJSON breaks rendered survey - Question Titles disappear - added unit test for empty pages case * Fix unit test #7168 --------- Co-authored-by: tsv2013 <tsv2013@noreply.github.com> Co-authored-by: Andrew Telnov <andrew.telnov@gmail.com>
surveyjs · Nov 10, 2023 · 6bbc7d5 · 6bbc7d5
1 parent d102cea
commit 6bbc7d5
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 6 deletions.
diff --git a/src/knockout/kosurvey.ts b/src/knockout/kosurvey.ts
@@ -129,6 +129,11 @@ export class Survey extends SurveyModel {
   public render(element: any = null): void {
     this.implementor.render(element);
   }
+  public fromJSON(json: any) {
+    if (!json) return;
+    super.fromJSON(json);
+    this.locStrsChanged();
+  }
   public getHtmlTemplate(): string {
     return koTemplate;
   }
@@ -137,7 +142,7 @@ export class Survey extends SurveyModel {
   }
   public dispose(): void {
     super.dispose();
-    if(this.implementor) {
+    if (this.implementor) {
       this.implementor.dispose();
       this.implementor = undefined;
     }
@@ -281,7 +286,7 @@ ko.bindingHandlers["elementStyle"] = {
     }
     var value = ko.utils.unwrapObservable(valueAccessor()) || {};
     Object.keys(value).forEach(key => {
-      if(key.indexOf("--") === 0) {
+      if (key.indexOf("--") === 0) {
         element.style.setProperty(key, value[key]);
       } else {
         element.style[key] = value[key];

diff --git a/src/survey.ts b/src/survey.ts
@@ -4016,7 +4016,7 @@ export class SurveyModel extends SurveyElementCore
       this.setupPagesForPageModes(true);
     } else {
       if (this.runningPages) {
-        this.restoreOrigionalPages(this.runningPages);
+        this.restoreOriginalPages(this.runningPages);
       }
       this.runningPages = undefined;
     }
@@ -4044,7 +4044,7 @@ export class SurveyModel extends SurveyElementCore
     if (this.isShowingPreview) return;
     if (this.questionsOnPageMode == "standard" || this.isDesignMode) {
       if (this.origionalPages) {
-        this.restoreOrigionalPages(this.origionalPages);
+        this.restoreOriginalPages(this.origionalPages);
       }
       this.origionalPages = undefined;
     } else {
@@ -4056,11 +4056,13 @@ export class SurveyModel extends SurveyElementCore
     this.runConditions();
     this.updateVisibleIndexes();
   }
-  private restoreOrigionalPages(originalPages: Array<PageModel>) {
+  private restoreOriginalPages(originalPages: Array<PageModel>) {
     this.questionHashesClear();
     this.pages.splice(0, this.pages.length);
     for (var i = 0; i < originalPages.length; i++) {
-      this.pages.push(originalPages[i]);
+      const page = originalPages[i];
+      page.setWasShown(false);
+      this.pages.push(page);
     }
   }
   private getPageStartIndex(): number {

diff --git a/testCafe/survey/survey.js b/testCafe/survey/survey.js
@@ -0,0 +1,87 @@
+import { frameworks, url_test, initSurvey, applyTheme } from "../helper";
+import { Selector, ClientFunction, fixture, test } from "testcafe";
+const title = "Survey";
+
+var json = {
+  questionsOnPageMode: "questionPerPage",
+  pages: [
+    {
+      name: "page1",
+      elements: [
+        {
+          type: "radiogroup",
+          name: "question1",
+          choices: ["Item 1", "Item 2", "Item 3"]
+        }
+      ]
+    },
+    {
+      name: "page2",
+      elements: [
+        {
+          type: "radiogroup",
+          name: "question2",
+          choices: ["Item 1", "Item 2", "Item 3"]
+        }
+      ]
+    }
+  ]
+};
+
+const themeName = "defaultV2";
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`
+    .page`${url_test}${themeName}/${framework}`.beforeEach(async (t) => {
+    await applyTheme(themeName);
+    await initSurvey(framework, json);
+    await t.resizeWindow(1600, 900);
+  });
+  test("Update survey via fromJSON", async (t) => {
+    const updateSurvey = ClientFunction(() => {
+      window.survey.data = { question1: "Item 1" };
+      var newJson = {
+        pages: [
+          {
+            name: "page1",
+            elements: [
+              {
+                type: "radiogroup",
+                isRequired: true,
+                name: "question1",
+                choices: ["Item 1", "Item 2", "Item 3"]
+              }
+            ]
+          }
+        ]
+      };
+      window.survey.fromJSON(newJson);
+    });
+    await t
+      .expect(Selector("span").withText("question1").visible).ok();
+    await t
+      .wait(500);
+    await updateSurvey();
+    await t
+      .wait(500);
+    await updateSurvey();
+    await t
+      .wait(500)
+      .expect(Selector("span").withText("question1").visible).ok();
+  });
+  test("Change questionsOnPageMode", async (t) => {
+    await t.expect(Selector("span").withText("question1").visible).ok();
+    await ClientFunction(() => {
+      window.survey.questionsOnPageMode = "singlePage";
+    })();
+    await t.expect(Selector("span").withText("question1").visible).ok();
+    await ClientFunction(() => {
+      window.survey.questionsOnPageMode = "questionPerPage";
+    })();
+    await t.expect(Selector("span").withText("question1").visible).ok();
+    await ClientFunction(() => {
+      window.survey.questionsOnPageMode = "standard";
+    })();
+    await t.expect(Selector("span").withText("question1").visible).ok();
+  });
+});
diff --git a/tests/ko/survey_kotests.ts b/tests/ko/survey_kotests.ts
@@ -2587,4 +2587,43 @@ QUnit.test("Check imagepicker's koGetItemClass method (designMode, multiSelect)
   q.defaultValue = [];
   assert.equal(log, "->checked->");
   q.defaultValue = ["->checked->->checked"];
+});
+
+QUnit.test("questionsOnPageMode change from questionPerPage to standard leads to empty page content", function (assert) {
+  var json = {
+    questionsOnPageMode: "questionPerPage",
+    pages: [
+      {
+        name: "page1",
+        elements: [
+          {
+            type: "radiogroup",
+            name: "question1",
+            choices: ["Item 1", "Item 2", "Item 3"]
+          },
+          {
+            type: "radiogroup",
+            name: "question2",
+            choices: ["Item 1", "Item 2", "Item 3"]
+          }
+        ]
+      },
+      {
+        name: "page2",
+        elements: [
+          {
+            type: "radiogroup",
+            name: "question3",
+            choices: ["Item 1", "Item 2", "Item 3"]
+          }
+        ]
+      }
+    ]
+  };
+  const survey = new Survey(json);
+  assert.equal(survey.pages[0].rows.length, 1, "one question");
+  survey.questionsOnPageMode = "standard";
+  assert.equal(survey.pages.length, 2, "There are two pages");
+  assert.equal(survey.pages[0].elements.length, 2, "There are two questions on the first page");
+  assert.equal(survey.pages[0].rows.length, 2, "two rows on the firts page");
 });