fix: warnings in the UI tests relating the ng v22 upgrade

npm/ng-packs/packages/core/src/lib/tests/form-submit.directive.spec.ts

@@ -1,8 +1,8 @@
 import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/vitest';
 import { FormSubmitDirective } from '../directives/form-submit.directive';
 import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
-import { timer, firstValueFrom } from 'rxjs';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { setInputSignal } from './utils';
 
 
 describe('FormSubmitDirective', () => {
@@ -21,7 +21,7 @@ describe('FormSubmitDirective', () => {
     vi.useFakeTimers();
 
     spectator = createDirective(
-      '<form [formGroup]="formGroup" (ngSubmit)="submitEventFn()" [debounce]="20">form content</form>',
+      '<form ngSubmit [formGroup]="formGroup" (ngSubmit)="submitEventFn()">form content</form>',
       {
         hostProps: {
           submitEventFn,
@@ -30,6 +30,7 @@ describe('FormSubmitDirective', () => {
       },
     );
     directive = spectator.directive;
+    setInputSignal(directive.debounce, 20);
   });
 
   afterEach(() => {
@@ -44,7 +45,7 @@ describe('FormSubmitDirective', () => {
   });
 
   test('should have 20ms debounce time', () => {
-    expect(directive.debounce()).toBe(200);
+    expect(directive.debounce()).toBe(20);
   });
 
   test('should dispatch submit event on keyup event triggered after given debounce time', async () => {

npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts

@@ -21,7 +21,7 @@ describe('PermissionDirective', () => {
 
   beforeEach(() => {
     spectator = createDirective(
-      '<div [abpPermission]="permission" [abpPermissionRunChangeDetection]="runCD"></div>',
+      '<div abpPermission>test</div>',
       {
         hostProps: { permission: 'test', runCD: false },
       },

npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, inject, input, output, ɵSIGNAL as SIGNAL } from '@angular/core';
+import { Component, inject, input, output } from '@angular/core';
 import { Router } from '@angular/router';
 import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/vitest';
 import { BehaviorSubject } from 'rxjs';
@@ -86,18 +86,12 @@ describe('ReplaceableTemplateDirective', () => {
     it('should create directive successfully', () => {
       spectator = createDirective(
         `
-        <div *abpReplaceableTemplate="{inputs: {oneWay: {value: oneWay}, twoWay: {value: twoWay, twoWay: true}}, outputs: {twoWayChange: twoWayChange, someOutput: someOutput}, componentKey: 'TestModule.TestComponent'}; let initTemplate = initTemplate">
+        <ng-template abpReplaceableTemplate let-initTemplate="initTemplate">
           <abp-default-component #defaultComponent="abpDefaultComponent"></abp-default-component>
-        </div>
+        </ng-template>
         `,
         {
           detectChanges: false,
-          hostProps: {
-            oneWay: { label: 'Test' },
-            twoWay: false,
-            twoWayChange: vi.fn(),
-            someOutput: vi.fn(),
-          },
         },
       );
       setInputSignal(spectator.directive.data, {

npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts

@@ -24,6 +24,7 @@ const mockRoutes: ABP.Route[] = [
 describe('BreadcrumbComponent', () => {
   let spectator: SpectatorRouting<RouterOutletComponent>;
   let routes: RoutesService;
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
 
   const createRouting = createRoutingFactory({
     component: RouterOutletComponent,
@@ -51,6 +52,7 @@ describe('BreadcrumbComponent', () => {
           },
           registerLocaleFn: () => Promise.resolve(),
           skipGetAppConfiguration: true,
+          skipInitAuthService: true,
         }),
       ),
       {
@@ -102,10 +104,15 @@ describe('BreadcrumbComponent', () => {
   beforeAll(() => setupComponentResources('../components/breadcrumb', import.meta.url));
 
   beforeEach(() => {
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
     spectator = createRouting();
     routes = spectator.inject(RoutesService);
   });
 
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should create component', async () => {
     routes.add(mockRoutes);
     await spectator.router.navigateByUrl('/identity/users');

npm/ng-packs/packages/theme-shared/src/lib/tests/ellipsis.directive.spec.ts

@@ -11,12 +11,9 @@ describe('EllipsisDirective', () => {
   });
 
   beforeEach(() => {
-    spectator = createDirective(
-      '<div [abpEllipsis]="width" [abpEllipsisEnabled]="true" [title]="title">test content</div>',
-      {
-        detectChanges: false,
-      },
-    );
+    spectator = createDirective('<div abpEllipsis>test content</div>', {
+      detectChanges: false,
+    });
     setInputSignal(spectator.directive.width, '100px');
     setInputSignal(spectator.directive.enabled, true);
     setInputSignal(spectator.directive.title, 'title');
@@ -56,15 +53,9 @@ describe('EllipsisDirective when title is not specified', () => {
   });
 
   beforeEach(() => {
-    spectator = createDirective(
-      '<div [abpEllipsis]="width" [abpEllipsisEnabled]="true" [title]="title">test content</div>',
-      {
-        hostProps: {
-          title: undefined,
-          width: '100px',
-        },
-      },
-    );
+    spectator = createDirective('<div abpEllipsis>test content</div>', {
+      detectChanges: false,
+    });
     setInputSignal(spectator.directive.width, '100px');
     setInputSignal(spectator.directive.enabled, true);
     setInputSignal(spectator.directive.title, undefined);
@@ -87,15 +78,9 @@ describe('EllipsisDirective when width is not given', () => {
   });
 
   beforeEach(() => {
-    spectator = createDirective(
-      '<div [abpEllipsis]="width" [abpEllipsisEnabled]="true" [title]="title">test content</div>',
-      {
-        hostProps: {
-          title: 'test title',
-          width: undefined,
-        },
-      },
-    );
+    spectator = createDirective('<div abpEllipsis>test content</div>', {
+      detectChanges: false,
+    });
     setInputSignal(spectator.directive.width, undefined);
     setInputSignal(spectator.directive.enabled, true);
     setInputSignal(spectator.directive.title, 'test title');

npm/ng-packs/packages/theme-shared/src/lib/tests/loading.directive.spec.ts

@@ -21,7 +21,7 @@ describe('LoadingDirective', () => {
 
   describe('default', () => {
     beforeEach(() => {
-      spectator = createDirective('<div [abpLoading]="loading">Testing Loading Directive</div>', {
+      spectator = createDirective('<div abpLoading>Testing Loading Directive</div>', {
         hostProps: { loading: true },
       });
     });
@@ -78,7 +78,7 @@ describe('LoadingDirective', () => {
 
   describe('with a component selector', () => {
     beforeEach(() => {
-      spectator = createDirective('<abp-dummy [abpLoading]="loading"></abp-dummy>', {
+      spectator = createDirective('<abp-dummy abpLoading></abp-dummy>', {
         hostProps: { loading: true },
       });
     });

npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts

@@ -1,10 +1,11 @@
 import { ConfirmationService } from '@abp/ng.theme.shared';
 import { CoreTestingModule } from '@abp/ng.core/testing';
-import { Component, EventEmitter, Input } from '@angular/core';
+import { Component, EventEmitter, input } from '@angular/core';
 import { createComponentFactory, Spectator } from '@ngneat/spectator/vitest';
 import { Confirmation } from '@abp/ng.theme.shared';
 import { firstValueFrom, Subject, timer } from 'rxjs';
 import { ModalComponent } from '../components/modal/modal.component';
+import { setInputSignal } from './utils';
 import { setupComponentResources } from './utils';
 
 @Component({
@@ -22,8 +23,8 @@ import { setupComponentResources } from './utils';
   imports: [ModalComponent]
 })
 class TestHostComponent {
-  @Input() visible = false;
-  @Input() busy = false;
+  visible = input(false);
+  busy = input(false);
   visibleChange = new EventEmitter<boolean>();
 }
 
@@ -33,10 +34,13 @@ const disappearFn = vi.fn();
 describe('ModalComponent', () => {
   let spectator: Spectator<TestHostComponent>;
   let createComponent: ReturnType<typeof createComponentFactory<TestHostComponent>>;
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
 
   beforeAll(() => setupComponentResources('../components/modal', import.meta.url));
 
   beforeEach(() => {
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+  
     // Create component factory in beforeEach to ensure beforeAll has run
     if (!createComponent) {
       createComponent = createComponentFactory({
@@ -60,20 +64,24 @@ describe('ModalComponent', () => {
     disappearFn.mockClear();
   });
 
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should create component', () => {
     expect(spectator.component).toBeTruthy();
   });
 
   it('should handle visible input', () => {
-    spectator.setInput('visible', true);
+    setInputSignal(spectator.component.visible, true);
     spectator.detectChanges();
-    expect(spectator.component.visible).toBe(true);
+    expect(spectator.component.visible()).toBe(true);
   });
 
   it('should handle busy input', () => {
-    spectator.setInput('busy', true);
+    setInputSignal(spectator.component.busy, true);
     spectator.detectChanges();
-    expect(spectator.component.busy).toBe(true);
+    expect(spectator.component.busy()).toBe(true);
   });
 
   it('should have visibleChange emitter', () => {