Scheduler — Fix slide animation overlapping items outside mainGroup

[aleksei-semikozov]

No description provided.

[Tucchhaa]

It wasn't clear to me why animationTop should be 50px if there's no form customization, until I saw that getBoundingClientRect is mocked with some special values.

I suggest to write a functional testcafe test with form customization, so that we wouldn't need to mock getBoundingClient rect and the test would become more clear.

[aleksei-semikozov]

Prefer Jest here — CSS animation timing makes TestCafe tests flaky + any changed css or fonts break TestCafe test.
The test verifies the --dx-scheduler-animation-top value is calculated correctly, which is the actual behavior we care about.
The mock makes the expected value deterministic. If you feel the mock setup needs more clarity, happy to add a comment explaining the mocked rect values.

I suggest extending setupSchedulerTestEnvironment with classRects option so the rect values are explicit right in the test:

it('should set animation offset when custom item is placed before mainGroup', async () => {
  setupSchedulerTestEnvironment({
    height: 600,
    classRects: {
      'dx-scheduler-form-main-group': { top: 50, height: 50, bottom: 100 },
    },
  });

  const { scheduler, POM } = await createScheduler(getDefaultConfig());

  scheduler.showAppointmentPopup();
  POM.popup.selectRepeatValue('weekly');

  const animationTop = POM.popup.dxForm.element().style.getPropertyValue('--dx-scheduler-animation-top');
  expect(animationTop).toBe('50px'); // mainGroup starts 50px from form top
});