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 41 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.
| 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'); | ||
| }); |
There was a problem hiding this comment.
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.
|
|
||
| import 'generic_light.css!'; | ||
| import 'fluent_blue_light.css!'; | ||
| // import 'generic_light.css!'; |
There was a problem hiding this comment.
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.
| // import 'generic_light.css!'; | |
| // Use Fluent theme for these scheduler visual tests. |
packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js
Outdated
Show resolved
Hide resolved
|
|
||
| import 'generic_light.css!'; | ||
| import 'fluent_blue_light.css!'; | ||
| // import 'generic_light.css!'; |
There was a problem hiding this comment.
Remove commented-out import statement. This appears to be leftover debugging code that should not be committed.
| // import 'generic_light.css!'; |
…on and Month View tests
…ler/layoutManager.tests.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Aleksei Semikozov <alwexy@gmail.com>
…ler/layoutManager.tests.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Aleksei Semikozov <alwexy@gmail.com>
…ctor integration tests
| views: [{ | ||
| type: 'month', | ||
| name: 'MONTH', | ||
| maxAppointmentsPerCell: 'auto' | ||
| maxAppointmentsPerCell: 2 | ||
| }], |
There was a problem hiding this comment.
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.
| 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'); | ||
| }); |
There was a problem hiding this comment.
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.
…ng integration and Month View tests
…tion and Month View tests
|
|
||
| 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'); |
There was a problem hiding this comment.
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.
| 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})`); |
There was a problem hiding this comment.
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.
| 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); |
There was a problem hiding this comment.
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.
| 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'); |
| 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'); | ||
| }); |
There was a problem hiding this comment.
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.
No description provided.