feat (v18): Modernize Inplace and expand test

packages/primeng/src/inplace/inplace.spec.ts

@@ -1,22 +1,42 @@
+import { Component, ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TimesIcon } from 'primeng/icons';
-import { ButtonModule } from '../button/button';
 import { Inplace } from './inplace';
 
+@Component({
+    template: `
+        <p-inplace class="custom-template" [(active)]="active" [closable]="closable">
+            <ng-template #closeicon>
+                <span class="my-icon"></span>
+            </ng-template>
+            <ng-template #display>Display</ng-template>
+            <ng-template #content>Content</ng-template>
+        </p-inplace>
+    `,
+    standalone: true,
+    imports: [Inplace]
+})
+class TestHostComponent {
+    closable = false;
+    active = false;
+}
+
 describe('Inplace', () => {
     let inplace: Inplace;
     let fixture: ComponentFixture<Inplace>;
+    let fixtureTest: ComponentFixture<TestHostComponent>;
+    let inplaceRef: ComponentRef<Inplace>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, ButtonModule, TimesIcon],
-            declarations: [Inplace]
+            imports: [NoopAnimationsModule, Inplace, TestHostComponent]
         });
 
         fixture = TestBed.createComponent(Inplace);
+        fixtureTest = TestBed.createComponent(TestHostComponent);
         inplace = fixture.componentInstance;
+        inplaceRef = fixture.componentRef;
     });
 
     it('should display by default', () => {
@@ -27,10 +47,10 @@ describe('Inplace', () => {
     });
 
     it('should change style styleClass and closable', () => {
-        inplace.style = { height: '300px' };
-        inplace.styleClass = 'Primeng ROCKS!';
-        inplace.closable = true;
-        inplace.active = true;
+        inplaceRef.setInput('style', { height: '300px' });
+        inplaceRef.setInput('styleClass', 'Primeng ROCKS!');
+        inplaceRef.setInput('closable', true);
+        inplaceRef.setInput('active', true);
         fixture.detectChanges();
 
         const inplaceEl = fixture.debugElement.query(By.css('div'));
@@ -42,7 +62,7 @@ describe('Inplace', () => {
     });
 
     it('should call activate and deactivate', () => {
-        inplace.closable = true;
+        inplaceRef.setInput('closable', true);
         fixture.detectChanges();
 
         const activateSpy = spyOn(inplace, 'activate').and.callThrough();
@@ -51,19 +71,19 @@ describe('Inplace', () => {
         displayEl.nativeElement.click();
         fixture.detectChanges();
 
-        expect(inplace.active).toEqual(true);
+        expect(inplace.active()).toEqual(true);
         expect(activateSpy).toHaveBeenCalled();
         const closableButtonEl = fixture.debugElement.query(By.css('button'));
         closableButtonEl.nativeElement.click();
         fixture.detectChanges();
 
-        expect(inplace.active).toEqual(false);
+        expect(inplace.active()).toEqual(false);
         expect(deactivateSpy).toHaveBeenCalled();
     });
 
     it('should disabled', () => {
-        inplace.closable = true;
-        inplace.disabled = true;
+        inplaceRef.setInput('closable', true);
+        inplaceRef.setInput('disabled', true);
         fixture.detectChanges();
 
         const activateSpy = spyOn(inplace, 'activate').and.callThrough();
@@ -72,17 +92,99 @@ describe('Inplace', () => {
         displayEl.nativeElement.click();
         fixture.detectChanges();
 
-        expect(inplace.active).toEqual(false);
+        expect(inplace.active()).toEqual(false);
         expect(activateSpy).toHaveBeenCalled();
-        inplace.active = true;
+        inplace.active.set(true);
         fixture.detectChanges();
 
         inplace.cd.detectChanges();
         const closableButtonEl = fixture.debugElement.query(By.css('button'));
         closableButtonEl.nativeElement.click();
         fixture.detectChanges();
 
-        expect(inplace.active).toEqual(true);
+        expect(inplace.active()).toEqual(true);
         expect(deactivateSpy).toHaveBeenCalled();
     });
+
+    it('should activate content on Enter key press', () => {
+        fixture.detectChanges();
+
+        const displayElement = fixture.debugElement.query(By.css('.p-inplace-display'));
+        displayElement.triggerEventHandler('keydown', { code: 'Enter', preventDefault: () => {} });
+
+        fixture.detectChanges();
+
+        expect(inplace.active()).toBeTrue();
+    });
+
+    it('should prevent activation when preventClick is true', () => {
+        inplaceRef.setInput('preventClick', true);
+        fixture.detectChanges();
+
+        const displayElement = fixture.debugElement.query(By.css('.p-inplace-display'));
+        displayElement.triggerEventHandler('click', {});
+
+        fixture.detectChanges();
+
+        expect(inplace.active()).toBeFalse();
+    });
+
+    it('should render custom close button icon when provided', () => {
+        inplaceRef.setInput('closable', true);
+        inplaceRef.setInput('closeIcon', 'custom-icon');
+        inplace.active.set(true);
+        fixture.detectChanges();
+
+        const buttonIcon = fixture.debugElement.query(By.css('span.custom-icon'));
+        expect(buttonIcon).toBeTruthy();
+    });
+
+    it('should set aria-label for the close button', () => {
+        inplaceRef.setInput('closable', true);
+        inplaceRef.setInput('closeAriaLabel', 'Close');
+        inplace.active.set(true);
+        fixture.detectChanges();
+
+        const closeButton = fixture.debugElement.query(By.css('button'));
+        expect(closeButton.attributes['aria-label']).toBe('Close');
+    });
+
+    it('should render the default close icon if no closeIconTemplate is provided', () => {
+        inplaceRef.setInput('closable', true);
+        inplace.active.set(true); // Ensure content mode is active
+        fixture.detectChanges();
+
+        const closeButton = fixture.debugElement.query(By.css('.p-button-icon-only'));
+        const timesIcon = fixture.debugElement.query(By.css('TimesIcon')); // Default icon
+        expect(closeButton).toBeTruthy(); // Close button should be present
+        expect(timesIcon).toBeTruthy(); // Ensure the default icon is rendered
+    });
+
+    it('should render the content template when active', () => {
+        fixtureTest.componentInstance.active = true; // Set the component to active mode
+        fixtureTest.detectChanges();
+
+        const contentElement = fixtureTest.debugElement.query(By.css('.p-inplace-content'));
+        expect(contentElement).toBeTruthy(); // Content should be visible
+        expect(contentElement.nativeElement.textContent).toBe('Content'); // Ensure content template is rendered
+    });
+
+    it('should render the custom close icon template when closable', () => {
+        fixtureTest.componentInstance.closable = true; // // Enable close button
+        fixtureTest.componentInstance.active = true; // Ensure it's in content mode
+        fixtureTest.detectChanges();
+
+        const closeButton = fixtureTest.debugElement.query(By.css('button'));
+        const closeIcon = closeButton.query(By.css('span.my-icon'));
+        expect(closeButton).toBeTruthy(); // Close button should be present
+        expect(closeIcon).toBeTruthy(); // custom close icon button should be present
+    });
+
+    it('should render the display template when inactive', () => {
+        fixtureTest.detectChanges();
+
+        const displayElement = fixtureTest.debugElement.query(By.css('.p-inplace-display'));
+        expect(displayElement).toBeTruthy(); // Display element should be present
+        expect(displayElement.nativeElement.textContent).toBe('Display'); // Ensure the template is rendered
+    });
 });