Merge pull request #14678 from tamas-nemeth/fix/table-paginator-missi…

…ng-p-paginator-bottom-class fix(table): paginator missing p-paginator-top/bottom class
primefaces · Feb 1, 2024 · c2a6730 · c2a6730
2 parents 85e36f4 + de951ca
commit c2a6730
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/app/components/paginator/paginator.spec.ts b/src/app/components/paginator/paginator.spec.ts
@@ -27,14 +27,20 @@ describe('Paginator', () => {
         expect(paginatorEl).toBeTruthy();
     });
 
-    it('should change style and styleClass', () => {
-        paginator.style = { height: '250px' };
-        paginator.styleClass = 'Primeng ROCKS!';
+    it('should apply style', () => {
+        fixture.componentRef.setInput('style', { height: '250px' });
         fixture.detectChanges();
 
-        const paginatorEl = fixture.debugElement.query(By.css('.p-paginator'));
-        expect(paginatorEl.nativeElement.className).toContain('Primeng ROCKS!');
-        expect(paginatorEl.nativeElement.style.height).toEqual('250px');
+        const paginatorElement = fixture.debugElement.query(By.css('.p-paginator'));
+        expect(paginatorElement?.nativeElement?.style?.height).toEqual('250px');
+    });
+
+    it('should apply styleClass', () => {
+      fixture.componentRef.setInput('styleClass', 'p-paginator-bottom');
+      fixture.detectChanges();
+
+      const paginatorElement = fixture.debugElement.query(By.css('.p-paginator'));
+      expect(paginatorElement?.nativeElement).toHaveClass('p-paginator-bottom');
     });
 
     it('should use alwaysShow false', () => {

diff --git a/src/app/components/table/table.spec.ts b/src/app/components/table/table.spec.ts
@@ -8,6 +8,7 @@ import { SharedModule } from 'primeng/api';
 import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu';
 import { DropdownModule } from 'primeng/dropdown';
 import { EditableColumn, Table, TableModule } from './table';
+import type { Paginator } from '../paginator/paginator';
 
 @Component({
     template: `
@@ -444,17 +445,17 @@ describe('Table', () => {
         expect(table.summaryTemplate).toBeTruthy();
     });
 
-    it('should use 2 paginator', () => {
+    it('should use 2 paginators', () => {
         fixture.detectChanges();
 
         table.paginator = true;
         table.rows = 5;
         table.paginatorPosition = 'both';
-        const basicTableEl = fixture.debugElement.query(By.css('.basicTable'));
         fixture.detectChanges();
 
-        const paginatorCount = basicTableEl.queryAll(By.css('p-paginator'));
-        expect(paginatorCount.length).toEqual(2);
+        const basicTableElement = fixture.debugElement.query(By.css('.basicTable'));
+        const paginators = basicTableElement?.queryAll(By.css('p-paginator'));
+        expect(paginators?.length).toEqual(2);
     });
 
     it('should use paginator and list 5 elements', () => {
@@ -476,6 +477,33 @@ describe('Table', () => {
         expect(bodyRows.length).toEqual(5);
     });
 
+    it('should pass top/botton styleClass to paginators', () => {
+      table.paginator = true;
+      table.paginatorPosition = 'both';
+      fixture.detectChanges();
+
+      const basicTableElement = fixture.debugElement.query(By.css('.basicTable'));
+      const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator);
+      expect(paginators).toEqual([
+        jasmine.objectContaining({ styleClass: 'p-paginator-top' }),
+        jasmine.objectContaining({ styleClass: 'p-paginator-bottom' })
+      ]);
+    });
+
+    it('should pass paginatorStyleClass to paginators', () => {
+      table.paginator = true;
+      table.paginatorPosition = 'both';
+      table.paginatorStyleClass = 'p-paginator-custom';
+      fixture.detectChanges();
+
+      const basicTableElement = fixture.debugElement.query(By.css('.basicTable'));
+      const paginators = basicTableElement?.queryAll(By.css('p-paginator'))?.map(({ componentInstance }) => componentInstance as Paginator);
+      expect(paginators).toEqual([
+        jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-top' }),
+        jasmine.objectContaining({ styleClass: 'p-paginator-custom p-paginator-bottom' })
+      ]);
+    });
+
     it('should use custom filter and show 2 items', fakeAsync(() => {
         fixture.detectChanges();
 

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -146,7 +146,6 @@ export class TableService {
                 [first]="first"
                 [totalRecords]="totalRecords"
                 [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-top"
                 [alwaysShow]="alwaysShowPaginator"
                 (onPageChange)="onPageChange($event)"
                 [rowsPerPageOptions]="rowsPerPageOptions"
@@ -162,7 +161,7 @@ export class TableService {
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showJumpToPageInput]="showJumpToPageInput"
                 [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
+                [styleClass]="getPaginatorStyleClasses('p-paginator-top')"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
@@ -265,7 +264,6 @@ export class TableService {
                 [first]="first"
                 [totalRecords]="totalRecords"
                 [pageLinkSize]="pageLinks"
-                styleClass="p-paginator-bottom"
                 [alwaysShow]="alwaysShowPaginator"
                 (onPageChange)="onPageChange($event)"
                 [rowsPerPageOptions]="rowsPerPageOptions"
@@ -281,7 +279,7 @@ export class TableService {
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showJumpToPageInput]="showJumpToPageInput"
                 [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
+                [styleClass]="getPaginatorStyleClasses('p-paginator-bottom')"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="dropdownicon" *ngIf="paginatorDropdownIconTemplate">
@@ -3028,6 +3026,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
         this.destroyStyleElement();
         this.destroyResponsiveStyle();
     }
+
+    getPaginatorStyleClasses(className?: string) {
+      return [this.paginatorStyleClass, className].filter(c => !!c).join(' ').trim();
+    }
 }
 
 @Component({