From 3c9df596c7f1f438fdaafe0bc90ed2c555ff7461 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Mon, 18 Sep 2023 16:29:27 +0300 Subject: [PATCH] Fixed #6966 - warnings&erros related to ResizeObserver --- src/question.ts | 105 +++++----- src/survey.ts | 198 +++++++++--------- src/utils/responsivity-manager.ts | 13 +- testCafe/components/list.ts | 18 +- testCafe/questions/boolean.js | 3 +- testCafe/survey/custom_components.ts | 3 +- testCafe/survey/titleActions.js | 3 +- .../tests/defaultV2/boolean.ts | 7 +- .../tests/defaultV2/brandinfo.ts | 15 +- .../tests/defaultV2/buttongroup.ts | 7 +- .../tests/defaultV2/complex.ts | 7 +- .../tests/defaultV2/dropdown.ts | 18 +- visualRegressionTests/tests/defaultV2/file.ts | 33 ++- visualRegressionTests/tests/defaultV2/html.ts | 7 +- .../tests/defaultV2/image.ts | 7 +- .../tests/defaultV2/imagepicker.ts | 6 +- .../tests/defaultV2/matrix.ts | 6 +- .../tests/defaultV2/matrixdynamic.ts | 16 +- .../tests/defaultV2/multipletext.ts | 7 +- .../tests/defaultV2/panel.ts | 21 +- .../tests/defaultV2/paneldynamic.ts | 48 ++--- .../tests/defaultV2/popup.ts | 141 +++++++------ .../tests/defaultV2/question.ts | 37 ++-- .../tests/defaultV2/ranking.ts | 3 +- .../tests/defaultV2/rating.ts | 13 +- .../tests/defaultV2/responsiveness.ts | 12 +- .../tests/defaultV2/selectbase.ts | 9 +- .../tests/defaultV2/survey.ts | 3 +- .../tests/defaultV2/tagbox.ts | 14 +- visualRegressionTests/tests/modern/tagbox.ts | 3 +- 30 files changed, 382 insertions(+), 401 deletions(-) diff --git a/src/question.ts b/src/question.ts index 70e366c40a..f2fa3ca537 100644 --- a/src/question.ts +++ b/src/question.ts @@ -107,9 +107,11 @@ export class Question extends SurveyElement public setIsMobile(val: boolean) { this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode); } - @property({ defaultValue: false, onSet: (val, target) => { - target.renderMinWidth = !val; - } }) isMobile: boolean; + @property({ + defaultValue: false, onSet: (val, target) => { + target.renderMinWidth = !val; + } + }) isMobile: boolean; @property() forceIsInputReadOnly: boolean; constructor(name: string) { @@ -139,7 +141,7 @@ export class Question extends SurveyElement } }); this.registerPropertyChangedHandlers(["isRequired"], () => { - if(!this.isRequired && this.errors.length > 0) { + if (!this.isRequired && this.errors.length > 0) { this.validate(); } this.locTitle.strChanged(); @@ -222,7 +224,7 @@ export class Question extends SurveyElement public set isReady(val: boolean) { const oldIsReady = this.isReadyValue; this.isReadyValue = val; - if(oldIsReady != val) { + if (oldIsReady != val) { this.onReadyChanged.fire(this, { question: this, isReady: val, @@ -239,7 +241,7 @@ export class Question extends SurveyElement * Returns a page to which the question belongs and allows you to move this question to a different page. */ public get page(): IPage { - if(!!this.parentQuestion) return this.parentQuestion.page; + if (!!this.parentQuestion) return this.parentQuestion.page; return this.getPage(this.parent); } public set page(val: IPage) { @@ -250,7 +252,7 @@ export class Question extends SurveyElement } public delete(doDispose: boolean = true): void { this.removeFromParent(); - if(doDispose) { + if (doDispose) { this.dispose(); } else { this.resetDependedQuestions(); @@ -277,8 +279,8 @@ export class Question extends SurveyElement this.dependedQuestions[i].updateDependedQuestion(); } } - protected updateDependedQuestion(): void {} - protected resetDependedQuestion(): void {} + protected updateDependedQuestion(): void { } + protected resetDependedQuestion(): void { } public get isFlowLayout(): boolean { return this.getLayoutType() === "flow"; } @@ -361,7 +363,7 @@ export class Question extends SurveyElement public get isVisible(): boolean { if (this.survey && this.survey.areEmptyElementsHidden && this.isEmpty()) return false; - if(this.areInvisibleElementsShowing) return true; + if (this.areInvisibleElementsShowing) return true; return this.isVisibleCore(); } protected isVisibleCore(): boolean { @@ -460,7 +462,7 @@ export class Question extends SurveyElement this.runConditions(); } this.calcRenderedCommentPlaceholder(); - if(!this.visible) { + if (!this.visible) { this.updateIsVisibleProp(); } this.updateIsMobileFromSurvey(); @@ -531,7 +533,7 @@ export class Question extends SurveyElement } } protected clearValueOnHidding(isClearOnHidden: boolean): void { - if(isClearOnHidden) { + if (isClearOnHidden) { this.clearValueIfInvisible(); } } @@ -582,9 +584,9 @@ export class Question extends SurveyElement this.setPropertyValue("errorLocation", val); } public getErrorLocation(): string { - if(this.errorLocation !== "default") return this.errorLocation; - if(this.parentQuestion) return this.parentQuestion.getChildErrorLocation(this); - if(this.parent) return this.parent.getQuestionErrorLocation(); + if (this.errorLocation !== "default") return this.errorLocation; + if (this.parentQuestion) return this.parentQuestion.getChildErrorLocation(this); + if (this.parent) return this.parent.getQuestionErrorLocation(); return this.survey ? this.survey.questionErrorLocation : "top"; } public getChildErrorLocation(child: Question): string { @@ -731,8 +733,8 @@ export class Question extends SurveyElement } public get isContainer(): boolean { return false; } protected updateCommentElements(): void { - if(!this.autoGrowComment || !Array.isArray(this.commentElements)) return; - for(let i = 0; i < this.commentElements.length; i ++) { + if (!this.autoGrowComment || !Array.isArray(this.commentElements)) return; + for (let i = 0; i < this.commentElements.length; i++) { const el = this.commentElements[i]; if (el) increaseHeightByContent(el); } @@ -769,7 +771,7 @@ export class Question extends SurveyElement this.getCommentElementsId().forEach(id => { const { root } = settings.environment; let el = root.getElementById(id); - if(el) this.commentElements.push(el); + if (el) this.commentElements.push(el); }); this.updateCommentElements(); } @@ -818,7 +820,7 @@ export class Question extends SurveyElement if (this.survey) { this.survey.updateQuestionCssClasses(this, classes); } - if(this.onUpdateCssClassesCallback) { + if (this.onUpdateCssClassesCallback) { this.onUpdateCssClassesCallback(classes); } return classes; @@ -1020,7 +1022,7 @@ export class Question extends SurveyElement if (this.isDesignMode || !this.isVisible || !this.survey) return; let page = this.page; const shouldChangePage = !!page && this.survey.activePage !== page; - if(shouldChangePage) { + if (shouldChangePage) { this.survey.focusQuestionByInstance(this, onError); } else { this.focuscore(onError, scrollIfVisible); @@ -1039,15 +1041,15 @@ export class Question extends SurveyElement } } private expandAllParents(element: IElement) { - if(!element) return; - if(element.isCollapsed) { + if (!element) return; + if (element.isCollapsed) { element.expand(); } this.expandAllParents((element).parent); this.expandAllParents((element).parentQuestion); } public focusIn(): void { - if(!this.survey || this.isDisposed || this.isContainer) return; + if (!this.survey || this.isDisposed || this.isContainer) return; (this.survey as SurveyModel).whenQuestionFocusIn(this); } protected fireCallback(callback: () => void): void { @@ -1179,7 +1181,7 @@ export class Question extends SurveyElement return this.readOnly || isParentReadOnly || isSurveyReadOnly || isPareQuestionReadOnly; } public get isInputReadOnly(): boolean { - if(this.forceIsInputReadOnly !== undefined) { + if (this.forceIsInputReadOnly !== undefined) { return this.forceIsInputReadOnly; } var isDesignModeV2 = settings.supportCreatorV2 && this.isDesignMode; @@ -1370,7 +1372,7 @@ export class Question extends SurveyElement public createValueCopy(): any { return this.getUnbindValue(this.value); } - initDataUI(): void {} + initDataUI(): void { } protected getUnbindValue(value: any): any { if (this.isValueSurveyElement(value)) return value; return Helpers.getUnbindValue(value); @@ -1382,7 +1384,7 @@ export class Question extends SurveyElement return !!val.getType && !!val.onPropertyChanged; } private canClearValueAsInvisible(reason: string): boolean { - if(reason === "onHiddenContainer" && !this.isParentVisible) return true; + if (reason === "onHiddenContainer" && !this.isParentVisible) return true; if (this.isVisible && this.isParentVisible) return false; if (!!this.page && this.page.isStartPage) return false; if (!this.survey || !this.valueName) return true; @@ -1392,7 +1394,7 @@ export class Question extends SurveyElement * Returns `true` if a parent element (page or panel) is visible. */ public get isParentVisible(): boolean { - if(this.parentQuestion && !this.parentQuestion.isVisible) return false; + if (this.parentQuestion && !this.parentQuestion.isVisible) return false; var parent = this.parent; while (parent) { if (!parent.isVisible) return false; @@ -1404,7 +1406,7 @@ export class Question extends SurveyElement const clearIf = this.getClearIfInvisible(); if (clearIf === "none") return; if (reason === "onHidden" && clearIf === "onComplete") return; - if(reason === "onHiddenContainer" && clearIf !== reason) return; + if (reason === "onHiddenContainer" && clearIf !== reason) return; this.clearValueIfInvisibleCore(reason); } protected clearValueIfInvisibleCore(reason: string): void { @@ -1434,7 +1436,7 @@ export class Question extends SurveyElement } protected getClearIfInvisible(): string { const res = this.clearIfInvisible; - if(!!this.survey) return this.survey.getQuestionClearIfInvisible(res); + if (!!this.survey) return this.survey.getQuestionClearIfInvisible(res); return res !== "default" ? res : "onComplete"; } public get displayValue(): any { @@ -1448,7 +1450,7 @@ export class Question extends SurveyElement */ public getDisplayValue(keysAsText: boolean, value: any = undefined): any { var res = this.calcDisplayValue(keysAsText, value); - if(this.survey) { + if (this.survey) { res = this.survey.getQuestionDisplayValue(this, res); } return !!this.displayValueCallback ? this.displayValueCallback(res) : res; @@ -1607,7 +1609,7 @@ export class Question extends SurveyElement const isEqual = Helpers.isTwoValueEquals(this.value, this.correctAnswer, this.getAnswerCorrectIgnoreOrder(), settings.comparator.caseSensitive, true); const correct = isEqual ? 1 : 0; const options = { result: isEqual, correctAnswer: correct, correctAnswers: correct, incorrectAnswers: this.quizQuestionCount - correct }; - if(!!this.survey) { + if (!!this.survey) { this.survey.onCorrectQuestionAnswer(this, options); } return options.result; @@ -1660,7 +1662,7 @@ export class Question extends SurveyElement this.defaultValueRunner, this.getUnbindValue(this.defaultValue), (val) => { - if(!this.isTwoValueEquals(this.value, val)) { + if (!this.isTwoValueEquals(this.value, val)) { this.value = val; } } @@ -1695,7 +1697,7 @@ export class Question extends SurveyElement if (!setFunc) { setFunc = (val: any): void => { this.runExpressionSetValue(val, (val: any): void => { - if(!this.isTwoValueEquals(this.value, val)) { + if (!this.isTwoValueEquals(this.value, val)) { this.value = val; } }); @@ -1816,11 +1818,11 @@ export class Question extends SurveyElement public getNestedQuestions(visibleOnly: boolean = false): Array { const res: Array = []; this.collectNestedQuestions(res, visibleOnly); - if(res.length === 1 && res[0] === this) return []; + if (res.length === 1 && res[0] === this) return []; return res; } public collectNestedQuestions(questions: Array, visibleOnly: boolean = false): void { - if(visibleOnly && !this.isVisible) return; + if (visibleOnly && !this.isVisible) return; this.collectNestedQuestionsCore(questions, visibleOnly); } protected collectNestedQuestionsCore(questions: Array, visibleOnly: boolean): void { @@ -1839,7 +1841,7 @@ export class Question extends SurveyElement this.survey.beforeSettingQuestionErrors(this, errors); } this.errors = errors; - if(this.errors !== errors) { + if (this.errors !== errors) { this.errors.forEach(er => er.locText.strChanged()); } } @@ -1858,8 +1860,8 @@ export class Question extends SurveyElement * @see [Data Validation](https://surveyjs.io/form-library/documentation/data-validation) */ public validate(fireCallback: boolean = true, rec: any = null): boolean { - if(!!rec && rec.isOnValueChanged) { - if(!!this.parent) { + if (!!rec && rec.isOnValueChanged) { + if (!!this.parent) { this.parent.validateContainerOnly(); } } @@ -1979,8 +1981,8 @@ export class Question extends SurveyElement private isOldAnswered: boolean; protected allowNotifyValueChanged = true; protected setNewValue(newValue: any): void { - if(this.isNewValueEqualsToValue(newValue)) return; - if(!this.checkIsValueCorrect(newValue)) return; + if (this.isNewValueEqualsToValue(newValue)) return; + if (!this.checkIsValueCorrect(newValue)) return; this.isOldAnswered = this.isAnswered; this.setNewValueInData(newValue); this.allowNotifyValueChanged && this.onValueChanged(); @@ -1991,7 +1993,7 @@ export class Question extends SurveyElement } private checkIsValueCorrect(val: any): boolean { const res = this.isValueEmpty(val, !this.allowSpaceAsAnswer) || this.isNewValueCorrect(val); - if(!res) { + if (!res) { ConsoleWarnings.inCorrectQuestionValue(this.name, val); } return res; @@ -2001,7 +2003,7 @@ export class Question extends SurveyElement } protected isNewValueEqualsToValue(newValue: any): boolean { const val = this.value; - if(!this.isTwoValueEquals(newValue, val, false, false)) return false; + if (!this.isTwoValueEquals(newValue, val, false, false)) return false; const isObj = newValue === val && !!val && (Array.isArray(val) || typeof val === "object"); return !isObj; } @@ -2072,7 +2074,7 @@ export class Question extends SurveyElement if (!!this.valueFromDataCallback) { newValue = this.valueFromDataCallback(newValue); } - if(!this.checkIsValueCorrect(newValue)) return; + if (!this.checkIsValueCorrect(newValue)) return; this.isChangingViaDefaultValue = this.isValueEmpty(newValue); this.setQuestionValue(this.valueFromData(newValue)); this.isChangingViaDefaultValue = false; @@ -2240,7 +2242,7 @@ export class Question extends SurveyElement private onMobileChangedCallback: () => void; public triggerResponsiveness(hard: boolean = true): void { - if(this.triggerResponsivenessCallback) { + if (this.triggerResponsivenessCallback) { this.triggerResponsivenessCallback(hard); } } @@ -2255,7 +2257,7 @@ export class Question extends SurveyElement let isProcessed = false; let requiredWidth: number = undefined; this.triggerResponsivenessCallback = (hard: boolean) => { - if(hard) { + if (hard) { requiredWidth = undefined; this.renderAs = "default"; isProcessed = false; @@ -2271,15 +2273,20 @@ export class Question extends SurveyElement isProcessed = this.processResponsiveness(requiredWidth, getElementWidth(rootEl)); } }; - if(hard) { + if (hard) { setTimeout(callback, 1); } else { callback(); } }; - this.resizeObserver = new ResizeObserver(() => { - this.triggerResponsiveness(false); + this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { + window.requestAnimationFrame((): void | undefined => { + if (!Array.isArray(entries) || !entries.length) { + return; + } + this.triggerResponsiveness(false); + }); }); this.onMobileChangedCallback = () => { setTimeout(() => { @@ -2402,7 +2409,7 @@ export class Question extends SurveyElement //EO new a11y } function makeNameValid(str: string): string { - if(!str) return str; + if (!str) return str; str = str.trim().replace(/[\{\}]+/g, ""); while (!!str && str[0] === settings.expressionDisableConversionChar) { str = str.substring(1); diff --git a/src/survey.ts b/src/survey.ts index 339f701c86..25f02b5118 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -50,7 +50,8 @@ import { ActionContainer, defaultActionBarCss } from "./actions/container"; import { CssClassBuilder } from "./utils/cssClassBuilder"; import { QuestionPanelDynamicModel } from "./question_paneldynamic"; import { Notifier } from "./notifier"; -import { TriggerExecutedEvent, CompletingEvent, CompleteEvent, ShowingPreviewEvent, NavigateToUrlEvent, CurrentPageChangingEvent, CurrentPageChangedEvent, +import { + TriggerExecutedEvent, CompletingEvent, CompleteEvent, ShowingPreviewEvent, NavigateToUrlEvent, CurrentPageChangingEvent, CurrentPageChangedEvent, ValueChangingEvent, ValueChangedEvent, VariableChangedEvent, QuestionVisibleChangedEvent, PageVisibleChangedEvent, PanelVisibleChangedEvent, QuestionCreatedEvent, QuestionAddedEvent, QuestionRemovedEvent, PanelAddedEvent, PanelRemovedEvent, PageAddedEvent, ValidateQuestionEvent, SettingQuestionErrorsEvent, ValidatePanelEvent, ErrorCustomTextEvent, ValidatedErrorsOnCurrentPageEvent, ProcessHtmlEvent, GetQuestionTitleEvent, GetTitleTagNameEvent, GetQuestionNoEvent, ProgressTextEvent, @@ -62,7 +63,8 @@ import { TriggerExecutedEvent, CompletingEvent, CompleteEvent, ShowingPreviewEve MatrixCellValidateEvent, DynamicPanelModifiedEvent, DynamicPanelRemovingEvent, TimerPanelInfoTextEvent, DynamicPanelItemValueChangedEvent, DynamicPanelGetTabTitleEvent, IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent, GetPanelTitleActionsEvent, GetPageTitleActionsEvent, GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent, ServerValidateQuestionsEvent, - MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent } from "./survey-events-api"; + MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent +} from "./survey-events-api"; import { QuestionMatrixDropdownModelBase } from "./question_matrixdropdownbase"; import { QuestionMatrixDynamicModel } from "./question_matrixdynamic"; import { QuestionFileModel } from "./question_file"; @@ -929,7 +931,7 @@ export class SurveyModel extends SurveyElementCore this.notifier.addAction(this.createTryAgainAction(), "error"); this.onPopupVisibleChanged.add((_, opt) => { - if(opt.visible) { + if (opt.visible) { this.onScrollCallback = () => { opt.popup.toggleVisibility(); }; @@ -988,7 +990,7 @@ export class SurveyModel extends SurveyElementCore id: "save-again", title: this.getLocalizationString("saveAgainButton"), action: () => { - if(this.isCompleted) { + if (this.isCompleted) { this.saveDataOnComplete(); } else { this.doComplete(); @@ -999,7 +1001,7 @@ export class SurveyModel extends SurveyElementCore private createHtmlLocString(name: string, locName: string, func: (str: string) => string, reason?: string): void { const res = this.createLocalizableString(name, this, false, locName); res.onGetLocalizationTextCallback = func; - if(reason) { + if (reason) { res.onGetTextCallback = (str: string): string => { return this.processHtml(str, reason); }; } } @@ -1775,7 +1777,7 @@ export class SurveyModel extends SurveyElementCore public locStrsChanged(): void { super.locStrsChanged(); if (!this.currentPage) return; - if(this.isDesignMode) { + if (this.isDesignMode) { this.pages.forEach(page => page.locStrsChanged()); } else { var page = this.activePage; @@ -2016,7 +2018,7 @@ export class SurveyModel extends SurveyElementCore } //#endregion - @property({ defaultValue: {} }) private cssVariables: {[index: string]: string} = {}; + @property({ defaultValue: {} }) private cssVariables: { [index: string]: string } = {}; public get themeVariables() { return Object.assign({}, this.cssVariables); } @@ -2034,7 +2036,7 @@ export class SurveyModel extends SurveyElementCore } @property() private _isCompact: boolean = false; private set isCompact(newVal: boolean) { - if(newVal !== this._isCompact) { + if (newVal !== this._isCompact) { this._isCompact = newVal; this.updateElementCss(); } @@ -2690,13 +2692,13 @@ export class SurveyModel extends SurveyElementCore this.runConditions(); this.updateAllQuestionsValue(); } - public getStructuredData(includePages: boolean = true, level: number = -1) : any { - if(level === 0) return this.data; + public getStructuredData(includePages: boolean = true, level: number = -1): any { + if (level === 0) return this.data; const data: any = {}; this.pages.forEach(p => { - if(includePages) { + if (includePages) { const pageValues = {}; - if(p.collectValues(pageValues, level - 1)) { + if (p.collectValues(pageValues, level - 1)) { data[p.name] = pageValues; } } else { @@ -2705,35 +2707,35 @@ export class SurveyModel extends SurveyElementCore }); return data; } - public setStructuredData(data: any, doMerge: boolean = false) : void { - if(!data) return; + public setStructuredData(data: any, doMerge: boolean = false): void { + if (!data) return; const res: any = {}; - for(let key in data) { + for (let key in data) { const q = this.getQuestionByValueName(key); - if(q) { + if (q) { res[key] = data[key]; } else { let panel: PanelModelBase = this.getPageByName(key); - if(!panel) { + if (!panel) { panel = this.getPanelByName(key); } - if(panel) { + if (panel) { this.collectDataFromPanel(panel, res, data[key]); } } } - if(doMerge) { + if (doMerge) { this.mergeData(res); } else { this.data = res; } } private collectDataFromPanel(panel: PanelModelBase, output: any, data: any): void { - for(let key in data) { + for (let key in data) { let el = panel.getElementByName(key); - if(!el) continue; - if(el.isPanel) { + if (!el) continue; + if (el.isPanel) { this.collectDataFromPanel(el, output, data[key]); } else { output[key] = data[key]; @@ -2839,7 +2841,7 @@ export class SurveyModel extends SurveyElementCore values[key] = this.getDataValueCore(this.valuesHash, key); } this.getAllQuestions().forEach(q => { - if(q.hasFilteredValue) { + if (q.hasFilteredValue) { values[q.getValueName()] = q.getFilteredValue(); } }); @@ -3018,7 +3020,7 @@ export class SurveyModel extends SurveyElementCore newPage.setWasShown(true); } this.locStrsChanged(); - if(!this.isShowingPreview) { + if (!this.isShowingPreview) { this.currentPageChanged(newPage, oldValue); } } @@ -3057,7 +3059,7 @@ export class SurveyModel extends SurveyElementCore * - `"entireItem"` (default) - Users can use the entire matrix row as a drag handle. * - `"icon"` - Users can only use a drag icon as a drag handle. */ - public get matrixDragHandleArea():string { + public get matrixDragHandleArea(): string { return this.getPropertyValue("matrixDragHandleArea", "entireItem"); } public set matrixDragHandleArea(val: string) { @@ -3372,7 +3374,7 @@ export class SurveyModel extends SurveyElementCore } private _isDesignMode: boolean = false; public setDesignMode(value: boolean) { - if(!!this._isDesignMode != !!value) { + if (!!this._isDesignMode != !!value) { this._isDesignMode = !!value; this.onQuestionsOnPageModeChanged("standard"); } @@ -3415,8 +3417,8 @@ export class SurveyModel extends SurveyElementCore } private get isAnyQuestionAnswered(): boolean { const questions = this.getAllQuestions(true); - for(let i = 0; i < questions.length; i ++) { - if(!questions[i].isEmpty()) return true; + for (let i = 0; i < questions.length; i++) { + if (!questions[i].isEmpty()) return true; } return false; } @@ -3793,7 +3795,7 @@ export class SurveyModel extends SurveyElementCore * @see nextPage */ public completeLastPage(): boolean { - if(this.isValidateOnComplete) { + if (this.isValidateOnComplete) { this.cancelPreview(); } let res = this.doCurrentPageComplete(true); @@ -3953,7 +3955,7 @@ export class SurveyModel extends SurveyElementCore this.runConditions(); this.updateAllElementsVisibility(this.pages); this.updateVisibleIndexes(); - if(this.isShowingPreview) { + if (this.isShowingPreview) { this.currentPageNo = 0; } else { let curPage = this.gotoPageFromPreview; @@ -4369,30 +4371,30 @@ export class SurveyModel extends SurveyElementCore canBeCompleted(trigger: Trigger, isCompleted: boolean): void { if (!settings.triggers.changeNavigationButtonsOnComplete) return; const prevCanBeCompleted = this.canBeCompletedByTrigger; - if(!this.completedByTriggers) this.completedByTriggers = {}; - if(isCompleted) { + if (!this.completedByTriggers) this.completedByTriggers = {}; + if (isCompleted) { this.completedByTriggers[trigger.id] = { trigger: trigger, pageId: this.currentPage?.id }; } else { delete this.completedByTriggers[trigger.id]; } - if(prevCanBeCompleted !== this.canBeCompletedByTrigger) { + if (prevCanBeCompleted !== this.canBeCompletedByTrigger) { this.updateButtonsVisibility(); } } private completedByTriggers: HashTable; private get canBeCompletedByTrigger(): boolean { - if(!this.completedByTriggers) return false; + if (!this.completedByTriggers) return false; const keys = Object.keys(this.completedByTriggers); - if(keys.length === 0) return false; + if (keys.length === 0) return false; const id = this.currentPage?.id; - if(!id) return true; - for(let i = 0; i < keys.length; i ++) { - if(id === this.completedByTriggers[keys[i]].pageId) return true; + if (!id) return true; + for (let i = 0; i < keys.length; i++) { + if (id === this.completedByTriggers[keys[i]].pageId) return true; } return false; } private get completedTrigger(): Trigger { - if(!this.canBeCompletedByTrigger) return undefined; + if (!this.canBeCompletedByTrigger) return undefined; const key = Object.keys(this.completedByTriggers)[0]; return this.completedByTriggers[key].trigger; } @@ -4528,12 +4530,17 @@ export class SurveyModel extends SurveyElementCore const mobileWidth = Number.parseFloat(window.getComputedStyle(observedElement).getPropertyValue(cssVariables.mobileWidth)); if (!!mobileWidth) { let isProcessed = false; - this.resizeObserver = new ResizeObserver(() => { - if (isProcessed || !isContainerVisible(observedElement)) { - isProcessed = false; - } else { - isProcessed = this.processResponsiveness(observedElement.offsetWidth, mobileWidth); - } + this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { + window.requestAnimationFrame((): void | undefined => { + if (!Array.isArray(entries) || !entries.length) { + return; + } + if (isProcessed || !isContainerVisible(observedElement)) { + isProcessed = false; + } else { + isProcessed = this.processResponsiveness(observedElement.offsetWidth, mobileWidth); + } + }); }); this.resizeObserver.observe(observedElement); } @@ -4662,7 +4669,7 @@ export class SurveyModel extends SurveyElementCore this.onChoicesLazyLoad.fire(this, options); } getChoiceDisplayValue(options: { question: Question, values: Array, setItems: (displayValues: Array, ...customValues: Array) => void }): void { - if(this.onGetChoiceDisplayValue.isEmpty) { + if (this.onGetChoiceDisplayValue.isEmpty) { options.setItems(null); } else { this.onGetChoiceDisplayValue.fire(this, options); @@ -5259,7 +5266,7 @@ export class SurveyModel extends SurveyElementCore includeDesignTime: boolean = false, includeNested: boolean = false ): Array { - if(includeNested) includeDesignTime = false; + if (includeNested) includeDesignTime = false; var res: Array = []; for (var i: number = 0; i < this.pages.length; i++) { this.pages[i].addQuestionsToList( @@ -5268,7 +5275,7 @@ export class SurveyModel extends SurveyElementCore includeDesignTime ); } - if(!includeNested) return res; + if (!includeNested) return res; const res2: Array = []; res.forEach(q => { res2.push(q); @@ -5525,7 +5532,7 @@ export class SurveyModel extends SurveyElementCore return; } let isQuestionInvalid = false; - if(!isOnComplete && name && this.hasRequiredValidQuestionTrigger) { + if (!isOnComplete && name && this.hasRequiredValidQuestionTrigger) { const question = this.getQuestionByValueName(name); isQuestionInvalid = question && !question.validate(false); } @@ -5536,7 +5543,7 @@ export class SurveyModel extends SurveyElementCore let prevCanBeCompleted = this.canBeCompletedByTrigger; for (let i = 0; i < this.triggers.length; i++) { const trigger = this.triggers[i]; - if(isQuestionInvalid && trigger.requireValidQuestion) continue; + if (isQuestionInvalid && trigger.requireValidQuestion) continue; trigger.checkExpression(isOnNextPage, isOnComplete, this.triggerKeys, this.triggerValues, @@ -5550,7 +5557,7 @@ export class SurveyModel extends SurveyElementCore } private get hasRequiredValidQuestionTrigger(): boolean { for (let i = 0; i < this.triggers.length; i++) { - if(this.triggers[i].requireValidQuestion) return true; + if (this.triggers[i].requireValidQuestion) return true; } return false; } @@ -6092,7 +6099,7 @@ export class SurveyModel extends SurveyElementCore */ public setVariable(name: string, newValue: any): void { if (!name) return; - if(!!this.valuesHash) { + if (!!this.valuesHash) { delete this.valuesHash[name]; } name = name.toLowerCase(); @@ -6150,7 +6157,7 @@ export class SurveyModel extends SurveyElementCore locNotification: any = false, allowNotifyValueChanged: boolean = true, questionName?: string - ):void { + ): void { var newValue = newQuestionValue; if (allowNotifyValueChanged) { newValue = this.questionOnValueChanging(name, newQuestionValue); @@ -6183,8 +6190,8 @@ export class SurveyModel extends SurveyElementCore ); } private isValueEmpyOnSetValue(name: string, val: any): boolean { - if(!this.isValueEmpty(val, false)) return false; - if(!this.editingObj || val === null || val === undefined) return true; + if (!this.isValueEmpty(val, false)) return false; + if (!this.editingObj || val === null || val === undefined) return true; return this.editingObj.getDefaultPropertyValue(name) === val; } private updateOnSetValue( @@ -6220,7 +6227,7 @@ export class SurveyModel extends SurveyElementCore if (!page.name) page.name = this.generateNewName(this.pages, "page"); this.questionHashesPanelAdded(page); this.updateVisibleIndexes(); - if(!!this.runningPages) return; + if (!!this.runningPages) return; if (!this.isLoadingFromJson) { this.updateProgressText(); this.updateCurrentPage(); @@ -6230,7 +6237,7 @@ export class SurveyModel extends SurveyElementCore } protected doOnPageRemoved(page: PageModel) { page.setSurveyImpl(null); - if(!!this.runningPages) return; + if (!!this.runningPages) return; if (page === this.currentPage) { this.updateCurrentPage(); } @@ -6356,8 +6363,8 @@ export class SurveyModel extends SurveyElementCore this.setPropertyValue("clearValueOnDisableItems", val); } getQuestionClearIfInvisible(questionClearIf: string): string { - if(this.isShowingPreview || this.runningPages) return "none"; - if(questionClearIf !== "default") return questionClearIf; + if (this.isShowingPreview || this.runningPages) return "none"; + if (questionClearIf !== "default") return questionClearIf; return this.clearInvisibleValues; } questionVisibilityChanged(question: Question, newValue: boolean) { @@ -6577,7 +6584,7 @@ export class SurveyModel extends SurveyElementCore return options.error ? new CustomError(options.error, this) : null; } processHtml(html: string, reason?: string): string { - if(!reason) reason = ""; + if (!reason) reason = ""; var options = { html: html, reason: reason }; this.onProcessHtml.fire(this, options); return this.processText(options.html, true); @@ -6599,7 +6606,7 @@ export class SurveyModel extends SurveyElementCore } private textPreProcessorValue: TextPreProcessor; private get textPreProcessor(): TextPreProcessor { - if(!this.textPreProcessorValue) { + if (!this.textPreProcessorValue) { this.textPreProcessorValue = new TextPreProcessor(); this.textPreProcessorValue.onProcess = (textValue: TextPreProcessorValue) => { this.getProcessedTextValue(textValue); @@ -6670,7 +6677,7 @@ export class SurveyModel extends SurveyElementCore return this.getCorrectedAnswerCountCore(false); } onCorrectQuestionAnswer(question: IQuestion, options: any): void { - if(this.onIsAnswerCorrect.isEmpty) return; + if (this.onIsAnswerCorrect.isEmpty) return; options.question = question; this.onIsAnswerCorrect.fire(this, options); } @@ -6680,7 +6687,7 @@ export class SurveyModel extends SurveyElementCore for (let i = 0; i < questions.length; i++) { const q = questions[i]; const correctCount = q.correctAnswerCount; - if(isCorrect) { + if (isCorrect) { counter += correctCount; } else { counter += q.quizQuestionCount - correctCount; @@ -7057,7 +7064,7 @@ export class SurveyModel extends SurveyElementCore copyTriggerValue(name: string, fromName: string, copyDisplayValue: boolean): void { if (!name || !fromName) return; let value; - if(copyDisplayValue) { + if (copyDisplayValue) { value = this.processText("{" + fromName + "}", true); } else { const processor = new ProcessValue(); @@ -7093,11 +7100,11 @@ export class SurveyModel extends SurveyElementCore focusQuestionByInstance(question: Question, onError: boolean = false): boolean { if (!question || !question.isVisible || !question.page) return false; const oldQuestion = this.focusingQuestionInfo?.question; - if(oldQuestion === question) return false; + if (oldQuestion === question) return false; this.focusingQuestionInfo = { question: question, onError: onError }; this.skippedPages.push({ from: this.currentPage, to: question.page }); const isNeedWaitForPageRendered = this.activePage !== question.page && !question.page.isStartPage; - if(isNeedWaitForPageRendered) { + if (isNeedWaitForPageRendered) { this.currentPage = question.page; } if (!isNeedWaitForPageRendered) { @@ -7107,7 +7114,7 @@ export class SurveyModel extends SurveyElementCore } private focusQuestionInfo(): void { const question = this.focusingQuestionInfo?.question; - if(!!question && !question.isDisposed) { + if (!!question && !question.isDisposed) { question.focus(this.focusingQuestionInfo.onError); } this.focusingQuestionInfo = undefined; @@ -7204,7 +7211,7 @@ export class SurveyModel extends SurveyElementCore } public removeLayoutElement(layoutElementId: string): ISurveyLayoutElement { const layoutElement = this.layoutElements.filter(a => a.id === layoutElementId)[0]; - if(!!layoutElement) { + if (!!layoutElement) { const layoutElementIndex = this.layoutElements.indexOf(layoutElement); this.layoutElements.splice(layoutElementIndex, 1); } @@ -7213,53 +7220,53 @@ export class SurveyModel extends SurveyElementCore public getContainerContent(container: LayoutElementContainer) { const containerLayoutElements = []; - for(let layoutElement of this.layoutElements) { - if(isStrCiEqual(layoutElement.id, "timerpanel")) { - if(container === "header") { - if(this.isTimerPanelShowingOnTop && !this.isShowStartingPage) { + for (let layoutElement of this.layoutElements) { + if (isStrCiEqual(layoutElement.id, "timerpanel")) { + if (container === "header") { + if (this.isTimerPanelShowingOnTop && !this.isShowStartingPage) { containerLayoutElements.push(layoutElement); } } - if(container === "footer") { - if(this.isTimerPanelShowingOnBottom && !this.isShowStartingPage) { + if (container === "footer") { + if (this.isTimerPanelShowingOnBottom && !this.isShowStartingPage) { containerLayoutElements.push(layoutElement); } } - } else if(this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) { - if(container === "header") { - if(this.isShowProgressBarOnTop && !this.isShowStartingPage) { + } else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) { + if (container === "header") { + if (this.isShowProgressBarOnTop && !this.isShowStartingPage) { containerLayoutElements.push(layoutElement); } } - if(container === "footer") { - if(this.isShowProgressBarOnBottom && !this.isShowStartingPage) { + if (container === "footer") { + if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) { containerLayoutElements.push(layoutElement); } } - } else if(isStrCiEqual(layoutElement.id, "navigationbuttons")) { - if(container === "contentTop") { - if(["top", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) { + } else if (isStrCiEqual(layoutElement.id, "navigationbuttons")) { + if (container === "contentTop") { + if (["top", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) { containerLayoutElements.push(layoutElement); } } - if(container === "contentBottom") { - if(["bottom", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) { + if (container === "contentBottom") { + if (["bottom", "both"].indexOf(this.isNavigationButtonsShowing) !== -1) { containerLayoutElements.push(layoutElement); } } - } else if(this.state === "running" && isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) { - if(container === "left") { - if(["left", "both"].indexOf(this.tocLocation) !== -1) { + } else if (this.state === "running" && isStrCiEqual(layoutElement.id, "toc-navigation") && this.showTOC) { + if (container === "left") { + if (["left", "both"].indexOf(this.tocLocation) !== -1) { containerLayoutElements.push(layoutElement); } } - if(container === "right") { - if(["right", "both"].indexOf(this.tocLocation) !== -1) { + if (container === "right") { + if (["right", "both"].indexOf(this.tocLocation) !== -1) { containerLayoutElements.push(layoutElement); } } } else { - if(Array.isArray(layoutElement.container) && layoutElement.container.indexOf(container) !== -1 || layoutElement.container === container) { + if (Array.isArray(layoutElement.container) && layoutElement.container.indexOf(container) !== -1 || layoutElement.container === container) { containerLayoutElements.push(layoutElement); } } @@ -7273,7 +7280,7 @@ export class SurveyModel extends SurveyElementCore public applyTheme(theme: ITheme): void { if (!theme) return; Object.keys(theme).forEach((key: keyof ITheme) => { - if(key === "isPanelless") { + if (key === "isPanelless") { this.isCompact = theme[key]; } else { (this as any)[key] = theme[key]; @@ -7309,7 +7316,7 @@ export class SurveyModel extends SurveyElementCore private onScrollCallback: () => void; public onScroll(): void { - if(this.onScrollCallback) { + if (this.onScrollCallback) { this.onScrollCallback(); } } @@ -7325,8 +7332,8 @@ export class SurveyModel extends SurveyElementCore } function isStrCiEqual(a: string, b: string) { - if(!a) return false; - if(!b) return false; + if (!a) return false; + if (!b) return false; return a.toUpperCase() === b.toUpperCase(); } @@ -7463,7 +7470,8 @@ Serializer.addClass("survey", [ name: "showTOC:switch", default: false }, - { name: "tocLocation", default: "left", choices: ["left", "right"], + { + name: "tocLocation", default: "left", choices: ["left", "right"], dependsOn: ["showTOC"], visibleIf: (survey: any) => { return !!survey && survey.showTOC; } }, diff --git a/src/utils/responsivity-manager.ts b/src/utils/responsivity-manager.ts index 34a8009a5d..affc0ef615 100644 --- a/src/utils/responsivity-manager.ts +++ b/src/utils/responsivity-manager.ts @@ -28,12 +28,19 @@ export class ResponsivityManager { private dotsItemSize: number = null, ) { this.model.updateCallback = (isResetInitialized: boolean) => { - if(isResetInitialized) + if (isResetInitialized) this.isInitialized = false; setTimeout(() => { this.process(); }, 1); }; if (typeof ResizeObserver !== "undefined") { - this.resizeObserver = new ResizeObserver((_) => this.process()); + this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { + window.requestAnimationFrame((): void | undefined => { + if (!Array.isArray(entries) || !entries.length) { + return; + } + this.process(); + }); + }); this.resizeObserver.observe(this.container.parentElement); } } @@ -60,7 +67,7 @@ export class ResponsivityManager { private calcMinDimension(currentAction: Action) { let minDimensionConst = this.minDimensionConst; - if(currentAction.iconSize && this.recalcMinDimensionConst) { + if (currentAction.iconSize && this.recalcMinDimensionConst) { minDimensionConst = 2 * currentAction.iconSize + this.paddingSizeConst; } return currentAction.canShrink diff --git a/testCafe/components/list.ts b/testCafe/components/list.ts index c37447707f..2adaaca564 100644 --- a/testCafe/components/list.ts +++ b/testCafe/components/list.ts @@ -2,15 +2,6 @@ import { url, initSurvey, registerCustomToolboxComponent, frameworks } from "../ import { Selector, ClientFunction } from "testcafe"; const title = "list"; -const explicitErrorHandler = () => { - window.addEventListener("error", e => { - if (e.message === "ResizeObserver loop completed with undelivered notifications." || - e.message === "ResizeObserver loop limit exceeded") { - e.stopImmediatePropagation(); - } - }); -}; - const json = { elements: [ { @@ -46,7 +37,8 @@ function addTitleActions2(_, opt) { const item1 = window["Survey"].createDropdownActionModel({ title: "Open popup", showTitle: true, - action: () => {} }, { items: items } + action: () => { } + }, { items: items } ); const item2 = new window["Survey"].Action({ title: "Set items", @@ -71,9 +63,6 @@ function getActionByText(text: string) { } frameworks.forEach(async framework => { - fixture`${framework} ${title}`.page`${url}${framework}`.clientScripts({ content: `(${explicitErrorHandler.toString()})()` }).beforeEach(async t => { - }); - test("check custom markup in list behavior", async t => { await registerCustomToolboxComponent(framework); await initSurvey(framework, json, { onGetQuestionTitleActions: addTitleAction }); @@ -120,9 +109,6 @@ frameworks.forEach(async framework => { ["knockout", "react"].forEach(async framework => { if (frameworks.indexOf(framework) === -1) return; - fixture`${framework} ${title}`.page`${url}${framework}`.clientScripts({ content: `(${explicitErrorHandler.toString()})()` }).beforeEach(async t => { - }); - test("check list filter", async t => { await initSurvey(framework, { diff --git a/testCafe/questions/boolean.js b/testCafe/questions/boolean.js index 18138d4096..ca159ea55f 100644 --- a/testCafe/questions/boolean.js +++ b/testCafe/questions/boolean.js @@ -1,4 +1,4 @@ -import { frameworks, url, url_test, initSurvey, explicitErrorHandler, getQuestionValue, getQuestionJson, applyTheme } from "../helper"; +import { frameworks, url, url_test, initSurvey, getQuestionValue, getQuestionJson, applyTheme } from "../helper"; import { ClientFunction, Selector, fixture, test } from "testcafe"; // eslint-disable-next-line no-undef const assert = require("assert"); @@ -212,7 +212,6 @@ frameworks.forEach((framework) => { } }); }); test("Check actions", async (t) => { - await explicitErrorHandler(); await t .expect(Selector(".sv-string-viewer").withText("21").exists).ok() .expect(Selector(".sv-string-viewer").withText("Description!").exists).notOk() diff --git a/testCafe/survey/custom_components.ts b/testCafe/survey/custom_components.ts index 457457d6b2..513ff65eb2 100644 --- a/testCafe/survey/custom_components.ts +++ b/testCafe/survey/custom_components.ts @@ -1,4 +1,4 @@ -import { url_test, initSurvey, getSurveyResult, frameworks, explicitErrorHandler } from "../helper"; +import { url_test, initSurvey, getSurveyResult, frameworks } from "../helper"; import { Selector, ClientFunction } from "testcafe"; const title = "Custom Components"; const themeName = "defaultV2"; @@ -33,7 +33,6 @@ frameworks.forEach(framework => { ); test("Show rating in component as dropdown", async t => { const questionDropdownSelect = Selector(".sd-input.sd-dropdown"); - await explicitErrorHandler(); await t.resizeWindow(500, 600); await registerNPSComponet(); await initSurvey(framework, json); diff --git a/testCafe/survey/titleActions.js b/testCafe/survey/titleActions.js index 902e881728..682b35ddc7 100644 --- a/testCafe/survey/titleActions.js +++ b/testCafe/survey/titleActions.js @@ -1,4 +1,4 @@ -import { frameworks, url, initSurvey, url_test, applyTheme, explicitErrorHandler } from "../helper"; +import { frameworks, url, initSurvey, url_test, applyTheme } from "../helper"; import { Selector, ClientFunction, fixture, test } from "testcafe"; const title = "titleActions"; @@ -320,7 +320,6 @@ frameworks.forEach((framework) => { await applyTheme(themeName); }); test("check hidden action content has non-zero width", async (t) => { - await explicitErrorHandler(); await initSurvey(framework, json, { onGetQuestionTitleActions: (_, opt) => { opt.titleActions = [ diff --git a/visualRegressionTests/tests/defaultV2/boolean.ts b/visualRegressionTests/tests/defaultV2/boolean.ts index 561fa31006..f3b3c20465 100644 --- a/visualRegressionTests/tests/defaultV2/boolean.ts +++ b/visualRegressionTests/tests/defaultV2/boolean.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, setOptions, url_test, explicitErrorHandler, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, setOptions, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; const title = "Boolean Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check boolean question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { diff --git a/visualRegressionTests/tests/defaultV2/brandinfo.ts b/visualRegressionTests/tests/defaultV2/brandinfo.ts index cc5722994a..e133772c62 100644 --- a/visualRegressionTests/tests/defaultV2/brandinfo.ts +++ b/visualRegressionTests/tests/defaultV2/brandinfo.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, takeElementScreenshot, wrapVisualTest } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper"; const title = "Brand banner Screenshot"; @@ -23,13 +23,12 @@ const json = { frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json); - await ClientFunction(() => { - document.body.focus(); - })(); - }); + await applyTheme(theme); + await initSurvey(framework, json); + await ClientFunction(() => { + document.body.focus(); + })(); + }); test("Check brand info banner", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); diff --git a/visualRegressionTests/tests/defaultV2/buttongroup.ts b/visualRegressionTests/tests/defaultV2/buttongroup.ts index 0615e140b0..5b6de3b1a8 100644 --- a/visualRegressionTests/tests/defaultV2/buttongroup.ts +++ b/visualRegressionTests/tests/defaultV2/buttongroup.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Dropdown Screenshot"; @@ -40,9 +40,8 @@ const registerButtongroup = ClientFunction((framework) => { frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check dropdown question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); diff --git a/visualRegressionTests/tests/defaultV2/complex.ts b/visualRegressionTests/tests/defaultV2/complex.ts index 228ae3db74..49c6b0a528 100644 --- a/visualRegressionTests/tests/defaultV2/complex.ts +++ b/visualRegressionTests/tests/defaultV2/complex.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Complex Screenshot"; @@ -90,9 +90,8 @@ const json = { frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check complex question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1800); diff --git a/visualRegressionTests/tests/defaultV2/dropdown.ts b/visualRegressionTests/tests/defaultV2/dropdown.ts index 0c05714aeb..c2411d8124 100644 --- a/visualRegressionTests/tests/defaultV2/dropdown.ts +++ b/visualRegressionTests/tests/defaultV2/dropdown.ts @@ -1,6 +1,6 @@ import { Selector, ClientFunction } from "testcafe"; import { getListItemByText, registerCustomItemComponent } from "../../../testCafe/helper"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; const title = "Dropdown Screenshot"; @@ -18,7 +18,6 @@ frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); }); test("Check dropdown select question", async (t) => { @@ -453,13 +452,14 @@ frameworks.forEach(framework => { ] } ] - }, { "onTextMarkdown": (sender, options) => { - var converter = new window["showdown"].Converter(); - var str = converter.makeHtml(options.text); - str = str.substring(3); - str = str.substring(0, str.length - 4); - options.html = str; - } + }, { + "onTextMarkdown": (sender, options) => { + var converter = new window["showdown"].Converter(); + var str = converter.makeHtml(options.text); + str = str.substring(3); + str = str.substring(0, str.length - 4); + options.html = str; + } }); const questionDropdownSelect = Selector(".sd-input.sd-dropdown"); diff --git a/visualRegressionTests/tests/defaultV2/file.ts b/visualRegressionTests/tests/defaultV2/file.ts index c6ec6d47dd..910624905e 100644 --- a/visualRegressionTests/tests/defaultV2/file.ts +++ b/visualRegressionTests/tests/defaultV2/file.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; const title = "File Screenshot"; @@ -27,13 +27,12 @@ const json = { frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json); - await ClientFunction(() => { - document.body.focus(); - })(); - }); + await applyTheme(theme); + await initSurvey(framework, json); + await ClientFunction(() => { + document.body.focus(); + })(); + }); test("Check file question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { @@ -46,7 +45,7 @@ frameworks.forEach(framework => { await takeElementScreenshot("file-question-single-file-small-image.png", questionRoot, t, comparer); await t.setFilesToUpload(Selector(".sd-file input"), ["files/Portfolio.pdf"]); await takeElementScreenshot("file-question-single-file.png", questionRoot, t, comparer); - await ClientFunction(()=>{ + await ClientFunction(() => { const question = (window as any).survey.getQuestionByName("file_question"); question.allowMultiple = true; question.clear(); @@ -63,7 +62,7 @@ frameworks.forEach(framework => { test("Check file question - long names", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); - await ClientFunction(()=>{ + await ClientFunction(() => { const question = (window as any).survey.getQuestionByName("file_question"); question.allowMultiple = true; question.value = [ @@ -82,23 +81,23 @@ frameworks.forEach(framework => { test("Check file question mobile mode", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); - await ClientFunction(()=>{ + await ClientFunction(() => { (window as any).survey.resizeObserver.disconnect(); (window as any).survey.setIsMobile(false); (window as any).survey.getAllQuestions()[0].resizeObserver.disconnect(); - (window as any).survey.getAllQuestions()[0].processResponsiveness = () => {}; + (window as any).survey.getAllQuestions()[0].processResponsiveness = () => { }; (window as any).survey.getAllQuestions()[0].pageSize = 1; (window as any).survey.getAllQuestions()[0].isMobile = true; })(); await t.setFilesToUpload(Selector(".sd-file input"), ["files/SingleImage.jpg"]); const questionRoot = Selector(".sd-question"); - await ClientFunction(()=>{ + await ClientFunction(() => { const question = (window as any).survey.getQuestionByName("file_question"); question.allowMultiple = true; question.clear(); })(); await t.setFilesToUpload(Selector(".sd-file input"), ["files/Badger.png", "files/Bird.png", "files/Read Me.txt", "files/Flamingo.png"]); - await ClientFunction(()=>{ + await ClientFunction(() => { const question = (window as any).survey.getQuestionByName("file_question"); question.indexToShow = 0; question.fileIndexAction.title = question.getFileIndexCaption(); @@ -116,7 +115,7 @@ frameworks.forEach(framework => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); const questionRoot = Selector(".sd-question"); - await ClientFunction(()=>{ + await ClientFunction(() => { const question = (window as any).survey.getQuestionByName("file_question"); question.isUploading = true; })(); @@ -128,10 +127,6 @@ frameworks.forEach(framework => { }); }); frameworks.forEach(framework => { - fixture`${framework} ${title} ${theme}` - .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - }); test("Check file question placeholder mobile", async t => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(600, 1000); diff --git a/visualRegressionTests/tests/defaultV2/html.ts b/visualRegressionTests/tests/defaultV2/html.ts index 97ba00abe8..8fca5a86ff 100644 --- a/visualRegressionTests/tests/defaultV2/html.ts +++ b/visualRegressionTests/tests/defaultV2/html.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Html Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check html question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); diff --git a/visualRegressionTests/tests/defaultV2/image.ts b/visualRegressionTests/tests/defaultV2/image.ts index 4608e1b925..d0ba3dcc4f 100644 --- a/visualRegressionTests/tests/defaultV2/image.ts +++ b/visualRegressionTests/tests/defaultV2/image.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper"; import { imageSource } from "../../constants"; const title = "Image Screenshot"; @@ -17,9 +17,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check image question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); diff --git a/visualRegressionTests/tests/defaultV2/imagepicker.ts b/visualRegressionTests/tests/defaultV2/imagepicker.ts index 08aacb74d9..2c183945df 100644 --- a/visualRegressionTests/tests/defaultV2/imagepicker.ts +++ b/visualRegressionTests/tests/defaultV2/imagepicker.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; import { imageSource } from "../../constants"; const title = "Image Screenshot"; @@ -15,9 +15,7 @@ const applyTheme = ClientFunction(theme => { const theme = "defaultV2"; frameworks.forEach(framework => { - fixture`${framework} ${title} ${theme}` - .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); + fixture`${framework} ${title} ${theme}`.page`${url_test}${theme}/${framework}`.beforeEach(async t => { await applyTheme(theme); }); test("Check imagepicker checked item", async (t) => { diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts index 3f1b551b5b..c1af46a62c 100644 --- a/visualRegressionTests/tests/defaultV2/matrix.ts +++ b/visualRegressionTests/tests/defaultV2/matrix.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Matrixdynamic Screenshot"; @@ -14,9 +14,7 @@ const applyTheme = ClientFunction(theme => { const theme = "defaultV2"; frameworks.forEach(framework => { - fixture`${framework} ${title} ${theme}` - .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); + fixture`${framework} ${title} ${theme}`.page`${url_test}${theme}/${framework}`.beforeEach(async t => { await applyTheme(theme); }); diff --git a/visualRegressionTests/tests/defaultV2/matrixdynamic.ts b/visualRegressionTests/tests/defaultV2/matrixdynamic.ts index eff3d71c5e..8894459ecf 100644 --- a/visualRegressionTests/tests/defaultV2/matrixdynamic.ts +++ b/visualRegressionTests/tests/defaultV2/matrixdynamic.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, applyTheme, takeElementScreenshot, wrapVisualTest, resetFocusToBody, resetHoverToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, applyTheme, takeElementScreenshot, wrapVisualTest, resetFocusToBody, resetHoverToBody } from "../../helper"; const title = "Matrixdynamic Screenshot"; @@ -10,12 +10,9 @@ fixture`${title}`.page`${url}`.beforeEach(async (t) => { const theme = "defaultV2"; frameworks.forEach(framework => { - fixture`${framework} ${title} ${theme}` - .page`${url_test}${theme}/${framework}` - .beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + fixture`${framework} ${title} ${theme}`.page`${url_test}${theme}/${framework}`.beforeEach(async t => { + await applyTheme(theme); + }); test("Matrixdynamic empty placeholder", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -122,7 +119,8 @@ frameworks.forEach(framework => { removeRowText: "Remove", maxWidth: "800px", minWidth: "800px", - width: "800px" } + width: "800px" + } ] }); @@ -220,7 +218,7 @@ frameworks.forEach(framework => { test("Check Matrixdynamic with allowRowsDragAndDrop", async (t) => { await wrapVisualTest(t, async (t, comparer) => { - //todo + //todo if (framework === "vue" || framework === "angular") { return; } diff --git a/visualRegressionTests/tests/defaultV2/multipletext.ts b/visualRegressionTests/tests/defaultV2/multipletext.ts index 31997b58e6..e3b7c79587 100644 --- a/visualRegressionTests/tests/defaultV2/multipletext.ts +++ b/visualRegressionTests/tests/defaultV2/multipletext.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot, resetFocusToBody } from "../../helper"; const title = "Multipletext Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check multipletext question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts index c4cca5f321..aee1a666e8 100644 --- a/visualRegressionTests/tests/defaultV2/panel.ts +++ b/visualRegressionTests/tests/defaultV2/panel.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, takeElementScreenshot, resetHoverToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, takeElementScreenshot, resetHoverToBody } from "../../helper"; const title = "Panel Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check oridinary panel", async (t) => { await wrapVisualTest(t, async (t, comparer) => { @@ -87,7 +86,7 @@ frameworks.forEach(framework => { }, ] }); - await ClientFunction(()=> document.body.focus())(); + await ClientFunction(() => document.body.focus())(); const panelRoot = Selector(".sd-panel"); await takeElementScreenshot("panel-elements-one-row.png", panelRoot, t, comparer); }); @@ -159,7 +158,7 @@ frameworks.forEach(framework => { ] }); const panelRoot = Selector(".sd-panel"); - await ClientFunction(()=>{ (window).survey.showInvisibleElements = true; })(); + await ClientFunction(() => { (window).survey.showInvisibleElements = true; })(); await resetFocusToBody(); await takeElementScreenshot("panel-invisible.png", panelRoot, t, comparer); }); @@ -195,13 +194,13 @@ frameworks.forEach(framework => { ] }); const rowRoot = Selector(".sd-row"); - await ClientFunction(()=>{ (window).survey.showInvisibleElements = true; })(); + await ClientFunction(() => { (window).survey.showInvisibleElements = true; })(); await resetFocusToBody(); await takeElementScreenshot("panel-in-row.png", rowRoot, t, comparer); }); }); - test("Check panel with actions", async(t) => { + test("Check panel with actions", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); await initSurvey(framework, { @@ -214,7 +213,7 @@ frameworks.forEach(framework => { ] }); await t.typeText(Selector(".sd-input"), "This is my answer"); - await ClientFunction(()=>{ + await ClientFunction(() => { document.body.focus(); (window).survey.showPreview(); })(); @@ -223,7 +222,7 @@ frameworks.forEach(framework => { }); }); - test("Check panel with actions", async(t) => { + test("Check panel with actions", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(722, 1000); await initSurvey(framework, { @@ -263,7 +262,7 @@ frameworks.forEach(framework => { }, ] }); - await ClientFunction(()=>{ + await ClientFunction(() => { document.body.focus(); })(); const panelRoot = Selector(".sd-panel"); diff --git a/visualRegressionTests/tests/defaultV2/paneldynamic.ts b/visualRegressionTests/tests/defaultV2/paneldynamic.ts index cc9dbc6b45..b55fbbeec9 100644 --- a/visualRegressionTests/tests/defaultV2/paneldynamic.ts +++ b/visualRegressionTests/tests/defaultV2/paneldynamic.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Paneldynamic Screenshot"; @@ -52,10 +52,9 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json); - }); + await applyTheme(theme); + await initSurvey(framework, json); + }); test("Paneldynamic progressTop mode", async (t) => { await wrapVisualTest(t, async (t, comparer) => { @@ -95,17 +94,16 @@ frameworks.forEach(framework => { frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json, { - onGetPanelFooterActions: (_, opt) => { - opt.actions.push({ - title: "Duplicate", - action: () => {} - }); - } + await applyTheme(theme); + await initSurvey(framework, json, { + onGetPanelFooterActions: (_, opt) => { + opt.actions.push({ + title: "Duplicate", + action: () => { } + }); + } + }); }); - }); test("Check paneldynamic with custom actions", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -154,11 +152,10 @@ frameworks.forEach(framework => { }; fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json); - }); - test("Two Paneldynamics in one row", async (t)=>{ + await applyTheme(theme); + await initSurvey(framework, json); + }); + test("Two Paneldynamics in one row", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1920); await ClientFunction(() => { @@ -249,7 +246,7 @@ frameworks.forEach(framework => { isRequired: true, startWithNewLine: false, visibleIf: - "{panel.isalive} = 'No' and {panel.causeofdeathknown} = 'Yes'" + "{panel.isalive} = 'No' and {panel.causeofdeathknown} = 'Yes'" } ], panelCount: 2, @@ -262,11 +259,10 @@ frameworks.forEach(framework => { }; fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - await initSurvey(framework, json); - }); - test("Navigation panel by tabs", async (t)=>{ + await applyTheme(theme); + await initSurvey(framework, json); + }); + test("Navigation panel by tabs", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1280, 900); await ClientFunction(() => { diff --git a/visualRegressionTests/tests/defaultV2/popup.ts b/visualRegressionTests/tests/defaultV2/popup.ts index 4e95216792..2443e004a0 100644 --- a/visualRegressionTests/tests/defaultV2/popup.ts +++ b/visualRegressionTests/tests/defaultV2/popup.ts @@ -1,5 +1,5 @@ import { Selector } from "testcafe"; -import { frameworks, initSurvey, url, url_test, takeElementScreenshot, applyTheme, explicitErrorHandler, wrapVisualTest, resetHoverToBody } from "../../helper"; +import { frameworks, initSurvey, url, url_test, takeElementScreenshot, applyTheme, wrapVisualTest, resetHoverToBody } from "../../helper"; const title = "Popup Screenshot"; fixture`${title}`.page`${url}`; @@ -194,7 +194,6 @@ frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); }); @@ -241,21 +240,23 @@ frameworks.forEach(framework => { test("Dropdown popup with scroll to selected items", async (t) => { await wrapVisualTest(t, async (t, comparer) => { - await initSurvey(framework, json, { onGetQuestionTitleActions: (_, opt) => { - const getItems = (count: number, startIndex = 0) => { - const list: Array = []; - for (let index = startIndex; index < count; index++) { - list[index - startIndex] = new window["Survey"].Action({ id: index, title: "item" + index }); - } - return list; - }; - const items = getItems(40); - const dropdownWithSearchAction = window["Survey"].createDropdownActionModel( - { title: "Long List", showTitle: true }, - { items: items, showPointer: true, selectedItem: items[39] } - ); - opt.titleActions = [dropdownWithSearchAction]; - } }); + await initSurvey(framework, json, { + onGetQuestionTitleActions: (_, opt) => { + const getItems = (count: number, startIndex = 0) => { + const list: Array = []; + for (let index = startIndex; index < count; index++) { + list[index - startIndex] = new window["Survey"].Action({ id: index, title: "item" + index }); + } + return list; + }; + const items = getItems(40); + const dropdownWithSearchAction = window["Survey"].createDropdownActionModel( + { title: "Long List", showTitle: true }, + { items: items, showPointer: true, selectedItem: items[39] } + ); + opt.titleActions = [dropdownWithSearchAction]; + } + }); await t .wait(1000) .resizeWindow(1000, 600) @@ -338,59 +339,61 @@ frameworks.forEach(framework => { test("Popup inner modal window", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1000, 600); - await initSurvey(framework, json, { onGetQuestionTitleActions: (_, opt) => { - const json = { - elements: [ - { - type: "dropdown", - name: "modal_question", - choices: [ - "item1", - "item2", - "item3", - "item4", - "item5", - "item6", - "item7", - "item8", - "item9", - "item10", - "item11", - "item12", - "item13", - "item14", - "item15", - "item16", - "item17", - "item18", - "item19", - "item20", - "item21", - "item22", - "item23", - "item24", - "item25", - "item26", - "item27" - ] + await initSurvey(framework, json, { + onGetQuestionTitleActions: (_, opt) => { + const json = { + elements: [ + { + type: "dropdown", + name: "modal_question", + choices: [ + "item1", + "item2", + "item3", + "item4", + "item5", + "item6", + "item7", + "item8", + "item9", + "item10", + "item11", + "item12", + "item13", + "item14", + "item15", + "item16", + "item17", + "item18", + "item19", + "item20", + "item21", + "item22", + "item23", + "item24", + "item25", + "item26", + "item27" + ] + } + ] + }; + const item = new window["Survey"].Action({ + component: "sv-action-bar-item", + title: "Click", + showTitle: true, + action: () => { + const model = new window["Survey"].Model(json); + model.focusFirstQuestionAutomatic = false; + window["Survey"].settings.showModal("survey", { + model: model, + survey: model + }); } - ] - }; - const item = new window["Survey"].Action({ - component: "sv-action-bar-item", - title: "Click", - showTitle: true, - action: () => { - const model = new window["Survey"].Model(json); - model.focusFirstQuestionAutomatic = false; - window["Survey"].settings.showModal("survey", { - model: model, - survey: model - }); - } - }); - opt.titleActions = [item]; - } }); + }); + opt.titleActions = [item]; + } + }); await t .click(clickButton.withText("Click")) .click(Selector(".sd-dropdown")); diff --git a/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts index 703cf93aa0..abbabe8dc8 100644 --- a/visualRegressionTests/tests/defaultV2/question.ts +++ b/visualRegressionTests/tests/defaultV2/question.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Question Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check question without title", async (t) => { await wrapVisualTest(t, async (t, comparer) => { @@ -149,7 +148,7 @@ frameworks.forEach(framework => { ] }); const questionRoot = Selector(".sd-question"); - await ClientFunction(()=>{ (window).survey.showInvisibleElements = true; })(); + await ClientFunction(() => { (window).survey.showInvisibleElements = true; })(); await resetFocusToBody(); await takeElementScreenshot("question-invisible.png", questionRoot, t, comparer); }); @@ -171,14 +170,16 @@ frameworks.forEach(framework => { title: "Personal information" }, ] - }, { onGetQuestionTitleActions: (_, opt) => { - opt.titleActions.push( - { - title: "Reset to Default", - action: () => {} - } - ); - } }); + }, { + onGetQuestionTitleActions: (_, opt) => { + opt.titleActions.push( + { + title: "Reset to Default", + action: () => { } + } + ); + } + }); const questionRoot = Selector(".sd-question"); await takeElementScreenshot("question-title-actions.png", questionRoot, t, comparer); }); @@ -324,7 +325,7 @@ frameworks.forEach(framework => { }); }); - test("Check question error", async(t)=> { + test("Check question error", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -355,7 +356,7 @@ frameworks.forEach(framework => { }); }); - test("Check question error with title location left", async(t)=> { + test("Check question error with title location left", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -377,7 +378,7 @@ frameworks.forEach(framework => { }); }); - test("Check question errors bottom", async(t) => { + test("Check question errors bottom", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -401,7 +402,7 @@ frameworks.forEach(framework => { }); }); - test("Check title location Left", async(t)=> { + test("Check title location Left", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -438,7 +439,7 @@ frameworks.forEach(framework => { } ], onCreated(question) { - // Hide the title for component/root location + // Hide the title for component/root location question.titleLocation = "hidden"; } }); diff --git a/visualRegressionTests/tests/defaultV2/ranking.ts b/visualRegressionTests/tests/defaultV2/ranking.ts index 11e2ca057a..359721a3c5 100644 --- a/visualRegressionTests/tests/defaultV2/ranking.ts +++ b/visualRegressionTests/tests/defaultV2/ranking.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, takeElementScreenshot, explicitErrorHandler, wrapVisualTest } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper"; const title = "Ranking Screenshot"; @@ -15,7 +15,6 @@ frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); }); diff --git a/visualRegressionTests/tests/defaultV2/rating.ts b/visualRegressionTests/tests/defaultV2/rating.ts index 40e4a4f807..43f133893f 100644 --- a/visualRegressionTests/tests/defaultV2/rating.ts +++ b/visualRegressionTests/tests/defaultV2/rating.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, takeElementScreenshot, explicitErrorHandler, resetFocusToBody, wrapVisualTest } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, resetFocusToBody, wrapVisualTest } from "../../helper"; const title = "Rating Screenshot"; @@ -16,13 +16,12 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check rating question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); - const focusBody = ClientFunction(()=>{ document.body.focus(); }); + const focusBody = ClientFunction(() => { document.body.focus(); }); await initSurvey(framework, { showQuestionNumbers: "off", questions: [ @@ -43,7 +42,7 @@ frameworks.forEach(framework => { const questionRoot = Selector(".sd-question"); await focusBody(); await takeElementScreenshot("question-rating.png", questionRoot, t, comparer); - await ClientFunction(()=> { (document.querySelector(".sd-rating__item input")).focus(); })(); + await ClientFunction(() => { (document.querySelector(".sd-rating__item input")).focus(); })(); await takeElementScreenshot("question-rating-focus.png", questionRoot, t, comparer); await t.click(".sd-rating__item"); await takeElementScreenshot("question-rating-focus-selected.png", questionRoot, t, comparer); @@ -55,7 +54,7 @@ frameworks.forEach(framework => { test("Check rating disabled question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); - const focusBody = ClientFunction(()=>{ document.body.focus(); }); + const focusBody = ClientFunction(() => { document.body.focus(); }); await initSurvey(framework, { showQuestionNumbers: "off", questions: [ diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts index 1e0955f908..3ffc44ed2a 100644 --- a/visualRegressionTests/tests/defaultV2/responsiveness.ts +++ b/visualRegressionTests/tests/defaultV2/responsiveness.ts @@ -1,6 +1,6 @@ import { Selector, ClientFunction } from "testcafe"; import { imageSource } from "../../constants"; -import { url, takeElementScreenshot, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, resetHoverToBody } from "../../helper"; +import { url, takeElementScreenshot, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, resetHoverToBody } from "../../helper"; const title = "Responsiveness Screenshot"; @@ -17,9 +17,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check simple question in small screen", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(600, 1080); @@ -402,7 +401,8 @@ frameworks.forEach(framework => { await initSurvey(framework, { showQuestionNumbers: "off", questions: [ - { type: "multipletext", + { + type: "multipletext", name: "q1", title: "Personal Information", colCount: 2, @@ -493,7 +493,7 @@ frameworks.forEach(framework => { await takeElementScreenshot("responsiveness-ranking-hover-item.png", Selector(".sd-question"), t, comparer); }); }); - test("check survey layout in mobile mode", async(t) => { + test("check survey layout in mobile mode", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(600, 1080); await initSurvey(framework, diff --git a/visualRegressionTests/tests/defaultV2/selectbase.ts b/visualRegressionTests/tests/defaultV2/selectbase.ts index f7eb30dc61..9891e5c3e6 100644 --- a/visualRegressionTests/tests/defaultV2/selectbase.ts +++ b/visualRegressionTests/tests/defaultV2/selectbase.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; +import { url, frameworks, initSurvey, url_test, resetFocusToBody, wrapVisualTest, takeElementScreenshot } from "../../helper"; const title = "Selectbase Screenshot"; @@ -16,9 +16,8 @@ const theme = "defaultV2"; frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}`.beforeEach(async t => { - await explicitErrorHandler(); - await applyTheme(theme); - }); + await applyTheme(theme); + }); test("Check checkbox question", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); @@ -128,7 +127,7 @@ frameworks.forEach(framework => { await takeElementScreenshot("radiogroup-state-hover-near.png", Selector(".sd-question"), t, comparer); }); }); - test("Check checkbox with comment long area", async(t) => { + test("Check checkbox with comment long area", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(1920, 1080); await initSurvey(framework, { diff --git a/visualRegressionTests/tests/defaultV2/survey.ts b/visualRegressionTests/tests/defaultV2/survey.ts index 5ad0869b3f..b5886fc06b 100644 --- a/visualRegressionTests/tests/defaultV2/survey.ts +++ b/visualRegressionTests/tests/defaultV2/survey.ts @@ -1,6 +1,6 @@ import { Selector, ClientFunction } from "testcafe"; import { setData } from "../../../testCafe/helper"; -import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, explicitErrorHandler, resetFocusToBody, resetHoverToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody, resetHoverToBody } from "../../helper"; import { backgroundImage } from "../../constants"; const title = "Survey Screenshot"; @@ -75,7 +75,6 @@ frameworks.forEach(framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); }); diff --git a/visualRegressionTests/tests/defaultV2/tagbox.ts b/visualRegressionTests/tests/defaultV2/tagbox.ts index cfdda19f48..c2f58af182 100644 --- a/visualRegressionTests/tests/defaultV2/tagbox.ts +++ b/visualRegressionTests/tests/defaultV2/tagbox.ts @@ -1,6 +1,6 @@ import { Selector, ClientFunction, t } from "testcafe"; import { getListItemByText } from "../../../testCafe/helper"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; const title = "Tagbox Screenshot"; @@ -16,7 +16,6 @@ frameworks.forEach(async framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); }); @@ -383,11 +382,12 @@ frameworks.forEach(async framework => { window["Survey"]._setIsTouch(true); })(); await initSurvey(framework, - { "elements": [{ - "type": "tagbox", - "name": "q1", - "choices": ["English: American Literature", "English: British and World Literature", "Math: Consumer Math", "Math: Practical Math", "Math: Developmental Algebra", "Math: Continuing Algebra", "Math: Pre-Algebra", "Math: Algebra", "Math: Geometry", "Math: Integrated Mathematics", "Science: Physical Science", "Science: Earth Science", "Science: Biology", "Science: Chemistry", "History: World History", "History: Modern World Studies", "History: U.S. History", "History: Modern U.S. History", "Social Sciences: U.S. Government and Politics", "Social Sciences: U.S. and Global Economics", "World Languages: Spanish", "World Languages: French", "World Languages: German", "World Languages: Latin", "World Languages: Chinese", "World Languages: Japanese"] - }] + { + "elements": [{ + "type": "tagbox", + "name": "q1", + "choices": ["English: American Literature", "English: British and World Literature", "Math: Consumer Math", "Math: Practical Math", "Math: Developmental Algebra", "Math: Continuing Algebra", "Math: Pre-Algebra", "Math: Algebra", "Math: Geometry", "Math: Integrated Mathematics", "Science: Physical Science", "Science: Earth Science", "Science: Biology", "Science: Chemistry", "History: World History", "History: Modern World Studies", "History: U.S. History", "History: Modern U.S. History", "Social Sciences: U.S. Government and Politics", "Social Sciences: U.S. and Global Economics", "World Languages: Spanish", "World Languages: French", "World Languages: German", "World Languages: Latin", "World Languages: Chinese", "World Languages: Japanese"] + }] }); await t.click(Selector(".sd-dropdown__filter-string-input")); await takeElementScreenshot("tagbox-question-long-items-overlay-tablet-popup.png", Selector(".sv-popup.sv-multi-select-list"), t, comparer); diff --git a/visualRegressionTests/tests/modern/tagbox.ts b/visualRegressionTests/tests/modern/tagbox.ts index 8c35164497..15822d8e8b 100644 --- a/visualRegressionTests/tests/modern/tagbox.ts +++ b/visualRegressionTests/tests/modern/tagbox.ts @@ -1,5 +1,5 @@ import { Selector, ClientFunction, t } from "testcafe"; -import { url, frameworks, initSurvey, url_test, explicitErrorHandler, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; +import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper"; const title = "Tagbox Screenshot (modern)"; @@ -15,7 +15,6 @@ frameworks.forEach(async framework => { fixture`${framework} ${title} ${theme}` .page`${url_test}${theme}/${framework}` .beforeEach(async t => { - await explicitErrorHandler(); await applyTheme(theme); });