Skip to content

Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing#32278

Open
aleksei-semikozov wants to merge 16 commits intoDevExpress:26_1from
aleksei-semikozov:Devextreme_2683
Open

Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing#32278
aleksei-semikozov wants to merge 16 commits intoDevExpress:26_1from
aleksei-semikozov:Devextreme_2683

Conversation

@aleksei-semikozov
Copy link
Contributor

No description provided.

@aleksei-semikozov aleksei-semikozov requested a review from a team as a code owner January 22, 2026 13:52
Copilot AI review requested due to automatic review settings January 22, 2026 13:52
@aleksei-semikozov aleksei-semikozov self-assigned this Jan 22, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates QUnit test themes to align scheduler and related tests with the Fluent theme, phasing out Generic theme usage in those suites.

Changes:

  • Replace generic_light.css! with fluent_blue_light.css! in multiple scheduler QUnit test files to ensure compatibility with the Fluent theme.
  • Update pivot grid QUnit tests to use the Fluent theme CSS.
  • Update the Knockout-based scheduler test suite to load the Fluent theme instead of the Generic theme.

Reviewed changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js Switches scheduler workspace horizontal scroll tests from Generic to Fluent theme CSS import.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.week.tests.js Switches week workspace scheduler tests to import Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.month.tests.js Switches month workspace scheduler tests to import Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js Switches base workspace scheduler tests to import Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.api.tests.js Switches workspace API scheduler tests to import Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.timeline.tests.js Switches scheduler virtual scrolling timeline tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.monthView.tests.js Switches scheduler virtual scrolling month view tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js Switches scheduler virtual scrolling integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.cellTemplate.tests.js Switches scheduler cell template view tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timezones.tests.js Switches scheduler timezone tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js Switches scheduler timeline view tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/subscribes.tests.js Switches scheduler subscribes tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/pacificTime.tests.js Switches Pacific time–related scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js Switches scheduler layout manager tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.workSpace.tests.js Switches workspace integration scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js Switches scheduler resource integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js Switches recurring appointments scheduler integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.multiWeekAppointments.tests.js Switches multi-week appointments scheduler integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentsVertical.tests.js Switches vertical appointments scheduler integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js Switches cross-scrolling-enabled appointments integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js Switches scheduler appointment tooltip integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentCollector.tests.js Switches scheduler appointment collector integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.agenda.tests.js Switches scheduler agenda integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.RTL.tests.js Switches RTL scheduler integration tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/dragAndDropAppointments.tests.js Switches drag-and-drop appointments scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/currentTimeIndicator.tests.js Switches current time indicator scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/contentReadyEvent.tests.js Switches content ready event scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js Switches common scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.options.tests.js Switches common options scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js Switches scheduler initialization tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js Switches week-based appointment view scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.timeLines.tests.js Switches appointment timeline scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.templates.tests.js Switches appointment template scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.scroll.tests.js Switches appointment scroll behavior scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.monthView.tests.js Switches appointment month view scheduler tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-1.tests.js Switches one of the all-day appointments common scheduler test files to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-0.tests.js Switches the other all-day appointments common scheduler test file to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js Switches core pivot grid tests to import Fluent theme CSS instead of Generic.
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/export.tests.js Switches pivot grid export tests to Fluent theme CSS.
packages/devextreme/testing/tests/DevExpress.knockout/scheduler.tests.js Switches Knockout-based scheduler tests to require the Fluent theme CSS instead of Generic.

@aleksei-semikozov aleksei-semikozov force-pushed the Devextreme_2683 branch 2 times, most recently from 0843ddb to d761efa Compare January 22, 2026 15:46
Copilot AI review requested due to automatic review settings January 22, 2026 15:46
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 40 out of 40 changed files in this pull request and generated no new comments.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Copilot AI review requested due to automatic review settings February 5, 2026 22:24
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Comment on lines +11 to +19
function checkDxFontIcon(assert, dxIconSelector, expectedIconCode) {
const FLUENT_BASE_ICON_SIZE = 20;

const iconBeforeElementStyle = getComputedStyle($(dxIconSelector).get(0), ':before');
assert.strictEqual(iconBeforeElementStyle.content.charCodeAt(1), expectedIconCode, `icon code (${dxIconSelector})`);
const iconElementStyle = getComputedStyle($(dxIconSelector).get(0));
assert.strictEqual(iconElementStyle.width, FLUENT_BASE_ICON_SIZE + 'px', `icon element width (${dxIconSelector})`);
assert.strictEqual(iconElementStyle.height, FLUENT_BASE_ICON_SIZE + 'px', `icon element height (${dxIconSelector})`);
}
Copy link

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The checkDxFontIcon function has been duplicated from the helper file and modified to use FLUENT_BASE_ICON_SIZE (20px) instead of GENERIC_BASE_ICON_SIZE (18px). This duplication creates maintenance issues. Consider either updating the helper file to support both themes, or creating a separate theme-specific helper file that can be imported and reused across test files.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 6, 2026 14:36
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.


scheduler.instance.option('dataSource', items);
await waitForAsync(() => scheduler.appointments.getAppointments().length === 3);
// moveSchedulerToMainBlock();
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the leftover commented-out call to moveSchedulerToMainBlock(). It’s not defined/used anywhere in this file and keeping a commented invocation makes the test harder to maintain and can confuse future readers about required setup.

Suggested change
// moveSchedulerToMainBlock();

Copilot uses AI. Check for mistakes.
Comment on lines 327 to 329
assert.equal($dropDown.parent().get(0), $(scheduler.instance.$element()).find('.dx-scheduler-all-day-appointments').get(0), 'Container is OK');
assert.roughEqual(translator.locate($dropDown).left, 128, 1.001, 'Appointment position is OK');
assert.roughEqual(translator.locate($dropDown).left, 133.28125, 1.001, 'Appointment position is OK');
assert.roughEqual(translator.locate($dropDown).top, 0, 1.001, 'Appointment position is OK');
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This assertion relies on a hard-coded fractional pixel value (133.28125) which is likely to vary across browsers/devicePixelRatio/font rendering. Prefer deriving the expected left position from scheduler cell metrics (e.g., cell width/offset) or rounding the actual value before comparing to a stable expected value.

Copilot uses AI. Check for mistakes.
Comment on lines +3767 to +3771
assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 303) <= 1);

const tableElement = pivotGrid.$element().find('table').first();
assert.strictEqual(getOuterWidth(tableElement), 500);
assert.strictEqual(Math.round(getOuterHeight(tableElement)), 250);
assert.strictEqual(Math.round(getOuterHeight(tableElement)), 303);
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test sets height: 300 but then asserts an absolute rendered height of 303. This hard-coded offset is theme/layout dependent and makes the test brittle. Consider asserting relative to the configured height (e.g., allow for borders via computed border widths) or using a looser, intention-revealing check that the rendered height matches the option within an expected delta.

Copilot uses AI. Check for mistakes.

assert.ok(250 - getOuterHeight(tableElement) <= 1 && 250 - getOuterHeight(tableElement) >= 0, 'height');
assert.strictEqual(getWidth(tableElement), 1200, 'width');
assert.roughEqual(getOuterHeight(pivotGrid.$element().children()[0]), 353, 1);
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

height is configured as 350 above, but the test asserts a fixed rendered height of 353. Encoding a theme-specific offset as a magic number can make this test fragile across theme tweaks. Consider computing the expected value from the configured height plus measured borders/padding, or assert that the rendered height is approximately the configured height within a small delta.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 6, 2026 15:45
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

Copilot AI review requested due to automatic review settings February 6, 2026 16:30
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

assert.roughEqual(scheduler.appointments.getAppointmentPosition(3).top, 100, 1.001, 'Appointment position is OK');
assert.roughEqual(scheduler.appointments.getAppointmentWidth(3), cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET, 1.001, 'Appointment size is OK');
assert.roughEqual(scheduler.appointments.getAppointmentPosition(3).top, 76, 1.001, 'Appointment position is OK');
assert.roughEqual(scheduler.appointments.getAppointmentWidth(3), cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET, 5, 'Appointment size is OK');
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tolerance for this assertion was significantly increased from 1.001 to 5, which is approximately 5 times looser. This large increase in tolerance could indicate underlying instability in the test or measurement inconsistencies with the Fluent theme. Consider investigating whether this tolerance can be tightened by using a more stable measurement or fixing the root cause of the variability. If the Fluent theme genuinely produces more variable widths, document why this larger tolerance is necessary.

Suggested change
assert.roughEqual(scheduler.appointments.getAppointmentWidth(3), cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET, 5, 'Appointment size is OK');
const appointmentWidth = scheduler.appointments.getAppointmentWidth(3);
assert.roughEqual(
Math.round(appointmentWidth),
Math.round(cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET),
1.001,
'Appointment size is OK'
);

Copilot uses AI. Check for mistakes.
Comment on lines 112 to 137
dataSource: [
{
text: 'Website Re-Design Plan',
startDate: ko.observable('2021-06-01T16:30:00.000Z'),
endDate: ko.observable('2021-06-01T18:30:00.000Z')
},
{
text: 'Install New Router in Dev Room',
startDate: ko.observable('2021-06-01T16:30:00.000Z'),
endDate: ko.observable('2021-06-01T18:30:00.000Z')
},
{
text: 'Install New Router in Dev Room',
startDate: ko.observable('2021-06-01T16:30:00.000Z'),
endDate: ko.observable('2021-06-01T18:30:00.000Z')
},
{
text: 'Install New Router in Dev Room',
startDate: ko.observable('2021-06-01T16:30:00.000Z'),
endDate: ko.observable('2021-06-01T18:30:00.000Z')
}
],
views: ['month'],
currentView: 'month',
currentDate: new Date('2021-06-01T16:30:00'),
height: 300
};
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test now includes 4 identical appointments (3 with the same text "Install New Router in Dev Room") where previously there were only 3 total appointments. Additionally, the height constraint of 300px was removed. These changes appear to be necessary for the appointment collector to render correctly with the Fluent theme, but the test data now contains duplicate entries that don't reflect realistic test data. Consider using more meaningful, distinct test data even if the appointments share the same time slot, to make the test more maintainable and easier to understand.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 6, 2026 20:17
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.

Comment on lines 134 to 137
views: ['month'],
currentView: 'month',
currentDate: new Date('2021-06-01T16:30:00'),
height: 300
};
Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scheduler options in this test no longer specify an explicit height. Since collector rendering can depend on the available viewport size, leaving height at the widget default can make the test more sensitive to future default changes / environment differences. Consider setting an explicit height here (as other KO scheduler tests do) to keep the assertion deterministic.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 7, 2026 12:52
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.

import { getTimeZones } from 'time_zone_utils';

import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js';
import { createWrapper, initTestMarkup, moveSchedulerToMainBlock } from '../../helpers/scheduler/helpers.js';
Copy link

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moveSchedulerToMainBlock is imported but never used in this test file. This will typically fail linting (no-unused-vars/no-unused-imports). Remove the import or call the helper where it’s actually required.

Suggested change
import { createWrapper, initTestMarkup, moveSchedulerToMainBlock } from '../../helpers/scheduler/helpers.js';
import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js';

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 7, 2026 13:31
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

Comment on lines +314 to 316
const expectedHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').first()) + 8;

assert.roughEqual(height, expectedHeight, 2.001, 'Group cell height is OK');
Copy link

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The + 8 adjustment in the expected height calculation introduces an unexplained magic number and makes this assertion brittle across styling/theme tweaks. Consider deriving the expected value from measured padding/borders (or comparing relevant elements more directly) instead of hard-coding an offset.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant