diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.functional.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.functional.ts index 360e4b6c9fdb..1c3343e5626c 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.functional.ts +++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.functional.ts @@ -19,7 +19,7 @@ test('Subject text editor should have focus after returning from recurrence form const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, true); - await appointmentPopup.openRecurrenceSettings(t); + await appointmentPopup.clickRecurrenceSettingsButton(t); await t.click(appointmentPopup.recurrence.backButton); @@ -47,7 +47,7 @@ test('Recurrence start date editor should have focus after opening recurrence se const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, true); - await appointmentPopup.openRecurrenceSettings(t); + await appointmentPopup.clickRecurrenceSettingsButton(t); await t .expect(appointmentPopup.recurrence.startDateInput.focused) diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts index e6754d3c33b0..b2305eafce8e 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts +++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts @@ -25,7 +25,7 @@ const SCHEDULER_SELECTOR = '#container'; const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, false); - await appointmentPopup.openRecurrenceForm(t, frequency); + await appointmentPopup.selectRepeatValue(t, frequency); await testScreenshot( t, @@ -60,7 +60,7 @@ test('recurrence form with icons', async (t) => { const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, true); - await appointmentPopup.openRecurrenceSettings(t); + await appointmentPopup.clickRecurrenceSettingsButton(t); await testScreenshot( t, @@ -95,7 +95,7 @@ test('recurrence form readonly state', async (t) => { const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, false); - await appointmentPopup.openRecurrenceSettings(t); + await appointmentPopup.clickRecurrenceSettingsButton(t); await testScreenshot( t, @@ -123,7 +123,7 @@ test.meta({ browserSize: [450, 1000] })('recurrence form on mobile screen', asyn const scheduler = new Scheduler(SCHEDULER_SELECTOR); const appointmentPopup = await scheduler.openAppointmentPopup(t, undefined, false); - await appointmentPopup.openRecurrenceForm(t, 'Weekly'); + await appointmentPopup.selectRepeatValue(t, 'Weekly'); await testScreenshot( t, diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts index 627df73d21ed..08bccf07154b 100644 --- a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts +++ b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts @@ -3,6 +3,14 @@ import $ from '@js/core/renderer'; import type dxForm from '@js/ui/form'; import type dxPopup from '@js/ui/popup'; +const queryRequiredElement = (parent: HTMLElement, selector: string): HTMLElement => { + const element = parent.querySelector(selector); + if (!element) { + throw new Error(`Element with selector "${selector}" not found`); + } + return element as HTMLElement; +}; + export class PopupModel { element: HTMLDivElement; @@ -15,135 +23,65 @@ export class PopupModel { this.component = $('.dx-scheduler-appointment-popup.dx-popup.dx-widget').dxPopup('instance') as dxPopup; } - get form(): dxForm { + get dxForm(): dxForm { // @ts-expect-error return $(this.element.querySelector('.dx-form')).dxForm('instance') as dxForm; } - get mainGroup(): HTMLElement | null { - return this.element.querySelector('.dx-scheduler-form-main-group'); - } - - get recurrenceGroup(): HTMLElement | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-group'); - } - - isMainGroupVisible(): boolean { - const group = this.mainGroup; - if (!group) return false; - const $group = $(group); - return !$group.hasClass('dx-scheduler-form-main-group-hidden'); - } - - isRecurrenceGroupVisible(): boolean { - const group = this.recurrenceGroup; - if (!group) return false; - const $group = $(group); - return !$group.hasClass('dx-scheduler-form-recurrence-group-hidden'); - } - - get subjectIcon(): Element | null { - return this.element.querySelector('.dx-scheduler-form-subject-group .dx-scheduler-form-icon .dx-icon'); - } - - get subjectInput(): Element | null { - return this.element.querySelector('.dx-scheduler-form-text-editor .dx-textbox.dx-widget'); - } - - get startDate(): Element | null { - return this.element.querySelector('.dx-scheduler-form-start-date-editor .dx-datebox.dx-widget'); - } - - get startTime(): Element | null { - return this.element.querySelector('.dx-scheduler-form-start-time-editor .dx-datebox.dx-widget'); - } - - get startTimeZone(): Element | null { - return this.element.querySelector('.dx-scheduler-form-start-date-timezone-editor .dx-selectbox.dx-widget'); - } - - get endDate(): Element | null { - return this.element.querySelector('.dx-scheduler-form-end-date-editor .dx-datebox.dx-widget'); - } - - get endTime(): Element | null { - return this.element.querySelector('.dx-scheduler-form-end-time-editor .dx-datebox.dx-widget'); - } - - get endTimeZone(): Element | null { - return this.element.querySelector('.dx-scheduler-form-end-date-timezone-editor .dx-selectbox.dx-widget'); - } - - get repeatEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-repeat-editor .dx-selectbox.dx-widget'); - } - - get descriptionTextArea(): Element | null { - return this.element.querySelector('.dx-scheduler-form-description-editor .dx-textarea.dx-widget'); - } - - get frequencyEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-frequency-editor .dx-selectbox.dx-widget'); - } - - get intervalEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-interval-editor .dx-textbox.dx-widget'); - } - - get byMonthEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-by-month-editor .dx-selectbox.dx-widget'); + get mainGroup(): HTMLElement { + return queryRequiredElement(this.element, '.dx-scheduler-form-main-group'); } - get dayOfMonthEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-day-of-month-editor .dx-numberbox.dx-widget'); + get recurrenceGroup(): HTMLElement { + return queryRequiredElement(this.element, '.dx-scheduler-form-recurrence-group'); } - get countEditor(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-count-editor .dx-numberbox.dx-widget'); + get subjectIcon(): HTMLElement { + return queryRequiredElement(this.element, '.dx-scheduler-form-subject-group .dx-scheduler-form-icon .dx-icon'); } - get repeatEndEditors(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-end-editors .dx-radiogroup.dx-widget'); + get recurrenceWeekDayButtons(): HTMLElement { + return queryRequiredElement(this.element, '.dx-scheduler-days-of-week-buttons'); } - get recurrenceSettingsButton(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-settings-button'); + get saveButton(): HTMLElement { + return queryRequiredElement(this.element, '.dx-button[aria-label="Save"]'); } - get recurrenceRepeatEveryInput(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-settings-group [type="text"]'); + get cancelButton(): HTMLElement { + return queryRequiredElement(this.element, '.dx-button[aria-label="Cancel"]'); } - get recurrenceWeekDayButtons(): Element | null { - return this.element.querySelector('.dx-scheduler-days-of-week-buttons'); + get closeButton(): HTMLElement { + return queryRequiredElement(this.element, '.dx-button[aria-label="Close"]'); } - get recurrenceMonthDayInput(): Element | null { - return this.element.querySelector('.dx-scheduler-form-day-of-month-group [type="text"]'); + get backButton(): HTMLElement { + return queryRequiredElement(this.element, '.dx-toolbar-button .dx-button[aria-label="Back"]'); } - get recurrenceYearlyInputs(): NodeListOf { - return this.element.querySelectorAll('.dx-scheduler-form-recurrence-repeat-on-yearly-group [type="text"]'); + get editSeriesButton(): HTMLElement { + return queryRequiredElement(this.element, '[aria-label="Edit series"]'); } - get recurrenceEndRadioGroup(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-end-editors'); + get editAppointmentButton(): HTMLElement { + return queryRequiredElement(this.element, '[aria-label="Edit appointment"]'); } - get recurrenceEndInputGroup(): Element | null { - return this.element.querySelector('.dx-scheduler-form-recurrence-end-inputs'); + get recurrenceSettingsButton(): HTMLElement { + return queryRequiredElement(this.element, '.dx-scheduler-form-recurrence-settings-button'); } - get recurrenceMonthlyGroup(): Element | null { - return this.element.querySelector('.dx-scheduler-form-day-of-month-group'); + isMainGroupVisible(): boolean { + return !this.mainGroup.classList.contains('dx-scheduler-form-main-group-hidden'); } - get recurrenceYearlyGroup(): Element | null { - return this.element.querySelector('.dx-scheduler-form-day-of-year-group'); + isRecurrenceGroupVisible(): boolean { + return !this.recurrenceGroup.classList.contains('dx-scheduler-form-recurrence-group-hidden'); } - getInput = (editorName: string): dxElementWrapper => { - const editor = this.form.getEditor(editorName); + getInput = (editorName: string): HTMLInputElement => { + const editor = this.dxForm.getEditor(editorName); let $input: dxElementWrapper | undefined | null = null; @@ -163,351 +101,41 @@ export class PopupModel { throw new Error(`Input element of editor with name "${editorName}" not found`); } - return $input; + return $input.get(0) as HTMLInputElement; }; getInputValue = (editorName: string): string => { - const $input = this.getInput(editorName); - return $input.val() as unknown as string; + const input = this.getInput(editorName); + return input.value as unknown as string; }; setInputValue = (editorName: string, value: string | number | Date | boolean | null): void => { - this.form.getEditor(editorName)?.option('value', value); + this.dxForm.getEditor(editorName)?.option('value', value); }; isInputVisible = (editorName: string): boolean => { - const editor = this.form.getEditor(editorName); - - if (!editor) { - return false; - } - - return editor.$element().is(':visible'); + const editor = this.dxForm.getEditor(editorName); + return !!editor?.$element().get(0).isConnected; }; getWeekDaysSelection = (): boolean[] => { - const buttons = this.element.querySelectorAll('.dx-scheduler-days-of-week-buttons .dx-button'); - - if (buttons.length === 0) { - throw new Error('Week day buttons not found'); - } - - return Array.from(buttons).map((button) => button.classList.contains('dx-button-mode-contained')); - }; - - getLabelIdByText = (labelText: string): string => { - const labels = Array.from(this.element.querySelectorAll('label')); - - const label = labels.find((l) => l?.textContent?.trim()?.startsWith(labelText)); - - if (!label) { - throw new Error(`Label with text "${labelText}" not found`); - } - - const forId = label.getAttribute('for'); - if (!forId) { - throw new Error(`Label with text "${labelText}" has no "for" attribute`); - } - return forId; - }; - - getInputByLabel = (labelText: string): HTMLInputElement => { - const forId = this.getLabelIdByText(labelText); - - const input = this.element.querySelector(`input#${forId}`) as HTMLInputElement; - - if (!input) { - throw new Error(`Input with id "${forId}" not found`); - } - - return input; - }; - - setInputValueByLabel = (labelText: string, value: string): HTMLInputElement => { - const input = this.getInputByLabel(labelText); - if (!input) { - throw new Error(`Input with label "${labelText}" not found`); - } - input.value = ''; - - value.split('').forEach((char) => { - input.value += char; - input.dispatchEvent(new Event('input', { bubbles: true })); - input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: char })); - input.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true, key: char })); - input.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, key: char })); - }); - - input.dispatchEvent(new Event('change', { bubbles: true })); - input.dispatchEvent(new Event('input', { bubbles: true })); - - return input; - }; - - getSwitchByName = (name: string): HTMLInputElement => { - const hiddenInput = this.element.querySelector(`input[name=${name}]`); - - if (!hiddenInput) { - throw new Error(`Switch with name "${name}" not found`); - } - - return hiddenInput; - }; - - selectRadio = (value: string): Element | null => { - const group = this.element.querySelector('[role="radiogroup"]'); - if (!group) throw new Error('Radiogroup not found'); + const buttons = Array.from(this.recurrenceWeekDayButtons.querySelectorAll('.dx-button')); - const radios = Array.from(group.querySelectorAll('[role="radio"]')); - - const target = radios.find((radio) => { - const label = radio.getAttribute('aria-label')?.trim(); - const text = radio.textContent?.trim(); - return label === value || text === value; - }); - - if (!target) throw new Error(`Radio with value "${value}" not found`); - - radios.forEach((r) => { - r.setAttribute('aria-checked', 'false'); - r.classList.remove('dx-item-selected', 'dx-radiobutton-checked'); - }); - - target.setAttribute('aria-checked', 'true'); - target.classList.add('dx-item-selected', 'dx-radiobutton-checked'); - - target.dispatchEvent(new MouseEvent('click', { bubbles: true })); - - return target; - }; - - getSelectedRadio = (): HTMLElement | null => this.element.querySelector('[role="radio"][aria-checked="true"]'); - - getSelectedRadioValue = (): string | null => { - const selected = this.getSelectedRadio(); - return selected?.getAttribute('aria-label') ?? selected?.textContent?.trim() ?? null; - }; - - getForm = (): HTMLElement | null => this.element.querySelector('.dx-form'); - - getTitle = (): HTMLElement | null => document.querySelector('.dx-popup-title .dx-toolbar-label'); - - getSaveButton = (): HTMLButtonElement => { - const saveButton = this.element.querySelector('.dx-button[aria-label="Save"]') as HTMLButtonElement; - if (!saveButton) { - throw new Error('Done button not found'); - } - return saveButton; - }; - - getBackButton = (): HTMLButtonElement => { - const backButton = this.element.querySelector('.dx-toolbar-button .dx-button[aria-label="Back"]') as HTMLButtonElement; - if (!backButton) { - throw new Error('Back button not found'); - } - return backButton; - }; - - getCancelButton = (): HTMLButtonElement => { - const cancelButton = this.element.querySelector('.dx-button[aria-label="Cancel"]') as HTMLButtonElement; - if (!cancelButton) { - throw new Error('Cancel button not found'); - } - return cancelButton; - }; - - getCloseButton = (): HTMLButtonElement => { - const closeButton = this.element.querySelector('.dx-closebutton.dx-button') as HTMLButtonElement; - if (!closeButton) { - throw new Error('Close button not found'); - } - return closeButton; - }; - - getFormEditor = (fieldName: string): HTMLElement | null => { - const form = this.getForm(); - if (form === null) { - return null; - } - return form.querySelector(`[data-field="${fieldName}"]`); - }; - - getEditSeriesButton = (): HTMLElement => { - const editSeriesButton = document.querySelector('[aria-label="Edit series"]') as HTMLElement; - if (!editSeriesButton) { - throw new Error('Edit series button not found'); - } - return editSeriesButton; - }; - - getEditAppointmentButton = (): HTMLElement => { - const editAppointmentButton = document.querySelector('[aria-label="Edit appointment"]') as HTMLElement; - if (!editAppointmentButton) { - throw new Error('Edit appointment button not found'); - } - return editAppointmentButton; - }; - - openRecurrenceSettings = (): void => { - if (!this.repeatEditor) { - throw new Error('Repeat editor not found'); - } - - // @ts-expect-error - const repeatEditorInstance = $(this.repeatEditor).dxSelectBox('instance'); - const buttons = repeatEditorInstance.option('buttons'); - const settingsButton = buttons?.find((btn: { name: string }) => btn.name === 'settings'); - - if (settingsButton?.options?.onClick) { - settingsButton.options.onClick(); - } else { - throw new Error('Settings button not found or onClick is not defined'); - } - }; - - openRecurrenceForm = (freq = 'Daily'): void => { - if (!this.repeatEditor) { - throw new Error('Repeat editor not found'); - } - - // @ts-expect-error - const repeatEditorInstance = $(this.repeatEditor).dxSelectBox('instance'); - repeatEditorInstance.option('value', freq.toLowerCase()); - - // Trigger the settings to open - this.openRecurrenceSettings(); + return buttons.map((button) => button.classList.contains('dx-button-mode-contained')); }; selectRepeatValue = (value: string): void => { - // @ts-expect-error - const repeatEditor = $(this.repeatEditor).dxSelectBox('instance'); - const previousValue = repeatEditor.option('value'); + this.getInput('repeatEditor').click(); - const originalOnValueChanged = repeatEditor.option('onValueChanged'); + const items = document.querySelectorAll('.dx-selectbox-popup-wrapper .dx-list .dx-list-item'); - repeatEditor.option('value', value); + const itemToSelect = Array.from(items) + .find((item) => item.textContent?.toLowerCase() === value.toLowerCase()) as HTMLElement; - if (originalOnValueChanged) { - originalOnValueChanged({ - component: repeatEditor, - value, - previousValue, - event: new Event('change'), - }); + if (!itemToSelect) { + throw new Error(`Repeat value "${value}" not found`); } - }; - - setRecurrenceInterval = (interval: number): void => { - const input = this.recurrenceRepeatEveryInput as HTMLInputElement; - if (!input) { - throw new Error('Recurrence interval input not found'); - } - - input.value = interval.toString(); - input.dispatchEvent(new Event('input', { bubbles: true })); - input.dispatchEvent(new Event('change', { bubbles: true })); - }; - - selectRecurrenceWeekDays = (daysIndex: number[]): void => { - const buttonsContainer = this.recurrenceWeekDayButtons; - if (!buttonsContainer) { - throw new Error('Week day buttons not found'); - } - - const buttons = Array.from(buttonsContainer.querySelectorAll('.dx-button')); - buttons.forEach((button, index) => { - const isActive = button.classList.contains('dx-button-mode-contained'); - const shouldBeActive = daysIndex.includes(index); - - if (isActive !== shouldBeActive) { - (button as HTMLElement).click(); - } - }); - }; - - setRecurrenceMonthDay = (day: number): void => { - const input = this.recurrenceMonthDayInput as HTMLInputElement; - if (!input) { - throw new Error('Month day input not found'); - } - - input.value = day.toString(); - input.dispatchEvent(new Event('input', { bubbles: true })); - input.dispatchEvent(new Event('change', { bubbles: true })); - }; - - setRecurrenceYearlyDate = (month: number, day: number): void => { - const inputs = this.recurrenceYearlyInputs; - if (inputs.length < 2) { - throw new Error('Yearly date inputs not found'); - } - - const monthInput = inputs[0] as HTMLInputElement; - const dayInput = inputs[1] as HTMLInputElement; - - monthInput.value = month.toString(); - monthInput.dispatchEvent(new Event('input', { bubbles: true })); - monthInput.dispatchEvent(new Event('change', { bubbles: true })); - - dayInput.value = day.toString(); - dayInput.dispatchEvent(new Event('input', { bubbles: true })); - dayInput.dispatchEvent(new Event('change', { bubbles: true })); - }; - - setRecurrenceEnd = (type: 'never' | 'count' | 'until', value?: number | string): void => { - const radioGroup = this.recurrenceEndRadioGroup; - const inputGroup = this.recurrenceEndInputGroup; - - if (!radioGroup) { - throw new Error('Recurrence end radio group not found'); - } - - const radioButtons = radioGroup.querySelectorAll('.dx-radiobutton'); - - switch (type) { - case 'never': { - const neverRadio = radioButtons[0] as HTMLElement; - if (neverRadio) { - neverRadio.click(); - } - break; - } - case 'until': { - const untilRadio = radioButtons[1] as HTMLElement; - if (untilRadio) { - untilRadio.click(); - } - - if (value !== undefined && inputGroup) { - const untilInput = inputGroup.querySelector('[type="text"]') as HTMLInputElement; - if (untilInput) { - untilInput.value = value.toString(); - untilInput.dispatchEvent(new Event('input', { bubbles: true })); - untilInput.dispatchEvent(new Event('change', { bubbles: true })); - } - } - break; - } - case 'count': { - const countRadio = radioButtons[2] as HTMLElement; - if (countRadio) { - countRadio.click(); - } - - if (value !== undefined && inputGroup) { - const inputs = inputGroup.querySelectorAll('[type="text"]'); - const countInput = inputs[1] as HTMLInputElement; - if (countInput) { - countInput.value = value.toString(); - countInput.dispatchEvent(new Event('input', { bubbles: true })); - countInput.dispatchEvent(new Event('change', { bubbles: true })); - } - } - break; - } - default: - break; - } + itemToSelect.click(); }; } diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts index 4399ec0365d1..1cac7e00ffe9 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts @@ -82,7 +82,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); POM.popup.setInputValue('subjectEditor', 'New Subject'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toMatchObject({ ...commonAppointment, @@ -100,7 +100,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); POM.popup.setInputValue('subjectEditor', 'New Subject'); - POM.popup.getCancelButton().click(); + POM.popup.cancelButton.click(); expect(dataSource.items()[0]).toMatchObject(commonAppointment); }); @@ -115,10 +115,10 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); POM.popup.setInputValue('subjectEditor', 'New Subject'); - POM.popup.openRecurrenceSettings(); - POM.popup.getSaveButton().click(); + POM.popup.recurrenceSettingsButton.click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toMatchObject({ ...recurringAppointment, @@ -135,10 +135,10 @@ describe('Appointment Form', () => { const item = dataSource.items()[0]; scheduler.showAppointmentPopup(item); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); POM.popup.setInputValue('subjectEditor', 'New Subject'); - POM.popup.openRecurrenceSettings(); - POM.popup.getCancelButton().click(); + POM.popup.recurrenceSettingsButton.click(); + POM.popup.cancelButton.click(); expect(dataSource.items()[0]).toMatchObject(recurringAppointment); }); @@ -153,7 +153,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); POM.popup.selectRepeatValue('daily'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toMatchObject({ ...commonAppointment, @@ -171,7 +171,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); POM.popup.selectRepeatValue('daily'); - POM.popup.getCancelButton().click(); + POM.popup.cancelButton.click(); expect(dataSource.items()[0]).toMatchObject(commonAppointment); }); @@ -186,8 +186,8 @@ describe('Appointment Form', () => { const item = dataSource.items()[0]; scheduler.showAppointmentPopup(item); - POM.popup.getEditSeriesButton().click(); - POM.popup.getSaveButton().click(); + POM.popup.editSeriesButton.click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toMatchObject(recurringAppointment); }); @@ -202,9 +202,9 @@ describe('Appointment Form', () => { const item = dataSource.items()[0]; scheduler.showAppointmentPopup(item); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); POM.popup.selectRepeatValue('never'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toMatchObject({ ...recurringAppointment, @@ -294,7 +294,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); POM.popup.setInputValue('roomId', 2); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0].roomId).toBe(2); }); @@ -314,7 +314,7 @@ describe('Appointment Form', () => { const dataSource = (scheduler as any).getDataSource(); POM.openPopupByDblClick('recurring-app'); - POM.popup.getEditAppointmentButton().click(); + POM.popup.editAppointmentButton.click(); POM.popup.setInputValue('subjectEditor', 'single appointment'); scheduler.hideAppointmentPopup(true); @@ -341,7 +341,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup({ ...commonAppointment }); POM.popup.setInputValue(editorName, null); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(POM.isPopupVisible()).toBe(true); }); @@ -355,7 +355,7 @@ describe('Appointment Form', () => { POM.popup.setInputValue(editorName, null); POM.popup.selectRepeatValue('daily'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(POM.isPopupVisible()).toBe(true); }); @@ -370,7 +370,7 @@ describe('Appointment Form', () => { expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/9/2017'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(POM.isPopupVisible()).toBe(false); }); @@ -391,7 +391,7 @@ describe('Appointment Form', () => { POM.popup.setInputValue('descriptionEditor', 'temp'); POM.popup.setInputValue('startDateTimeZoneEditor', 'America/Los_Angeles'); POM.popup.setInputValue('endDateTimeZoneEditor', 'America/Anchorage'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); scheduler.showAppointmentPopup(); @@ -406,13 +406,13 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - expect(POM.popup.form.option('formData')).toMatchObject({ ...commonAppointment }); + expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...commonAppointment }); - POM.popup.getCancelButton().click(); + POM.popup.cancelButton.click(); scheduler.showAppointmentPopup(allDayAppointment); - expect(POM.popup.form.option('formData')).toMatchObject({ ...allDayAppointment }); + expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...allDayAppointment }); }); it('should have empty resource editor value when opening second appointment', async () => { @@ -445,10 +445,10 @@ describe('Appointment Form', () => { const { scheduler, POM } = await createScheduler(getDefaultConfig()); scheduler.showAppointmentPopup({ ...commonAppointment }); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); scheduler.showAppointmentPopup({ ...recurringAppointment }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Daily'); }); @@ -513,7 +513,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup({ ...commonAppointment }); - expect(POM.popup.form.option('readOnly')).toBe(true); + expect(POM.popup.dxForm.option('readOnly')).toBe(true); }); it('form should not be readonly when editing.allowUpdating is false and adding a new appointment', async () => { @@ -524,7 +524,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup({ ...commonAppointment }, true); - expect(POM.popup.form.option('readOnly')).toBe(false); + expect(POM.popup.dxForm.option('readOnly')).toBe(false); }); it('form should be readonly after adding new appointment if editing.allowUpdating is false', async () => { @@ -541,7 +541,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); - expect(POM.popup.form.option('readOnly')).toBe(true); + expect(POM.popup.dxForm.option('readOnly')).toBe(true); }); it('form should be readonly when appointment is disabled', async () => { @@ -554,7 +554,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(item); - expect(POM.popup.form.option('readOnly')).toBe(true); + expect(POM.popup.dxForm.option('readOnly')).toBe(true); }); }); @@ -841,17 +841,17 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - expect(POM.popup.startDate).toBeDefined(); - expect(POM.popup.startTime).toBeDefined(); - expect(POM.popup.endDate).toBeDefined(); - expect(POM.popup.endTime).toBeDefined(); + expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('startTimeEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endTimeEditor')).toBeTruthy(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); - expect(POM.popup.startDate).toBeDefined(); - expect(POM.popup.startTime).toBeNull(); - expect(POM.popup.endDate).toBeDefined(); - expect(POM.popup.endTime).toBeNull(); + expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy(); + expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy(); }); it('should show time editors when switched off', async () => { @@ -859,17 +859,17 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(allDayAppointment); - expect(POM.popup.startDate).toBeDefined(); - expect(POM.popup.startTime).toBeNull(); - expect(POM.popup.endDate).toBeDefined(); - expect(POM.popup.endTime).toBeNull(); + expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy(); + expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); - expect(POM.popup.startDate).toBeDefined(); - expect(POM.popup.startTime).toBeDefined(); - expect(POM.popup.endDate).toBeDefined(); - expect(POM.popup.endTime).toBeDefined(); + expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('startTimeEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endTimeEditor')).toBeTruthy(); }); it('should set correct dates when switching on then off in day view', async () => { @@ -880,8 +880,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.getInput('allDayEditor').click(); expect(POM.popup.getInputValue('startDateEditor')).toBe('5/9/2017'); expect(POM.popup.getInputValue('startTimeEditor')).toBe('9:00 AM'); @@ -897,8 +897,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(allDayAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.getInput('allDayEditor').click(); expect(POM.popup.getInputValue('startDateEditor')).toBe('5/1/2017'); expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy(); @@ -914,8 +914,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.getInput('allDayEditor').click(); expect(POM.popup.getInputValue('startDateEditor')).toBe('5/9/2017'); expect(POM.popup.getInputValue('startTimeEditor')).toBe('9:00 AM'); @@ -931,8 +931,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(allDayAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getSwitchByName('allDay').click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.getInput('allDayEditor').click(); expect(POM.popup.getInputValue('startDateEditor')).toBe('5/1/2017'); expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy(); @@ -944,8 +944,8 @@ describe('Appointment Form', () => { const { scheduler, POM } = await createScheduler(undefined); scheduler.showAppointmentPopup(allDayAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getCancelButton().click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.cancelButton.click(); scheduler.showAppointmentPopup(allDayAppointment); @@ -959,8 +959,8 @@ describe('Appointment Form', () => { const { scheduler, POM } = await createScheduler(getDefaultConfig()); scheduler.showAppointmentPopup(commonAppointment); - POM.popup.getSwitchByName('allDay').click(); - POM.popup.getCancelButton().click(); + POM.popup.getInput('allDayEditor').click(); + POM.popup.cancelButton.click(); scheduler.showAppointmentPopup(commonAppointment); @@ -1001,8 +1001,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - expect(POM.popup.startTimeZone).toBeDefined(); - expect(POM.popup.endTimeZone).toBeDefined(); + expect(POM.popup.isInputVisible('startDateTimeZoneEditor')).toBeTruthy(); + expect(POM.popup.isInputVisible('endDateTimeZoneEditor')).toBeTruthy(); }); it('should be hidden when editing.allowTimeZoneEditing is false', async () => { @@ -1013,8 +1013,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - expect(POM.popup.startTimeZone).toBeNull(); - expect(POM.popup.endTimeZone).toBeNull(); + expect(POM.popup.isInputVisible('startDateTimeZoneEditor')).toBeFalsy(); + expect(POM.popup.isInputVisible('endDateTimeZoneEditor')).toBeFalsy(); }); it('change of startTimeZone value should trigger endTimeZone value change', async () => { @@ -1025,15 +1025,10 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - // @ts-expect-error - const startTimeZoneSelectBox = $(POM.popup.startTimeZone).dxSelectBox('instance'); - // @ts-expect-error - const endTimeZoneSelectBox = $(POM.popup.endTimeZone).dxSelectBox('instance'); - - startTimeZoneSelectBox.option('value', 'America/Los_Angeles'); + POM.popup.setInputValue('startDateTimeZoneEditor', 'America/Los_Angeles'); - expect(startTimeZoneSelectBox.option('value')).toBe('America/Los_Angeles'); - expect(endTimeZoneSelectBox.option('value')).toBe('America/Los_Angeles'); + expect(POM.popup.getInputValue('startDateTimeZoneEditor')).toBe('America/Los_Angeles'); + expect(POM.popup.getInputValue('endDateTimeZoneEditor')).toBe('America/Los_Angeles'); }); it('change of endTimeZone value should not trigger startTimeZone value change', async () => { @@ -1044,16 +1039,11 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - // @ts-expect-error - const startTimeZoneSelectBox = $(POM.popup.startTimeZone).dxSelectBox('instance'); - // @ts-expect-error - const endTimeZoneSelectBox = $(POM.popup.endTimeZone).dxSelectBox('instance'); - - startTimeZoneSelectBox.option('value', 'America/Los_Angeles'); - endTimeZoneSelectBox.option('value', 'America/New_York'); + POM.popup.setInputValue('startDateTimeZoneEditor', 'America/Los_Angeles'); + POM.popup.setInputValue('endDateTimeZoneEditor', 'America/New_York'); - expect(startTimeZoneSelectBox.option('value')).toBe('America/Los_Angeles'); - expect(endTimeZoneSelectBox.option('value')).toBe('America/New_York'); + expect(POM.popup.getInputValue('startDateTimeZoneEditor')).toBe('America/Los_Angeles'); + expect(POM.popup.getInputValue('endDateTimeZoneEditor')).toBe('America/New_York'); }); }); @@ -1106,7 +1096,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(appointment); - const formItems = POM.popup.form.option('items') as FormItem[]; + const formItems = POM.popup.dxForm.option('items') as FormItem[]; const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem; const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem; @@ -1159,7 +1149,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(appointment); - const formItems = POM.popup.form.option('items') as FormItem[]; + const formItems = POM.popup.dxForm.option('items') as FormItem[]; const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem; const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem; @@ -1216,7 +1206,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(appointment); - const resourceEditor = POM.popup.form.getEditor('ownerId') as any; + const resourceEditor = POM.popup.dxForm.getEditor('ownerId') as any; expect(resourceEditor.NAME).toBe('dxTagBox'); expect(resourceEditor.option('value')).toEqual([1, 2]); }); @@ -1241,7 +1231,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(appointment); - const resourceEditor = POM.popup.form.getEditor('ownerId') as any; + const resourceEditor = POM.popup.dxForm.getEditor('ownerId') as any; expect(resourceEditor.NAME).toBe('dxSelectBox'); expect(resourceEditor.option('value')).toEqual(2); }); @@ -1302,7 +1292,7 @@ describe('Appointment Form', () => { expect(POM.popup.isRecurrenceGroupVisible()).toBe(false); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.isRecurrenceGroupVisible()).toBe(true); }); @@ -1318,17 +1308,12 @@ describe('Appointment Form', () => { const appointment = dataSource.items()[0]; scheduler.showAppointmentPopup(appointment); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); - const weekDayButtons = POM.popup.recurrenceWeekDayButtons; - expect(weekDayButtons).toBeTruthy(); + const weekDayButtons = $(POM.popup.recurrenceWeekDayButtons); + const disabledButtons = weekDayButtons?.find('.dx-button.dx-state-disabled'); - const firstButton = weekDayButtons?.querySelector('.dx-button'); - expect(firstButton).toBeTruthy(); - - // @ts-expect-error - const buttonInstance = $(firstButton).dxButton('instance'); - expect(buttonInstance?.option('disabled')).toBe(true); + expect(disabledButtons.length).toBe(7); }); it('should be visible after changing repeat editor\'s value', async () => { @@ -1337,29 +1322,28 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(); expect(POM.popup.isMainGroupVisible()).toBe(true); - expect(POM.popup.mainGroup?.getAttribute('inert')).toBeNull(); + expect(POM.popup.mainGroup.getAttribute('inert')).toBeNull(); expect(POM.popup.isRecurrenceGroupVisible()).toBe(false); - expect(POM.popup.recurrenceGroup?.getAttribute('inert')).toBe('true'); + expect(POM.popup.recurrenceGroup.getAttribute('inert')).toBe('true'); POM.popup.selectRepeatValue('weekly'); - await new Promise(process.nextTick); const popupHeight = POM.popup.component.option('height'); expect(popupHeight).toBeDefined(); expect(typeof popupHeight).toBe('number'); expect(POM.popup.isMainGroupVisible()).toBe(false); - expect(POM.popup.mainGroup?.getAttribute('inert')).toBe('true'); + expect(POM.popup.mainGroup.getAttribute('inert')).toBe('true'); expect(POM.popup.isRecurrenceGroupVisible()).toBe(true); - expect(POM.popup.recurrenceGroup?.getAttribute('inert')).toBeNull(); + expect(POM.popup.recurrenceGroup.getAttribute('inert')).toBeNull(); - POM.popup.getBackButton().click(); + POM.popup.backButton.click(); expect(POM.popup.component.option('height')).toBe('auto'); expect(POM.popup.isMainGroupVisible()).toBe(true); - expect(POM.popup.mainGroup?.getAttribute('inert')).toBeNull(); + expect(POM.popup.mainGroup.getAttribute('inert')).toBeNull(); expect(POM.popup.isRecurrenceGroupVisible()).toBe(false); - expect(POM.popup.recurrenceGroup?.getAttribute('inert')).toBe('true'); + expect(POM.popup.recurrenceGroup.getAttribute('inert')).toBe('true'); }); it('should open main form when opening recurring appointment', async () => { @@ -1374,7 +1358,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(appointment); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.isMainGroupVisible()).toBe(true); expect(POM.popup.isRecurrenceGroupVisible()).toBe(false); @@ -1391,11 +1375,11 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=HOURLY;INTERVAL=2;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Hourly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/1/2017'); expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('2'); @@ -1413,11 +1397,11 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=DAILY;INTERVAL=2;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Daily'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/1/2017'); expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('2'); @@ -1435,11 +1419,11 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Weekly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/1/2017'); expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('2'); @@ -1461,11 +1445,11 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=MONTHLY;INTERVAL=2;BYMONTHDAY=1;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Monthly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/1/2017'); expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('2'); @@ -1484,11 +1468,11 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=YEARLY;INTERVAL=2;BYMONTHDAY=1;BYMONTH=5;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); + POM.popup.editSeriesButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Yearly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/1/2017'); expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('2'); @@ -1508,8 +1492,8 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=DAILY;INTERVAL=2', repeatEnd: 'never', }); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceRepeatEndEditor')).toBe('never'); }); @@ -1524,8 +1508,8 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=DAILY;INTERVAL=2;UNTIL=20170601T000000Z', repeatEnd: 'until', }); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceRepeatEndEditor')).toBe('until'); expect(POM.popup.getInputValue('recurrenceEndUntilEditor')).toBe('6/1/2017'); @@ -1541,8 +1525,8 @@ describe('Appointment Form', () => { recurrenceRule: 'FREQ=DAILY;INTERVAL=2;COUNT=10', repeatEnd: 'count', }); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceRepeatEndEditor')).toBe('count'); expect(POM.popup.getInputValue('recurrenceEndCountEditor')).toBe('10 occurrence(s)'); @@ -1567,14 +1551,14 @@ describe('Appointment Form', () => { }; scheduler.showAppointmentPopup(appointment1); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); scheduler.hideAppointmentPopup(); scheduler.showAppointmentPopup(appointment2); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('repeatEditor')).toBe('Weekly'); expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/2/2017'); @@ -1604,11 +1588,11 @@ describe('Appointment Form', () => { POM.popup.setInputValue('recurrenceRepeatEndEditor', 'count'); POM.popup.setInputValue('recurrenceEndCountEditor', testCount); - POM.popup.getBackButton().click(); + POM.popup.backButton.click(); POM.popup.selectRepeatValue('weekly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceEndCountEditor')).toBe(`${testCount} occurrence(s)`); @@ -1630,11 +1614,11 @@ describe('Appointment Form', () => { POM.popup.setInputValue('recurrenceRepeatEndEditor', 'until'); POM.popup.setInputValue('recurrenceEndUntilEditor', testUntilDate); - POM.popup.getBackButton().click(); + POM.popup.backButton.click(); POM.popup.selectRepeatValue('weekly'); - POM.popup.openRecurrenceSettings(); + POM.popup.recurrenceSettingsButton.click(); expect(POM.popup.getInputValue('recurrenceEndUntilEditor')).toBe('6/16/2017'); @@ -1665,11 +1649,11 @@ describe('Appointment Form', () => { recurrenceRule, }); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); - const untilEditor = POM.popup.form.getEditor('recurrenceEndUntilEditor'); - const countEditor = POM.popup.form.getEditor('recurrenceEndCountEditor'); + const untilEditor = POM.popup.dxForm.getEditor('recurrenceEndUntilEditor'); + const countEditor = POM.popup.dxForm.getEditor('recurrenceEndCountEditor'); expect(untilEditor?.option('disabled')).toBe(repeatEndValue !== 'until'); expect(countEditor?.option('disabled')).toBe(repeatEndValue !== 'count'); @@ -1688,11 +1672,11 @@ describe('Appointment Form', () => { }); scheduler.showAppointmentPopup(recurringAppointment); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); - const frequencyEditor = POM.popup.form.getEditor('recurrencePeriodEditor'); - const frequencyEditorInputElement = POM.popup.getInput('recurrencePeriodEditor').get(0) as HTMLElement; + const frequencyEditor = POM.popup.dxForm.getEditor('recurrencePeriodEditor'); + const frequencyEditorInputElement = POM.popup.getInput('recurrencePeriodEditor'); frequencyEditor?.option('value', 'yearly'); @@ -1709,10 +1693,10 @@ describe('Appointment Form', () => { }); scheduler.showAppointmentPopup(recurringAppointment); - POM.popup.getEditSeriesButton().click(); - POM.popup.openRecurrenceSettings(); + POM.popup.editSeriesButton.click(); + POM.popup.recurrenceSettingsButton.click(); - const frequencyEditorInputElement = POM.popup.getInput('recurrencePeriodEditor').get(0) as HTMLElement; + const frequencyEditorInputElement = POM.popup.getInput('recurrencePeriodEditor'); frequencyEditorInputElement.click(); jest.useFakeTimers(); @@ -1732,9 +1716,7 @@ describe('Appointment Form', () => { POM.popup.selectRepeatValue('weekly'); const dayButtonsMonday = $(POM.popup.recurrenceWeekDayButtons).find('.dx-button'); - expect(dayButtonsMonday.length).toBe(7); - expect(dayButtonsMonday.eq(0).text()).toBe('M'); - expect(dayButtonsMonday.eq(6).text()).toBe('S'); + expect(dayButtonsMonday.text()).toBe('MTWTFSS'); scheduler.hideAppointmentPopup(); scheduler.option('firstDayOfWeek', 0); @@ -1743,10 +1725,7 @@ describe('Appointment Form', () => { POM.popup.selectRepeatValue('weekly'); const dayButtonsSunday = $(POM.popup.recurrenceWeekDayButtons).find('.dx-button'); - expect(dayButtonsSunday.length).toBe(7); - expect(dayButtonsSunday.eq(0).text()).toBe('S'); - expect(dayButtonsSunday.eq(1).text()).toBe('M'); - expect(dayButtonsSunday.eq(6).text()).toBe('S'); + expect(dayButtonsSunday.text()).toBe('SMTWTFS'); }); it('should apply firstDayOfWeek to recurrence form startDate calendar', async () => { @@ -1755,7 +1734,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); POM.popup.selectRepeatValue('weekly'); - const recurrenceStartDateEditor = POM.popup.form.getEditor('recurrenceStartDateEditor'); + const recurrenceStartDateEditor = POM.popup.dxForm.getEditor('recurrenceStartDateEditor'); expect(recurrenceStartDateEditor).toBeDefined(); expect(recurrenceStartDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1); @@ -1764,7 +1743,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); POM.popup.selectRepeatValue('weekly'); - const recurrenceStartDateEditorAfter = POM.popup.form.getEditor('recurrenceStartDateEditor'); + const recurrenceStartDateEditorAfter = POM.popup.dxForm.getEditor('recurrenceStartDateEditor'); expect(recurrenceStartDateEditorAfter).toBeDefined(); expect(recurrenceStartDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0); }); @@ -1774,7 +1753,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const startDateEditor = POM.popup.form.getEditor('startDateEditor'); + const startDateEditor = POM.popup.dxForm.getEditor('startDateEditor'); expect(startDateEditor).toBeDefined(); expect(startDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1); @@ -1782,7 +1761,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const startDateEditorAfter = POM.popup.form.getEditor('startDateEditor'); + const startDateEditorAfter = POM.popup.dxForm.getEditor('startDateEditor'); expect(startDateEditorAfter).toBeDefined(); expect(startDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0); }); @@ -1792,7 +1771,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const endDateEditor = POM.popup.form.getEditor('endDateEditor'); + const endDateEditor = POM.popup.dxForm.getEditor('endDateEditor'); expect(endDateEditor).toBeDefined(); expect(endDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1); @@ -1800,7 +1779,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const endDateEditorAfter = POM.popup.form.getEditor('endDateEditor'); + const endDateEditorAfter = POM.popup.dxForm.getEditor('endDateEditor'); expect(endDateEditorAfter).toBeDefined(); expect(endDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0); }); @@ -1874,8 +1853,8 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const mainFormIcons = POM.popup.mainGroup?.querySelectorAll(`.${CLASSES.icon}`) ?? []; - const recurrenceFormIcons = POM.popup.recurrenceGroup?.querySelectorAll(`.${CLASSES.icon}`) ?? []; + const mainFormIcons = POM.popup.mainGroup.querySelectorAll(`.${CLASSES.icon}`); + const recurrenceFormIcons = POM.popup.recurrenceGroup.querySelectorAll(`.${CLASSES.icon}`); expect(mainFormIcons.length).toBe(4); expect(recurrenceFormIcons.length).toBe(3); @@ -1949,7 +1928,7 @@ describe('Appointment Form', () => { const addAppointmentSpy = jest.spyOn(scheduler, 'addAppointment'); scheduler.showAppointmentPopup({ ...commonAppointment }, true); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(addAppointmentSpy).toHaveBeenCalledTimes(1); expect(addAppointmentSpy).toHaveBeenCalledWith( @@ -1964,7 +1943,7 @@ describe('Appointment Form', () => { }); scheduler.showAppointmentPopup({ ...commonAppointment }, true); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); const dataSource = (scheduler as any).getDataSource(); expect(dataSource.items().length).toBe(0); @@ -1977,7 +1956,7 @@ describe('Appointment Form', () => { }); scheduler.showAppointmentPopup({ ...commonAppointment }, true); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); const dataSource = (scheduler as any).getDataSource(); expect(dataSource.items().length).toBe(1); @@ -1997,7 +1976,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(updatedItem); POM.popup.setInputValue('subjectEditor', 'Updated Subject'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(updateAppointmentSpy).toHaveBeenCalledTimes(1); expect(updateAppointmentSpy).toHaveBeenCalledWith(updatedItem, updatedItem); @@ -2014,7 +1993,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(updatedItem); POM.popup.setInputValue('subjectEditor', 'Updated Subject'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toEqual(commonAppointment); }); @@ -2030,7 +2009,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(updatedItem); POM.popup.setInputValue('subjectEditor', 'New Subject'); - POM.popup.getSaveButton().click(); + POM.popup.saveButton.click(); expect(dataSource.items()[0]).toEqual({ allDay: false, @@ -2097,7 +2076,7 @@ describe('Appointment Form', () => { const expectedEndDate = new Date(expectedStartDate.getTime() + scheduler.option('cellDuration') * toMilliseconds('minute')); expect(POM.popup.component.option('visible')).toBe(true); - expect(POM.popup.form.option('formData')).toEqual({ + expect(POM.popup.dxForm.option('formData')).toEqual({ text: undefined, allDay: false, startDate: expectedStartDate, @@ -2114,7 +2093,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); expect(POM.popup.component.option('visible')).toBe(true); - expect(POM.popup.form.option('formData')).toMatchObject({ + expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...commonAppointment, }); }); @@ -2188,7 +2167,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formHeight = form.option('height') as number; expect(formHeight).toBe(500); @@ -2209,7 +2188,7 @@ describe('Appointment Form', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formHeight = form.option('height') as number; const elementAttr = form.option('elementAttr') as { class?: string; id?: string }; const { class: className, id } = elementAttr; @@ -2247,7 +2226,7 @@ describe('Appointment Popup', () => { POM.openPopupByDblClick('common-app'); expect(POM.isPopupVisible()).toBe(true); - expect(POM.popup.form.option('formData')).toMatchObject({ ...commonAppointment }); + expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...commonAppointment }); }); it('should open on tooltip click', async () => { @@ -2265,7 +2244,24 @@ describe('Appointment Popup', () => { POM.getTooltipAppointment()?.click(); expect(POM.isPopupVisible()).toBe(true); - expect(POM.popup.form.option('formData')).toMatchObject({ ...commonAppointment }); + expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...commonAppointment }); + }); + + it('should focus appointment after closing popup', async () => { + const { POM, keydown } = await createScheduler({ + ...getDefaultConfig(), + dataSource: [{ ...recurringAppointment }], + }); + + const appointmentElement = POM.getAppointment('recurring-app').element as HTMLElement; + appointmentElement.focus(); + + jest.useFakeTimers(); + keydown(appointmentElement, 'Enter'); + POM.popup.closeButton.click(); + jest.runAllTimers(); + + expect(appointmentElement?.classList.contains('dx-state-focused')).toBe(true); }); describe('Toolbar', () => { @@ -2318,27 +2314,8 @@ describe('Appointment Popup', () => { const toolbarItems = POM.popup.component.option('toolbarItems') ?? []; - expect(toolbarItems).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - shortcut: 'cancel', - }), - ]), - ); - - const doneButtonMatcher = expect.arrayContaining([ - expect.objectContaining({ - shortcut: 'done', - }), - ]); - - if (shouldHaveSaveButton) { - expect(toolbarItems).toEqual(doneButtonMatcher); - } else { - expect(toolbarItems).not.toEqual(doneButtonMatcher); - } - - await POM.popup.component.hide(); + expect(toolbarItems.some((i) => (i as any).shortcut === 'cancel')).toBe(true); + expect(toolbarItems.some((i) => (i as any).shortcut === 'done')).toBe(shouldHaveSaveButton); }); it.each([ @@ -2352,41 +2329,24 @@ describe('Appointment Popup', () => { const { scheduler, POM } = await createScheduler({ ...getDefaultConfig(), editing: { allowUpdating }, - dataSource: [{ ...commonAppointment }, { ...disabledAppointment }], + dataSource: [], }); - const dataSource = (scheduler as any).getDataSource(); - const appointment = disabled ? dataSource.items()[1] : dataSource.items()[0]; - scheduler.showAppointmentPopup(appointment); - scheduler.showAppointmentPopup(disabled ? disabledAppointment : commonAppointment); + scheduler.showAppointmentPopup({ + ...recurringAppointment, + disabled, + }); - POM.popup.selectRepeatValue('daily'); + if (allowUpdating) { + POM.popup.editSeriesButton.click(); + } - await new Promise(process.nextTick); + POM.popup.recurrenceSettingsButton.click(); const toolbarItems = POM.popup.component.option('toolbarItems') ?? []; - expect(toolbarItems).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - shortcut: 'cancel', - }), - ]), - ); - - const doneButtonMatcher = expect.arrayContaining([ - expect.objectContaining({ - shortcut: 'done', - }), - ]); - - if (shouldHaveSaveButton) { - expect(toolbarItems).toEqual(doneButtonMatcher); - } else { - expect(toolbarItems).not.toEqual(doneButtonMatcher); - } - - await POM.popup.component.hide(); + expect(toolbarItems.some((i) => (i as any).shortcut === 'cancel')).toBe(true); + expect(toolbarItems.some((i) => (i as any).shortcut === 'done')).toBe(shouldHaveSaveButton); }); it('Buttons visibility after editing option changed', async () => { @@ -2752,25 +2712,15 @@ describe('Appointment Popup', () => { describe('Appointment Popup Content', () => { it.todo('appointmentPopup should not prevent mouse/touch events by default (T968188)'); - it.todo('showAppointmentPopup method with passed a recurrence appointment should render popup(T698732)'); it.todo('showAppointmentPopup should render a popup only once'); it.todo('showAppointmentPopup should work correctly after scheduler repainting'); it.todo('changing editing should work correctly after showing popup'); it.todo('showAppointmentPopup should render a popup form only once'); - it.todo('popup should have right height'); it.todo('showAppointmentPopup should render a popup content only once'); - it.todo('Popup should contain editors and components with right dx-rtl classes and rtlEnabled option value'); - it.todo('Popup should contains caption textbox with right value'); - it.todo('Confirm dialog should be shown when showAppointmentPopup for recurrence appointment was called'); - it.todo('Recurrence Editor should have right freq editor value if recurrence rule was set on init'); - it.todo('Popup should contain recurrence editor with right config'); - it.todo('Recurrence editor should change value if freq editor value changed'); it.todo('Recurrence editor should has right startDate after form items change'); it.todo('There are no exceptions when select date on the appointment popup,if dates are undefined'); it.todo('Validate works always before done click'); it.todo('Load panel should not be shown if validation is fail'); - it.todo('Done button default configuration should be correct'); - it.todo('Done button custom configuration should be correct'); it.todo('Load panel should be hidden if event validation fail'); it.todo('Load panel should be hidden at the second appointment form opening'); }); @@ -2808,7 +2758,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems).toBeDefined(); @@ -2829,7 +2779,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length ?? 0).toBe(0); @@ -2849,7 +2799,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); @@ -2870,7 +2820,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); @@ -2891,7 +2841,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); @@ -2916,7 +2866,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; const mainGroup = formItems?.[0] as GroupItem; @@ -2939,7 +2889,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length ?? 0).toBe(1); @@ -2961,16 +2911,11 @@ describe('Customize form items', () => { }); scheduler.showAppointmentPopup(); - const recurrenceGroup = $(POM.popup.recurrenceGroup); POM.popup.selectRepeatValue('weekly'); - await new Promise(process.nextTick); - - const mainGroup = $(POM.popup.mainGroup); - - expect(mainGroup.hasClass(CLASSES.mainGroupHidden)).toBe(true); - expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(false); + expect(POM.popup.isMainGroupVisible()).toBe(false); + expect(POM.popup.isRecurrenceGroupVisible()).toBe(true); expect(onContentReady).toHaveBeenCalled(); expect(onInitialized).toHaveBeenCalled(); @@ -2996,8 +2941,6 @@ describe('Customize form items', () => { POM.popup.selectRepeatValue('weekly'); - await new Promise(process.nextTick); - expect(POM.popup.isMainGroupVisible()).toBe(false); expect(POM.popup.isRecurrenceGroupVisible()).toBe(true); @@ -3020,7 +2963,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(0); }); @@ -3039,7 +2982,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); expect((formItems?.[0] as GroupItem)?.name).toBe('mainGroup'); @@ -3059,7 +3002,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); expect(formItems?.[0]?.visible).toBe(false); @@ -3082,7 +3025,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; const mainGroup = formItems?.[0] as GroupItem; expect(mainGroup?.items?.length).toBe(2); @@ -3104,7 +3047,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(1); }); @@ -3123,7 +3066,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBeGreaterThan(0); }); @@ -3145,7 +3088,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; expect(formItems?.length).toBe(2); expect((formItems?.[0] as any)?.name).toBe('mainGroup'); @@ -3170,7 +3113,7 @@ describe('Customize form items', () => { scheduler.showAppointmentPopup(commonAppointment); - const { form } = POM.popup; + const { dxForm: form } = POM.popup; const formItems = form.option('items') as FormItem[]; const mainGroup = formItems?.[0] as any; expect(mainGroup?.items?.length).toBe(0); diff --git a/packages/devextreme/js/__internal/scheduler/m_recurrence_focus.integration.test.ts b/packages/devextreme/js/__internal/scheduler/m_recurrence_focus.integration.test.ts deleted file mode 100644 index 9d7fbeca21a0..000000000000 --- a/packages/devextreme/js/__internal/scheduler/m_recurrence_focus.integration.test.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { - afterEach, describe, expect, it, jest, -} from '@jest/globals'; - -import { createScheduler } from './__tests__/__mock__/create_scheduler'; -import { setupSchedulerTestEnvironment } from './__tests__/__mock__/m_mock_scheduler'; - -describe('Recurrence focus restore', () => { - afterEach(() => { - jest.useRealTimers(); - }); - - it('should restore focus on appointment after closing recurrence dialog and allow reopening with Enter', async () => { - setupSchedulerTestEnvironment(); - - const { POM, keydown } = await createScheduler({ - timeZone: 'Etc/UTC', - dataSource: [{ - text: 'Recurring meeting', - startDate: new Date('2021-02-02T09:00:00.000Z'), - endDate: new Date('2021-02-02T10:00:00.000Z'), - recurrenceRule: 'FREQ=DAILY', - }], - currentDate: new Date('2021-02-02T10:00:00.000Z'), - }); - jest.useFakeTimers(); - - const appointment = POM.getAppointment('Recurring meeting'); - const appointmentEl = appointment.element as HTMLElement; - - appointmentEl.focus(); - keydown(appointmentEl, 'Enter'); - - POM.popup.getCloseButton().click(); - jest.runAllTimers(); - - expect(appointmentEl.classList.contains('dx-state-focused')).toBe(true); - }); -}); diff --git a/packages/testcafe-models/scheduler/appointment/popup.ts b/packages/testcafe-models/scheduler/appointment/popup.ts index 404903c9b713..4e8619c042f8 100644 --- a/packages/testcafe-models/scheduler/appointment/popup.ts +++ b/packages/testcafe-models/scheduler/appointment/popup.ts @@ -28,16 +28,14 @@ export const SELECTORS = { backButton: `.dx-button.dx-widget[aria-label="Back"]`, recurrenceStartDateInput: '.dx-scheduler-form-recurrence-start-date-editor input[type="text"]', recurrenceFrequencyEditor: '.dx-scheduler-form-recurrence-frequency-editor .dx-selectbox.dx-widget', - repeatEditorButton: '.dx-scheduler-form-repeat-editor .dx-button-has-icon', recurrenceSettingsButton: '.dx-scheduler-form-recurrence-settings-button', - repeatEveryInput: '.dx-scheduler-form-recurrence-settings-group [type="text"]', weekDayButtons: '.dx-scheduler-days-of-week-buttons .dx-button', monthDayInput: '.dx-scheduler-form-day-of-month-group [type="text"]', yearlyMonthInput: '.dx-scheduler-form-recurrence-by-month-editor .dx-selectbox.dx-widget', recurrenceEndRadioGroup: '.dx-scheduler-form-recurrence-end-editors', recurrenceEndInputGroup: '.dx-scheduler-form-recurrence-end-group', dayOfMonthInput: '.dx-scheduler-form-day-of-month-editor input[type="text"]', - listOption: '.dx-list-item', + listItem: '.dx-list-item', }; export default class AppointmentPopup { @@ -63,6 +61,7 @@ export default class AppointmentPopup { endTimeZoneEditor: SelectBox = new SelectBox(this.contentElement.find(SELECTORS.endTimeZoneEditor)); repeatEditor: SelectBox = new SelectBox(this.contentElement.find(SELECTORS.repeatEditor)); + recurrenceSettingsButton: Button = new Button(this.repeatEditor.element.find(SELECTORS.recurrenceSettingsButton)); descriptionEditor: TextArea = new TextArea(this.contentElement.find(SELECTORS.descriptionEditor)); @@ -71,9 +70,6 @@ export default class AppointmentPopup { group: Selector(SELECTORS.recurrenceGroup), startDateInput: Selector(SELECTORS.recurrenceStartDateInput), frequencyEditor: Selector(SELECTORS.recurrenceFrequencyEditor), - settingsButton: Selector(SELECTORS.recurrenceSettingsButton), - repeatEditorButton: Selector(SELECTORS.repeatEditorButton), - repeatEveryInput: Selector(SELECTORS.repeatEveryInput), weekDayButtons: Selector(SELECTORS.weekDayButtons), monthDayInput: Selector(SELECTORS.monthDayInput), yearlyMonthInput: Selector(SELECTORS.yearlyMonthInput), @@ -83,57 +79,17 @@ export default class AppointmentPopup { constructor(private readonly scheduler: Selector) { } - async openRecurrenceForm(t: TestController, freq = 'Daily'): Promise { + async selectRepeatValue(t: TestController, freq = 'Daily'): Promise { await t.click(this.repeatEditor.element); - const option = Selector(SELECTORS.listOption).withText(freq); - await t.click(option); + const listItem = Selector(SELECTORS.listItem).withText(freq); + await t.click(listItem); await t.wait(500); } - async openRecurrenceSettings(t: TestController): Promise { - await t.click(this.recurrence.settingsButton); + async clickRecurrenceSettingsButton(t: TestController): Promise { + await t.click(this.recurrenceSettingsButton.element); await t.wait(500); } - - async setRecurrenceInterval(t: TestController, interval: number): Promise { - await t - .selectText(this.recurrence.repeatEveryInput) - .typeText(this.recurrence.repeatEveryInput, interval.toString(), { replace: true }); - } - - async selectRecurrenceWeekDays(t: TestController, daysIndex: number[]): Promise { - const buttonsCount = await this.recurrence.weekDayButtons.count; - - for (let index = 0; index < buttonsCount; index++) { - const button = this.recurrence.weekDayButtons.nth(index); - const isActive = await button.hasClass('dx-button-mode-contained'); - const shouldBeActive = daysIndex.includes(index); - - if (isActive !== shouldBeActive) { - await t.click(button); - } - } - } - - async setRecurrenceMonthDay(t: TestController, day: number): Promise { - await t - .selectText(this.recurrence.monthDayInput) - .typeText(this.recurrence.monthDayInput, day.toString(), { replace: true }); - } - - async setRecurrenceYearlyMonth(t: TestController, month: string): Promise { - await t.click(this.recurrence.yearlyMonthInput); - - const option = Selector(SELECTORS.listOption).withText(month); - await t.click(option); - } - - async setRecurrenceYearlyDate(t: TestController, month: string, day: number): Promise { - await this.setRecurrenceYearlyMonth(t, month); - await t - .selectText(SELECTORS.dayOfMonthInput) - .typeText(SELECTORS.dayOfMonthInput, day.toString(), { replace: true }); - } }