-
Notifications
You must be signed in to change notification settings - Fork 667
Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing #32278
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 26_1
Are you sure you want to change the base?
Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing #32278
Conversation
There was a problem hiding this 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!withfluent_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. |
0843ddb to
d761efa
Compare
There was a problem hiding this 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.
d761efa to
f35bfc1
Compare
f35bfc1 to
b424864
Compare
b424864 to
d223d1e
Compare
There was a problem hiding this 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.
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js
Outdated
Show resolved
Hide resolved
packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js
Show resolved
Hide resolved
There was a problem hiding this 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.
| 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})`); | ||
| } |
Copilot
AI
Feb 5, 2026
There was a problem hiding this comment.
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.
There was a problem hiding this 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(); |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
| // moveSchedulerToMainBlock(); |
| 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'); |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
| 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); |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
|
|
||
| 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); |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
There was a problem hiding this 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.
…cheduler tests and adjust width assertions
There was a problem hiding this 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'); |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
| 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' | |
| ); |
| 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 | ||
| }; |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
…cheduler tests and update expected values
…t values in virtual scrolling month view tests
There was a problem hiding this 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.
| views: ['month'], | ||
| currentView: 'month', | ||
| currentDate: new Date('2021-06-01T16:30:00'), | ||
| height: 300 | ||
| }; |
Copilot
AI
Feb 6, 2026
There was a problem hiding this comment.
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.
…ration in scheduler tests
b11b4a2 to
28863bd
Compare
There was a problem hiding this 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'; |
Copilot
AI
Feb 7, 2026
There was a problem hiding this comment.
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.
| import { createWrapper, initTestMarkup, moveSchedulerToMainBlock } from '../../helpers/scheduler/helpers.js'; | |
| import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js'; |
…ues in scheduler tests
…ion values in timeline tests
…alues in grouping by date tests
There was a problem hiding this 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.
| 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'); |
Copilot
AI
Feb 7, 2026
There was a problem hiding this comment.
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.
…positions in scheduler tests
…position values in layout manager tests
…position values in contentReadyEvent tests
…osition values in DateTime indicator tests
…ell selectors in agenda tests
No description provided.