@ng-zen/cli 20.5.0 → 21.0.0-next.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.0.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.5.0...v21.0.0-next.1) (2025-12-16)
+
+### ⚠ BREAKING CHANGES
+
+* upgrade Angular v21 + Storybook v10, add vitest  (#363)
+
+### chore
+
+* upgrade Angular v21 + Storybook v10, add vitest  ([#363](https://github.com/kstepien3/ng-zen/issues/363)) ([13bd57e](https://github.com/kstepien3/ng-zen/commit/13bd57ebd5b5fd26721947645dace5da97defa45))
+
+### 📚 Documentation
+
+* **readme:** update info about testing framework ([#371](https://github.com/kstepien3/ng-zen/issues/371)) ([9fe8e7f](https://github.com/kstepien3/ng-zen/commit/9fe8e7f28911731c5c6482d7b69463e72a4c4232))
+
 ## [20.5.0](https://github.com/kstepien3/ng-zen/compare/v20.4.0...v20.5.0) (2025-11-30)
 
 ### 🚀 New Features

package/README.md

@@ -238,7 +238,7 @@ export class LoginComponent {}
 
 ### **Testing Integration**
 
-- **Jest Ready:** All tests use Jest framework
+- **Vitest Ready:** All tests use Vitest framework for fast, modern unit testing
 - **Component Testing:** Isolated unit tests for each component
 - **Storybook Testing:** Visual testing and documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.5.0",
+  "version": "21.0.0-next.1",
   "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -60,14 +60,15 @@
     "save": "devDependencies"
   },
   "schematics": "./schematics/collection.json",
-  "packageManager": "pnpm@10.0.0",
+  "packageManager": "pnpm@10.24.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0"
   },
   "dependencies": {
-    "@angular-devkit/core": "^20.3.2",
-    "@angular-devkit/schematics": "^20.3.2",
+    "@angular-devkit/core": "^21.0.1",
+    "@angular-devkit/schematics": "^21.0.1",
+    "@angular/build": "21.0.1",
     "tslib": "^2.8.1"
   }
 }

package/schematics/components/files/alert/alert.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenAlert } from './alert';
 
 describe('ZenAlert', () => {
-  let component: ZenAlert;
-  let fixture: ComponentFixture<ZenAlert>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenAlert],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenAlert);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenAlert);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/avatar/avatar.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenAvatar } from './avatar';
 
 describe('ZenAvatar', () => {
-  let component: ZenAvatar;
-  let fixture: ComponentFixture<ZenAvatar>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenAvatar],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenAvatar);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenAvatar);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/button/button.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenButton } from './button';
 
 describe('ZenButton', () => {
-  let component: ZenButton;
-  let fixture: ComponentFixture<ZenButton>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenButton],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenButton);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/checkbox/checkbox.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenCheckbox } from './checkbox';
 
 describe('ZenCheckbox', () => {
-  let component: ZenCheckbox;
-  let fixture: ComponentFixture<ZenCheckbox>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenCheckbox],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenCheckbox);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenCheckbox);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/divider/divider.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenDivider } from './divider';
 
 describe('ZenDivider', () => {
-  let component: ZenDivider;
-  let fixture: ComponentFixture<ZenDivider>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenDivider],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenDivider);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenDivider);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/form-control/form-control.spec.ts

@@ -1,5 +1,6 @@
-import { Component, model } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, model, provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenFormControl, ZenFormControlProvider } from './form-control';
 
@@ -12,20 +13,16 @@ class FormControl extends ZenFormControl<string> {
 }
 
 describe('FormControl', () => {
-  let component: FormControl;
-  let fixture: ComponentFixture<FormControl>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FormControl],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(FormControl);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(FormControl);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/icon/icon.spec.ts

@@ -1,23 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenIcon } from './icon';
 
 describe('ZenIcon', () => {
-  let component: ZenIcon;
-  let fixture: ComponentFixture<ZenIcon>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenIcon],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenIcon);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('icon', 'Tree02Icon');
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenIcon);
+    const component = fixture.componentInstance;
+    fixture.componentRef.setInput('icon', 'Tree02Icon');
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/input/input.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenInput } from './input';
 
 describe('ZenInput', () => {
-  let component: ZenInput;
-  let fixture: ComponentFixture<ZenInput>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenInput],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenInput);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenInput);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/radio/radio.spec.ts

@@ -1,6 +1,8 @@
+import { provideZonelessChangeDetection } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ZenRadio } from './radio';
 import { ZenRadioRegistry } from './radio.registry';
@@ -13,7 +15,7 @@ describe('ZenRadio', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenRadio, FormsModule, ReactiveFormsModule],
-      providers: [ZenRadioRegistry],
+      providers: [ZenRadioRegistry, provideZonelessChangeDetection()],
     }).compileComponents();
 
     registry = TestBed.inject(ZenRadioRegistry);
@@ -61,7 +63,7 @@ describe('ZenRadio', () => {
   });
 
   it('should call onInput when radio is selected', () => {
-    const spy = jest.spyOn(component, 'onInput');
+    const spy = vi.spyOn(component, 'onInput');
     const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
     inputElement.checked = true;
@@ -74,7 +76,7 @@ describe('ZenRadio', () => {
     component.disabled.set(true);
     fixture.detectChanges();
 
-    const spy = jest.spyOn(component, 'onInput');
+    const spy = vi.spyOn(component, 'onInput');
     const inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
 
     inputElement.checked = true;
@@ -158,7 +160,7 @@ describe('ZenRadio', () => {
   });
 
   it('should call onTouched when host element loses focus', () => {
-    const onTouchedSpy = jest.fn();
+    const onTouchedSpy = vi.fn();
     component.registerOnTouched(onTouchedSpy);
 
     const hostElement = fixture.debugElement.nativeElement;
@@ -204,7 +206,7 @@ describe('ZenRadioRegistry', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ZenRadio],
-      providers: [ZenRadioRegistry],
+      providers: [ZenRadioRegistry, provideZonelessChangeDetection()],
     });
 
     registry = TestBed.inject(ZenRadioRegistry);
@@ -225,8 +227,8 @@ describe('ZenRadioRegistry', () => {
     registry.add('test-group', radio2);
 
     // Test that radios are added by checking if select works
-    const spy1 = jest.spyOn(radio1, 'onInput');
-    const spy2 = jest.spyOn(radio2, 'onInput');
+    const spy1 = vi.spyOn(radio1, 'onInput');
+    const spy2 = vi.spyOn(radio2, 'onInput');
 
     registry.select('test-group', 'option1');
 
@@ -241,8 +243,8 @@ describe('ZenRadioRegistry', () => {
     registry.remove('test-group', radio1);
 
     // Test that radio1 is removed by checking if select only affects radio2
-    const spy1 = jest.spyOn(radio1, 'onInput');
-    const spy2 = jest.spyOn(radio2, 'onInput');
+    const spy1 = vi.spyOn(radio1, 'onInput');
+    const spy2 = vi.spyOn(radio2, 'onInput');
 
     registry.select('test-group', 'option1');
 
@@ -251,8 +253,8 @@ describe('ZenRadioRegistry', () => {
   });
 
   it('should select value in group', () => {
-    const spy1 = jest.spyOn(radio1, 'onInput');
-    const spy2 = jest.spyOn(radio2, 'onInput');
+    const spy1 = vi.spyOn(radio1, 'onInput');
+    const spy2 = vi.spyOn(radio2, 'onInput');
 
     registry.add('test-group', radio1);
     registry.add('test-group', radio2);

package/schematics/components/files/skeleton/skeleton.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenSkeleton } from './skeleton';
 
 describe('ZenSkeleton', () => {
-  let component: ZenSkeleton;
-  let fixture: ComponentFixture<ZenSkeleton>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenSkeleton],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenSkeleton);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenSkeleton);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/switch/switch.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenSwitch } from './switch';
 
 describe('ZenSwitch', () => {
-  let component: ZenSwitch;
-  let fixture: ComponentFixture<ZenSwitch>;
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenSwitch],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenSwitch);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenSwitch);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });

package/schematics/components/files/textarea/textarea.spec.ts

@@ -1,22 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { ZenTextarea } from './textarea';
 
-describe('ZenTextareaComponent', () => {
-  let component: ZenTextarea;
-  let fixture: ComponentFixture<ZenTextarea>;
-
+describe('ZenTextarea', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ZenTextarea],
+      providers: [provideZonelessChangeDetection()],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenTextarea);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    const fixture = TestBed.createComponent(ZenTextarea);
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 });