Skip to content

Commit 461d76c

Browse files
dnlrbzzarend
dnlrbz
authored and
zarend
committed
refactor(material/paginator): refactor tests for paginator texts (#23516)
Refactored tests of the Angular Material `paginator` component. Removed comments and instead extracted tested behaviours into separate test cases, to keep them simple and isolated. (cherry picked from commit 71937ce)
1 parent d20ca92 commit 461d76c

File tree

2 files changed

+130
-90
lines changed

2 files changed

+130
-90
lines changed

‎src/material-experimental/mdc-paginator/paginator.spec.ts

Lines changed: 61 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -23,52 +23,72 @@ describe('MDC-based MatPaginator', () => {
2323
}
2424

2525
describe('with the default internationalization provider', () => {
26-
it('should show the right range text', () => {
27-
const fixture = createComponent(MatPaginatorApp);
28-
const component = fixture.componentInstance;
29-
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
30-
31-
// View second page of list of 100, each page contains 10 items.
32-
component.length = 100;
33-
component.pageSize = 10;
34-
component.pageIndex = 1;
35-
fixture.detectChanges();
36-
expect(rangeElement.innerText.trim()).toBe('11 – 20 of 100');
26+
describe('showing the right range text', () => {
27+
it('should show second page of list of 100, each page contains 10 items', () => {
28+
const fixture = createComponent(MatPaginatorApp);
29+
const component = fixture.componentInstance;
30+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
31+
component.length = 100;
32+
component.pageSize = 10;
33+
component.pageIndex = 1;
34+
fixture.detectChanges();
35+
expect(rangeElement.textContent!.trim()).toBe('11 – 20 of 100');
36+
});
3737

38-
// View third page of list of 200, each page contains 20 items.
39-
component.length = 200;
40-
component.pageSize = 20;
41-
component.pageIndex = 2;
42-
fixture.detectChanges();
43-
expect(rangeElement.innerText.trim()).toBe('41 – 60 of 200');
38+
it('should show third page of list of 200, each page contains 20 items', () => {
39+
const fixture = createComponent(MatPaginatorApp);
40+
const component = fixture.componentInstance;
41+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
42+
component.length = 200;
43+
component.pageSize = 20;
44+
component.pageIndex = 2;
45+
fixture.detectChanges();
46+
expect(rangeElement.textContent!.trim()).toBe('41 – 60 of 200');
47+
});
4448

45-
// View first page of list of 0, each page contains 5 items.
46-
component.length = 0;
47-
component.pageSize = 5;
48-
component.pageIndex = 2;
49-
fixture.detectChanges();
50-
expect(rangeElement.innerText.trim()).toBe('0 of 0');
49+
it('should show first page of list of 0, each page contains 5 items', () => {
50+
const fixture = createComponent(MatPaginatorApp);
51+
const component = fixture.componentInstance;
52+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
53+
component.length = 0;
54+
component.pageSize = 5;
55+
component.pageIndex = 2;
56+
fixture.detectChanges();
57+
expect(rangeElement.textContent!.trim()).toBe('0 of 0');
58+
});
5159

52-
// View third page of list of 12, each page contains 5 items.
53-
component.length = 12;
54-
component.pageSize = 5;
55-
component.pageIndex = 2;
56-
fixture.detectChanges();
57-
expect(rangeElement.innerText.trim()).toBe('11 – 12 of 12');
60+
it('should show third page of list of 12, each page contains 5 items', () => {
61+
const fixture = createComponent(MatPaginatorApp);
62+
const component = fixture.componentInstance;
63+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
64+
component.length = 12;
65+
component.pageSize = 5;
66+
component.pageIndex = 2;
67+
fixture.detectChanges();
68+
expect(rangeElement.textContent!.trim()).toBe('11 – 12 of 12');
69+
});
5870

59-
// View third page of list of 10, each page contains 5 items.
60-
component.length = 10;
61-
component.pageSize = 5;
62-
component.pageIndex = 2;
63-
fixture.detectChanges();
64-
expect(rangeElement.innerText.trim()).toBe('11 – 15 of 10');
71+
it('should show third page of list of 10, each page contains 5 items', () => {
72+
const fixture = createComponent(MatPaginatorApp);
73+
const component = fixture.componentInstance;
74+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
75+
component.length = 10;
76+
component.pageSize = 5;
77+
component.pageIndex = 2;
78+
fixture.detectChanges();
79+
expect(rangeElement.textContent!.trim()).toBe('11 – 15 of 10');
80+
});
6581

66-
// View third page of list of -5, each page contains 5 items.
67-
component.length = -5;
68-
component.pageSize = 5;
69-
component.pageIndex = 2;
70-
fixture.detectChanges();
71-
expect(rangeElement.innerText.trim()).toBe('11 – 15 of 0');
82+
it('should show third page of list of -5, each page contains 5 items', () => {
83+
const fixture = createComponent(MatPaginatorApp);
84+
const component = fixture.componentInstance;
85+
const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label');
86+
component.length = -5;
87+
component.pageSize = 5;
88+
component.pageIndex = 2;
89+
fixture.detectChanges();
90+
expect(rangeElement.textContent!.trim()).toBe('11 – 15 of 0');
91+
});
7292
});
7393

7494
it('should show right aria-labels for select and buttons', () => {

‎src/material/paginator/paginator.spec.ts

Lines changed: 69 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing';
2-
import {Component, ViewChild, Type, Provider} from '@angular/core';
1+
import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
2+
import {Component, Provider, Type, ViewChild} from '@angular/core';
33
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
44
import {dispatchMouseEvent} from '../../cdk/testing/private';
55
import {ThemePalette} from '@angular/material/core';
66
import {MatSelect} from '@angular/material/select';
77
import {By} from '@angular/platform-browser';
8-
import {MatPaginatorModule, MatPaginator, MatPaginatorIntl} from './index';
8+
import {MatPaginator, MatPaginatorIntl, MatPaginatorModule} from './index';
99
import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator';
1010

1111

@@ -23,52 +23,72 @@ describe('MatPaginator', () => {
2323
}
2424

2525
describe('with the default internationalization provider', () => {
26-
it('should show the right range text', () => {
27-
const fixture = createComponent(MatPaginatorApp);
28-
const component = fixture.componentInstance;
29-
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
30-
31-
// View second page of list of 100, each page contains 10 items.
32-
component.length = 100;
33-
component.pageSize = 10;
34-
component.pageIndex = 1;
35-
fixture.detectChanges();
36-
expect(rangeElement.innerText.trim()).toBe('11 – 20 of 100');
37-
38-
// View third page of list of 200, each page contains 20 items.
39-
component.length = 200;
40-
component.pageSize = 20;
41-
component.pageIndex = 2;
42-
fixture.detectChanges();
43-
expect(rangeElement.innerText.trim()).toBe('41 – 60 of 200');
44-
45-
// View first page of list of 0, each page contains 5 items.
46-
component.length = 0;
47-
component.pageSize = 5;
48-
component.pageIndex = 2;
49-
fixture.detectChanges();
50-
expect(rangeElement.innerText.trim()).toBe('0 of 0');
51-
52-
// View third page of list of 12, each page contains 5 items.
53-
component.length = 12;
54-
component.pageSize = 5;
55-
component.pageIndex = 2;
56-
fixture.detectChanges();
57-
expect(rangeElement.innerText.trim()).toBe('11 – 12 of 12');
58-
59-
// View third page of list of 10, each page contains 5 items.
60-
component.length = 10;
61-
component.pageSize = 5;
62-
component.pageIndex = 2;
63-
fixture.detectChanges();
64-
expect(rangeElement.innerText.trim()).toBe('11 – 15 of 10');
65-
66-
// View third page of list of -5, each page contains 5 items.
67-
component.length = -5;
68-
component.pageSize = 5;
69-
component.pageIndex = 2;
70-
fixture.detectChanges();
71-
expect(rangeElement.innerText.trim()).toBe('11 – 15 of 0');
26+
describe('showing the right range text', () => {
27+
it('should show second page of list of 100, each page contains 10 items', () => {
28+
const fixture = createComponent(MatPaginatorApp);
29+
const component = fixture.componentInstance;
30+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
31+
component.length = 100;
32+
component.pageSize = 10;
33+
component.pageIndex = 1;
34+
fixture.detectChanges();
35+
expect(rangeElement.textContent!.trim()).toBe('11 – 20 of 100');
36+
});
37+
38+
it('should show third page of list of 200, each page contains 20 items', () => {
39+
const fixture = createComponent(MatPaginatorApp);
40+
const component = fixture.componentInstance;
41+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
42+
component.length = 200;
43+
component.pageSize = 20;
44+
component.pageIndex = 2;
45+
fixture.detectChanges();
46+
expect(rangeElement.textContent!.trim()).toBe('41 – 60 of 200');
47+
});
48+
49+
it('should show first page of list of 0, each page contains 5 items', () => {
50+
const fixture = createComponent(MatPaginatorApp);
51+
const component = fixture.componentInstance;
52+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
53+
component.length = 0;
54+
component.pageSize = 5;
55+
component.pageIndex = 2;
56+
fixture.detectChanges();
57+
expect(rangeElement.textContent!.trim()).toBe('0 of 0');
58+
});
59+
60+
it('should show third page of list of 12, each page contains 5 items', () => {
61+
const fixture = createComponent(MatPaginatorApp);
62+
const component = fixture.componentInstance;
63+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
64+
component.length = 12;
65+
component.pageSize = 5;
66+
component.pageIndex = 2;
67+
fixture.detectChanges();
68+
expect(rangeElement.textContent!.trim()).toBe('11 – 12 of 12');
69+
});
70+
71+
it('should show third page of list of 10, each page contains 5 items', () => {
72+
const fixture = createComponent(MatPaginatorApp);
73+
const component = fixture.componentInstance;
74+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
75+
component.length = 10;
76+
component.pageSize = 5;
77+
component.pageIndex = 2;
78+
fixture.detectChanges();
79+
expect(rangeElement.textContent!.trim()).toBe('11 – 15 of 10');
80+
});
81+
82+
it('should show third page of list of -5, each page contains 5 items', () => {
83+
const fixture = createComponent(MatPaginatorApp);
84+
const component = fixture.componentInstance;
85+
const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
86+
component.length = -5;
87+
component.pageSize = 5;
88+
component.pageIndex = 2;
89+
fixture.detectChanges();
90+
expect(rangeElement.textContent!.trim()).toBe('11 – 15 of 0');
91+
});
7292
});
7393

7494
it('should show right aria-labels for select and buttons', () => {

0 commit comments

Comments
 (0)