Work for #277 - added tests

surveyjs · Nov 12, 2021 · be7e53d · be7e53d
1 parent 059c902
commit be7e53d
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 45 deletions.
diff --git a/examples/knockout/index.html b/examples/knockout/index.html
@@ -1,47 +1,39 @@
 <!DOCTYPE html>
-<html>
-
-<head>
-    <title>Welcome to Knockout</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
-
-    <script src="https://unpkg.com/jquery"></script>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
-
-    <!-- custom widgets -->
-    <!-- select2 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
-    <!-- select2 -->
-    <!-- sortable -->
-    <script src="https://unpkg.com/[email protected]/Sortable.js"></script>
-    <!-- bootstrap-datepicker -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
-        type="text/css" rel="stylesheet" />
-    <!-- bootstrap-datepicker -->
-    <!-- jquery-ui-datepicker -->
-    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
-    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
-        rel="stylesheet" />
-    <!-- jquery-ui-datepicker -->
-
-    <script src="https://unpkg.com/easy-autocomplete"></script>
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/easy-autocomplete.css">
-    <!-- eo custom widgets-->
-
-    <script src="https://unpkg.com/survey-knockout"></script>
-    <!-- <script src="http://127.0.0.1:8080/packages/survey-knockout/survey.ko.js"></script>  -->
-
-    <script src="../../package/surveyjs-widgets.js"></script>
-</head>
-
-<body>
-    <div id="surveyElement">
-    </div>
-    <div id="surveyResult">
-    </div>
-    <script src="./index.js"></script>
-</body>
-
+<html lang="en">
+    <head>
+        <title>Use options to customize the Survey Creator, Survey Creator Example</title><meta name="viewport" content="width=device-width"/>
+        <script src="https://unpkg.com/jquery"></script>
+        <script src="https://unpkg.com/[email protected]/build/output/knockout-latest.js"></script>
+        <script src="https://unpkg.com/[email protected]/survey.ko.min.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
+        <script src="https://unpkg.com/[email protected]/survey-creator.min.js"></script>
+        <link href="https://unpkg.com/[email protected]/survey-creator.min.css" type="text/css" rel="stylesheet"/>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
+
+        <script src="https://unpkg.com/[email protected]/Sortable.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
+        <script src="https://unpkg.com/[email protected]/distribute/nouislider.js"></script>
+        <script src="https://unpkg.com/[email protected]"></script><link href="https://unpkg.com/[email protected]/distribute/nouislider.min.css" rel="stylesheet"/>
+
+        <!-- bootstrap-datepicker -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
+            type="text/css" rel="stylesheet" />
+        <!-- bootstrap-datepicker -->
+        <!-- jquery-ui-datepicker -->
+        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
+            rel="stylesheet" />
+        <!-- jquery-ui-datepicker -->
+
+        <script src="../../package/surveyjs-widgets.js"></script>
+    <body>
+        <div id="surveyElement">
+        </div>
+        <div id="surveyResult">
+        </div>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
 </html>
diff --git a/testcafe/helper.js b/testcafe/helper.js
@@ -57,6 +57,37 @@ export const initSurvey = ClientFunction(
     window.survey = model;
   }
 );
+
+export const initCreator = ClientFunction((json, creatorOptions) => {
+  console.error = (msg) => {
+    throw new Error(msg);
+  };
+  console.warn = (msg) => {
+    throw new Error(msg);
+  };
+  console.log("surveyjs console.error and console.warn override");
+
+  const body = document.querySelector("body");
+  body.innerHTML = '<div id="surveyContainer"><div id="creatorElement"></div></div>'
+
+  Survey.Survey.cssType = "bootstrap";
+  Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
+  if (!creatorOptions) creatorOptions = null;
+  const creator = new SurveyCreator.SurveyCreator(
+    "creatorElement",
+    creatorOptions
+  );
+  creator.saveSurveyFunc = function (saveNo, callback) {
+    alert("ok");
+    callback(saveNo, true);
+  };
+  creator.JSON = json;
+  creator.showOptions = true;
+  creator.showState = true;
+
+  window.creator = creator;
+});
+
 export const getData = ClientFunction(() => {
   return survey.data;
 });

diff --git a/testcafe/nouislider.ts b/testcafe/nouislider.ts
@@ -0,0 +1,65 @@
+import { Selector, ClientFunction } from "testcafe";
+import { url, frameworks, initCreator } from "./helper";
+const assert = require("assert");
+
+const title = "Tagbox widget";
+
+const explicitErrorHandler = () => {
+    window.addEventListener("error", e => {
+        if (e.message === "ResizeObserver loop completed with undelivered notifications." ||
+            e.message === "ResizeObserver loop limit exceeded") {
+            e.stopImmediatePropagation();
+        }
+    });
+};
+
+var json = {
+    "pages": [
+     {
+      "name": "page1",
+      "elements": [
+       {
+        "type": "nouislider",
+        "name": "range",
+        "title": "Please range",
+        "step": 0.5,
+        "defaultValue": 3,
+        "rangeMin": 1,
+        "rangeMax": 5        
+       }
+      ]
+     }
+    ]
+   };
+
+frameworks.forEach(async framework => {
+    fixture`${framework} ${title}`.page`${url}${framework}`.clientScripts({ content: `(${explicitErrorHandler.toString()})()` }).beforeEach(async t => {
+    });
+
+    async function checkCurrentSliderState(t: any, minToBe: string, maxToBe: string, startToBe: string) {
+        await t
+            .expect(Selector(".sv_qstn").exists).ok()
+            .expect(Selector(".noUi-value").filterVisible().nth(0).withText(minToBe).exists).ok()
+            .expect(Selector(".noUi-value").filterVisible().nth(-1).withText(maxToBe).exists).ok()
+            .expect(Selector(".noUi-tooltip").withText(startToBe).exists).ok()
+    }
+
+    test("Check noUISlider in creator", async t => {
+        if (framework === "knockout") {
+            await initCreator(json);
+            await t
+                .expect(Selector(".sv_qstn").exists).ok()
+            await checkCurrentSliderState(t, "1", "5", "3.00")    
+            await t
+                .click(Selector(".sv_qstn"))
+                .click(Selector(".svd-accordion-tab-header").nth(1))
+                .click(Selector(".form-control").nth(4))
+                .pressKey("backspace")
+                .typeText(Selector(".form-control").nth(4), "4")
+                .pressKey("enter")
+            await checkCurrentSliderState(t, "4", "5", "4.50")
+
+        }
+    });
+
+});