diff --git a/e2e/questions/radiogroup.spec.ts b/e2e/questions/radiogroup.spec.ts new file mode 100644 index 0000000000..cbfb87eaca --- /dev/null +++ b/e2e/questions/radiogroup.spec.ts @@ -0,0 +1,590 @@ +import { frameworks, url, urlV2, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, checkSurveyWithEmptyQuestion, test, expect } from "../helper"; + +const title = "radiogroup"; + +const json = { + elements: [ + { + type: "radiogroup", + name: "car", + title: "What car are you driving?", + isRequired: true, + colCount: 4, + choices: [ + "None", + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + } + ] +}; + +frameworks.forEach((framework) => { + test.describe(`${framework} ${title}`, () => { + test.beforeEach(async ({ page }) => { + await page.goto(`${url}${framework}`); + await page.setViewportSize({ width: 1920, height: 1080 }); + await initSurvey(page, framework, json); + }); + + test("choose empty", async ({ page }) => { + await checkSurveyWithEmptyQuestion(page); + }); + + test("choose value", async ({ page }) => { + await page.locator("label").filter({ hasText: "Nissan" }).click(); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult.car).toEqual("Nissan"); + }); + + test("change column count", async ({ page }) => { + const getClassName = async () => { + return await page.evaluate(() => { + return document.querySelector("div[id*=sq_] fieldset .sd-selectbase__column")?.className || ""; + }); + }; + let className = await getClassName(); + expect(className.indexOf("sv-q-column-4")).not.toEqual(-1); + + await setOptions(page, "car", { colCount: 1 }); + + const getClassNameOneCol = async () => { + return await page.evaluate(() => { + return document.querySelector("div[id*=sq_] fieldset > .sd-radio")?.className || ""; + }); + }; + className = await getClassNameOneCol(); + expect(className.indexOf("sv-q-col-1")).not.toEqual(-1); + + await setOptions(page, "car", { colCount: 2 }); + + className = await getClassName(); + expect(className.indexOf("sv-q-column-2")).not.toEqual(-1); + }); + + test("change choices order", async ({ page }) => { + const radiogroup = page.locator("[role=\"radiogroup\"]"); + const chocies = radiogroup.locator(".sd-item"); + + //asc + await setOptions(page, "car", { choicesOrder: "asc" }); + await expect(page.locator("label").getByText("Audi")).toBeVisible(); + await expect(page.locator("label").getByText("BMW")).toBeVisible(); + + //desc + await setOptions(page, "car", { choicesOrder: "desc" }); + await expect(page.locator("label").getByText("Volkswagen")).toBeVisible(); + await expect(page.locator("label").getByText("Vauxhall")).toBeVisible(); + + //random + const choicesCount = await chocies.count(); + if (choicesCount === 1) { + throw new Error("need to more than one choices"); + } + + let firstText = await chocies.nth(0).locator("label").textContent(); + let random_count = 0; + for (let i = 0; i < 15; i++) { + await setOptions(page, "car", { choicesOrder: "asc" }); + await setOptions(page, "car", { choicesOrder: "random" }); + const first2Text = await chocies.nth(0).locator("label").textContent(); + + if (firstText !== first2Text) { + random_count++; + } + firstText = first2Text; + if (random_count >= 4) break; + } + + //because of 'none', 'asc', 'desc' and if 4 it is really random + expect(random_count).toBeGreaterThanOrEqual(4); + }); + + test("check integrity", async ({ page }) => { + const choices = [ + "None", + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ]; + const getChoicesCount = async () => { + return await page.evaluate(() => { + return document.querySelectorAll("div input[type=radio]").length; + }); + }; + let checkIntegrity = async () => { + const choicesCount = await getChoicesCount(); + expect(choicesCount).toEqual(choices.length); + for (let i = 0; i < choices.length; i++) { + await page.locator("label").filter({ hasText: choices[i] }).click(); + } + }; + + await setOptions(page, "car", { choicesOrder: "random" }); + await checkIntegrity(); + + await setOptions(page, "car", { choicesOrder: "asc" }); + await checkIntegrity(); + + await setOptions(page, "car", { choicesOrder: "desc" }); + await checkIntegrity(); + }); + + test("show \"other\" choice", async ({ page }) => { + await setOptions(page, "car", { hasOther: true, otherText: "Other" }); + await expect(page.locator(".sv-string-viewer").getByText("Other")).toBeVisible(); + await expect(page.locator("textarea")).not.toBeVisible(); + await page.locator("label").filter({ hasText: "Ford" }).click(); + await expect(page.locator("textarea")).not.toBeVisible(); + await page.locator("label").filter({ hasText: "Other" }).click(); + await expect(page.locator("textarea")).toBeVisible(); + }); + + test("check \"other\" choice doesn't change order", async ({ page }) => { + const radiogroup = page.locator("[role=\"radiogroup\"]"); + const chocies = radiogroup.locator(".sd-item"); + + await setOptions(page, "car", { hasOther: true, otherText: "Other Test" }); + await setOptions(page, "car", { choicesOrder: "desc" }); + await expect(chocies.nth(11).locator("label").getByText("Other Test")).toBeVisible(); + }); + + test("choose other", async ({ page }) => { + await setOptions(page, "car", { hasOther: true }); + + const getOtherInput = page.locator("textarea").first(); + const radiogroup = page.locator("[role=\"radiogroup\"]"); + const chocies = radiogroup.locator(".sd-item"); + const otherText = chocies.nth(11).locator("label").getByText("Other (describe)"); + + await otherText.click(); + await getOtherInput.fill("Zaporozec"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult.car).toEqual("other"); + expect(surveyResult["car-Comment"]).toEqual("Zaporozec"); + }); + + test("choose other and storeOthersAsComment=false", async ({ page }) => { + await page.evaluate(() => { + (window as any).survey.storeOthersAsComment = false; + }); + await setOptions(page, "car", { hasOther: true }); + + const getOtherInput = page.locator("textarea").first(); + const radiogroup = page.locator("[role=\"radiogroup\"]"); + const chocies = radiogroup.locator(".sd-item"); + const otherText = chocies.nth(11).locator("label").getByText("Other (describe)"); + + await otherText.click(); + await getOtherInput.fill("New_Producer"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult.car).toEqual("New_Producer"); + }); + + test("checked class", async ({ page }) => { + const checkHasClass = async (text: string) => { + await expect(page.locator("label").filter({ hasText: text }).locator("..")).toHaveClass(/sd-radio--checked/); + }; + + const checkHasNotClass = async (text: string) => { + await expect(page.locator("label").filter({ hasText: text }).locator("..")).not.toHaveClass(/sd-radio--checked/); + }; + + await checkHasNotClass("BMW"); + await checkHasNotClass("Peugeot"); + + await page.locator("label").filter({ hasText: "BMW" }).click(); + await checkHasClass("BMW"); + await checkHasNotClass("Peugeot"); + + await page.locator("label").filter({ hasText: "Peugeot" }).click(); + await checkHasNotClass("BMW"); + await checkHasClass("Peugeot"); + }); + }); +}); + +frameworks.forEach((framework) => { + test.describe(`${framework} ${title}`, () => { + test.beforeEach(async ({ page }) => { + await page.goto(`${url}${framework}`); + await initSurvey(page, framework, json, true); + }); + + test("click on question title state editable", async ({ page }) => { + const newTitle = "MyText"; + let questionValue = await getQuestionValue(page); + expect(questionValue).toEqual(undefined); + + const outerSelector = ".sd-question__title"; + const innerSelector = ".sv-string-editor"; + await page.locator(outerSelector).click(); + await page.locator(outerSelector + " " + innerSelector).fill(newTitle); + await page.locator("body").click({ position: { x: 0, y: 0 } }); + + questionValue = await getQuestionValue(page); + expect(questionValue).toEqual(undefined); + const json = JSON.parse(await getQuestionJson(page)); + expect(json.title).toEqual(newTitle); + }); + + test("click on radio title state editable", async ({ page }) => { + const newTitle = "MyText"; + let questionValue = await getQuestionValue(page); + expect(questionValue).toEqual(undefined); + + const selector = ".sd-selectbase__label .sv-string-editor"; + await page.locator(selector).first().click(); + await page.locator(selector).first().fill(newTitle); + await page.locator("body").click({ position: { x: 0, y: 0 } }); + + questionValue = await getQuestionValue(page); + expect(questionValue).toEqual(undefined); + const json = JSON.parse(await getQuestionJson(page)); + expect(json.choices[0].text).toEqual(newTitle); + }); + }); +}); + +frameworks.forEach((framework) => { + test.describe(`${framework} ${title}`, () => { + test.beforeEach(async ({ page }) => { + await page.goto(`${url}${framework}`); + }); + + test("otherText changed", async ({ page }) => { + const currentJson = { + title: "Survey New Design Test", + description: "Survey Description", + logoPosition: "left", + elements: [ + { + type: "checkbox", + name: "car", + title: "Checkbox", + hasOther: true, + colCount: 4, + choices: [ + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + }, + { + type: "radiogroup", + name: "carss", + title: "Radiogroup", + hasOther: true, + colCount: 4, + choices: [ + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen" + ] + }, + ] + }; + const oldOtherText = "Other (describe)"; + const newOtherText = "New Other"; + await initSurvey(page, framework, currentJson); + await expect(page.locator(".sv-string-viewer").getByText(oldOtherText)).toHaveCount(2); + await expect(page.locator(".sv-string-viewer").getByText(newOtherText)).toHaveCount(0); + + await setOptions(page, "car", { otherText: newOtherText }); + await setOptions(page, "carss", { otherText: newOtherText }); + await expect(page.locator(".sv-string-viewer").getByText(oldOtherText)).toHaveCount(0); + await expect(page.locator(".sv-string-viewer").getByText(newOtherText)).toHaveCount(2); + }); + test("showNoneItem&separateSpecialChoices", async ({ page }) => { + const currentJson = { + elements: [ + { + type: "radiogroup", + separateSpecialChoices: true, + showNoneItem: true, + name: "car", + choices: ["item1", "item2", "item3"] + } + ] + }; + await initSurvey(page, framework, currentJson); + await expect(page.locator(".sv-string-viewer").getByText("None")).toHaveCount(1); + }); + test("otherItem type in comment, textUpdateMode=onBlur", async ({ page }) => { + const currentJson = { + elements: [ + { + type: "radiogroup", + showOtherItem: true, + name: "q1", + choices: ["item1", "item2", "item3"] + }, + { type: "text", name: "q2", defaultValue: 0, inputType: "number" } + ] + }; + await initSurvey(page, framework, {}); + await page.evaluate((json) => { + (window as any).survey.onValueChanged.add((sender, options) => { + if (options.name === "q2") return; + const val = sender.getValue("q2"); + sender.setValue("q2", val + 1); + }); + (window as any).survey.fromJSON(json); + }, currentJson); + + await page.locator("label").filter({ hasText: "Other" }).click(); + await page.locator("textarea").click(); + await page.keyboard.type("ABCDEF"); + await page.keyboard.press("Tab"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ q1: "other", "q1-Comment": "ABCDEF", q2: 2 }); + }); + test("otherItem type in comment, textUpdateMode=onTyping", async ({ page }) => { + const currentJson = { + textUpdateMode: "onTyping", + elements: [ + { + type: "radiogroup", + showOtherItem: true, + name: "q1", + choices: [ + "item1", + "item2", + "item3" + ] + }, + { type: "text", name: "q2", defaultValue: 0, inputType: "number" } + ] + }; + await initSurvey(page, framework, {}); + await page.evaluate((json) => { + (window as any).survey.onValueChanged.add((sender, options) => { + if (options.name === "q2") return; + const val = sender.getValue("q2"); + sender.setValue("q2", val + 1); + }); + (window as any).survey.fromJSON(json); + }, currentJson); + + await page.locator("label").filter({ hasText: "Other" }).click(); + await page.locator("textarea").click(); + await page.keyboard.type("ABCDEF"); + await page.keyboard.press("Tab"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ q1: "other", "q1-Comment": "ABCDEF", q2: 7 }); + }); + test("Type in comment, textUpdateMode=onBlur", async ({ page }) => { + const currentJson = { + elements: [ + { + type: "radiogroup", + showCommentArea: true, + name: "q1", + choices: [ + "item1", + "item2", + "item3" + ] + }, + { type: "text", name: "q2", defaultValue: 0, inputType: "number" } + ] + }; + await initSurvey(page, framework, {}); + await page.evaluate((json) => { + (window as any).survey.onValueChanged.add((sender, options) => { + if (options.name === "q2") return; + const val = sender.getValue("q2"); + sender.setValue("q2", val + 1); + }); + (window as any).survey.fromJSON(json); + }, currentJson); + + await page.locator("textarea").click(); + await page.keyboard.type("ABCDEF"); + await page.keyboard.press("Tab"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ "q1-Comment": "ABCDEF", q2: 1 }); + }); + test("Type in comment, textUpdateMode=onTyping", async ({ page }) => { + const currentJson = { + textUpdateMode: "onTyping", + elements: [ + { + type: "radiogroup", + showCommentArea: true, + name: "q1", + choices: [ + "item1", + "item2", + "item3" + ] + }, + { type: "text", name: "q2", defaultValue: 0, inputType: "number" } + ] + }; + await initSurvey(page, framework, {}); + await page.evaluate((json) => { + (window as any).survey.onValueChanged.add((sender, options) => { + if (options.name === "q2") return; + const val = sender.getValue("q2"); + sender.setValue("q2", val + 1); + }); + (window as any).survey.fromJSON(json); + }, currentJson); + + await page.locator("textarea").click(); + await page.keyboard.type("ABCDEF"); + await page.keyboard.press("Tab"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ "q1-Comment": "ABCDEF", q2: 6 }); + }); + test("Initial value in question comment", async ({ page }) => { + const currentJson = { + elements: [ + { + type: "radiogroup", + showCommentArea: true, + name: "q1", + choices: ["item1", "item2", "item3"] + } + ] + }; + await initSurvey(page, framework, currentJson); + await page.evaluate(() => { + (window as any).survey.setComment("q1", "ABC"); + }); + + await page.locator("label").filter({ hasText: "item2" }).click(); + await page.locator("textarea").click(); + await page.keyboard.press("End"); + await page.keyboard.type("DEF"); + await page.locator("input[value=Complete]").click(); + + const surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ q1: "item2", "q1-Comment": "ABCDEF" }); + }); + test("Do not clear comment area on clicking Clear button #8287", async ({ page }) => { + const clearButton = page.locator("button[title=Clear]"); + const currentJson = { + elements: [ + { + type: "radiogroup", + name: "q1", + choices: ["item1", "item2", "item3"], + allowClear: true, + showCommentArea: true + } + ] + }; + await initSurvey(page, framework, currentJson); + + await page.locator("label").filter({ hasText: "item2" }).click(); + await page.locator("textarea").fill("ABC"); + await clearButton.click(); + await page.locator("input[value=Complete]").click(); + + let surveyResult = await getSurveyResult(page); + expect(surveyResult).toEqual({ "q1-Comment": "ABC" }); + }); + }); +}); + +frameworks.forEach((framework) => { + test.describe(`${framework} ${title}`, () => { + test.beforeEach(async ({ page }) => { + await page.goto(`${url}${framework}`); + const json = { + elements: [ + { + type: "radiogroup", + name: "car", + title: "What car are you driving?", + isRequired: true, + colCount: 4, + hasOther: true, + hasNone: true, + readOnly: true, + choices: [ + "Unknown", + "Ford", + "Vauxhall", + "Volkswagen", + "Nissan", + "Audi", + "Mercedes-Benz", + "BMW", + "Peugeot", + "Toyota", + "Citroen", + ], + defaultValue: "BMW" + }, + ], + }; + await initSurvey(page, framework, json); + }); + + test("readonly", async ({ page }) => { + const fordChoice = page.locator("label").filter({ hasText: "Ford" }); + await fordChoice.click({ force: true }); + await expect(fordChoice).not.toBeChecked(); + await expect(page.locator("input[value=BMW]")).toBeChecked(); + }); + + test("readonly:keyboard disabled", async ({ page }) => { + await page.keyboard.press("Tab"); + await page.keyboard.press("ArrowDown"); + const getValue = async () => { + return await page.evaluate(() => { + return (window as any).survey.getAllQuestions()[0].value; + }); + }; + const value = await getValue(); + expect(value).toEqual("BMW"); + }); + }); +}); + diff --git a/e2e/questions/signature.spec.ts b/e2e/questions/signature.spec.ts new file mode 100644 index 0000000000..5c18b01d07 --- /dev/null +++ b/e2e/questions/signature.spec.ts @@ -0,0 +1,131 @@ +import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, test, expect } from "../helper"; + +const title = "Signature"; + +frameworks.forEach((framework) => { + test.describe(`${framework} ${title}`, () => { + test.beforeEach(async ({ page }) => { + await page.goto(`${url}${framework}`); + await page.setViewportSize({ width: 1920, height: 1080 }); + }); + + test("Signature: show/hide elements", async ({ page }) => { + await initSurvey(page, framework, { + "elements": [ + { + "type": "signaturepad", + "name": "signature", + "title": "Please sign here", + "isRequired": true + } + ], + "showQuestionNumbers": false + }); + + const QuestionNode = page.locator(".sd-question"); + const SignCanvas = QuestionNode.locator("canvas"); + const ClearBtn = QuestionNode.locator("button[title='Clear']"); + const Placeholder = QuestionNode.locator(".sjs_sp_placeholder"); + const Controls = QuestionNode.locator(".sjs_sp_controls"); + + await SignCanvas.click(); + await ClearBtn.click(); + await SignCanvas.click(); + + await expect(Controls).toBeVisible(); + await expect(Placeholder).not.toBeVisible(); + }); + + test("Signature: show/hide elements server mode", async ({ page }) => { + const json = { + "elements": [ + { + "type": "signaturepad", + "name": "signature", + "title": "Please sign here", + "storeDataAsText": false, + "isRequired": true + } + ], + "showQuestionNumbers": false + }; + await initSurvey(page, framework, {}); + await page.evaluate((json) => { + (window as any).uploadFilesCallCount = 0; + + (window as any).survey.onUploadFiles.add((_, options) => { + setTimeout( + (data) => { + (window as any).uploadFilesCallCount++; + options.callback( + "success", + options.files.map((file) => { + return { + file: file, + content: "https://example.com?name=qwertyuiop" + }; + }) + ); + }, 1000); + }); + (window as any).survey.fromJSON(json); + }, json); + + const QuestionNode = page.locator(".sd-question"); + const SignCanvas = QuestionNode.locator("canvas"); + const ClearBtn = QuestionNode.locator("button[title='Clear']"); + const Placeholder = QuestionNode.locator(".sjs_sp_placeholder"); + const Controls = QuestionNode.locator(".sjs_sp_controls"); + + await expect(Controls).not.toBeVisible(); + await expect(Placeholder).toBeVisible(); + + await SignCanvas.click(); + await expect(Controls).toBeVisible(); + await expect(Placeholder).not.toBeVisible(); + + await ClearBtn.click(); + await expect(Controls).not.toBeVisible(); + await expect(Placeholder).toBeVisible(); + + await SignCanvas.click(); + await expect(Controls).toBeVisible(); + await expect(Placeholder).not.toBeVisible(); + + await page.click("body", { position: { x: 0, y: 0 } }); + await page.waitForTimeout(1000); + const uploadFilesCallCount = await page.evaluate(() => { + return (window as any).uploadFilesCallCount; + }); + expect(uploadFilesCallCount).toEqual(1); + }); + + test("Signature: no focus with tab", async ({ page }) => { + await initSurvey(page, framework, { + "elements": [ + { + "type": "text", + "name": "q1", + "placeholder": "q1" + }, + { + "type": "signaturepad", + "name": "signature" + }, + { + "type": "text", + "name": "q2", + "placeholder": "q2" + } + ], + "showQuestionNumbers": false + }); + + await page.locator("input[placeholder=q1]").click(); + await expect(page.locator("input[placeholder=q1]")).toBeFocused(); + await page.keyboard.press("Tab"); + await expect(page.locator("input[placeholder=q2]")).toBeFocused(); + }); + }); +}); + diff --git a/functionalTests/questions/radiogroup.js b/functionalTests/questions/radiogroup.js index d682d4b957..6004479e36 100644 --- a/functionalTests/questions/radiogroup.js +++ b/functionalTests/questions/radiogroup.js @@ -1,599 +1,599 @@ -import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, checkSurveyWithEmptyQuestion, urlV2 } from "../helper"; -import { Selector, ClientFunction, fixture, test } from "testcafe"; -// eslint-disable-next-line no-undef -const assert = require("assert"); -const title = "radiogroup"; - -const json = { - elements: [ - { - type: "radiogroup", - name: "car", - title: "What car are you driving?", - isRequired: true, - colCount: 4, - choices: [ - "None", - "Ford", - "Vauxhall", - "Volkswagen", - "Nissan", - "Audi", - "Mercedes-Benz", - "BMW", - "Peugeot", - "Toyota", - "Citroen" - ] - } - ] -}; - -frameworks.forEach(framework => { - fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach( - async t => { - await t.resizeWindow(1920, 1080); - await initSurvey(framework, json); - } - ); - - test("choose empty", async t => { - await checkSurveyWithEmptyQuestion(t); - }); - - test("choose value", async t => { - await t.click("input[value=Nissan]").click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.equal(surveyResult.car, "Nissan"); - }); - - test("change column count", async t => { - const getClassName = ClientFunction( - () => document.querySelector("div[id*=sq_] fieldset .sd-selectbase__column").className - ); - let className = await getClassName(); - assert.notEqual(className.indexOf("sv-q-column-4"), -1); - - await setOptions("car", { colCount: 1 }); - - const getClassNameOneCol = ClientFunction( - () => document.querySelector("div[id*=sq_] fieldset > .sd-radio").className - ); - className = await getClassNameOneCol(); - assert.notEqual(className.indexOf("sv-q-col-1"), -1); - - await setOptions("car", { colCount: 2 }); - - className = await getClassName(); - assert.notEqual(className.indexOf("sv-q-column-2"), -1); - }); - - test("change choices order", async t => { - const radiogroup = Selector("[role=\"radiogroup\"]"); - const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); - - //asc - await setOptions("car", { choicesOrder: "asc" }); - await t.expect(chocies.nth(0).find("label").withExactText("Audi").exists).ok(); - await t.expect(chocies.nth(3).find("label").withExactText("BMW").exists).ok(); - - //desc - await setOptions("car", { choicesOrder: "desc" }); - await t.expect(chocies.nth(0).find("label").withExactText("Volkswagen").exists).ok(); - await t.expect(chocies.nth(3).find("label").withExactText("Vauxhall").exists).ok(); - - //random - if (chocies.count === 1) { - assert(false, "need to more than one choices"); - } - - let first = chocies.nth(0); - let random_count = 0; - for (let i = 0; i < 15; i++) { - await setOptions("car", { choicesOrder: "asc" }); - await setOptions("car", { choicesOrder: "random" }); - const first_2 = chocies.nth(0); - - if (first.innerText !== first_2.innerText) { - random_count++; - } - first = first_2; - if (random_count >= 4) break; - } - - //because of 'none', 'asc', 'desc' and if 4 it is really random - assert(random_count >= 4); - }); - - test("check integrity", async t => { - const choices = [ - "None", - "Ford", - "Vauxhall", - "Volkswagen", - "Nissan", - "Audi", - "Mercedes-Benz", - "BMW", - "Peugeot", - "Toyota", - "Citroen" - ]; - const getChoicesCount = ClientFunction( - () => document.querySelectorAll("div input[type=radio]").length - ); - let checkIntegrity = async () => { - const choicesCount = await getChoicesCount(); - assert.equal(choicesCount, choices.length); - for (let i = 0; i < choices.length; i++) { - await t.click(`input[value=${choices[i]}]`); - } - }; - - await setOptions("car", { choicesOrder: "random" }); - await checkIntegrity(); - - await setOptions("car", { choicesOrder: "asc" }); - await checkIntegrity(); - - await setOptions("car", { choicesOrder: "desc" }); - await checkIntegrity(); - }); - - test("show \"other\" choice", async t => { - await setOptions("car", { hasOther: true, otherText: "Other" }); - await t.expect(Selector(".sv-string-viewer").withText("Other").visible).ok(); - await t.expect(Selector("textarea").visible).notOk(); - await t.click("input[value=Ford]"); - await t.expect(Selector("textarea").visible).notOk(); - await t.click("input[value=other]"); - await t.expect(Selector("textarea").visible).ok(); - }); - - test("check \"other\" choice doesn't change order", async t => { - const radiogroup = Selector("[role=\"radiogroup\"]"); - const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); - - await setOptions("car", { hasOther: true, otherText: "Other Test" }); - await setOptions("car", { choicesOrder: "desc" }); - await t.expect(chocies.nth(11).find("label").withExactText("Other Test").exists).ok(); - }); - - test("choose other", async t => { - const getOtherInput = Selector( - () => document.querySelectorAll("textarea")[0]); - - await setOptions("car", { hasOther: true }); - - const radiogroup = Selector("[role=\"radiogroup\"]"); - const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); - const otherText = chocies.nth(11).find("label").withExactText("Other (describe)"); - - await t - .click(otherText) - .typeText(getOtherInput, "Zaporozec") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.equal(surveyResult.car, "other"); - assert.equal(surveyResult["car-Comment"], "Zaporozec"); - }); - - test("choose other and storeOthersAsComment=false", async t => { - const setSurveyOptions = ClientFunction(() => { - window["survey"].storeOthersAsComment = false; - }); - const getOtherInput = Selector( - () => document.querySelectorAll("textarea")[0]); - - await setOptions("car", { hasOther: true }); - - const radiogroup = Selector("[role=\"radiogroup\"]"); - const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); - const otherText = chocies.nth(11).find("label").withExactText("Other (describe)"); - - await setSurveyOptions(); - await t - .click(otherText) - .typeText(getOtherInput, "New_Producer") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.equal(surveyResult.car, "New_Producer"); - }); - - test("checked class", async t => { - const isCheckedClassExistsByIndex = ClientFunction(index => - document - .querySelector( - `fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(${index})` - ) - .classList.contains("sd-radio--checked") - ); - - assert.equal(await isCheckedClassExistsByIndex(2), false); - assert.equal(await isCheckedClassExistsByIndex(3), false); - - await t.click( - "fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(2) label input" - ); - - assert.equal(await isCheckedClassExistsByIndex(2), true); - assert.equal(await isCheckedClassExistsByIndex(3), false); - - await t.click( - "fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(3) label input" - ); - - assert.equal(await isCheckedClassExistsByIndex(2), false); - assert.equal(await isCheckedClassExistsByIndex(3), true); - }); -}); - -frameworks.forEach((framework) => { - fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach( - async (t) => { - await initSurvey(framework, json, undefined, true); - } - ); - - test("click on question title state editable", async (t) => { - const newTitle = "MyText"; - let questionValue = await getQuestionValue(); - assert.equal(questionValue, undefined); - - const outerSelector = ".sd-question__title"; - const innerSelector = ".sv-string-editor"; - await t - .click(outerSelector) - .typeText(outerSelector + " " + innerSelector, newTitle, { replace: true }) - .click("body", { offsetX: 0, offsetY: 0 }); - - questionValue = await getQuestionValue(); - assert.equal(questionValue, undefined); - const json = JSON.parse(await getQuestionJson()); - assert.equal(json.title, newTitle); - }); - - test("click on radio title state editable", async (t) => { - const newTitle = "MyText"; - let questionValue = await getQuestionValue(); - assert.equal(questionValue, undefined); - - const selector = ".sd-selectbase__label .sv-string-editor"; - await t - .click(selector) - .typeText(selector, newTitle, { replace: true }) - .click("body", { offsetX: 0, offsetY: 0 }); - - questionValue = await getQuestionValue(); - assert.equal(questionValue, undefined); - const json = JSON.parse(await getQuestionJson()); - assert.equal(json.choices[0].text, newTitle); - }); -}); - -frameworks.forEach(framework => { - fixture`${framework} ${title}`.page`${url}${framework}`; - - test("otherText changed", async t => { - const currentJson = { - title: "Survey New Design Test", - description: "Survey Description", - logoPosition: "left", - elements: [ - { - type: "checkbox", - name: "car", - title: "Checkbox", - hasOther: true, - colCount: 4, - choices: [ - "Ford", - "Vauxhall", - "Volkswagen", - "Nissan", - "Audi", - "Mercedes-Benz", - "BMW", - "Peugeot", - "Toyota", - "Citroen" - ] - }, - { - type: "radiogroup", - name: "carss", - title: "Radiogroup", - hasOther: true, - colCount: 4, - choices: [ - "Ford", - "Vauxhall", - "Volkswagen", - "Nissan", - "Audi", - "Mercedes-Benz", - "BMW", - "Peugeot", - "Toyota", - "Citroen" - ] - }, - ] - }; - const oldOtherText = "Other (describe)"; - const newOtherText = "New Other"; - await initSurvey(framework, currentJson); - await t - .expect(Selector(".sv-string-viewer").withText(oldOtherText).count).eql(2) - .expect(Selector(".sv-string-viewer").withText(newOtherText).count).eql(0); - - await setOptions("car", { otherText: newOtherText }); - await setOptions("carss", { otherText: newOtherText }); - await t - .expect(Selector(".sv-string-viewer").withText(oldOtherText).count).eql(0) - .expect(Selector(".sv-string-viewer").withText(newOtherText).count).eql(2); - }); - test("showNoneItem&separateSpecialChoices", async t => { - const currentJson = { - elements: [ - { - type: "radiogroup", - separateSpecialChoices: true, - showNoneItem: true, - name: "car", - choices: [ - "item1", - "item2", - "item3" - ] - } - ] - }; - await initSurvey(framework, currentJson); - await t - .expect(Selector(".sv-string-viewer").withText("None").count).eql(1); - }); - test("otherItem type in comment, textUpdateMode=onBlur", async t => { - const setOnValueChanged = ClientFunction(() => { - window["survey"].onValueChanged.add((sender, options) => { - if (options.name === "q2") return; - const val = sender.getValue("q2"); - sender.setValue("q2", val + 1); - }); - }); - const currentJson = { - elements: [ - { - type: "radiogroup", - showOtherItem: true, - name: "q1", - choices: [ - "item1", - "item2", - "item3" - ] - }, - { type: "text", name: "q2", defaultValue: 0, inputType: "number" } - ] - }; - await initSurvey(framework, currentJson); - await setOnValueChanged(); - - await t.click("input[value=other]") - .click(Selector("textarea")) - .pressKey("A B C D E F tab") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 2 }); - }); - test("otherItem type in comment, textUpdateMode=onTyping", async t => { - const setOnValueChanged = ClientFunction(() => { - window["survey"].onValueChanged.add((sender, options) => { - if (options.name === "q2") return; - const val = sender.getValue("q2"); - sender.setValue("q2", val + 1); - }); - }); - const currentJson = { - textUpdateMode: "onTyping", - elements: [ - { - type: "radiogroup", - showOtherItem: true, - name: "q1", - choices: [ - "item1", - "item2", - "item3" - ] - }, - { type: "text", name: "q2", defaultValue: 0, inputType: "number" } - ] - }; - await initSurvey(framework, currentJson); - await setOnValueChanged(); - - await t.click("input[value=other]") - .click(Selector("textarea")) - .pressKey("A B C D E F tab") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 7 }); - }); - test("Type in comment, textUpdateMode=onBlur", async t => { - const setOnValueChanged = ClientFunction(() => { - window["survey"].onValueChanged.add((sender, options) => { - if (options.name === "q2") return; - const val = sender.getValue("q2"); - sender.setValue("q2", val + 1); - }); - }); - const currentJson = { - elements: [ - { - type: "radiogroup", - showCommentArea: true, - name: "q1", - choices: [ - "item1", - "item2", - "item3" - ] - }, - { type: "text", name: "q2", defaultValue: 0, inputType: "number" } - ] - }; - await initSurvey(framework, currentJson); - await setOnValueChanged(); - - await t.click(Selector("textarea")) - .pressKey("A B C D E F tab") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 1 }); - }); - test("Type in comment, textUpdateMode=onTyping", async t => { - const setOnValueChanged = ClientFunction(() => { - window["survey"].onValueChanged.add((sender, options) => { - if (options.name === "q2") return; - const val = sender.getValue("q2"); - sender.setValue("q2", val + 1); - }); - }); - const currentJson = { - textUpdateMode: "onTyping", - elements: [ - { - type: "radiogroup", - showCommentArea: true, - name: "q1", - choices: [ - "item1", - "item2", - "item3" - ] - }, - { type: "text", name: "q2", defaultValue: 0, inputType: "number" } - ] - }; - await initSurvey(framework, currentJson); - await setOnValueChanged(); - - await t.click(Selector("textarea")) - .pressKey("A B C D E F tab") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 6 }); - }); - test("Initial value in question comment", async t => { - const setCommentValue = ClientFunction(() => { - window["survey"].setComment("q1", "ABC"); - }); - const currentJson = { - elements: [ - { - type: "radiogroup", - showCommentArea: true, - name: "q1", - choices: [ - "item1", - "item2", - "item3" - ] - } - ] - }; - await initSurvey(framework, currentJson); - await setCommentValue(); - - await t.click("input[value=item2]") - .click(Selector("textarea")) - .pressKey("end D E F") - .click("input[value=Complete]"); - - const surveyResult = await getSurveyResult(); - assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABCDEF" }); - }); - test("Do not clear comment area on clicking Clear button #8287", async t => { - const clearButton = Selector("button[title=Clear]"); - const currentJson = { - elements: [ - { - type: "radiogroup", - name: "q1", - choices: ["item1", "item2", "item3"], - allowClear: true, - showCommentArea: true - } - ] - }; - await initSurvey(framework, currentJson); - - await t.click("input[value=item2]") - .typeText(Selector("textarea"), "ABC") - .click(clearButton) - .click("input[value=Complete]"); - - let surveyResult = await getSurveyResult(); - await t.expect(surveyResult).eql({ "q1-Comment": "ABC" }); - }); -}); - -frameworks.forEach((framework) => { - fixture`${framework} ${title}`.page`${urlV2}${framework}`.beforeEach( - async (ctx) => { - const json = { - elements: [ - { - type: "radiogroup", - name: "car", - title: "What car are you driving?", - isRequired: true, - colCount: 4, - hasOther: true, - hasNone: true, - readOnly: true, - choices: [ - "Unknown", - "Ford", - "Vauxhall", - "Volkswagen", - "Nissan", - "Audi", - "Mercedes-Benz", - "BMW", - "Peugeot", - "Toyota", - "Citroen", - ], - defaultValue: "BMW" - }, - ], - }; - await initSurvey(framework, json); - } - ); - - test("readonly", async (t) => { - const input = Selector("input[value=Ford]"); - await t.click(input); - await t.expect(input.checked).eql(false); - await t.expect(Selector("input[value=BMW]").checked).eql(true); - }); - - test("readonly:keyboard disabled", async (t) => { - await t.pressKey("tab").pressKey("down"); - const getValue = ClientFunction(()=>{ - return window["survey"].getAllQuestions()[0].value; - }); - const value = await getValue(); - await t.expect(value).eql("BMW", "value doesn't change"); - }); -}); \ No newline at end of file +// import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, checkSurveyWithEmptyQuestion, urlV2 } from "../helper"; +// import { Selector, ClientFunction, fixture, test } from "testcafe"; +// // eslint-disable-next-line no-undef +// const assert = require("assert"); +// const title = "radiogroup"; + +// const json = { +// elements: [ +// { +// type: "radiogroup", +// name: "car", +// title: "What car are you driving?", +// isRequired: true, +// colCount: 4, +// choices: [ +// "None", +// "Ford", +// "Vauxhall", +// "Volkswagen", +// "Nissan", +// "Audi", +// "Mercedes-Benz", +// "BMW", +// "Peugeot", +// "Toyota", +// "Citroen" +// ] +// } +// ] +// }; + +// frameworks.forEach(framework => { +// fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach( +// async t => { +// await t.resizeWindow(1920, 1080); +// await initSurvey(framework, json); +// } +// ); + +// test("choose empty", async t => { +// await checkSurveyWithEmptyQuestion(t); +// }); + +// test("choose value", async t => { +// await t.click("input[value=Nissan]").click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.equal(surveyResult.car, "Nissan"); +// }); + +// test("change column count", async t => { +// const getClassName = ClientFunction( +// () => document.querySelector("div[id*=sq_] fieldset .sd-selectbase__column").className +// ); +// let className = await getClassName(); +// assert.notEqual(className.indexOf("sv-q-column-4"), -1); + +// await setOptions("car", { colCount: 1 }); + +// const getClassNameOneCol = ClientFunction( +// () => document.querySelector("div[id*=sq_] fieldset > .sd-radio").className +// ); +// className = await getClassNameOneCol(); +// assert.notEqual(className.indexOf("sv-q-col-1"), -1); + +// await setOptions("car", { colCount: 2 }); + +// className = await getClassName(); +// assert.notEqual(className.indexOf("sv-q-column-2"), -1); +// }); + +// test("change choices order", async t => { +// const radiogroup = Selector("[role=\"radiogroup\"]"); +// const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); + +// //asc +// await setOptions("car", { choicesOrder: "asc" }); +// await t.expect(chocies.nth(0).find("label").withExactText("Audi").exists).ok(); +// await t.expect(chocies.nth(3).find("label").withExactText("BMW").exists).ok(); + +// //desc +// await setOptions("car", { choicesOrder: "desc" }); +// await t.expect(chocies.nth(0).find("label").withExactText("Volkswagen").exists).ok(); +// await t.expect(chocies.nth(3).find("label").withExactText("Vauxhall").exists).ok(); + +// //random +// if (chocies.count === 1) { +// assert(false, "need to more than one choices"); +// } + +// let first = chocies.nth(0); +// let random_count = 0; +// for (let i = 0; i < 15; i++) { +// await setOptions("car", { choicesOrder: "asc" }); +// await setOptions("car", { choicesOrder: "random" }); +// const first_2 = chocies.nth(0); + +// if (first.innerText !== first_2.innerText) { +// random_count++; +// } +// first = first_2; +// if (random_count >= 4) break; +// } + +// //because of 'none', 'asc', 'desc' and if 4 it is really random +// assert(random_count >= 4); +// }); + +// test("check integrity", async t => { +// const choices = [ +// "None", +// "Ford", +// "Vauxhall", +// "Volkswagen", +// "Nissan", +// "Audi", +// "Mercedes-Benz", +// "BMW", +// "Peugeot", +// "Toyota", +// "Citroen" +// ]; +// const getChoicesCount = ClientFunction( +// () => document.querySelectorAll("div input[type=radio]").length +// ); +// let checkIntegrity = async () => { +// const choicesCount = await getChoicesCount(); +// assert.equal(choicesCount, choices.length); +// for (let i = 0; i < choices.length; i++) { +// await t.click(`input[value=${choices[i]}]`); +// } +// }; + +// await setOptions("car", { choicesOrder: "random" }); +// await checkIntegrity(); + +// await setOptions("car", { choicesOrder: "asc" }); +// await checkIntegrity(); + +// await setOptions("car", { choicesOrder: "desc" }); +// await checkIntegrity(); +// }); + +// test("show \"other\" choice", async t => { +// await setOptions("car", { hasOther: true, otherText: "Other" }); +// await t.expect(Selector(".sv-string-viewer").withText("Other").visible).ok(); +// await t.expect(Selector("textarea").visible).notOk(); +// await t.click("input[value=Ford]"); +// await t.expect(Selector("textarea").visible).notOk(); +// await t.click("input[value=other]"); +// await t.expect(Selector("textarea").visible).ok(); +// }); + +// test("check \"other\" choice doesn't change order", async t => { +// const radiogroup = Selector("[role=\"radiogroup\"]"); +// const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); + +// await setOptions("car", { hasOther: true, otherText: "Other Test" }); +// await setOptions("car", { choicesOrder: "desc" }); +// await t.expect(chocies.nth(11).find("label").withExactText("Other Test").exists).ok(); +// }); + +// test("choose other", async t => { +// const getOtherInput = Selector( +// () => document.querySelectorAll("textarea")[0]); + +// await setOptions("car", { hasOther: true }); + +// const radiogroup = Selector("[role=\"radiogroup\"]"); +// const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); +// const otherText = chocies.nth(11).find("label").withExactText("Other (describe)"); + +// await t +// .click(otherText) +// .typeText(getOtherInput, "Zaporozec") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.equal(surveyResult.car, "other"); +// assert.equal(surveyResult["car-Comment"], "Zaporozec"); +// }); + +// test("choose other and storeOthersAsComment=false", async t => { +// const setSurveyOptions = ClientFunction(() => { +// window["survey"].storeOthersAsComment = false; +// }); +// const getOtherInput = Selector( +// () => document.querySelectorAll("textarea")[0]); + +// await setOptions("car", { hasOther: true }); + +// const radiogroup = Selector("[role=\"radiogroup\"]"); +// const chocies = radiogroup.find("input[type=\"radio\"]").parent("label").parent(); +// const otherText = chocies.nth(11).find("label").withExactText("Other (describe)"); + +// await setSurveyOptions(); +// await t +// .click(otherText) +// .typeText(getOtherInput, "New_Producer") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.equal(surveyResult.car, "New_Producer"); +// }); + +// test("checked class", async t => { +// const isCheckedClassExistsByIndex = ClientFunction(index => +// document +// .querySelector( +// `fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(${index})` +// ) +// .classList.contains("sd-radio--checked") +// ); + +// assert.equal(await isCheckedClassExistsByIndex(2), false); +// assert.equal(await isCheckedClassExistsByIndex(3), false); + +// await t.click( +// "fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(2) label input" +// ); + +// assert.equal(await isCheckedClassExistsByIndex(2), true); +// assert.equal(await isCheckedClassExistsByIndex(3), false); + +// await t.click( +// "fieldset .sd-selectbase__column:nth-child(3) div:nth-of-type(3) label input" +// ); + +// assert.equal(await isCheckedClassExistsByIndex(2), false); +// assert.equal(await isCheckedClassExistsByIndex(3), true); +// }); +// }); + +// frameworks.forEach((framework) => { +// fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach( +// async (t) => { +// await initSurvey(framework, json, undefined, true); +// } +// ); + +// test("click on question title state editable", async (t) => { +// const newTitle = "MyText"; +// let questionValue = await getQuestionValue(); +// assert.equal(questionValue, undefined); + +// const outerSelector = ".sd-question__title"; +// const innerSelector = ".sv-string-editor"; +// await t +// .click(outerSelector) +// .typeText(outerSelector + " " + innerSelector, newTitle, { replace: true }) +// .click("body", { offsetX: 0, offsetY: 0 }); + +// questionValue = await getQuestionValue(); +// assert.equal(questionValue, undefined); +// const json = JSON.parse(await getQuestionJson()); +// assert.equal(json.title, newTitle); +// }); + +// test("click on radio title state editable", async (t) => { +// const newTitle = "MyText"; +// let questionValue = await getQuestionValue(); +// assert.equal(questionValue, undefined); + +// const selector = ".sd-selectbase__label .sv-string-editor"; +// await t +// .click(selector) +// .typeText(selector, newTitle, { replace: true }) +// .click("body", { offsetX: 0, offsetY: 0 }); + +// questionValue = await getQuestionValue(); +// assert.equal(questionValue, undefined); +// const json = JSON.parse(await getQuestionJson()); +// assert.equal(json.choices[0].text, newTitle); +// }); +// }); + +// frameworks.forEach(framework => { +// fixture`${framework} ${title}`.page`${url}${framework}`; + +// test("otherText changed", async t => { +// const currentJson = { +// title: "Survey New Design Test", +// description: "Survey Description", +// logoPosition: "left", +// elements: [ +// { +// type: "checkbox", +// name: "car", +// title: "Checkbox", +// hasOther: true, +// colCount: 4, +// choices: [ +// "Ford", +// "Vauxhall", +// "Volkswagen", +// "Nissan", +// "Audi", +// "Mercedes-Benz", +// "BMW", +// "Peugeot", +// "Toyota", +// "Citroen" +// ] +// }, +// { +// type: "radiogroup", +// name: "carss", +// title: "Radiogroup", +// hasOther: true, +// colCount: 4, +// choices: [ +// "Ford", +// "Vauxhall", +// "Volkswagen", +// "Nissan", +// "Audi", +// "Mercedes-Benz", +// "BMW", +// "Peugeot", +// "Toyota", +// "Citroen" +// ] +// }, +// ] +// }; +// const oldOtherText = "Other (describe)"; +// const newOtherText = "New Other"; +// await initSurvey(framework, currentJson); +// await t +// .expect(Selector(".sv-string-viewer").withText(oldOtherText).count).eql(2) +// .expect(Selector(".sv-string-viewer").withText(newOtherText).count).eql(0); + +// await setOptions("car", { otherText: newOtherText }); +// await setOptions("carss", { otherText: newOtherText }); +// await t +// .expect(Selector(".sv-string-viewer").withText(oldOtherText).count).eql(0) +// .expect(Selector(".sv-string-viewer").withText(newOtherText).count).eql(2); +// }); +// test("showNoneItem&separateSpecialChoices", async t => { +// const currentJson = { +// elements: [ +// { +// type: "radiogroup", +// separateSpecialChoices: true, +// showNoneItem: true, +// name: "car", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// } +// ] +// }; +// await initSurvey(framework, currentJson); +// await t +// .expect(Selector(".sv-string-viewer").withText("None").count).eql(1); +// }); +// test("otherItem type in comment, textUpdateMode=onBlur", async t => { +// const setOnValueChanged = ClientFunction(() => { +// window["survey"].onValueChanged.add((sender, options) => { +// if (options.name === "q2") return; +// const val = sender.getValue("q2"); +// sender.setValue("q2", val + 1); +// }); +// }); +// const currentJson = { +// elements: [ +// { +// type: "radiogroup", +// showOtherItem: true, +// name: "q1", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// }, +// { type: "text", name: "q2", defaultValue: 0, inputType: "number" } +// ] +// }; +// await initSurvey(framework, currentJson); +// await setOnValueChanged(); + +// await t.click("input[value=other]") +// .click(Selector("textarea")) +// .pressKey("A B C D E F tab") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 2 }); +// }); +// test("otherItem type in comment, textUpdateMode=onTyping", async t => { +// const setOnValueChanged = ClientFunction(() => { +// window["survey"].onValueChanged.add((sender, options) => { +// if (options.name === "q2") return; +// const val = sender.getValue("q2"); +// sender.setValue("q2", val + 1); +// }); +// }); +// const currentJson = { +// textUpdateMode: "onTyping", +// elements: [ +// { +// type: "radiogroup", +// showOtherItem: true, +// name: "q1", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// }, +// { type: "text", name: "q2", defaultValue: 0, inputType: "number" } +// ] +// }; +// await initSurvey(framework, currentJson); +// await setOnValueChanged(); + +// await t.click("input[value=other]") +// .click(Selector("textarea")) +// .pressKey("A B C D E F tab") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.deepEqual(surveyResult, { q1: "other", "q1-Comment": "ABCDEF", q2: 7 }); +// }); +// test("Type in comment, textUpdateMode=onBlur", async t => { +// const setOnValueChanged = ClientFunction(() => { +// window["survey"].onValueChanged.add((sender, options) => { +// if (options.name === "q2") return; +// const val = sender.getValue("q2"); +// sender.setValue("q2", val + 1); +// }); +// }); +// const currentJson = { +// elements: [ +// { +// type: "radiogroup", +// showCommentArea: true, +// name: "q1", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// }, +// { type: "text", name: "q2", defaultValue: 0, inputType: "number" } +// ] +// }; +// await initSurvey(framework, currentJson); +// await setOnValueChanged(); + +// await t.click(Selector("textarea")) +// .pressKey("A B C D E F tab") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 1 }); +// }); +// test("Type in comment, textUpdateMode=onTyping", async t => { +// const setOnValueChanged = ClientFunction(() => { +// window["survey"].onValueChanged.add((sender, options) => { +// if (options.name === "q2") return; +// const val = sender.getValue("q2"); +// sender.setValue("q2", val + 1); +// }); +// }); +// const currentJson = { +// textUpdateMode: "onTyping", +// elements: [ +// { +// type: "radiogroup", +// showCommentArea: true, +// name: "q1", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// }, +// { type: "text", name: "q2", defaultValue: 0, inputType: "number" } +// ] +// }; +// await initSurvey(framework, currentJson); +// await setOnValueChanged(); + +// await t.click(Selector("textarea")) +// .pressKey("A B C D E F tab") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.deepEqual(surveyResult, { "q1-Comment": "ABCDEF", q2: 6 }); +// }); +// test("Initial value in question comment", async t => { +// const setCommentValue = ClientFunction(() => { +// window["survey"].setComment("q1", "ABC"); +// }); +// const currentJson = { +// elements: [ +// { +// type: "radiogroup", +// showCommentArea: true, +// name: "q1", +// choices: [ +// "item1", +// "item2", +// "item3" +// ] +// } +// ] +// }; +// await initSurvey(framework, currentJson); +// await setCommentValue(); + +// await t.click("input[value=item2]") +// .click(Selector("textarea")) +// .pressKey("end D E F") +// .click("input[value=Complete]"); + +// const surveyResult = await getSurveyResult(); +// assert.deepEqual(surveyResult, { q1: "item2", "q1-Comment": "ABCDEF" }); +// }); +// test("Do not clear comment area on clicking Clear button #8287", async t => { +// const clearButton = Selector("button[title=Clear]"); +// const currentJson = { +// elements: [ +// { +// type: "radiogroup", +// name: "q1", +// choices: ["item1", "item2", "item3"], +// allowClear: true, +// showCommentArea: true +// } +// ] +// }; +// await initSurvey(framework, currentJson); + +// await t.click("input[value=item2]") +// .typeText(Selector("textarea"), "ABC") +// .click(clearButton) +// .click("input[value=Complete]"); + +// let surveyResult = await getSurveyResult(); +// await t.expect(surveyResult).eql({ "q1-Comment": "ABC" }); +// }); +// }); + +// frameworks.forEach((framework) => { +// fixture`${framework} ${title}`.page`${urlV2}${framework}`.beforeEach( +// async (ctx) => { +// const json = { +// elements: [ +// { +// type: "radiogroup", +// name: "car", +// title: "What car are you driving?", +// isRequired: true, +// colCount: 4, +// hasOther: true, +// hasNone: true, +// readOnly: true, +// choices: [ +// "Unknown", +// "Ford", +// "Vauxhall", +// "Volkswagen", +// "Nissan", +// "Audi", +// "Mercedes-Benz", +// "BMW", +// "Peugeot", +// "Toyota", +// "Citroen", +// ], +// defaultValue: "BMW" +// }, +// ], +// }; +// await initSurvey(framework, json); +// } +// ); + +// test("readonly", async (t) => { +// const input = Selector("input[value=Ford]"); +// await t.click(input); +// await t.expect(input.checked).eql(false); +// await t.expect(Selector("input[value=BMW]").checked).eql(true); +// }); + +// test("readonly:keyboard disabled", async (t) => { +// await t.pressKey("tab").pressKey("down"); +// const getValue = ClientFunction(()=>{ +// return window["survey"].getAllQuestions()[0].value; +// }); +// const value = await getValue(); +// await t.expect(value).eql("BMW", "value doesn't change"); +// }); +// }); \ No newline at end of file diff --git a/functionalTests/questions/signature.ts b/functionalTests/questions/signature.ts index a9ff2bcecc..7168fc37c0 100644 --- a/functionalTests/questions/signature.ts +++ b/functionalTests/questions/signature.ts @@ -1,120 +1,120 @@ -import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson } from "../helper"; -import { ClientFunction, Selector } from "testcafe"; -const title = "Signature"; +// import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson } from "../helper"; +// import { ClientFunction, Selector } from "testcafe"; +// const title = "Signature"; -frameworks.forEach(framework => { - fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(async t => {}); +// frameworks.forEach(framework => { +// fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(async t => {}); - test("Signature: show/hide elements", async (t) => { - await t.resizeWindow(1920, 1080); - await initSurvey(framework, { - "elements": [ - { - "type": "signaturepad", - "name": "signature", - "title": "Please sign here", - "isRequired": true - } - ], - "showQuestionNumbers": false - }); +// test("Signature: show/hide elements", async (t) => { +// await t.resizeWindow(1920, 1080); +// await initSurvey(framework, { +// "elements": [ +// { +// "type": "signaturepad", +// "name": "signature", +// "title": "Please sign here", +// "isRequired": true +// } +// ], +// "showQuestionNumbers": false +// }); - const QuestionNode = Selector(".sd-question"); - const SignCanvas = QuestionNode.find("canvas"); - const ClearBtn = QuestionNode.find("button[title='Clear']"); - const Placeholder = QuestionNode.find(".sjs_sp_placeholder"); - const Controls = QuestionNode.find(".sjs_sp_controls"); +// const QuestionNode = Selector(".sd-question"); +// const SignCanvas = QuestionNode.find("canvas"); +// const ClearBtn = QuestionNode.find("button[title='Clear']"); +// const Placeholder = QuestionNode.find(".sjs_sp_placeholder"); +// const Controls = QuestionNode.find(".sjs_sp_controls"); - await t.click(SignCanvas).click(ClearBtn).click(SignCanvas); +// await t.click(SignCanvas).click(ClearBtn).click(SignCanvas); - await t.expect(Controls.visible).ok(); - await t.expect(Placeholder.visible).notOk(); - }); +// await t.expect(Controls.visible).ok(); +// await t.expect(Placeholder.visible).notOk(); +// }); - test("Signature: show/hide elements server mode", async (t) => { - await t.resizeWindow(1920, 1080); - await initSurvey(framework, { - "elements": [ - { - "type": "signaturepad", - "name": "signature", - "title": "Please sign here", - "storeDataAsText": false, - "isRequired": true - } - ], - "showQuestionNumbers": false - }); - await ClientFunction(() => { - window["uploadFilesCallCount"] = 0; - window["survey"].onUploadFiles.add((_, options) => { - setTimeout( - (data) => { - window["uploadFilesCallCount"]++; - options.callback( - "success", - options.files.map((file) => { - return { - file: file, - content: "https://example.com?name=qwertyuiop" - }; - }) - ); - }, 1000); - }); - })(); - const QuestionNode = Selector(".sd-question"); - const SignCanvas = QuestionNode.find("canvas"); - const ClearBtn = QuestionNode.find("button[title='Clear']"); - const Placeholder = QuestionNode.find(".sjs_sp_placeholder"); - const Controls = QuestionNode.find(".sjs_sp_controls"); +// test("Signature: show/hide elements server mode", async (t) => { +// await t.resizeWindow(1920, 1080); +// await initSurvey(framework, { +// "elements": [ +// { +// "type": "signaturepad", +// "name": "signature", +// "title": "Please sign here", +// "storeDataAsText": false, +// "isRequired": true +// } +// ], +// "showQuestionNumbers": false +// }); +// await ClientFunction(() => { +// window["uploadFilesCallCount"] = 0; +// window["survey"].onUploadFiles.add((_, options) => { +// setTimeout( +// (data) => { +// window["uploadFilesCallCount"]++; +// options.callback( +// "success", +// options.files.map((file) => { +// return { +// file: file, +// content: "https://example.com?name=qwertyuiop" +// }; +// }) +// ); +// }, 1000); +// }); +// })(); +// const QuestionNode = Selector(".sd-question"); +// const SignCanvas = QuestionNode.find("canvas"); +// const ClearBtn = QuestionNode.find("button[title='Clear']"); +// const Placeholder = QuestionNode.find(".sjs_sp_placeholder"); +// const Controls = QuestionNode.find(".sjs_sp_controls"); - await t.expect(Controls.visible).notOk(); - await t.expect(Placeholder.visible).ok(); +// await t.expect(Controls.visible).notOk(); +// await t.expect(Placeholder.visible).ok(); - await t.click(SignCanvas); - await t.expect(Controls.visible).ok(); - await t.expect(Placeholder.visible).notOk(); +// await t.click(SignCanvas); +// await t.expect(Controls.visible).ok(); +// await t.expect(Placeholder.visible).notOk(); - await t.click(ClearBtn); - await t.expect(Controls.visible).notOk(); - await t.expect(Placeholder.visible).ok(); +// await t.click(ClearBtn); +// await t.expect(Controls.visible).notOk(); +// await t.expect(Placeholder.visible).ok(); - await t.click(SignCanvas); - await t.expect(Controls.visible).ok(); - await t.expect(Placeholder.visible).notOk(); +// await t.click(SignCanvas); +// await t.expect(Controls.visible).ok(); +// await t.expect(Placeholder.visible).notOk(); - await t.click("body", { offsetX: 0, offsetY: 0 }); - await t.expect(ClientFunction(() => { - return window["uploadFilesCallCount"]; - })()).eql(1); - }); - test("Signature: no focus with tab", async (t) => { - await t.resizeWindow(1920, 1080); - await initSurvey(framework, { - "elements": [ - { - "type": "text", - "name": "q1", - "placeholder": "q1" - }, - { - "type": "signaturepad", - "name": "signature" - }, - { - "type": "text", - "name": "q2", - "placeholder": "q2" - } - ], - "showQuestionNumbers": false - }); +// await t.click("body", { offsetX: 0, offsetY: 0 }); +// await t.expect(ClientFunction(() => { +// return window["uploadFilesCallCount"]; +// })()).eql(1); +// }); +// test("Signature: no focus with tab", async (t) => { +// await t.resizeWindow(1920, 1080); +// await initSurvey(framework, { +// "elements": [ +// { +// "type": "text", +// "name": "q1", +// "placeholder": "q1" +// }, +// { +// "type": "signaturepad", +// "name": "signature" +// }, +// { +// "type": "text", +// "name": "q2", +// "placeholder": "q2" +// } +// ], +// "showQuestionNumbers": false +// }); - await t.click(Selector("input[placeholder=q1]")); - await t.expect(Selector("input[placeholder=q1]").focused).ok(); - await t.pressKey("tab"); - await t.expect(Selector("input[placeholder=q2]").focused).ok(); - }); +// await t.click(Selector("input[placeholder=q1]")); +// await t.expect(Selector("input[placeholder=q1]").focused).ok(); +// await t.pressKey("tab"); +// await t.expect(Selector("input[placeholder=q2]").focused).ok(); +// }); -}); \ No newline at end of file +// }); \ No newline at end of file