Use Params.prototype.toSearchParams() in developer-mode.mjs (#511)

- Remove duplicated code and directly use Params.prototype.toSearchParams().
- Now the Params class is the centralized place to implement the serialization logic.
- Support empty suites selection 
- Use a single "default" tag as default value for tags

Author: camillobruni

resources/developer-mode.mjs

@@ -1,5 +1,5 @@
 import { Suites, Tags } from "./tests.mjs";
-import { params, defaultParams } from "./shared/params.mjs";
+import { params } from "./shared/params.mjs";
 
 export function createDeveloperModeContainer() {
     const container = document.createElement("div");
@@ -254,7 +254,7 @@ function updateParamsSuitesAndTags() {
             commonTags = new Set(suite.tags.filter((tag) => commonTags.has(tag)));
     }
     if (selectedSuites.length > 1 && commonTags.size)
-        params.tags = commonTags.has("default") ? [] : [...commonTags];
+        params.tags = [...commonTags];
     else
         params.suites = selectedSuites.map((suite) => suite.name);
 }
@@ -263,26 +263,8 @@ function updateURL() {
     updateParamsSuitesAndTags();
 
     const url = new URL(window.location.href);
-
-    url.searchParams.delete("tags");
-    url.searchParams.delete("suites");
-    url.searchParams.delete("suite");
-
-    if (params.tags.length)
-        url.searchParams.set("tags", params.tags.join(","));
-    else if (params.suites.length)
-        url.searchParams.set("suites", params.suites.join(","));
-
-    const defaultParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync", "useAsyncSteps"];
-    for (const paramKey of defaultParamKeys) {
-        if (params[paramKey] !== defaultParams[paramKey])
-            url.searchParams.set(paramKey, params[paramKey]);
-        else
-            url.searchParams.delete(paramKey);
-    }
-
+    url.search = params.toSearchParams();
     // Only push state if changed
-    url.search = decodeURIComponent(url.search);
     if (url.href !== window.location.href)
         window.history.pushState({}, "", url);
 }

resources/shared/params.mjs

@@ -9,7 +9,7 @@ export class Params {
     iterationCount = 10;
     suites = [];
     // A list of tags to filter suites
-    tags = [];
+    tags = ["default"];
     // Toggle running a dummy suite once before the normal test suites.
     useWarmupSuite = false;
     // toggle async type vs default raf type.
@@ -168,10 +168,14 @@ export class Params {
         if (this.viewport.width !== defaultParams.viewport.width || this.viewport.height !== defaultParams.viewport.height)
             rawUrlParams.viewport = `${this.viewport.width}x${this.viewport.height}`;
 
-        if (this.suites.length)
+        if (this.suites.length) {
             rawUrlParams.suites = this.suites.join(",");
-        else if (this.tags.length)
-            rawUrlParams.tags = this.tags.join(",");
+        } else if (this.tags.length) {
+            if (!(this.tags.length === 1 && this.tags[0] === "default"))
+                rawUrlParams.tags = this.tags.join(",");
+        } else {
+            rawUrlParams.suites = "";
+        }
 
         return new URLSearchParams(rawUrlParams);
     }

tests/unittests/params.mjs

@@ -7,6 +7,7 @@ describe("Params", () => {
         });
         it("should be empty for empty Params", () => {
             const params = new Params();
+            expect(params.tags).to.eql(["default"]);
             expect(params.toSearchParams()).to.equal("");
         });
         it("should contain custom viewport", () => {
@@ -41,6 +42,14 @@ describe("Params", () => {
             );
             expect(params.toSearchParams()).to.equal("suites=Suite1");
         });
+        it("should ignore a single default tag", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    tags: ["default"],
+                })
+            );
+            expect(params.toSearchParams()).to.equal("");
+        });
         it("should contain multiple single suite", () => {
             const params = new Params(
                 new URLSearchParams({
@@ -57,6 +66,14 @@ describe("Params", () => {
             );
             expect(params.toSearchParams()).to.equal("tags=tagB%2Ctag1%2CtagA");
         });
+        it("should support no suites", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    suites: "",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("suites=");
+        });
     });
 
     describe("parse input params", () => {