refactor(signals): migrate simple components to signal APIs

package.json

@@ -53,13 +53,15 @@
     "@types/express": "^5.0.6",
     "@types/node": "^24.10.12",
     "@vitest/browser-playwright": "^4.1.1",
+    "@vitest/eslint-plugin": "^1.6.13",
     "angular-eslint": "^21.3.1",
     "copyfiles": "^2.4.1",
     "eslint": "^10.1.0",
     "husky": "^9.1.7",
     "jsdom": "^29.0.1",
     "lint-staged": "^16.4.0",
     "ng-packagr": "^21.2.1",
+    "playwright": "^1.52.0",
     "prettier": "^3.8.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.9.3",
@@ -68,5 +70,10 @@
   },
   "lint-staged": {
     "*.{ts,json,scss,html}": "prettier --write"
+  },
+  "overrides": {
+    "eslint-plugin-vitest": {
+      "eslint": "$eslint"
+    }
   }
 }

projects/components/card/src/card.component.spec.ts

@@ -1,6 +1,6 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { ChangeDetectionStrategy, Component, signal, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
 import { ZvHeaderHarness } from '@zvoove/components/header/src/testing/header.harness';
@@ -52,7 +52,7 @@ export class TestDataSourceComponent {
   public readonly addCaptionTemplate = signal(false);
   public readonly addDescriptionTemplate = signal(false);
   public readonly addFooterTemplate = signal(false);
-  @ViewChild(ZvCard) headerComponent: ZvCard;
+  readonly headerComponent = viewChild(ZvCard);
 }
 
 describe('ZvCard', () => {

projects/components/core/src/date/native-date-adapter.spec.ts

@@ -38,8 +38,8 @@ describe('ZvNativeDateAdapter', () => {
   it('should parse invalid value as invalid', () => {
     const d = adapter.parse('hello');
     expect(d).not.toBeNull();
-    expect(adapter.isDateInstance(d), 'Expected string to have been fed through Date.parse').toBe(true);
-    expect(adapter.isValid(d as Date), 'Expected to parse as "invalid date" object').toBe(false);
+    expect(adapter.isDateInstance(d)).toBe(true);
+    expect(adapter.isValid(d as Date)).toBe(false);
   });
 
   it('should return localized format example', () => {

projects/components/core/src/time/native-time-adapter.spec.ts

@@ -25,12 +25,8 @@ describe('ZvNativeTimeAdapter', () => {
     adapter = timeAdapter;
 
     assertValidTime = (t: Time | null, valid: boolean) => {
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-base-to-string
-      expect(adapter.isTimeInstance(t), `Expected ${t} to be a time instance`).not.toBeNull();
-      expect(
-        adapter.isValid(t!),
-        `Expected ${JSON.stringify(t)} to be ${valid ? 'valid' : 'invalid'}, but ` + `was ${valid ? 'invalid' : 'valid'}`
-      ).toBe(valid);
+      expect(adapter.isTimeInstance(t)).not.toBeNull();
+      expect(adapter.isValid(t!)).toBe(valid);
     };
   }));
 
@@ -73,8 +69,8 @@ describe('ZvNativeTimeAdapter', () => {
   it('should parse invalid value as invalid', () => {
     const t = adapter.parse('hello');
     expect(t).not.toBeNull();
-    expect(adapter.isTimeInstance(t), 'Expected string to have been fed through Time.parse').toBe(true);
-    expect(adapter.isValid(t as Time), 'Expected to parse as "invalid Time" object').toBe(false);
+    expect(adapter.isTimeInstance(t)).toBe(true);
+    expect(adapter.isValid(t as Time)).toBe(false);
   });
 
   it('should format as 24 hour format', () => {
@@ -91,21 +87,10 @@ describe('ZvNativeTimeAdapter', () => {
     ).toEqual('3:30 PM');
   });
 
-  // it('should format with a different locale', () => {
-  //   adapter.setLocale('ja-JP');
-  //   expect(adapter.format(newTime(14, 45), {})).toEqual('2017/1/1');
-  // });
-
   it('should throw when attempting to format invalid Time', () => {
     expect(() => adapter.format(adapter.invalid(), {})).toThrowError(/ZvNativeTimeAdapter: Cannot format invalid Time\./);
   });
 
-  //   it('should clone', () => {
-  //     let Time = newTime(14, 45);
-  //     expect(adapter.clone(Time)).toEqual(Time);
-  //     expect(adapter.clone(Time)).not.toBe(Time);
-  //   });
-
   it('should compare Times', () => {
     expect(adapter.compareTime(newTime(14, 45), newTime(14, 46))).toBeLessThan(0);
     expect(adapter.compareTime(newTime(14, 45), newTime(15, 45))).toBeLessThan(0);

projects/components/date-time-input/src/date-time-input.component.html

@@ -6,7 +6,7 @@
     [attr.placeholder]="shouldLabelFloat ? datePlaceholder : ''"
     [required]="required"
     formControlName="date"
-    [matDatepicker]="matDatepicker"
+    [matDatepicker]="matDatepicker()"
     (focus)="_onFocus()"
     (blur)="_onBlur()"
     (keydown)="_onDateInputKeydown($event)"

projects/components/date-time-input/src/date-time-input.component.spec.ts

@@ -2,7 +2,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HarnessLoader, TestKey } from '@angular/cdk/testing';
-import { ChangeDetectionStrategy, Component, LOCALE_ID, signal, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, LOCALE_ID, signal, viewChild } from '@angular/core';
 import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatDatepickerInput, MatDatepickerModule } from '@angular/material/datepicker';
@@ -34,13 +34,16 @@ describe('ZvDateTimeInput', () => {
       });
       fixture = TestBed.createComponent(ValueTestComponent);
       fixture.detectChanges();
-      cmp = fixture.componentInstance.dateTimeInputCmp;
-      expect(cmp).toBeDefined();
+      cmp = fixture.componentInstance.dateTimeInputCmp();
 
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = await loader.getHarness(ZvDateTimeInputHarness);
     });
 
+    it('should be defined', () => {
+      expect(cmp).toBeDefined();
+    });
+
     it('should have size 12 for the date input', async () => {
       // because chrome doesn't fit all 10 characters of "DD/MM/YYYY" into size 10
       const [dateInput] = await harness.getInputs();
@@ -402,13 +405,16 @@ describe('ZvDateTimeInput', () => {
       });
       fixture = TestBed.createComponent(InputsTestComponent);
       fixture.detectChanges();
-      cmp = fixture.componentInstance.dateTimeInputCmp;
-      expect(cmp).toBeDefined();
+      cmp = fixture.componentInstance.dateTimeInputCmp();
 
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = await loader.getHarness(ZvDateTimeInputHarness);
     });
 
+    it('should be defined', () => {
+      expect(cmp).toBeDefined();
+    });
+
     it('should respect required input', async () => {
       const host = await harness.host();
       const [dateInput, timeInput] = await harness.getInputs();
@@ -458,14 +464,17 @@ describe('ZvDateTimeInput', () => {
       });
       fixture = TestBed.createComponent(FormTestComponent);
       fixture.detectChanges();
-      cmp = fixture.componentInstance.dateTimeInputCmp;
+      cmp = fixture.componentInstance.dateTimeInputCmp();
       formControl = fixture.componentInstance.control;
-      expect(cmp).toBeDefined();
 
       loader = TestbedHarnessEnvironment.loader(fixture);
       harness = await loader.getHarness(ZvDateTimeInputHarness);
     });
 
+    it('should be defined', () => {
+      expect(cmp).toBeDefined();
+    });
+
     it('should respect disabled form', async () => {
       const host = await harness.host();
       const [dateInput, timeInput] = await harness.getInputs();
@@ -712,8 +721,7 @@ function isValidDate(date: unknown) {
   ],
 })
 export class ValueTestComponent {
-  @ViewChild(ZvDateTimeInput)
-  dateTimeInputCmp!: ZvDateTimeInput<Date, Date, string>;
+  readonly dateTimeInputCmp = viewChild(ZvDateTimeInput);
   readonly disabled = signal(false);
   readonly value = signal<Date | null>(null);
 }
@@ -741,10 +749,8 @@ export class ValueTestComponent {
   ],
 })
 export class InputsTestComponent {
-  @ViewChild(ZvDateTimeInput)
-  dateTimeInputCmp!: ZvDateTimeInput<Date, Date, string>;
-  @ViewChild('dateInput', { read: NgModel })
-  ngModel: NgModel;
+  readonly dateTimeInputCmp = viewChild(ZvDateTimeInput);
+  readonly ngModel = viewChild('dateInput', { read: NgModel });
   readonly disabled = signal(false);
   readonly value = signal<Date | null>(null);
   readonly required = signal(false);
@@ -766,7 +772,6 @@ export class InputsTestComponent {
   ],
 })
 export class FormTestComponent {
-  @ViewChild(ZvDateTimeInput)
-  dateTimeInputCmp!: ZvDateTimeInput<Date, Date, string>;
+  readonly dateTimeInputCmp = viewChild(ZvDateTimeInput);
   control = new FormControl<Date | null>(null);
 }