fix(module:pagination): add ul tag (#7500)

* fix(module:pagination): add ul tag * fix(module:pagination): sync dom structure with antd * fix(module:pagination): resolve test case failed * fix(module:pagination): resolve reviewed change requested * fix(module:pagination): pagination-simple add ant-pagination class name * fix(module:pagination): rollback pagination class Co-authored-by: simplejason <simplejason.coder@gmail.com>
NG-ZORRO · Aug 23, 2022 · becdd68 · becdd68
1 parent a142eb2
commit becdd68
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 67 deletions.
diff --git a/components/pagination/pagination-default.component.ts b/components/pagination/pagination-default.component.ts
@@ -38,40 +38,42 @@ import { PaginationItemRenderContext } from './pagination.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-template #containerTemplate>
-      <li class="ant-pagination-total-text" *ngIf="showTotal">
-        <ng-template
-          [ngTemplateOutlet]="showTotal"
-          [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
-        ></ng-template>
-      </li>
-      <li
-        *ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
-        nz-pagination-item
-        [locale]="locale"
-        [type]="page.type"
-        [index]="page.index"
-        [disabled]="!!page.disabled"
-        [itemRender]="itemRender"
-        [active]="pageIndex === page.index"
-        (gotoIndex)="jumpPage($event)"
-        (diffIndex)="jumpDiff($event)"
-        [direction]="dir"
-      ></li>
-      <div
-        nz-pagination-options
-        *ngIf="showQuickJumper || showSizeChanger"
-        [total]="total"
-        [locale]="locale"
-        [disabled]="disabled"
-        [nzSize]="nzSize"
-        [showSizeChanger]="showSizeChanger"
-        [showQuickJumper]="showQuickJumper"
-        [pageIndex]="pageIndex"
-        [pageSize]="pageSize"
-        [pageSizeOptions]="pageSizeOptions"
-        (pageIndexChange)="onPageIndexChange($event)"
-        (pageSizeChange)="onPageSizeChange($event)"
-      ></div>
+      <ul>
+        <li class="ant-pagination-total-text" *ngIf="showTotal">
+          <ng-template
+            [ngTemplateOutlet]="showTotal"
+            [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
+          ></ng-template>
+        </li>
+        <li
+          *ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
+          nz-pagination-item
+          [locale]="locale"
+          [type]="page.type"
+          [index]="page.index"
+          [disabled]="!!page.disabled"
+          [itemRender]="itemRender"
+          [active]="pageIndex === page.index"
+          (gotoIndex)="jumpPage($event)"
+          (diffIndex)="jumpDiff($event)"
+          [direction]="dir"
+        ></li>
+        <li
+          nz-pagination-options
+          *ngIf="showQuickJumper || showSizeChanger"
+          [total]="total"
+          [locale]="locale"
+          [disabled]="disabled"
+          [nzSize]="nzSize"
+          [showSizeChanger]="showSizeChanger"
+          [showQuickJumper]="showQuickJumper"
+          [pageIndex]="pageIndex"
+          [pageSize]="pageSize"
+          [pageSizeOptions]="pageSizeOptions"
+          (pageIndexChange)="onPageIndexChange($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></li>
+      </ul>
     </ng-template>
   `
 })

diff --git a/components/pagination/pagination-options.component.ts b/components/pagination/pagination-options.component.ts
@@ -18,7 +18,7 @@ import { toNumber } from 'ng-zorro-antd/core/util';
 import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
 
 @Component({
-  selector: 'div[nz-pagination-options]',
+  selector: 'li[nz-pagination-options]',
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/components/pagination/pagination-simple.component.ts b/components/pagination/pagination-simple.component.ts
@@ -38,29 +38,31 @@ import { PaginationItemRenderContext } from './pagination.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-template #containerTemplate>
-      <li
-        nz-pagination-item
-        [attr.title]="locale.prev_page"
-        [disabled]="isFirstIndex"
-        [direction]="dir"
-        (click)="prePage()"
-        type="prev"
-        [itemRender]="itemRender"
-      ></li>
-      <li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
-        <input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
-        <span class="ant-pagination-slash">/</span>
-        {{ lastIndex }}
-      </li>
-      <li
-        nz-pagination-item
-        [attr.title]="locale?.next_page"
-        [disabled]="isLastIndex"
-        [direction]="dir"
-        (click)="nextPage()"
-        type="next"
-        [itemRender]="itemRender"
-      ></li>
+      <ul>
+        <li
+          nz-pagination-item
+          [attr.title]="locale.prev_page"
+          [disabled]="isFirstIndex"
+          [direction]="dir"
+          (click)="prePage()"
+          type="prev"
+          [itemRender]="itemRender"
+        ></li>
+        <li [attr.title]="pageIndex + '/' + lastIndex" class="ant-pagination-simple-pager">
+          <input [disabled]="disabled" [value]="pageIndex" (keydown.enter)="jumpToPageViaInput($event)" size="3" />
+          <span class="ant-pagination-slash">/</span>
+          {{ lastIndex }}
+        </li>
+        <li
+          nz-pagination-item
+          [attr.title]="locale?.next_page"
+          [disabled]="isLastIndex"
+          [direction]="dir"
+          (click)="nextPage()"
+          type="next"
+          [itemRender]="itemRender"
+        ></li>
+      </ul>
     </ng-template>
   `
 })

diff --git a/components/pagination/pagination.spec.ts b/components/pagination/pagination.spec.ts
@@ -39,19 +39,21 @@ describe('pagination', () => {
     let testComponent: NzTestPaginationComponent;
     let pagination: DebugElement;
     let paginationElement: HTMLElement;
+    let paginationRootElement: HTMLElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestPaginationComponent);
       testComponent = fixture.debugElement.componentInstance;
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
-      paginationElement = pagination.nativeElement;
+      paginationRootElement = pagination.nativeElement;
+      paginationElement = pagination.nativeElement.querySelector('ul')!;
     });
 
     describe('not simple mode', () => {
       it('should className correct', () => {
         fixture.detectChanges();
-        expect(paginationElement.classList.contains('ant-pagination')).toBe(true);
+        expect(paginationRootElement.classList.contains('ant-pagination')).toBe(true);
         expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
         expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-disabled')).toBe(true);
         expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
@@ -64,7 +66,7 @@ describe('pagination', () => {
       it('should small size className correct', () => {
         testComponent.size = 'small';
         fixture.detectChanges();
-        expect(paginationElement.classList.contains('mini')).toBe(true);
+        expect(paginationRootElement.classList.contains('mini')).toBe(true);
       });
 
       it('should pageIndex change work', () => {
@@ -237,18 +239,19 @@ describe('pagination', () => {
         fixture.detectChanges();
         testComponent.disabled = true;
         fixture.detectChanges();
-        expect(paginationElement.classList.contains('ant-pagination-disabled')).toBe(true);
+        expect(paginationRootElement.classList.contains('ant-pagination-disabled')).toBe(true);
       });
     });
 
     describe('simple mode', () => {
       beforeEach(() => {
         testComponent.simple = true;
         fixture.detectChanges();
-        paginationElement = pagination.nativeElement;
+        paginationRootElement = pagination.nativeElement;
+        paginationElement = pagination.nativeElement.querySelector('ul')!;
       });
       it('should simple className work', () => {
-        expect(paginationElement.classList.contains('ant-pagination-simple')).toBe(true);
+        expect(paginationRootElement.classList.contains('ant-pagination-simple')).toBe(true);
         expect(paginationElement.firstElementChild!.classList.contains('ant-pagination-prev')).toBe(true);
         expect(paginationElement.lastElementChild!.classList.contains('ant-pagination-next')).toBe(true);
       });
@@ -313,7 +316,7 @@ describe('pagination', () => {
       fixture = TestBed.createComponent(NzTestPaginationRenderComponent);
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
-      paginationElement = pagination.nativeElement;
+      paginationElement = pagination.nativeElement.querySelector('ul')!;
     });
     it('should render correct', () => {
       fixture.detectChanges();
@@ -334,7 +337,7 @@ describe('pagination', () => {
       testComponent = fixture.debugElement.componentInstance;
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
-      paginationElement = pagination.nativeElement;
+      paginationElement = pagination.nativeElement.querySelector('ul')!;
     });
 
     it('should render correct', () => {
@@ -389,7 +392,7 @@ describe('pagination', () => {
       fixture = TestBed.createComponent(NzTestPaginationRtlComponent);
       pagination = fixture.debugElement.query(By.directive(NzPaginationComponent));
       fixture.detectChanges();
-      paginationElement = pagination.nativeElement;
+      paginationElement = pagination.nativeElement.querySelector('ul')!;
     });
 
     it('should pagination className correct on dir change', () => {