Refactor gr-list-view methods to use props instead of parameters
Release-Notes: skip
Change-Id: I382c0a05c25ec787a90d7bdae928a33cf8668a79
diff --git a/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.ts b/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.ts
index 449c041..dad802a 100644
--- a/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.ts
+++ b/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.ts
@@ -121,30 +121,18 @@
</div>
<slot></slot>
<nav>
- Page ${this.computePage(this.offset, this.itemsPerPage)}
+ Page ${this.computePage()}
<a
id="prevArrow"
- href=${this.computeNavLink(
- this.offset,
- -1,
- this.itemsPerPage,
- this.filter,
- this.path
- )}
+ href=${this.computeNavLink(-1)}
?hidden=${this.loading || this.offset === 0}
>
<gr-icon icon="chevron_left"></gr-icon>
</a>
<a
id="nextArrow"
- href=${this.computeNavLink(
- this.offset,
- 1,
- this.itemsPerPage,
- this.filter,
- this.path
- )}
- ?hidden=${this.hideNextArrow(this.loading, this.items)}
+ href=${this.computeNavLink(1)}
+ ?hidden=${this.hideNextArrow()}
>
<gr-icon icon="chevron_right"></gr-icon>
</a>
@@ -193,19 +181,13 @@
}
// private but used in test
- computeNavLink(
- offset: number,
- direction: number,
- itemsPerPage: number,
- filter: string | undefined,
- path = ''
- ) {
+ computeNavLink(direction: number) {
// Offset could be a string when passed from the router.
- offset = +(offset || 0);
- const newOffset = Math.max(0, offset + itemsPerPage * direction);
- let href = getBaseUrl() + path;
- if (filter) {
- href += '/q/filter:' + encodeURL(filter, false);
+ const offset = +(this.offset || 0);
+ const newOffset = Math.max(0, offset + this.itemsPerPage * direction);
+ let href = getBaseUrl() + (this.path ?? '');
+ if (this.filter) {
+ href += '/q/filter:' + encodeURL(this.filter, false);
}
if (newOffset > 0) {
href += `,${newOffset}`;
@@ -214,11 +196,9 @@
}
// private but used in test
- hideNextArrow(loading?: boolean, items?: unknown[]) {
- if (loading || !items || !items.length) {
- return true;
- }
- const lastPage = items.length < this.itemsPerPage + 1;
+ hideNextArrow() {
+ if (this.loading || !this.items?.length) return true;
+ const lastPage = this.items.length < this.itemsPerPage + 1;
return lastPage;
}
@@ -226,8 +206,8 @@
// to either support a decimal or make it go to the nearest
// whole number (e.g 3).
// private but used in test
- computePage(offset: number, itemsPerPage: number) {
- return offset / itemsPerPage + 1;
+ computePage() {
+ return this.offset / this.itemsPerPage + 1;
}
private handleFilterBindValueChanged(e: BindValueChangeEvent) {
diff --git a/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view_test.ts b/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view_test.ts
index bbbef72..bf94e8f 100644
--- a/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view_test.ts
@@ -57,36 +57,25 @@
});
test('computeNavLink', () => {
- const offset = 25;
- const projectsPerPage = 25;
- let filter = 'test';
- const path = '/admin/projects';
+ element.offset = 25;
+ element.itemsPerPage = 25;
+ element.filter = 'test';
+ element.path = '/admin/projects';
stubBaseUrl('');
- assert.equal(
- element.computeNavLink(offset, 1, projectsPerPage, filter, path),
- '/admin/projects/q/filter:test,50'
- );
+ assert.equal(element.computeNavLink(1), '/admin/projects/q/filter:test,50');
- assert.equal(
- element.computeNavLink(offset, -1, projectsPerPage, filter, path),
- '/admin/projects/q/filter:test'
- );
+ assert.equal(element.computeNavLink(-1), '/admin/projects/q/filter:test');
- assert.equal(
- element.computeNavLink(offset, 1, projectsPerPage, undefined, path),
- '/admin/projects,50'
- );
+ element.filter = undefined;
+ assert.equal(element.computeNavLink(1), '/admin/projects,50');
- assert.equal(
- element.computeNavLink(offset, -1, projectsPerPage, undefined, path),
- '/admin/projects'
- );
+ assert.equal(element.computeNavLink(-1), '/admin/projects');
- filter = 'plugins/';
+ element.filter = 'plugins/';
assert.equal(
- element.computeNavLink(offset, 1, projectsPerPage, filter, path),
+ element.computeNavLink(1),
'/admin/projects/q/filter:plugins%252F,50'
);
});
@@ -113,19 +102,19 @@
test('next button', async () => {
element.itemsPerPage = 25;
- let projects = new Array(26);
+ element.items = new Array(26);
+ element.loading = false;
await element.updateComplete;
- let loading;
- assert.isFalse(element.hideNextArrow(loading, projects));
- loading = true;
- assert.isTrue(element.hideNextArrow(loading, projects));
- loading = false;
- assert.isFalse(element.hideNextArrow(loading, projects));
- projects = [];
- assert.isTrue(element.hideNextArrow(loading, projects));
- projects = new Array(4);
- assert.isTrue(element.hideNextArrow(loading, projects));
+ assert.isFalse(element.hideNextArrow());
+ element.loading = true;
+ assert.isTrue(element.hideNextArrow());
+ element.loading = false;
+ assert.isFalse(element.hideNextArrow());
+ element.items = [];
+ assert.isTrue(element.hideNextArrow());
+ element.items = new Array(4);
+ assert.isTrue(element.hideNextArrow());
});
test('prev button', async () => {
@@ -186,20 +175,40 @@
test('next/prev links change when path changes', async () => {
const BRANCHES_PATH = '/path/to/branches';
const TAGS_PATH = '/path/to/tags';
- const computeNavLinkStub = sinon.stub(element, 'computeNavLink');
element.offset = 0;
element.itemsPerPage = 25;
element.filter = '';
element.path = BRANCHES_PATH;
await element.updateComplete;
- assert.equal(computeNavLinkStub.lastCall.args[4], BRANCHES_PATH);
+
+ assert.dom.equal(
+ queryAndAssert(element, 'nav a'),
+ /* HTML */ `
+ <a hidden="" href="${BRANCHES_PATH}" id="prevArrow">
+ <gr-icon icon="chevron_left"> </gr-icon>
+ </a>
+ `
+ );
+
element.path = TAGS_PATH;
await element.updateComplete;
- assert.equal(computeNavLinkStub.lastCall.args[4], TAGS_PATH);
+
+ assert.dom.equal(
+ queryAndAssert(element, 'nav a'),
+ /* HTML */ `
+ <a hidden="" href="${TAGS_PATH}" id="prevArrow">
+ <gr-icon icon="chevron_left"> </gr-icon>
+ </a>
+ `
+ );
});
test('computePage', () => {
- assert.equal(element.computePage(0, 25), 1);
- assert.equal(element.computePage(50, 25), 3);
+ element.offset = 0;
+ element.itemsPerPage = 25;
+ assert.equal(element.computePage(), 1);
+ element.offset = 50;
+ element.itemsPerPage = 25;
+ assert.equal(element.computePage(), 3);
});
});
