[gold] triagelog-page-sk: Fix broken back/forward browser buttons.
Bug: skia:9525
Change-Id: I8a419e90223d6abe92f61fb8bfd8e634fd7c9647
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/255312
Commit-Queue: Leandro Lovisolo <lovisolo@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
diff --git a/golden/modules/triagelog-page-sk/triagelog-page-sk.js b/golden/modules/triagelog-page-sk/triagelog-page-sk.js
index db3ec02..8d7ef49 100644
--- a/golden/modules/triagelog-page-sk/triagelog-page-sk.js
+++ b/golden/modules/triagelog-page-sk/triagelog-page-sk.js
@@ -92,15 +92,14 @@
constructor() {
super(template);
- this._entries = []; // Log entries fetched from the server.
- this._details = false; // Reflected in the URL.
- this._pageOffset = 0; // Reflected in the URL.
- this._pageSize = 0; // Reflected in the URL.
- this._totalEntries = 0; // Total number of entries in the server.
- this._urlParamsLoaded = false; // Whether URL params have been read.
+ this._entries = []; // Log entries fetched from the server.
+ this._details = false; // Reflected in the URL.
+ this._pageOffset = 0; // Reflected in the URL.
+ this._pageSize = 0; // Reflected in the URL.
+ this._totalEntries = 0; // Total number of entries in the server.
// stateReflector will trigger on DomReady.
- this._stateChanged = stateReflector(
+ this._pushStateToURL = stateReflector(
/*getState*/() => {
return {
// Provide empty values.
@@ -109,17 +108,12 @@
'details': this._details,
}
}, /*setState*/(newState) => {
- // Default values if not specified.
this._pageOffset = newState.offset || 0;
this._pageSize = newState.page_size || 20;
this._details = newState.details || false;
-
- if (!this._urlParamsLoaded) {
- // Initial page load/fetch.
- this._urlParamsLoaded = true;
- this._fetchEntries();
- }
+ this._pushStateToURL(); // Reflect default values in the URL.
this._render();
+ this._fetchEntries();
});
}
@@ -130,7 +124,7 @@
_detailsHandler(e) {
this._details = e.target.checked;
- this._stateChanged();
+ this._pushStateToURL();
this._render();
this._fetchEntries();
}
@@ -138,7 +132,7 @@
_pageChanged(e) {
this._pageOffset =
Math.max(0, this._pageOffset + e.detail.delta * this._pageSize);
- this._stateChanged();
+ this._pushStateToURL();
this._render();
this._fetchEntries();
}
@@ -160,10 +154,6 @@
}
_fetch(url, method = 'GET') {
- if (!this._urlParamsLoaded) {
- return;
- }
-
// Force only one fetch at a time. Abort any outstanding requests.
if (this._fetchController) {
this._fetchController.abort();
@@ -186,7 +176,7 @@
this._pageOffset = json.pagination.offset || 0;
this._pageSize = json.pagination.size || 0;
this._totalEntries = json.pagination.total || 0;
- this._stateChanged();
+ this._pushStateToURL();
this._render();
this._sendDone();
})
diff --git a/golden/modules/triagelog-page-sk/triagelog-page-sk_test.js b/golden/modules/triagelog-page-sk/triagelog-page-sk_test.js
index bc099d9..808a4a7 100644
--- a/golden/modules/triagelog-page-sk/triagelog-page-sk_test.js
+++ b/golden/modules/triagelog-page-sk/triagelog-page-sk_test.js
@@ -155,6 +155,59 @@
expectShowDetailsCheckboxToBeChecked();
expectSecondPageOfResultsDetailsVisible();
});
+
+ it('responds to back and forward browser buttons', async () => {
+ fetchMock.get(
+ '/json/triagelog?details=false&offset=0&size=20', firstPage);
+ fetchMock.get(
+ '/json/triagelog?details=false&offset=0&size=3', firstPage);
+ fetchMock.get(
+ '/json/triagelog?details=true&offset=0&size=3', firstPageWithDetails);
+ fetchMock.get(
+ '/json/triagelog?details=false&offset=3&size=3', secondPage);
+ fetchMock.get(
+ '/json/triagelog?details=true&offset=3&size=3', secondPageWithDetails);
+
+ await loadTriagelogPageSk(); // Load first page of results by default.
+ expectQueryStringToEqual('?page_size=3');
+ expectFirstPageOfResultsDetailsHidden();
+
+ await toggleDetails(); // Show details.
+ expectQueryStringToEqual('?details=true&page_size=3');
+ expectFirstPageOfResultsDetailsVisible();
+
+ await goToNextPageOfResults();
+ expectQueryStringToEqual('?details=true&offset=3&page_size=3');
+ expectSecondPageOfResultsDetailsVisible();
+
+ await toggleDetails(); // Hide details.
+ expectQueryStringToEqual('?offset=3&page_size=3');
+ expectSecondPageOfResultsDetailsHidden();
+
+ await goBack();
+ expectQueryStringToEqual('?details=true&offset=3&page_size=3');
+ expectSecondPageOfResultsDetailsVisible();
+
+ await goBack();
+ expectQueryStringToEqual('?details=true&page_size=3');
+ expectFirstPageOfResultsDetailsVisible();
+
+ await goBack();
+ expectQueryStringToEqual('?page_size=3');
+ expectFirstPageOfResultsDetailsHidden();
+
+ await goForward();
+ expectQueryStringToEqual('?details=true&page_size=3');
+ expectFirstPageOfResultsDetailsVisible();
+
+ await goForward();
+ expectQueryStringToEqual('?details=true&offset=3&page_size=3');
+ expectSecondPageOfResultsDetailsVisible();
+
+ await goForward();
+ expectQueryStringToEqual('?offset=3&page_size=3');
+ expectSecondPageOfResultsDetailsHidden();
+ });
});
describe('RPC error', () => {
@@ -194,6 +247,18 @@
return event;
}
+ function goBack() {
+ const event = eventPromise('end-task');
+ history.back();
+ return event;
+ }
+
+ function goForward() {
+ const event = eventPromise('end-task');
+ history.forward();
+ return event;
+ }
+
function expectQueryStringToEqual(expected) {
expect(window.location.search).to.equal(expected);
}
