Improve Params.toSearchParamsObject (#505)

- Add better viewport, suite and tags handling
- Add basic Params unittests

Author: camillobruni

resources/shared/params.mjs

@@ -154,19 +154,26 @@ export class Params {
     }
 
     toSearchParamsObject(filter = true) {
-        const rawParams = { __proto__: null };
+        const rawUrlParams = { __proto__: null };
         for (const [key, value] of Object.entries(this)) {
+            // Handle composite values separately.
+            if (key === "viewport" || key === "suites" || key === "tags")
+                continue;
+            // Skip over default values.
             if (filter && value === defaultParams[key])
                 continue;
-            rawParams[key] = value;
+            rawUrlParams[key] = value;
         }
 
-        // Either suites or params can be used at the same time.
-        if (rawParams.suites?.length && rawParams.tags?.length)
-            delete rawParams.suites;
-        rawParams.viewport = `${this.viewport.width}x${this.viewport.height}`;
+        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)
+            rawUrlParams.suites = this.suites.join(",");
+        else if (this.tags.length)
+            rawUrlParams.tags = this.tags.join(",");
 
-        return new URLSearchParams(rawParams);
+        return new URLSearchParams(rawUrlParams);
     }
 
     toSearchParams() {

tests/index.html

@@ -28,6 +28,7 @@
             });
 
             await import("./unittests/benchmark-runner.mjs");
+            await import("./unittests/params.mjs");
 
             globalThis.testResults = undefined;
             globalThis.testRunner = mocha.run();

tests/unittests/params.mjs

@@ -0,0 +1,96 @@
+import { Params, defaultParams } from "../../resources/shared/params.mjs";
+
+describe("Params", () => {
+    describe("toSearchParams", () => {
+        it("should be empty for defaultParams", () => {
+            expect(defaultParams.toSearchParams()).to.equal("");
+        });
+        it("should be empty for empty Params", () => {
+            const params = new Params();
+            expect(params.toSearchParams()).to.equal("");
+        });
+        it("should contain custom viewport", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    viewport: "100x200",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("viewport=100x200");
+        });
+        it("should not contain default viewport", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    viewport: "800x600",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("");
+        });
+        it("should contain custom iterationCount", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    iterationCount: "100",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("iterationCount=100");
+        });
+        it("should contain single suite", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    suites: "Suite1",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("suites=Suite1");
+        });
+        it("should contain multiple single suite", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    suites: "SuiteB,Suite1,SuiteA",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("suites=SuiteB%2CSuite1%2CSuiteA");
+        });
+        it("should contain multiple tags", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    tags: "tagB,tag1,tagA",
+                })
+            );
+            expect(params.toSearchParams()).to.equal("tags=tagB%2Ctag1%2CtagA");
+        });
+    });
+
+    describe("parse input params", () => {
+        it("should parse custom viewport", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    viewport: "100x300",
+                })
+            );
+            expect(params.viewport).to.eql({ width: 100, height: 300 });
+        });
+        it("should parse custom iterationCount", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    iterationCount: "100",
+                })
+            );
+            expect(params.iterationCount).to.equal(100);
+        });
+        it("should parse custom tags", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    tags: "tagB,tag1,tagA",
+                })
+            );
+            expect(params.tags).to.eql(["tagB", "tag1", "tagA"]);
+        });
+        it("should parse custom suites", () => {
+            const params = new Params(
+                new URLSearchParams({
+                    suites: "SuiteB,Suite1,SuiteA",
+                })
+            );
+            expect(params.suites).to.eql(["SuiteB", "Suite1", "SuiteA"]);
+        });
+    });
+});