From b7d9654d0065245ac9b090a5332c3827187060d5 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Fri, 11 Oct 2024 23:00:34 +0200 Subject: [PATCH 1/5] convert to input signal for input icon and add test cases --- .../components/inputicon/inputicon.spec.ts | 40 +++++++++++++++++++ src/app/components/inputicon/inputicon.ts | 9 ++--- 2 files changed, 44 insertions(+), 5 deletions(-) create mode 100755 src/app/components/inputicon/inputicon.spec.ts diff --git a/src/app/components/inputicon/inputicon.spec.ts b/src/app/components/inputicon/inputicon.spec.ts new file mode 100755 index 00000000000..18fca87d267 --- /dev/null +++ b/src/app/components/inputicon/inputicon.spec.ts @@ -0,0 +1,40 @@ +import { ComponentRef } from '@angular/core'; +import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { InputIcon, InputIconModule } from './inputicon'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +fdescribe('InputIcon', () => { + let inputIcon: InputIcon; + let fixture: ComponentFixture; + let inputIconRef: ComponentRef; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule, InputIconModule], + }); + + fixture = TestBed.createComponent(InputIcon); + inputIcon = fixture.componentInstance; + inputIconRef = fixture.componentRef; + }); + + it('should create the component', () => { + expect(inputIcon).toBeTruthy(); + }); + + it('should always have the p-inputicon class by default', () => { + fixture.detectChanges(); + + expect(fixture.nativeElement.classList).toContain('p-inputicon'); + }); + + it('should apply custom classes from styleClass input', () => { + inputIconRef.setInput('styleClass', 'custom-class'); + fixture.detectChanges(); + + const inputIconHostElement = fixture.nativeElement; + expect(inputIconHostElement.classList).toContain('custom-class'); + expect(inputIconHostElement.classList).toContain('p-inputicon'); + }); + +}); diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index 68eed2959bb..f67512371f3 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -1,5 +1,4 @@ -import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, 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 { InputIconStyle } from './style/inputiconstyle'; @@ -15,7 +14,7 @@ import { InputIconStyle } from './style/inputiconstyle'; changeDetection: ChangeDetectionStrategy.OnPush, providers: [InputIconStyle], host:{ - '[class]': 'styleClass', + '[class]': 'styleClass()', '[class.p-inputicon]': 'true', } }) @@ -24,13 +23,13 @@ export class InputIcon extends BaseComponent { * Style class of the element. * @group Props */ - @Input() styleClass: string | undefined; + styleClass = input(); _componentStyle = inject(InputIconStyle); } @NgModule({ - imports: [CommonModule], + imports: [], exports: [InputIcon, SharedModule], declarations: [InputIcon], }) From ea8dda35a5f11f69ec7b7e1d4138f86c94e5e5b4 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Fri, 11 Oct 2024 23:11:20 +0200 Subject: [PATCH 2/5] remove "f" from describe --- src/app/components/inputicon/inputicon.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/inputicon/inputicon.spec.ts b/src/app/components/inputicon/inputicon.spec.ts index 18fca87d267..e8670642a77 100755 --- a/src/app/components/inputicon/inputicon.spec.ts +++ b/src/app/components/inputicon/inputicon.spec.ts @@ -3,7 +3,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing'; import { InputIcon, InputIconModule } from './inputicon'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -fdescribe('InputIcon', () => { +describe('InputIcon', () => { let inputIcon: InputIcon; let fixture: ComponentFixture; let inputIconRef: ComponentRef; From 58565a57225b4a2c80de7a1807798e29e8190789 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Fri, 11 Oct 2024 23:29:16 +0200 Subject: [PATCH 3/5] format file --- src/app/components/inputicon/inputicon.spec.ts | 1 - src/app/components/inputicon/inputicon.ts | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/components/inputicon/inputicon.spec.ts b/src/app/components/inputicon/inputicon.spec.ts index e8670642a77..54ae7e00243 100755 --- a/src/app/components/inputicon/inputicon.spec.ts +++ b/src/app/components/inputicon/inputicon.spec.ts @@ -36,5 +36,4 @@ describe('InputIcon', () => { expect(inputIconHostElement.classList).toContain('custom-class'); expect(inputIconHostElement.classList).toContain('p-inputicon'); }); - }); diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index f67512371f3..7ef83379ccd 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -13,10 +13,10 @@ import { InputIconStyle } from './style/inputiconstyle'; encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [InputIconStyle], - host:{ + host: { '[class]': 'styleClass()', '[class.p-inputicon]': 'true', - } + }, }) export class InputIcon extends BaseComponent { /** From 3f25d6f8782cc2300f56c0a3bbbaf78c92b831d9 Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 18:05:49 +0200 Subject: [PATCH 4/5] handle conflict --- src/app/components/inputicon/inputicon.spec.ts | 4 ++-- src/app/components/inputicon/inputicon.ts | 7 +------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/app/components/inputicon/inputicon.spec.ts b/src/app/components/inputicon/inputicon.spec.ts index 54ae7e00243..8d39b03b952 100755 --- a/src/app/components/inputicon/inputicon.spec.ts +++ b/src/app/components/inputicon/inputicon.spec.ts @@ -1,6 +1,6 @@ import { ComponentRef } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; -import { InputIcon, InputIconModule } from './inputicon'; +import { InputIcon } from './inputicon'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('InputIcon', () => { @@ -10,7 +10,7 @@ describe('InputIcon', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, InputIconModule], + imports: [NoopAnimationsModule, InputIcon], }); fixture = TestBed.createComponent(InputIcon); diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index 13826042aa4..694c9705741 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -1,9 +1,4 @@ -import { ChangeDetectionStrategy, Component,HostBinding, - inject, - input, - NgModule, - ViewEncapsulation -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, input, NgModule, ViewEncapsulation } from '@angular/core'; import { BaseComponent } from 'primeng/basecomponent'; import { InputIconStyle } from './style/inputiconstyle'; From 1d3db9321dcb72b468353468d03e31712e1564cb Mon Sep 17 00:00:00 2001 From: Mohamed Ben Makhlouf Date: Sun, 20 Oct 2024 18:45:14 +0200 Subject: [PATCH 5/5] format file --- src/app/components/inputicon/inputicon.spec.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/components/inputicon/inputicon.spec.ts b/src/app/components/inputicon/inputicon.spec.ts index 8d39b03b952..f8a856d11dc 100755 --- a/src/app/components/inputicon/inputicon.spec.ts +++ b/src/app/components/inputicon/inputicon.spec.ts @@ -9,10 +9,7 @@ describe('InputIcon', () => { let inputIconRef: ComponentRef; beforeEach(() => { - TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, InputIcon], - }); - + TestBed.configureTestingModule({ imports: [NoopAnimationsModule, InputIcon] }); fixture = TestBed.createComponent(InputIcon); inputIcon = fixture.componentInstance; inputIconRef = fixture.componentRef;