Scheduler: Add testing library helper #32516
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds Testing Library dependencies to the devextreme package and refactors Scheduler internal Jest test page-object models to use Testing Library (within + role-based queries) instead of direct CSS selectors.
Changes:
- Add
@testing-library/dom,@testing-library/jest-dom, and@testing-library/user-eventtopackages/devextremedevDependencies (and updatepnpm-lock.yaml). - Update Scheduler test POM models (
SchedulerModel,ToolbarModel,PopupModel) to usewithin(...)and role-based queries for key elements. - Adjust POM typing/lookup logic around appointments and toolbar elements.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
pnpm-lock.yaml |
Adds lockfile entries for Testing Library packages. |
packages/devextreme/package.json |
Introduces Testing Library packages under devDependencies. |
packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/toolbar.ts |
Switches navigator button lookup to Testing Library role/name queries. |
packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts |
Adds within(container) queries and refactors appointment/toolbar accessors. |
packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts |
Uses Testing Library role/name queries for popup action buttons. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| "@testing-library/dom": "^10.4.0", | ||
| "@testing-library/jest-dom": "^6.6.3", | ||
| "@testing-library/user-event": "^14.5.2", |
There was a problem hiding this comment.
The newly added Testing Library entries use caret ranges, while the rest of this package’s devDependencies are pinned to exact versions (or catalog:). To keep dependency resolution deterministic and consistent with existing conventions, please pin these to exact versions (and regenerate the lockfile accordingly).
| getPrevButton(): HTMLElement { | ||
| return this.queries.getByRole('button', { name: 'Previous page' }) as HTMLElement; | ||
| } | ||
|
|
||
| getNextButton(): HTMLDivElement | null | undefined { | ||
| return this.element?.querySelector('.dx-scheduler-navigator-next'); | ||
| getNextButton(): HTMLElement { | ||
| return this.queries.getByRole('button', { name: 'Next page' }) as HTMLElement; | ||
| } |
There was a problem hiding this comment.
getPrevButton/getNextButton hardcode English accessible names ('Previous page'/'Next page'). Since the actual aria-label is produced via localization (dxScheduler-navigationPrevious/dxScheduler-navigationNext in header/m_date_navigator.ts), this makes the test model brittle if message text or locale changes. Consider deriving the expected name via messageLocalization.format(...) (or reusing those keys/constants) instead of hardcoding the English strings.
packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts
Show resolved
Hide resolved
2 participants
No description provided.