Some more fun

Author: almothafar

README.md

@@ -4,10 +4,13 @@
 [![npm version](https://img.shields.io/npm/v/@almothafar/angular-signature-pad.svg)](https://www.npmjs.com/package/@almothafar/angular-signature-pad)
 [![npm license](https://img.shields.io/npm/l/@almothafar/angular-signature-pad.svg)](https://www.npmjs.com/package/@almothafar/angular-signature-pad)
 [![GitHub issues](https://img.shields.io/github/issues/almothafar/angular-signature-pad.svg)](https://github.com/almothafar/angular-signature-pad/issues)
+[![Angular 20](https://img.shields.io/badge/Angular-20-DD0031?logo=angular)](https://angular.io/)
 
 
 Angular component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).
 
+**✨ Now supports Angular 20!** Built with standalone components and modern Angular best practices.
+
 ## Install
 
 ```shell

projects/angular-signature-pad/src/lib/angular-signature-pad.component.spec.ts

@@ -8,7 +8,7 @@ describe('AngularSignaturePadComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SignaturePadComponent],
+      imports: [SignaturePadComponent],
     }).compileComponents();
   });
 

projects/angular-signature-pad/src/test.ts

@@ -1,14 +1,18 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
+  platformBrowserDynamicTesting(),
+  {
+    teardown: { destroyAfterEach: true }
+  }
 );

projects/demo/src/app/app.component.spec.ts

@@ -14,16 +14,15 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'demo' title`, () => {
+  it('should have signature field items', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('demo');
+    expect(app.items.length).toBeGreaterThan(0);
   });
 
-  it('should render title', () => {
+  it('should have titles array', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo');
+    const app = fixture.componentInstance;
+    expect(app.titles.length).toEqual(app.items.length);
   });
 });