diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.html b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.html index d63692226e..5cee54f1eb 100644 --- a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.html +++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.html @@ -1,10 +1,10 @@
- @if (notificationNumber) { + @if (notificationNumber()) {
- {{ notificationNumber }} + {{ notificationNumber() }}
}
- + diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.spec.ts b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.spec.ts index 10eeca420d..c5fdf75820 100644 --- a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.spec.ts +++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.spec.ts @@ -1,115 +1,114 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ChangeDetectorRef, ElementRef, NO_ERRORS_SCHEMA, Renderer2 } from '@angular/core'; -import { RouterTestingModule } from '@angular/router/testing'; - -import { configureTestSuite, expectPropertiesValues } from '../../../util-test/util-expect.spec'; +import { Component, viewChild } from '@angular/core'; +import { ElementRef, NO_ERRORS_SCHEMA, Renderer2 } from '@angular/core'; import { PoControlPositionService } from '../../../services/po-control-position/po-control-position.service'; import { PoPopupComponent } from '../../po-popup//po-popup.component'; import { PoToolbarNotificationComponent } from './po-toolbar-notification.component'; +@Component({ + template: ``, + standalone: false +}) +class HostComponent { + notificationNumber: any = 0; + notificationActions = undefined; + + notification = viewChild(PoToolbarNotificationComponent); +} + describe('PoToolbarNotificationComponent: ', () => { + let hostComponent: HostComponent; let component: PoToolbarNotificationComponent; - let fixture: ComponentFixture; - let nativeElement; + let fixture: ComponentFixture; + let nativeElement: HTMLElement; - configureTestSuite(() => { - const elementRef = {}; - const renderer2 = { - listen: () => ({}) - }; + beforeEach(async () => { + const renderer2 = { listen: () => ({}) }; const poControlPositionService = { setElements: () => ({}), setElementPosition: () => ({}) }; - TestBed.configureTestingModule({ - imports: [RouterTestingModule.withRoutes([])], - declarations: [PoToolbarNotificationComponent, PoPopupComponent], + await TestBed.configureTestingModule({ + declarations: [HostComponent, PoToolbarNotificationComponent, PoPopupComponent], schemas: [NO_ERRORS_SCHEMA], providers: [ - { provide: ElementRef, useValue: { elementRef } }, { provide: Renderer2, useValue: renderer2 }, { provide: PoControlPositionService, useValue: poControlPositionService } ] - }); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PoToolbarNotificationComponent); - component = fixture.componentInstance; - nativeElement = fixture.debugElement.nativeElement; - - component['_notificationNumber'] = 0; + }).compileComponents(); + fixture = TestBed.createComponent(HostComponent); + hostComponent = fixture.componentInstance; fixture.detectChanges(); + component = hostComponent.notification(); + nativeElement = fixture.debugElement.nativeElement; }); it('should be created', () => { expect(component).toBeTruthy(); }); - it('should call detectChanges after view init', async () => { - const detectChangesSpy = spyOn(component['cdr'], 'detectChanges'); - - component.ngAfterViewInit(); - - expect(detectChangesSpy).toHaveBeenCalled(); - }); - it('should correctly reference the ViewChild notification element', () => { - fixture.detectChanges(); // Garante que o ViewChild foi inicializado após a renderização - - const notificationElement = fixture.nativeElement.querySelector('po-icon'); - expect(component.notificationRef.nativeElement).toBe(notificationElement); + const notificationElement = nativeElement.querySelector('po-icon'); + expect(component.notificationRef().nativeElement).toBe(notificationElement); }); describe('Properties: ', () => { - it('notificationNumber: should update property `p-notification-number` with `0` when invalid values', () => { + it('notificationNumber: should return `0` when invalid values', () => { const invalidValues = [undefined, null, {}, NaN, 'string', 0.1, false, true]; - expectPropertiesValues(component, 'notificationNumber', invalidValues, 0); + invalidValues.forEach(val => { + hostComponent.notificationNumber = val; + fixture.detectChanges(); + expect(component.notificationNumber()).toBe(0); + }); }); - it('notificationNumber: should update property `p-notification-number` with valid values', () => { - const validValues = [2, 3]; + it('notificationNumber: should return valid integer values', () => { + hostComponent.notificationNumber = 2; + fixture.detectChanges(); + expect(component.notificationNumber()).toBe(2); - expectPropertiesValues(component, 'notificationNumber', validValues, validValues); + hostComponent.notificationNumber = 3; + fixture.detectChanges(); + expect(component.notificationNumber()).toBe(3); }); }); describe('Templates: ', () => { it('should not show count badge when notificationNumber is 0', () => { - component['_notificationNumber'] = 0; - + hostComponent.notificationNumber = 0; fixture.detectChanges(); expect(nativeElement.querySelector('.po-toolbar-notification-badge')).toBeFalsy(); }); - it('should not show count badge when notificationNumber is undefined', () => { - component['_notificationNumber'] = undefined; - + it('should show count badge when notificationNumber transitions from 0 to positive', () => { + hostComponent.notificationNumber = 0; fixture.detectChanges(); - expect(nativeElement.querySelector('.po-toolbar-notification-badge')).toBeFalsy(); - }); - - it('should not show count badge when notificationNumber is null', () => { - component['_notificationNumber'] = null; + hostComponent.notificationNumber = 1; fixture.detectChanges(); - expect(nativeElement.querySelector('.po-toolbar-notification-badge')).toBeFalsy(); + const badge = nativeElement.querySelector('.po-toolbar-notification-badge'); + expect(badge).toBeTruthy(); + expect(badge.textContent.trim()).toBe('1'); }); it('should show count badge when have notificationNumber', () => { - component['_notificationNumber'] = 10; - + hostComponent.notificationNumber = 10; fixture.detectChanges(); - expect(nativeElement.querySelector('.po-toolbar-notification-badge')).toBeTruthy(); + const badge = nativeElement.querySelector('.po-toolbar-notification-badge'); + expect(badge).toBeTruthy(); + expect(badge.textContent.trim()).toBe('10'); }); }); }); diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.ts b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.ts index 18260fd42e..e6580b6185 100644 --- a/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.ts +++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar-notification/po-toolbar-notification.component.ts @@ -1,9 +1,13 @@ -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild, inject } from '@angular/core'; +import { Component, ElementRef, input, viewChild } from '@angular/core'; import { PoControlPositionService } from '../../../services/po-control-position/po-control-position.service'; import { PoToolbarAction } from '../po-toolbar-action.interface'; +function toIntegerOrZero(value: unknown): number { + return Number.isInteger(value) ? (value as number) : 0; +} + /** * @docsPrivate * @@ -23,24 +27,13 @@ import { PoToolbarAction } from '../po-toolbar-action.interface'; providers: [PoControlPositionService], standalone: false }) -export class PoToolbarNotificationComponent implements AfterViewInit { - private cdr = inject(ChangeDetectorRef); - - @ViewChild('notification', { read: ElementRef }) notificationRef: ElementRef; - - @Input('p-notification-actions') notificationActions?: Array; - - private _notificationNumber?: number = 0; - - @Input('p-notification-number') set notificationNumber(value: number) { - this._notificationNumber = Number.isInteger(value) ? value : 0; - } +export class PoToolbarNotificationComponent { + readonly notificationRef = viewChild('notification', { read: ElementRef }); - get notificationNumber() { - return this._notificationNumber; - } + readonly notificationActions = input>(undefined, { alias: 'p-notification-actions' }); - ngAfterViewInit() { - this.cdr.detectChanges(); - } + readonly notificationNumber = input(0, { + alias: 'p-notification-number', + transform: toIntegerOrZero + }); }