test: add unit tests for the Plot panel module

package.json

@@ -146,6 +146,7 @@
     "@lichtblick/ros2idl-parser": "1.0.0",
     "@lichtblick/suite": "workspace:*",
     "@mui/material": "5.13.5",
+    "@testing-library/user-event": "14.5.2",
     "react-use": "17.5.1",
     "rehype-raw": "6.1.1",
     "vm-browserify": "1.1.2"

packages/suite-base/package.json

@@ -66,7 +66,6 @@
     "@tanstack/react-table": "8.11.7",
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.0",
-    "@testing-library/user-event": "14.5.2",
     "@types/base16": "^1.0.5",
     "@types/cytoscape": "^3.19.16",
     "@types/geojson": "7946.0.11",

packages/suite-base/src/components/Chart/types.ts

@@ -59,3 +59,5 @@ export type RpcElement = {
     y: number;
   };
 };
+
+export type EventListenerHandler = (eventName: string, fn?: () => void) => void;

packages/suite-base/src/components/Chart/worker/ChartJSManager.ts

@@ -32,6 +32,10 @@ import EventEmitter from "eventemitter3";
 import { Zoom as ZoomPlugin } from "@lichtblick/chartjs-plugin-zoom";
 import Logger from "@lichtblick/log";
 import { RpcElement, RpcScales } from "@lichtblick/suite-base/components/Chart/types";
+import {
+  addEventListener,
+  removeEventListener,
+} from "@lichtblick/suite-base/components/Chart/worker/eventHandler";
 import { maybeCast } from "@lichtblick/suite-base/util/maybeCast";
 import { fontMonospace } from "@lichtblick/theme";
 
@@ -54,25 +58,6 @@ export type InitOpts = {
 // allows us to override the chart.ctx instance field which zoom plugin uses for adding event listeners
 type MutableContext<T> = Omit<Chart, "ctx"> & { ctx: T };
 
-function addEventListener(emitter: EventEmitter) {
-  return (eventName: string, fn?: () => void) => {
-    const existing = emitter.listeners(eventName);
-    if (!fn || existing.includes(fn)) {
-      return;
-    }
-
-    emitter.on(eventName, fn);
-  };
-}
-
-function removeEventListener(emitter: EventEmitter) {
-  return (eventName: string, fn?: () => void) => {
-    if (fn) {
-      emitter.off(eventName, fn);
-    }
-  };
-}
-
 type ZoomableChart = Chart & {
   $zoom: {
     panStartHandler(event: HammerInput): void;

packages/suite-base/src/components/Chart/worker/eventHandler.test.ts

@@ -0,0 +1,79 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+import EventEmitter from "eventemitter3";
+
+import { addEventListener, removeEventListener } from "./eventHandler";
+
+describe("EventHandler", () => {
+  let emitter: EventEmitter;
+
+  beforeEach(() => {
+    emitter = new EventEmitter();
+  });
+
+  describe("addEventListener", () => {
+    it("should add an event listener if it doesn't already exist", () => {
+      const handler = jest.fn();
+      const addListener = addEventListener(emitter);
+
+      addListener("testEvent", handler);
+      emitter.emit("testEvent");
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not add the same event listener multiple times", () => {
+      const handler = jest.fn();
+      const addListener = addEventListener(emitter);
+
+      addListener("testEvent", handler);
+      addListener("testEvent", handler);
+      emitter.emit("testEvent");
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not add a listener if the function is undefined", () => {
+      const addListener = addEventListener(emitter);
+
+      addListener("testEvent");
+      expect(emitter.listeners("testEvent")).toHaveLength(0);
+    });
+  });
+
+  describe("removeEventListener", () => {
+    it("should remove an existing event listener", () => {
+      const handler = jest.fn();
+      const addListener = addEventListener(emitter);
+      const removeListener = removeEventListener(emitter);
+
+      addListener("testEvent", handler);
+      removeListener("testEvent", handler);
+      emitter.emit("testEvent");
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it("should not throw if removing a listener that doesn't exist", () => {
+      const handler = jest.fn();
+      const removeListener = removeEventListener(emitter);
+
+      expect(() => {
+        removeListener("testEvent", handler);
+      }).not.toThrow();
+    });
+
+    it("should not remove listeners if the function is undefined", () => {
+      const handler = jest.fn();
+      const addListener = addEventListener(emitter);
+      const removeListener = removeEventListener(emitter);
+
+      addListener("testEvent", handler);
+      removeListener("testEvent");
+      emitter.emit("testEvent");
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+});

packages/suite-base/src/components/Chart/worker/eventHandler.ts

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+import EventEmitter from "eventemitter3";
+
+import { EventListenerHandler } from "@lichtblick/suite-base/components/Chart/types";
+
+export function addEventListener(emitter: EventEmitter): EventListenerHandler {
+  return (eventName: string, fn?: () => void): void => {
+    const existing = emitter.listeners(eventName);
+    if (!fn || existing.includes(fn)) {
+      return;
+    }
+
+    emitter.on(eventName, fn);
+  };
+}
+
+export function removeEventListener(emitter: EventEmitter): EventListenerHandler {
+  return (eventName: string, fn?: () => void) => {
+    if (fn) {
+      emitter.off(eventName, fn);
+    }
+  };
+}

packages/suite-base/src/i18n/en/plot.ts

@@ -28,6 +28,7 @@ export const plot = {
   min: "Min",
   position: "Position",
   receiveTime: "Receive Time",
+  resetView: "Reset view",
   secondsRange: "Range (seconds)",
   series: "Series",
   showLabels: "Show labels",