Angular - Align the UI tests with the v22 upgrade#25729
Merged
Conversation
sumeyyeKurtulus
requested review from
fahrigedik
and removed request for
Copilot
fahrigedik
approved these changes
Jun 30, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Angular UI/unit test suite (core + theme-shared) to be compatible with the Angular v22 upgrade, primarily by switching tests to signal-based inputs, adjusting directive selectors/usages, and modernizing timer/mocking patterns.
Changes:
- Added a
setInputSignaltest helper and refactored many specs to set signal inputs explicitly (instead ofsetInput/property assignment). - Updated multiple directive/component tests to match Angular v22 selector and timing behavior (e.g.,
[input.debounce],[click.stop], fake timers). - Hardened
AbpLocalStorageServicebrowser access via a guardedstoragegetter (but introduces a behavioral bug for empty-string values).
Reviewed changes
Copilot reviewed 35 out of 35 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| npm/ng-packs/packages/theme-shared/src/lib/tests/utils/input-signal.ts | Adds test helper for setting input signals. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/utils/index.ts | Re-exports new test helper. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/toaster.service.spec.ts | Updates toast container mocking. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts | Migrates host inputs to input() + signal-setting helper. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts | Refactors directive input setting to signals and adjusts templates. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts | Adapts expectations to signal getters and updated component API. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/form-input.component.spec.ts | Uses signal helper to set input flags. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/ellipsis.directive.spec.ts | Migrates directive inputs to signals with manual detectChanges flow. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/checkbox.component.spec.ts | Migrates component inputs to signals with manual detectChanges flow. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts | Normalizes host template setup. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.component.spec.ts | Switches style input setup to signals. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/card-footer.component.spec.ts | Switches style input setup to signals. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/card-body.component.spec.ts | Switches style input setup to signals. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/button.component.spec.ts | Migrates loading and iconClass input handling to signals. |
| npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts | Adjusts test module options and suppresses console noise. |
| npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts | Exposes targetElement (visibility changed) to support updated tests. |
| npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts | Changes signal fields visibility (protected → public) to support tests. |
| npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts | Moves setLoading method placement (no functional change). |
| npm/ng-packs/packages/core/src/lib/tests/utils/input-signal.ts | Adds core test helper for setting input signals. |
| npm/ng-packs/packages/core/src/lib/tests/utils/index.ts | Exports test utilities including new helper. |
| npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts | Updates directive usage to [click.stop] selector semantics. |
| npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts | Refactors to set signal inputs via helper + effect flushing. |
| npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts | Migrates test components/inputs toward signal usage. |
| npm/ng-packs/packages/core/src/lib/tests/permission.guard.spec.ts | Updates testbed wiring/mocks for Angular v22. |
| npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts | Refactors directive inputs to signals and manual ngOnChanges. |
| npm/ng-packs/packages/core/src/lib/tests/local-storage.service.spec.ts | Switches to stubbing global localStorage and asserting calls. |
| npm/ng-packs/packages/core/src/lib/tests/form-submit.directive.spec.ts | Moves to fake timers + signal input setting for debounce. |
| npm/ng-packs/packages/core/src/lib/tests/for.directive.spec.ts | Refactors structural directive tests to explicit input-signal setup. |
| npm/ng-packs/packages/core/src/lib/tests/factory-utils.spec.ts | Updates assertions for module factory shape. |
| npm/ng-packs/packages/core/src/lib/tests/environment-utils.spec.ts | Replaces jest.spyOn with vi.spyOn. |
| npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts | Updates to fake timers and [input.debounce] selector. |
| npm/ng-packs/packages/core/src/lib/tests/capsLock.directive.spec.ts | Refactors event simulation to call directive handlers and assert emits. |
| npm/ng-packs/packages/core/src/lib/tests/autofocus.directive.spec.ts | Updates default delay expectation and uses fake timers. |
| npm/ng-packs/packages/core/src/lib/services/local-storage.service.ts | Adds guarded storage accessor and switches to optional chaining. |
| npm/ng-packs/package.json | Updates Angular devDependencies to v22 and adjusts schematics dev script. |
Comment on lines
+34
to
38
| return this.storage?.getItem(key) || null; | ||
| } | ||
| key(index: number): string | null { | ||
| if (!isPlatformBrowser(this.platformId)) { | ||
| return null; | ||
| } | ||
| return localStorage.key(index); | ||
| return this.storage?.key(index) || null; | ||
| } |
Comment on lines
23
to
27
| spectator = createDirective( | ||
| '<form [formGroup]="formGroup" (ngSubmit)="submitEventFn()" [debounce]="20">form content</form>', | ||
| '<form ngSubmit [formGroup]="formGroup" (ngSubmit)="submitEventFn()">form content</form>', | ||
| { | ||
| hostProps: { | ||
| submitEventFn, |
Comment on lines
+61
to
65
| vi.advanceTimersByTime(199); | ||
| expect(submitEventFn).not.toHaveBeenCalled(); | ||
|
|
||
| vi.advanceTimersByTime(1); | ||
| expect(submitEventFn).toHaveBeenCalled(); |
| import { combineLatest, firstValueFrom, Subject, timer } from 'rxjs'; | ||
| import { LoaderBarComponent } from '../components/loader-bar/loader-bar.component'; | ||
| import { setupComponentResources } from './utils'; | ||
| import { setupComponentResources, setInputSignal } from './utils'; |
Comment on lines
14
to
+17
| class DefaultComponent { | ||
| @Input() | ||
| oneWay; | ||
| onOneWay = input<any>(); | ||
|
|
||
| @Input() | ||
| twoWay: boolean; | ||
| twoWay = input<boolean>(); |
| readonly delay = input(0, { alias: 'abpLoadingDelay' }); | ||
|
|
||
| private targetElement: HTMLElement | undefined; | ||
| targetElement: HTMLElement | undefined; |
Comment on lines
+43
to
+44
| readonly isLoading = signal(false); | ||
| readonly progressLevel = signal(0); |
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.
Description
Updates the UI tests to align the ng v22 upgrade.
How to test it?
yarn test:vitest,yarn test:vitest --project core, oryarn test:vitest --project core packages/core/src/lib/tests/form-submit.directive.spec.tsfor specific files as you prefer.