Repository navigation
Angular 21: standalone components, Vitest and angular19 CI - #1763
Merged
Merged
Conversation
PR CI checks out the frontend (and sibling plugins) at the branch the PR targets instead of always stable. Corepack is enabled before every yarn install, since the frontend's angular19 branch pins yarn@4; the Docker build uses yarn for the frontend build as well. Dead WDIO config copies are dropped (the frontend no longer has WDIO). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ar 21 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…vide it Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
🔵 Needs a closer look
The broad migration still needs browser validation of dialog injection, routing, and overlays, alongside correction of the test-assertion regression.
1 open issue
What changed in this PR
Updates the time-planning plugin for the host frontend’s Angular 21 migration.
Changes:
- Converts components to standalone imports while retaining module-level dialog support.
- Migrates tests to Vitest and adds Angular test helpers.
- Updates CI, enables Corepack, and indexes repeated element IDs.
| File | Description |
|---|---|
| eform-client/src/app/plugins/modules/time-planning-pn/time-planning-pn.module.ts | Imports standalone components; retains dialog support. |
| eform-client/src/app/plugins/modules/time-planning-pn/testing/source-paths.ts | Resolves source paths for bundled tests. |
| eform-client/src/app/plugins/modules/time-planning-pn/testing/register-test-locales.ts | Updates test-setup documentation only. |
| eform-client/src/app/plugins/modules/time-planning-pn/testing/page-providers.ts | Adds shared page-test providers. |
| eform-client/src/app/plugins/modules/time-planning-pn/testing/mutation-observer.ts | Adds an overlay-test observer fallback. |
| eform-client/src/app/plugins/modules/time-planning-pn/testing/detect-changes.ts | Adds zoneless change-detection support. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-working-hours.service.spec.ts | Migrates service mocks to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-plannings.service.spec.ts | Migrates service tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-payroll-export.service.spec.ts | Migrates payroll tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-pay-time-band-rules.service.spec.ts | Migrates time-band tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-pay-tier-rules.service.spec.ts | Migrates pay-tier tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-pay-rule-sets.service.spec.ts | Migrates rule-set tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-pay-day-type-rules.service.spec.ts | Migrates day-type tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-break-policies.service.spec.ts | Migrates break-policy tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/services/time-planning-pn-absence-requests.service.spec.ts | Migrates absence-request tests to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/working-hours.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-table/working-hours-table.component.ts | Adds standalone table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-table/working-hours-table.component.html | Makes planned-hours input IDs unique. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-header/working-hours-header.component.ts | Adds standalone header dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-container/working-hours-container.component.ts | Imports standalone child components. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-actions/working-hours-upload-modal/working-hours-upload-modal.component.ts | Adds standalone upload-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-actions/working-hours-comment-office-update-modal/working-hours-comment-office-update-modal.component.ts | Adds standalone comment-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/working-hours-actions/working-hours-comment-office-all-update-modal/working-hours-comment-office-all-update-modal.component.ts | Adds standalone bulk-comment dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/working-hours/components/mobile-working-hours/mobile-working-hours.component.ts | Adds standalone mobile-view dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/request-history/request-history.module.ts | Imports standalone page; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/request-history/components/request-history-page/request-history-page.component.ts | Adds standalone history-page dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/registration-devices.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-table/registration-devices-table.component.ts | Adds standalone device-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-table/registration-devices-table.component.html | Indexes action-menu IDs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-container/registration-devices-container.component.ts | Imports standalone child components. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-actions/registration-devices-otp-code/registration-devices-otp-code.component.ts | Adds standalone code-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-actions/registration-devices-edit-modal/registration-devices-edit-modal.component.ts | Adds standalone edit-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-actions/registration-devices-delete-modal/registration-devices-delete-modal.component.ts | Adds standalone delete-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/registration-devices/components/registration-devices-actions/registration-devices-create-modal/registration-devices-create-modal.component.ts | Adds standalone create-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/pay-rule-sets.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/directives/hh-mm-seconds.directive.ts | Makes the time-input directive standalone. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-table/pay-rule-sets-table.component.ts | Adds standalone rule-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-table/pay-rule-sets-table.component.html | Indexes action-menu IDs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-edit-modal/pay-rule-sets-edit-modal.component.ts | Adds standalone edit-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-delete-modal/pay-rule-sets-delete-modal.component.ts | Adds standalone delete-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-create-modal/pay-rule-sets-create-modal.component.ts | Adds standalone create-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-rule-sets-container/pay-rule-sets-container.component.ts | Imports standalone table and translation pipe. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-day-rule-list/pay-day-rule-list.component.ts | Adds standalone rule-list dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-day-rule-form/pay-day-rule-form.component.ts | Adds standalone form and directive dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/pay-day-rule-dialog/pay-day-rule-dialog.component.ts | Imports standalone form and dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/day-type-rule-list/day-type-rule-list.component.ts | Adds standalone day-type list dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/pay-rule-sets/components/day-type-rule-dialog/day-type-rule-dialog.component.ts | Adds standalone day-type dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/flex.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/components/time-flexes-table/time-flexes-table.component.ts | Adds standalone flex-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/components/time-flexes-table/time-flexes-table.component.html | Indexes flex and comment IDs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/components/time-flexes-container/time-flexes-container.component.ts | Adds standalone container dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/components/time-flexes-actions/comment-office-update-modal/time-flexes-comment-office-update-modal.component.ts | Adds standalone comment-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/flexes/components/time-flexes-actions/comment-office-all-update-modal/time-flexes-comment-office-all-update-modal.component.ts | Adds standalone bulk-comment dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policy-rules-list/break-policy-rules-list.component.ts | Adds standalone rule-list dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policy-rule-form/break-policy-rule-form.component.ts | Adds standalone rule-form dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policy-rule-dialog/break-policy-rule-dialog.component.ts | Imports standalone form and dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-table/break-policies-table.component.ts | Adds standalone policy-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-table/break-policies-table.component.html | Indexes action-menu IDs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-edit-modal/break-policies-edit-modal.component.ts | Adds standalone edit-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-delete-modal/break-policies-delete-modal.component.ts | Adds standalone delete-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-create-modal/break-policies-create-modal.component.ts | Adds standalone create-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/components/break-policies-container/break-policies-container.component.ts | Imports standalone table and translation pipe. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/break-policies/break-policies.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/absence-requests/components/absence-requests-table/absence-requests-table.component.ts | Adds standalone request-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/absence-requests/components/absence-requests-container/absence-requests-container.component.ts | Imports standalone child components. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/absence-requests/components/absence-requests-actions/absence-requests-reject-modal/absence-requests-reject-modal.component.ts | Adds standalone rejection-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/absence-requests/components/absence-requests-actions/absence-requests-approve-modal/absence-requests-approve-modal.component.ts | Adds standalone approval-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/modules/absence-requests/absence-requests.module.ts | Imports standalone components; retains dialogs. |
| eform-client/src/app/plugins/modules/time-planning-pn/layouts/time-planning-pn-layout.component.ts | Imports RouterOutlet directly. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/services/help-visibility.service.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/services/help-tour.service.spec.ts | Migrates tour tests and spies to Vitest. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/services/help-search.service.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/services/help-panel.service.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/services/help-content.service.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/playwright-tour-seed.spec.ts | Uses Vitest and shared source paths. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/planning-help.registry.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/i18n/day-type-copy.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/i18n/da.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/help-wiring.spec.ts | Adapts wiring tests to Angular’s builder. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/grid-help-anchors.ts | Accepts optional registry entries for testing. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-tour/help-tour.component.ts | Adds standalone tour dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-tour/help-tour.component.spec.ts | Adapts tour tests and overlay handling. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-panel/help-panel.component.ts | Adds standalone panel dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-panel/help-panel.component.spec.ts | Migrates panel tests and change detection. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-icon/help-icon.component.ts | Adds standalone icon and overlay dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-icon/help-icon.component.spec.ts | Adapts icon tests and overlay handling. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-hint/help-hint.component.ts | Adds standalone hint dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/help/components/help-hint/help-hint.component.spec.ts | Migrates hint tests and change detection. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/settings/time-planning-settings/time-planning-settings.component.ts | Adds standalone settings dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.ts | Adds standalone planning-table dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.spec.ts | Migrates table tests and source paths. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-container/time-plannings-container.component.ts | Adds standalone planning-page dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-container/time-plannings-container.component.spec.ts | Migrates page tests and shared providers. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/workday-entity/workday-entity-dialog.component.ts | Adds standalone workday-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/workday-entity/workday-entity-dialog.component.spec.ts | Migrates workday tests and source paths. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/version-history-modal/version-history-modal.component.ts | Adds standalone history-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/payroll-export/payroll-export-dialog.component.ts | Adds standalone payroll-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/payroll-export/payroll-export-dialog.component.spec.ts | Migrates payroll tests; provides date adapter. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/download-excel/download-excel-dialog.component.ts | Adds standalone export-dialog dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/download-excel/download-excel-dialog.component.spec.ts | Migrates export tests; provides date adapter. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/assigned-site-dialog.component.ts | Adds standalone assigned-site dependencies. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-planning-actions/assigned-site/assigned-site-dialog.component.spec.ts | Migrates dialog tests and updates explanatory comments. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/pause-segments.util.spec.ts | Imports Vitest test APIs. |
| eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/day-lock.util.spec.ts | Migrates utility mocks and timers to Vitest. |
| eform-client/playwright/e2e/plugins/time-planning-pn/c/time-planning-glsa-3f-pay-rules.spec.ts | Matches indexed action-menu IDs. |
| Dockerfile | Enables Corepack before Yarn installation. |
| .github/workflows/dotnet-core-pr.yml | Uses target frontend branch, Corepack, and Angular tests. |
| .github/workflows/dotnet-core-master.yml | Enables Corepack and switches to Angular tests. |
Review effort: Balanced
The Angular 21 frontend renders the installed-plugins row menu as
id="actionMenu{{i}}", so every '#actionMenu' selector in the plugin's
e2e tests timed out, the plugin was never enabled, and every later
test in each shard failed. Match [id^="actionMenu"] instead.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The Jest-to-Vitest conversion wrapped `done` specs in new Promise, but of(...) emits synchronously, so done() ran before the trailing toHaveBeenCalledWith and a failure there was swallowed. Await firstValueFrom(...) and assert afterwards; the two setTimeout-based dialog specs now await the delay before asserting. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ting
The Angular 21 frontend bootstraps with
provideZoneChangeDetection({ eventCoalescing: true }), so a click's
re-render lands a frame later. After the hour click the forced minute
click hit the still-rendered hour face (":00" at 360deg is hour 12,
":30" at 180deg is hour 6), giving 12:00 / 06:30 instead of 07:00 /
07:30. Scope the minute selectors to ngx-material-timepicker-minutes-face
so the click waits for the face to switch. In l1m the non-waiting
wipeBtn.count() ran before the dialog rendered, so the shift wipe was
skipped and the leftover shift 2 failed the shift-order validator,
keeping Save disabled; wait for the dialog first.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of the Angular 21 upgrade. The frontend's
angular19branch is now on Angular 21 with standalone components and Vitest (microting/eform-angular-frontend#8155).yarn install, because the frontend'sangular19pins Yarn 4. The unit-test job runsng testin place of Jest. The Jest coverage flags are dropped.declarationsare removed. Every module that had a dialog provider, directly or through the shared frontend modules, still importsMatDialogModule. This keeps the assigned-site and payroll-export dialogs able to resolve their module-provided services.actionMenu, flex and plan-hours inputs) are now indexed, with the Playwright selectors updated to match.testing/helpers handle zoneless change detection, CDK overlays and file paths under Angular's test builder.applyGridHelpAnchorstakes an optionalentriesargument so its spec no longer needs module mocking; the default behaviour is unchanged.Verified locally with
ng buildandng testagainst frontendangular19, together with the other migrated plugins. Locally, 3 specs inhelp/playwright-tour-seed.spec.tsneed the Playwright files that the CI job copies into the frontend; they pass with those files in place. Code reviewed. Not yet clicked through in a browser.🤖 Generated with Claude Code