Skip to content

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

Open
aleksei-semikozov wants to merge 41 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 41 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 10, 2026 21: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 40 out of 40 changed files in this pull request and generated 3 comments.

Comment on lines 856 to 859
const $headerContent = getOuterHeight(scheduler.workSpace.groups.getGroupHeader(0));
const cellHeight = getOuterHeight(scheduler.workSpace.getCell(1));

assert.roughEqual($headerContent, 7 * cellHeight, 1, 'Group header content has right height');
assert.roughEqual($headerContent, 277.5, 1, 'Group header content has right height');
});
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

The expected group header height is now asserted as a hard-coded pixel value (277.5). This is likely to be fragile across DPI/font/theme changes. Prefer calculating the expected height from measured cell/header sizes (e.g., based on workspace cell height) so the test remains resilient while still validating the relationship.

Copilot uses AI. Check for mistakes.

import 'generic_light.css!';
import 'fluent_blue_light.css!';
// import 'generic_light.css!';
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

Remove the commented-out generic_light.css! import (dead code). If the intent is to document the previous theme, prefer capturing that in the PR description or a short comment explaining why Fluent is required, rather than leaving a commented import line that can drift/outdate.

Suggested change
// import 'generic_light.css!';
// Use Fluent theme for these scheduler visual tests.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 10, 2026 21:57
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 1 comment.


import 'generic_light.css!';
import 'fluent_blue_light.css!';
// import 'generic_light.css!';
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

Remove commented-out import statement. This appears to be leftover debugging code that should not be committed.

Suggested change
// import 'generic_light.css!';

Copilot uses AI. Check for mistakes.
aleksei-semikozov and others added 2 commits February 10, 2026 19:20
…ler/layoutManager.tests.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Aleksei Semikozov <alwexy@gmail.com>
Copilot AI review requested due to automatic review settings February 10, 2026 22:24
aleksei-semikozov and others added 2 commits February 10, 2026 19:25
…ler/layoutManager.tests.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Aleksei Semikozov <alwexy@gmail.com>
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 2 comments.

Comment on lines 1429 to 1433
views: [{
type: 'month',
name: 'MONTH',
maxAppointmentsPerCell: 'auto'
maxAppointmentsPerCell: 2
}],
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

maxAppointmentsPerCell is being passed as a string ('2'). In this test suite the option is otherwise used as a number (e.g., 1, 2) or one of the documented string modes ('auto', 'unlimited'). Passing '2' may bypass validation/coercion and make the test behave differently than real usage—use the number 2 here.

Copilot uses AI. Check for mistakes.
Comment on lines 311 to 313
scheduler.appointments.compact.click(0);
assert.equal(scheduler.tooltip.getItemCount(), 8, 'There are 8 collapsed appts');
assert.equal(scheduler.tooltip.getItemCount(), 6, 'There are 8 collapsed appts');
});
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

The assertion message says "There are 8 collapsed appts" but the expected value was changed to 6. Please update the message to match the new expectation so failures are diagnosable.

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 10, 2026 22:56
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 3 comments.

Comment on lines +260 to +264

assert.roughEqual(firstAppointmentTop, 230, 3.51, 'The first appointment height is OK');
assert.roughEqual(secondAppointmentTop, 330, 3.51, 'The second appointment height is OK');
assert.roughEqual(thirdAppointmentTop, 430, 3.51, 'The third appointment height is OK');
assert.roughEqual(fourthAppointmentTop, 530, 3.51, 'The fourth appointment height is OK');
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

These assertions now rely on fixed top values (230/330/430/530). Hard-coded coordinates are typically flaky across themes, fonts, zoom/DPR, and minor layout tweaks. Prefer computing the expected offsets from measured row/cell and appointment sizes (as this test did previously) so it validates layout logic instead of specific pixel metrics.

Copilot uses AI. Check for mistakes.
Comment on lines +11 to +15
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})`);
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

checkDxFontIcon is reimplemented here with a Fluent-specific base size, duplicating logic from the shared testing/helpers/checkDxFontIconHelper.js. To avoid divergence across tests/themes, consider extending the shared helper to support theme-specific icon sizes (e.g., optional expectedSize parameter or reading from CSS) and import it instead of redefining it here.

Copilot uses AI. Check for mistakes.
Comment on lines +461 to +464
assert.equal($indicators.eq(0).position().left, 65);
assert.equal($indicators.eq(0).position().top, 411);
assert.equal($indicators.eq(1).position().left, 65);
assert.equal($indicators.eq(1).position().top, 917);
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

This test asserts absolute pixel positions for the indicators (left=65, top=411/917). These values are likely to change with theme/font/zoom/DPR and make the test flaky. Consider computing expected positions from measured cell height/width (similar to the following test in this module) or asserting relative offsets between indicators instead of fixed coordinates.

Suggested change
assert.equal($indicators.eq(0).position().left, 65);
assert.equal($indicators.eq(0).position().top, 411);
assert.equal($indicators.eq(1).position().left, 65);
assert.equal($indicators.eq(1).position().top, 917);
const cellHeight = $element.find('.dx-scheduler-date-table-cell').eq(0).get(0).getBoundingClientRect().height;
const allDayRowHeight = $element.find('.dx-scheduler-all-day-table-row').eq(0).get(0).getBoundingClientRect().height;
const firstIndicatorPosition = $indicators.eq(0).position();
const secondIndicatorPosition = $indicators.eq(1).position();
// Indicators for different groups should be horizontally aligned
assert.equal(firstIndicatorPosition.left, secondIndicatorPosition.left, 'Indicators are horizontally aligned');
const expectedFirstTop = 9.5 * cellHeight + allDayRowHeight;
const expectedSecondTop = 21.5 * cellHeight + 2 * allDayRowHeight;
assert.equal(firstIndicatorPosition.top, expectedFirstTop, 'First indicator top is 9.5 cells + allDay panel height');
assert.equal(secondIndicatorPosition.top, expectedSecondTop, 'Second indicator top is 21.5 cells + two allDay panel heights');

Copilot uses AI. Check for mistakes.
Copilot AI review requested due to automatic review settings February 10, 2026 23:33
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 1 comment.

Comment on lines 1440 to 1444
const cellWorkspaceRect = scheduler.workSpace.getCellWorkspaceRect(2, 6);
const position = scheduler.appointments.getAppointment(0).position();
assert.roughEqual(position.left, cellWorkspaceRect.left, 0.5, 'Appointment position.left is correct');
assert.roughEqual(Math.ceil(position.top - cellWorkspaceRect.top), 5, 1.01, 'Appointment position.top is correct');
assert.roughEqual(Math.ceil(position.top - cellWorkspaceRect.top), -5, 1.01, 'Appointment position.top is correct');
});
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

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

The updated expectation allows position.top to be above getCellWorkspaceRect().top (negative delta). That’s unusual for a month-cell appointment and may indicate getCellWorkspaceRect/appointment positioning mismatch rather than intended behavior. To avoid encoding a potentially incorrect sign, consider asserting the delta magnitude within a tolerance (or computing the expected top offset from the cell/appointment metrics) and add a brief comment explaining why an offset is expected.

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