[perf][UI] Add unit tests for explore-multi-sk.

This change introduces a new test file `explore-multi-sk_test.ts` to
provide comprehensive unit test coverage for the `ExploreMultiSk`
component.

A minor fix is also included in `explore-multi-sk.ts` to correctly
access the index from the `x-axis-toggled` event detail.

Change-Id: Iaf13f6a937fe23b84cf60aeed76c0224b275abeb
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/1033016
Commit-Queue: Tony Seaward <[email protected]>
Reviewed-by: Tony Seaward <[email protected]>
Auto-Submit: Anri Sidorov <[email protected]>

Author: nevedaren

perf/modules/explore-multi-sk/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//infra-sk:index.bzl", "sk_demo_page_server", "sk_element", "sk_page")
+load("//infra-sk:index.bzl", "karma_test", "sk_demo_page_server", "sk_element", "sk_page")
 
 sk_element(
     name = "explore-multi-sk",
@@ -51,3 +51,22 @@ sk_page(
     ts_deps = ["//perf/modules/common:test-util_ts_lib"],
     ts_entry_point = "explore-multi-sk-demo.ts",
 )
+
+karma_test(
+    name = "explore-multi-sk_test",
+    src = "explore-multi-sk_test.ts",
+    deps = [
+        ":explore-multi-sk",
+        "//:node_modules/@types/chai",
+        "//:node_modules/@types/sinon",
+        "//:node_modules/chai",
+        "//:node_modules/fetch-mock",
+        "//:node_modules/sinon",
+        "//golden/modules/pagination-sk",
+        "//infra-sk/modules:test_util_ts_lib",
+        "//perf/modules/common:test-util_ts_lib",
+        "//perf/modules/explore-simple-sk",
+        "//perf/modules/json:index_ts_lib",
+        "//perf/modules/plot-google-chart-sk",
+    ],
+)

perf/modules/explore-multi-sk/explore-multi-sk.ts

@@ -61,7 +61,7 @@ import { PaginationSkPageChangedEventDetail } from '../../../golden/modules/pagi
 import { PickerFieldSk } from '../picker-field-sk/picker-field-sk';
 import { CommitLinks } from '../point-links-sk/point-links-sk';
 
-class State {
+export class State {
   begin: number = Math.floor(Date.now() / 1000 - DEFAULT_RANGE_S);
 
   end: number = Math.floor(Date.now() / 1000);
@@ -941,7 +941,7 @@ export class ExploreMultiSk extends ElementSk {
     const graphs = this.graphDiv!.querySelectorAll('explore-simple-sk');
     graphs.forEach((graph, i) => {
       // Skip graph that sent the event.
-      if (i !== e.detail) {
+      if (i !== e.detail.index) {
         (graph as ExploreSimpleSk).updateXAxis(e.detail.domain);
       }
     });