feat (v18): Modernize AvatarGroup and expand test

packages/primeng/src/avatargroup/avatargroup.spec.ts

@@ -1,25 +1,90 @@
+import { Component, ComponentRef } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { AvatarGroup, AvatarGroupModule } from './avatargroup';
+import { AvatarGroup } from './avatargroup';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { By } from '@angular/platform-browser';
+
+@Component({
+    template: `
+        <p-avatar-group>
+            <span class="projected-content">Content</span>
+        </p-avatar-group>
+    `,
+    standalone: true,
+    imports: [AvatarGroup],
+})
+class TestHostComponent {}
 
 describe('AvatarGroup', () => {
     let avatarGroup: AvatarGroup;
     let fixture: ComponentFixture<AvatarGroup>;
+    let fixtureTest: ComponentFixture<TestHostComponent>;
+    let avatarGroupRef: ComponentRef<AvatarGroup>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, AvatarGroupModule]
+            imports: [NoopAnimationsModule, AvatarGroup, TestHostComponent]
         });
 
         fixture = TestBed.createComponent(AvatarGroup);
+        fixtureTest = TestBed.createComponent(TestHostComponent);
         avatarGroup = fixture.componentInstance;
+        avatarGroupRef = fixture.componentRef;
     });
 
     it('should display by default', () => {
+        expect(avatarGroup).toBeTruthy();
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).toBeTruthy();
+        expect(fixture.nativeElement.classList).toContain('p-avatar-group');
+        expect(fixture.nativeElement.classList).toContain('p-component');
+    });
+
+    it('should apply custom styleClass', () => {
+        avatarGroupRef.setInput('styleClass', 'custom-class');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('custom-class');
+    });
+
+    it('should apply custom inline styles', () => {
+        avatarGroupRef.setInput('style', { backgroundColor: 'blue', padding: '10px' });
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.style.backgroundColor).toBe('blue');
+        expect(fixture.nativeElement.style.padding).toBe('10px');
+    });
+
+    it('should project content inside AvatarGroup', () => {
+        fixtureTest.detectChanges();
+
+        const contentElement = fixtureTest.nativeElement.querySelector('.projected-content');
+        expect(contentElement).toBeTruthy();
+        expect(contentElement.textContent).toBe('Content');
+    });
+
+    it('should dynamically update styleClass', () => {
+        avatarGroupRef.setInput('styleClass', 'initial-class');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('initial-class');
+
+        avatarGroupRef.setInput('styleClass', 'updated-class');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).not.toContain('initial-class');
+        expect(fixture.nativeElement.classList).toContain('updated-class');
+    });
+
+    it('should dynamically update inline styles', () => {
+        avatarGroupRef.setInput('style', { color: 'red' });
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.style.color).toBe('red');
+
+        avatarGroupRef.setInput('style', { color: 'green' });
         fixture.detectChanges();
 
-        const avatarGroupEl = fixture.debugElement.query(By.css('.p-avatar-group'));
-        expect(avatarGroupEl.nativeElement).toBeTruthy();
+        expect(fixture.nativeElement.style.color).toBe('green');
     });
 });

packages/primeng/src/avatargroup/avatargroup.ts

@@ -1,5 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, NgModule, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input, NgModule, ViewEncapsulation } from '@angular/core';
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { AvatarGroupStyle } from './style/avatargroupstyle';
@@ -11,35 +10,29 @@ import { AvatarGroupStyle } from './style/avatargroupstyle';
 @Component({
     selector: 'p-avatarGroup, p-avatar-group, p-avatargroup',
     standalone: true,
-    imports: [CommonModule, SharedModule],
+    imports: [SharedModule],
     template: ` <ng-content></ng-content> `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     providers: [AvatarGroupStyle],
     host: {
         '[class.p-avatar-group]': 'true',
-        '[class.p-component]': 'true'
+        '[class.p-component]': 'true',
+        '[class]': 'styleClass()',
+        '[style]': 'style()'
     }
 })
 export class AvatarGroup extends BaseComponent {
     /**
      * Style class of the component
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    styleClass = input<string>();
     /**
      * Inline style of the component.
      * @group Props
      */
-    @Input() style: { [klass: string]: any } | null | undefined;
-
-    @HostBinding('class') get hostClass() {
-        return this.styleClass;
-    }
-
-    @HostBinding('style') get hostStyle() {
-        return this.style;
-    }
+    style = input<{ [klass: string]: any } | null>();
 
     _componentStyle = inject(AvatarGroupStyle);
 }