Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing#32278
Scheduler: QUnit tests: ensure compatibility with Fluent and drop Generic theme testing#32278aleksei-semikozov wants to merge 16 commits intoDevExpress:26_1from
Conversation
There was a problem hiding this comment.
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
d761efa to
f35bfc1
Compare
f35bfc1 to
b424864
Compare
b424864 to
d223d1e
Compare
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
| 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})`); | ||
| } |
There was a problem hiding this comment.
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.
|
|
||
| scheduler.instance.option('dataSource', items); | ||
| await waitForAsync(() => scheduler.appointments.getAppointments().length === 3); | ||
| // moveSchedulerToMainBlock(); |
There was a problem hiding this comment.
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'); |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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.
…cheduler tests and adjust width assertions
| 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'); |
There was a problem hiding this comment.
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 | ||
| }; |
There was a problem hiding this comment.
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
| views: ['month'], | ||
| currentView: 'month', | ||
| currentDate: new Date('2021-06-01T16:30:00'), | ||
| height: 300 | ||
| }; |
There was a problem hiding this comment.
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
| import { getTimeZones } from 'time_zone_utils'; | ||
|
|
||
| import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js'; | ||
| import { createWrapper, initTestMarkup, moveSchedulerToMainBlock } from '../../helpers/scheduler/helpers.js'; |
There was a problem hiding this comment.
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
| 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'); |
There was a problem hiding this comment.
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.
No description provided.