Scheduler(T1220324): resets data when Repeat switch is toggled (DevEx…

…press#27216)

js/__internal/scheduler/appointment_popup/m_form.ts

@@ -52,7 +52,6 @@ const validateAppointmentFormDate = (editor, value, previousValue) => {
 
 const updateRecurrenceItemVisibility = (recurrenceRuleExpr, value, form) => {
   form.itemOption(APPOINTMENT_FORM_GROUP_NAMES.Recurrence, 'visible', value);
-  !value && form.updateData(recurrenceRuleExpr, '');
   form.getEditor(recurrenceRuleExpr)?.changeValueByVisibility(value);
 };
 

js/__internal/scheduler/appointment_popup/m_popup.ts

@@ -246,11 +246,17 @@ export class AppointmentPopup {
         return;
       }
 
+      const { repeat } = this.form.formData;
       const adapter = this._createAppointmentAdapter(this.form.formData);
       const clonedAdapter = adapter.clone({ pathTimeZone: 'fromAppointment' } as any); // TODO:
+      const shouldClearRecurrenceRule = !repeat && !!clonedAdapter.recurrenceRule;
 
       this._addMissingDSTTime(adapter, clonedAdapter);
 
+      if (shouldClearRecurrenceRule) {
+        clonedAdapter.recurrenceRule = '';
+      }
+
       const appointment = clonedAdapter.source();
       delete appointment.repeat; // TODO
 

testing/testcafe/model/scheduler/appointment/popup.ts

@@ -21,6 +21,8 @@ export const CLASS = {
   endDateTimeZoneEditor: 'e2e-dx-scheduler-form-end-date-timezone',
   allDaySwitch: 'e2e-dx-scheduler-form-all-day-switch',
   recurrenceSwitch: 'e2e-dx-scheduler-form-recurrence-switch',
+  selectItem: 'dx-list-item',
+  radioButton: 'dx-radiobutton',
 };
 export const SELECTORS = {
   textInput: `.${CLASS.textEditor} .${CLASS.textEditorInput}`,
@@ -62,6 +64,8 @@ export default class AppointmentPopup {
 
   freqElement = this.wrapper.find('.dx-recurrence-selectbox-freq .dx-selectbox');
 
+  recurrenceTypeElement = this.wrapper.find(`.${CLASS.recurrenceEditor} .${CLASS.textEditorInput}`).nth(0);
+
   endRepeatDateElement = this.wrapper.find(`.${CLASS.recurrenceEditor} .${CLASS.textEditorInput}`).nth(2);
 
   repeatEveryElement = this.wrapper.find(`.${CLASS.recurrenceEditor} .${CLASS.textEditorInput}`).nth(1);
@@ -87,4 +91,16 @@ export default class AppointmentPopup {
   getRecurrenceRuleSwitchValue(): Promise<string | undefined> {
     return this.recurrenceElement.find('input[type="hidden"]').value;
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  getRecurrenceTypeSelectItem(nth = 0): Selector {
+    return Selector(`.${CLASS.overlayWrapper}`)
+      .nth(1)
+      .find(`.${CLASS.selectItem}`)
+      .nth(nth);
+  }
+
+  getEndRepeatRadioButton(nth = 0): Selector {
+    return this.wrapper.find(`.${CLASS.radioButton}`).nth(nth);
+  }
 }

testing/testcafe/tests/scheduler/appointmentForm/recurrenceEditor.ts

@@ -0,0 +1,129 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Scheduler from '../../../model/scheduler/index';
+import AppointmentPopup from '../../../model/scheduler/appointment/popup';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Appointment Form: recurrence editor`
+  .page(url(__dirname, '../../container.html'));
+
+const SCHEDULER_SELECTOR = '#container';
+
+const fillRecurrenceForm = async (t: TestController, popup: AppointmentPopup): Promise<void> => {
+  await t.click(popup.recurrenceTypeElement);
+  await t.click(popup.getRecurrenceTypeSelectItem(2));
+  await t.typeText(popup.repeatEveryElement, '10', { replace: true });
+  await t.click(popup.getEndRepeatRadioButton(1));
+  await t.typeText(popup.endRepeatDateElement, '01/01/2024', { replace: true });
+};
+
+test('Should not reset the recurrence editor value after the repeat toggling', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const popup = scheduler.appointmentPopup;
+  const cell = scheduler.getDateTableCell(0, 0);
+
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+  await fillRecurrenceForm(t, popup);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.recurrenceElement);
+
+  await takeScreenshot('recurrence-editor_after-hide.png', popup.form);
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: '2024-01-01T10:00:00',
+  });
+});
+
+test('Should reset the recurrence editor value after the popup reopening', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const popup = scheduler.appointmentPopup;
+  const cell = scheduler.getDateTableCell(0, 0);
+
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+  await fillRecurrenceForm(t, popup);
+  await t.click(popup.cancelButton);
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+
+  await takeScreenshot('recurrence-editor_after-popup-reopen.png', popup.form);
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: '2024-01-01T10:00:00',
+  });
+});
+
+test('Should correctly create usual appointment after repeat toggling', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const popup = scheduler.appointmentPopup;
+  const cell = scheduler.getDateTableCell(0, 0);
+
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.doneButton);
+
+  await t.expect(scheduler.getAppointmentCount()).eql(1);
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: '2024-01-01T10:00:00',
+  });
+});
+
+test('Should correctly create recurrent appointment', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const popup = scheduler.appointmentPopup;
+  const cell = scheduler.getDateTableCell(0, 0);
+
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.doneButton);
+
+  await t.expect(scheduler.getAppointmentCount()).eql(7);
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: '2024-01-01T10:00:00',
+  });
+});
+
+test('Should correctly create recurrent appointment after repeat toggle', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const popup = scheduler.appointmentPopup;
+  const cell = scheduler.getDateTableCell(0, 0);
+
+  await t.doubleClick(cell);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.recurrenceElement);
+  await t.click(popup.doneButton);
+
+  await t.expect(scheduler.getAppointmentCount()).eql(7);
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: '2024-01-01T10:00:00',
+  });
+});