diff --git a/packages/primeng/src/floatlabel/floatlabel.spec.ts b/packages/primeng/src/floatlabel/floatlabel.spec.ts new file mode 100755 index 00000000000..1c7c2949126 --- /dev/null +++ b/packages/primeng/src/floatlabel/floatlabel.spec.ts @@ -0,0 +1,62 @@ +import { ComponentRef } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FloatLabel } from './floatlabel'; + +describe('FloatLabel', () => { + let floatLabel: FloatLabel; + let fixture: ComponentFixture; + let floatLabelRef: ComponentRef; + let hostElement: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({ imports: [FloatLabel] }); + + fixture = TestBed.createComponent(FloatLabel); + floatLabel = fixture.componentInstance; + floatLabelRef = fixture.componentRef; + hostElement = fixture.nativeElement; + fixture.detectChanges(); + }); + + it('should create the component', () => { + expect(floatLabel).toBeTruthy(); + }); + + it('should apply p-floatlabel class to the host element', () => { + expect(hostElement.classList.contains('p-floatlabel')).toBeTrue(); + }); + + it('should apply p-floatlabel-over class by default (variant is "over")', () => { + expect(hostElement.classList.contains('p-floatlabel-over')).toBeTrue(); + }); + + it('should apply p-floatlabel-on class when variant is set to "on"', () => { + floatLabelRef.setInput('variant', 'on'); + fixture.detectChanges(); + expect(hostElement.classList.contains('p-floatlabel-on')).toBeTrue(); + expect(hostElement.classList.contains('p-floatlabel-over')).toBeFalse(); + }); + + it('should apply p-floatlabel-in class when variant is set to "in"', () => { + floatLabelRef.setInput('variant', 'in'); + fixture.detectChanges(); + expect(hostElement.classList.contains('p-floatlabel-in')).toBeTrue(); + expect(hostElement.classList.contains('p-floatlabel-over')).toBeFalse(); + }); + + it('should not have p-floatlabel-in or p-floatlabel-on class when variant is "over"', () => { + floatLabelRef.setInput('variant', 'over'); + fixture.detectChanges(); + expect(hostElement.classList.contains('p-floatlabel-over')).toBeTrue(); + expect(hostElement.classList.contains('p-floatlabel-in')).toBeFalse(); + expect(hostElement.classList.contains('p-floatlabel-on')).toBeFalse(); + }); + + it('should project content inside the ng-content area', () => { + const content = document.createElement('span'); + content.textContent = 'Test Label'; + hostElement.appendChild(content); + fixture.detectChanges(); + expect(hostElement.textContent).toContain('Test Label'); + }); +}); diff --git a/packages/primeng/src/floatlabel/floatlabel.ts b/packages/primeng/src/floatlabel/floatlabel.ts index e9ad7a4c98a..ff5b97a9d3d 100755 --- a/packages/primeng/src/floatlabel/floatlabel.ts +++ b/packages/primeng/src/floatlabel/floatlabel.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 { FloatLabelStyle } from './style/floatlabelstyle'; @@ -11,16 +10,16 @@ import { FloatLabelStyle } from './style/floatlabelstyle'; @Component({ selector: 'p-floatlabel, p-floatLabel, p-float-label', standalone: true, - imports: [CommonModule, SharedModule], + imports: [SharedModule], template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [FloatLabelStyle], host: { '[class.p-floatlabel]': 'true', - '[class.p-floatlabel-over]': "variant === 'over'", - '[class.p-floatlabel-on]': "variant === 'on'", - '[class.p-floatlabel-in]': "variant === 'in'" + '[class.p-floatlabel-over]': "variant() === 'over'", + '[class.p-floatlabel-on]': "variant() === 'on'", + '[class.p-floatlabel-in]': "variant() === 'in'" } }) export class FloatLabel extends BaseComponent { @@ -29,7 +28,7 @@ export class FloatLabel extends BaseComponent { * Defines the positioning of the label relative to the input. * @group Props */ - @Input() variant: 'in' | 'over' | 'on' = 'over'; + variant = input<'in' | 'over' | 'on'>('over'); } @NgModule({