Skip to content

Commit 7b148a3

Browse files
nielslyngsoenielslyngsoe
committed
more tests
1 parent 881d3cf commit 7b148a3

File tree

6 files changed

+127
-47
lines changed

6 files changed

+127
-47
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,21 @@ describe('UuiBadge', () => {
1616
it('passes the a11y audit', async () => {
1717
await expect(element).shadowDom.to.be.accessible();
1818
});
19+
20+
describe('properties', () => {
21+
it('has a look property', () => {
22+
expect(element).to.have.property('look');
23+
});
24+
25+
it('has a attention property', () => {
26+
expect(element).to.have.property('attention');
27+
});
28+
});
29+
30+
describe('template', () => {
31+
it('renders a default slot', () => {
32+
const slot = element.shadowRoot!.querySelector('slot')!;
33+
expect(slot).to.exist;
34+
});
35+
});
1936
});

‎packages/uui-base/lib/mixins/SelectableMixin.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
2828
get selectable() {
2929
return this._selectable;
3030
}
31-
3231
set selectable(newVal) {
3332
const oldVal = this._selectable;
3433
this._selectable = newVal;

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ describe('UuiButton', () => {
1717
`
1818
);
1919

20-
inputElement = formElement.querySelector('input');
21-
element = formElement.querySelector('uui-button');
20+
inputElement = formElement.querySelector('input') as any;
21+
element = formElement.querySelector('uui-button') as any;
2222
});
2323

2424
it('renders a slot', () => {
@@ -30,6 +30,19 @@ describe('UuiButton', () => {
3030
await expect(element).shadowDom.to.be.accessible();
3131
});
3232

33+
describe('properties', () => {
34+
it('has a label property', () => {
35+
expect(element).to.have.property('label');
36+
});
37+
});
38+
39+
describe('template', () => {
40+
it('renders a default slot', () => {
41+
const slot = element.shadowRoot!.querySelector('slot')!;
42+
expect(slot).to.exist;
43+
});
44+
});
45+
3346
describe('submit', () => {
3447
let wasSubmitted: boolean;
3548

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

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export class UUIPaginationElement extends LitElement {
5858
connectedCallback() {
5959
super.connectedCallback();
6060
this.setAttribute('role', 'navigation');
61-
this.visiblePages = this._generateVisiblePages(this.current);
61+
this._visiblePages = this._generateVisiblePages(this.current);
6262
}
6363

6464
disconnectedCallback() {
6565
this.observer.disconnect();
6666
}
6767

6868
firstUpdated() {
69-
this.observer.observe(this.buttonGroup);
69+
this.observer.observe(this._pagesGroup);
7070

7171
this.updateLabel();
7272
this.calculateRange();
@@ -89,7 +89,7 @@ export class UUIPaginationElement extends LitElement {
8989
const containerWidth = this.offsetWidth;
9090

9191
// get all the buttons with .nav-button class and sum up their widths
92-
const navButtonsWidth = Array.from(this.navButtons).reduce(
92+
const navButtonsWidth = Array.from(this._navButtons).reduce(
9393
(totalWidth, button) => {
9494
return totalWidth + button.getBoundingClientRect().width;
9595
},
@@ -102,7 +102,8 @@ export class UUIPaginationElement extends LitElement {
102102
// divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.
103103
// Range is number of buttons visible on either "side" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.
104104
const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;
105-
this.range = Math.floor(range);
105+
this._range = Math.max(1, Math.floor(range));
106+
this._visiblePages = this._generateVisiblePages(this.current);
106107
}
107108

108109
private _generateVisiblePages(current: number) {
@@ -129,10 +130,10 @@ export class UUIPaginationElement extends LitElement {
129130
}
130131

131132
@queryAll('uui-button.nav')
132-
private navButtons!: Array<UUIButtonElement>;
133+
private _navButtons!: Array<UUIButtonElement>;
133134

134-
@query('#group')
135-
private buttonGroup!: any;
135+
@query('#pages')
136+
private _pagesGroup!: any;
136137

137138
/**
138139
* This property is used to generate a proper `aria-label`. It will be announced by screen reader as: "<<this.label>>. Current page: <<this.current>>"
@@ -160,21 +161,11 @@ export class UUIPaginationElement extends LitElement {
160161
@property({ type: Number })
161162
total = 1;
162163

163-
private _range = 0;
164164
@state()
165-
get range() {
166-
return this._range;
167-
}
168-
169-
set range(newValue: number) {
170-
const oldValue = this._range;
171-
this._range = newValue <= 0 ? 1 : newValue;
172-
this.visiblePages = this._generateVisiblePages(this.current);
173-
this.requestUpdate('range', oldValue);
174-
}
165+
private _range = 0;
175166

176167
@state()
177-
private visiblePages: number[] = [];
168+
private _visiblePages: number[] = [];
178169

179170
private _current = 1;
180171

@@ -190,7 +181,7 @@ export class UUIPaginationElement extends LitElement {
190181
set current(newValue: number) {
191182
const oldValue = this._current;
192183
this._current = limit(newValue, 1, this.total);
193-
this.visiblePages = this._generateVisiblePages(this._current);
184+
this._visiblePages = this._generateVisiblePages(this._current);
194185
this.requestUpdate('current', oldValue);
195186
}
196187

@@ -313,21 +304,21 @@ export class UUIPaginationElement extends LitElement {
313304

314305
protected renderNavigationLeft() {
315306
return html` ${this.renderFirst()} ${this.renderPrevious()}
316-
${this.visiblePages.includes(1) ? '' : this.renderDots()}`;
307+
${this._visiblePages.includes(1) ? '' : this.renderDots()}`;
317308
}
318309

319310
protected renderNavigationRight() {
320-
return html`${this.visiblePages.includes(this.total)
311+
return html`${this._visiblePages.includes(this.total)
321312
? ''
322313
: this.renderDots()}
323314
${this.renderNext()} ${this.renderLast()}`;
324315
}
325316

326317
render() {
327318
// prettier-ignore
328-
return html`<uui-button-group role="list" id="group">
319+
return html`<uui-button-group role="list" id="pages">
329320
${this.renderNavigationLeft()}
330-
${this.visiblePages.map(
321+
${this._visiblePages.map(
331322
page =>
332323
this.renderPage(page)
333324
)}

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

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

@@ -24,66 +30,109 @@ describe('UUIPaginationElement', () => {
2430
// expect(true).to.be.false;
2531
// });
2632

33+
describe('properties', () => {
34+
it('has an total property', () => {
35+
expect(element).to.have.property('total');
36+
});
37+
38+
it('has a current property', () => {
39+
expect(element).to.have.property('current');
40+
});
41+
42+
it('has a label property', () => {
43+
expect(element).to.have.property('label');
44+
});
45+
});
46+
47+
describe('methods', () => {
48+
it('has a goToNextPage method', () => {
49+
expect(element).to.have.property('goToNextPage').that.is.a('function');
50+
});
51+
it('has a goToPreviousPage method', () => {
52+
expect(element)
53+
.to.have.property('goToPreviousPage')
54+
.that.is.a('function');
55+
});
56+
it('has a goToPage method', () => {
57+
expect(element).to.have.property('goToPage').that.is.a('function');
58+
});
59+
});
60+
61+
describe('events', () => {
62+
describe('change', () => {
63+
it('emits a change event when another page is clicked', async () => {
64+
const listener = oneEvent(element, 'change');
65+
const button = element.shadowRoot?.querySelector('#pages')!
66+
.children[3] as HTMLElement;
67+
button?.click();
68+
const event = await listener;
69+
expect(event).to.exist;
70+
expect(event.type).to.equal('change');
71+
expect(element.current).to.equal(2);
72+
});
73+
});
74+
});
75+
2776
it('sets active class on current page', async () => {
2877
element.current = 2;
2978
await elementUpdated(element);
30-
const button = element.shadowRoot?.querySelector('#group')!
79+
const button = element.shadowRoot?.querySelector('#pages')!
3180
.children[3] as HTMLElement;
32-
expect(button).to.have.class('active-button');
81+
expect(button).to.have.class('active');
3382
});
3483

3584
it('goes to selected page on click', async () => {
36-
const button = element.shadowRoot?.querySelector('#group')!
85+
const button = element.shadowRoot?.querySelector('#pages')!
3786
.children[3] as HTMLElement;
3887
button.click();
3988

4089
await elementUpdated(element);
4190

42-
expect(button).to.have.class('active-button');
91+
expect(button).to.have.class('active');
4392
expect(element.current).to.equal(2);
4493
});
4594

4695
it('goes to previous page on click', async () => {
4796
element.current = 2;
4897
await elementUpdated(element);
4998

50-
const buttons = element.shadowRoot?.querySelector('#group')!.children;
99+
const buttons = element.shadowRoot?.querySelector('#pages')!.children;
51100
const prevButton = buttons![1] as HTMLElement;
52101
const activeButton = buttons![2] as HTMLElement;
53102
prevButton.click();
54103

55104
await elementUpdated(element);
56105

57106
expect(element.current).to.equal(1);
58-
expect(activeButton).to.have.class('active-button');
107+
expect(activeButton).to.have.class('active');
59108
});
60109

61110
it('goes to next page on click', async () => {
62111
element.current = 2;
63112
await elementUpdated(element);
64113

65-
const buttons = element.shadowRoot?.querySelector('#group')?.children;
114+
const buttons = element.shadowRoot?.querySelector('#pages')?.children;
66115
const nextButton = buttons![6] as HTMLElement;
67116
const activeButton = buttons![3] as HTMLElement;
68117
nextButton.click();
69118

70119
expect(element.current).to.equal(3);
71-
expect(activeButton).to.have.class('active-button');
120+
expect(activeButton).to.have.class('active');
72121
});
73122

74123
it('goes to last page on click and disables last and next buttons', async () => {
75-
let buttons = element.shadowRoot?.querySelector('#group')?.children;
124+
let buttons = element.shadowRoot?.querySelector('#pages')?.children;
76125
const lastButton = buttons![7] as HTMLElement;
77126
const nextButton = buttons![6] as HTMLElement;
78127
lastButton.click();
79128

80129
await elementUpdated(element);
81130

82-
buttons = element.shadowRoot?.querySelector('#group')?.children;
131+
buttons = element.shadowRoot?.querySelector('#pages')?.children;
83132
const activeButton = buttons![5] as HTMLElement;
84133

85134
expect(element.current).to.equal(30);
86-
expect(activeButton).to.have.class('active-button');
135+
expect(activeButton).to.have.class('active');
87136
expect(nextButton).to.have.attribute('disabled');
88137
expect(lastButton).to.have.attribute('disabled');
89138
});
@@ -92,15 +141,15 @@ describe('UUIPaginationElement', () => {
92141
element.current = 3;
93142
await elementUpdated(element);
94143

95-
const buttons = element.shadowRoot?.querySelector('#group')?.children;
144+
const buttons = element.shadowRoot?.querySelector('#pages')?.children;
96145
const firstButton = buttons![0] as HTMLElement;
97146
const previousButton = buttons![1] as HTMLElement;
98147
firstButton.click();
99148
await elementUpdated(element);
100149

101150
const activeButton = buttons![2] as HTMLElement;
102151
expect(element.current).to.equal(1);
103-
expect(activeButton).to.have.class('active-button');
152+
expect(activeButton).to.have.class('active');
104153
expect(firstButton).to.have.attribute('disabled');
105154
expect(previousButton).to.have.attribute('disabled');
106155
});
@@ -110,12 +159,11 @@ describe('UUIPaginationElement', () => {
110159
html` <uui-pagination .total=${30}></uui-pagination> `
111160
);
112161

113-
const children = element.shadowRoot?.querySelector('#group')?.children;
162+
const children = element.shadowRoot?.querySelector('#pages')?.children;
114163
const arr = [].slice.call(children);
115164

116165
const hasDots =
117-
arr.filter((e: HTMLElement) => e.classList.contains('dots-button'))
118-
.length > 0;
166+
arr.filter((e: HTMLElement) => e.classList.contains('dots')).length > 0;
119167
expect(hasDots).to.be.true;
120168
});
121169

@@ -124,12 +172,11 @@ describe('UUIPaginationElement', () => {
124172
html` <uui-pagination .total=${1}></uui-pagination> `
125173
);
126174

127-
const children = element.shadowRoot?.querySelector('#group')?.children;
175+
const children = element.shadowRoot?.querySelector('#pages')?.children;
128176
const arr = [].slice.call(children);
129177

130178
const hasDots =
131-
arr.filter((e: HTMLElement) => e.classList.contains('dots-button'))
132-
.length > 0;
179+
arr.filter((e: HTMLElement) => e.classList.contains('dots')).length > 0;
133180
expect(hasDots).to.be.false;
134181
});
135182

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,17 @@ describe('UuiTag', () => {
1616
it('passes the a11y audit', async () => {
1717
await expect(element).shadowDom.to.be.accessible();
1818
});
19+
20+
describe('properties', () => {
21+
it('has a look property', () => {
22+
expect(element).to.have.property('look');
23+
});
24+
});
25+
26+
describe('template', () => {
27+
it('renders a default slot', () => {
28+
const slot = element.shadowRoot!.querySelector('slot')!;
29+
expect(slot).to.exist;
30+
});
31+
});
1932
});

0 commit comments

Comments
 (0)