Skip to content

Commit fe67577

Browse files
JesmoDevJesmoDev
committed
added more tests
1 parent 0a6a8b7 commit fe67577

File tree

2 files changed

+139
-9
lines changed

2 files changed

+139
-9
lines changed

‎packages/uui-pagination/lib/uui-pagination.element.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,7 @@ export class UUIPaginationElement extends LitElement {
6565
this.observer.observe(this.buttonGroup);
6666

6767
this.updateLabel();
68-
// Wait for first rendering complete:
69-
window.requestAnimationFrame(() => {
70-
this.calculateRange();
71-
});
68+
this.calculateRange();
7269
}
7370

7471
willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
@@ -236,7 +233,7 @@ export class UUIPaginationElement extends LitElement {
236233
class="nav-button"
237234
role="listitem"
238235
aria-label="Go to first page"
239-
.disabled=${1 === this._current}
236+
?disabled=${this.current === 1}
240237
@click=${() => this.goToPage(1)}>
241238
First
242239
</uui-button>`;
@@ -249,7 +246,7 @@ export class UUIPaginationElement extends LitElement {
249246
class="nav-button"
250247
role="listitem"
251248
aria-label="Go to previous page"
252-
.disabled=${this.current === 1}
249+
?disabled=${this.current === 1}
253250
@click=${this.goToPreviousPage}>
254251
Previous
255252
</uui-button>`;
@@ -262,7 +259,7 @@ export class UUIPaginationElement extends LitElement {
262259
role="listitem"
263260
class="nav-button"
264261
aria-label="Go to next page"
265-
.disabled=${this.current === this.total}
262+
?disabled=${this.current === this.total}
266263
@click=${this.goToNextPage}>
267264
Next
268265
</uui-button>`;

‎packages/uui-pagination/lib/uui-pagination.test.ts

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,145 @@
1-
import { html, fixture, expect } from '@open-wc/testing';
1+
import {
2+
html,
3+
fixture,
4+
expect,
5+
waitUntil,
6+
elementUpdated,
7+
} from '@open-wc/testing';
28
import { UUIPaginationElement } from './uui-pagination.element';
39
import '.';
410

511
describe('UUIPaginationElement', () => {
612
let element: UUIPaginationElement;
713

814
beforeEach(async () => {
9-
element = await fixture(html` <uui-pagination></uui-pagination> `);
15+
element = await fixture(
16+
html` <uui-pagination .total=${30}></uui-pagination> `
17+
);
18+
});
19+
20+
// it('shows the correct number of pages', async () => {
21+
// // (element.shadowRoot?.querySelector('#group') as HTMLElement).style.width =
22+
// // '500px';
23+
// // await waitUntil(() => element.visiblePages.length > 1);
24+
// // console.log(element.shadowRoot);
25+
26+
// // const buttons = element.shadowRoot?.querySelector('#group')?.children;
27+
28+
// // console.log(buttons);
29+
30+
// expect(true).to.be.false;
31+
// });
32+
33+
it('sets active class on current page', async () => {
34+
await waitUntil(() => element.visiblePages.length > 1);
35+
element.current = 2;
36+
const button = element.shadowRoot?.querySelector('#group')?.children[3]!;
37+
await elementUpdated(button);
38+
39+
await expect(button).to.have.class('active-button');
40+
});
41+
42+
it('goes to selected page on click', async () => {
43+
await waitUntil(() => element.visiblePages.length > 1);
44+
const button = element.shadowRoot?.querySelector('#group')
45+
?.children[3]! as HTMLElement;
46+
button.click();
47+
48+
await elementUpdated(element);
49+
50+
await expect(button).to.have.class('active-button');
51+
await expect(element.current).to.equal(2);
52+
});
53+
54+
it('goes to previous page on click', async () => {
55+
await waitUntil(() => element.visiblePages.length > 1);
56+
element.current = 2;
57+
const buttons = element.shadowRoot?.querySelector('#group')?.children;
58+
const prevButton = buttons![1] as HTMLElement;
59+
const activeButton = buttons![2] as HTMLElement;
60+
prevButton.click();
61+
62+
await elementUpdated(element);
63+
64+
await expect(element.current).to.equal(1);
65+
await expect(activeButton).to.have.class('active-button');
66+
});
67+
68+
it('goes to next page on click', async () => {
69+
await waitUntil(() => element.visiblePages.length > 1);
70+
element.current = 2;
71+
const buttons = element.shadowRoot?.querySelector('#group')?.children;
72+
const nextButton = buttons![6] as HTMLElement;
73+
const activeButton = buttons![3] as HTMLElement;
74+
nextButton.click();
75+
76+
await elementUpdated(element);
77+
78+
await expect(element.current).to.equal(3);
79+
await expect(activeButton).to.have.class('active-button');
80+
});
81+
82+
it('goes to last page on click and disables last and next buttons', async () => {
83+
await waitUntil(() => element.visiblePages.length > 1);
84+
let buttons = element.shadowRoot?.querySelector('#group')?.children;
85+
const lastButton = buttons![7] as HTMLElement;
86+
const nextButton = buttons![6] as HTMLElement;
87+
lastButton.click();
88+
89+
await elementUpdated(element);
90+
91+
buttons = element.shadowRoot?.querySelector('#group')?.children;
92+
const activeButton = buttons![5] as HTMLElement;
93+
94+
await expect(element.current).to.equal(30);
95+
await expect(activeButton).to.have.class('active-button');
96+
await expect(nextButton).to.have.attribute('disabled');
97+
await expect(lastButton).to.have.attribute('disabled');
98+
});
99+
100+
it('goes to first page on click and disables first and previous buttons', async () => {
101+
await waitUntil(() => element.visiblePages.length > 1);
102+
element.current = 3;
103+
const buttons = element.shadowRoot?.querySelector('#group')?.children;
104+
const firstButton = buttons![0] as HTMLElement;
105+
const previousButton = buttons![1] as HTMLElement;
106+
const activeButton = buttons![2] as HTMLElement;
107+
firstButton.click();
108+
109+
await elementUpdated(element);
110+
111+
await expect(element.current).to.equal(1);
112+
await expect(activeButton).to.have.class('active-button');
113+
await expect(firstButton).to.have.attribute('disabled');
114+
await expect(previousButton).to.have.attribute('disabled');
115+
});
116+
117+
it('shows the dots when more pages than visible', async () => {
118+
element = await fixture(
119+
html` <uui-pagination .total=${30}></uui-pagination> `
120+
);
121+
122+
const children = element.shadowRoot?.querySelector('#group')?.children;
123+
const arr = [].slice.call(children);
124+
125+
const hasDots =
126+
arr.filter((e: HTMLElement) => e.classList.contains('dots-button'))
127+
.length > 0;
128+
await expect(hasDots).to.be.true;
129+
});
130+
131+
it('hides the dots when only one page', async () => {
132+
element = await fixture(
133+
html` <uui-pagination .total=${1}></uui-pagination> `
134+
);
135+
136+
const children = element.shadowRoot?.querySelector('#group')?.children;
137+
const arr = [].slice.call(children);
138+
139+
const hasDots =
140+
arr.filter((e: HTMLElement) => e.classList.contains('dots-button'))
141+
.length > 0;
142+
await expect(hasDots).to.be.false;
10143
});
11144

12145
it('passes the a11y audit', async () => {

0 commit comments

Comments
 (0)