Increasing the test coverage (#167)

* added more test coverage

* more coverage

* didnt stage these

* more stuff

* more coverage (popup)

* didnt know about that

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* same thing

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* again

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Jeremyea3001

src/overlay/layer.tsx

@@ -11,8 +11,9 @@ import { Layer as OgmaLayer } from "@linkurious/ogma";
 import { useOgma } from "../context";
 
 export interface LayerProps {
+  /** Layer children */
   children?: ReactNode;
-  /** Overlay container className */
+  /** Layer container className */
   className?: string;
   /** Layer index */
   index?: number;
@@ -41,8 +42,11 @@ export const Layer = forwardRef(
     }, []);
 
     useEffect(() => {
-      if (layer) layer.element.className = className;
-    }, [className]);
+      if (layer) {
+        if (className) layer.element.className = className;
+        if (index !== undefined && isFinite(index)) layer.moveTo(index);
+      }
+    }, [className, index]);
 
     if (!layer) return null;
 

src/overlay/overlay.tsx

@@ -21,6 +21,9 @@ interface OverlayProps {
   position: Point | ((ogma: OgmaLib) => Point | null);
   /** Overlay size */
   size?: Size;
+  /** Overlay index */
+  index?: number;
+  /** Overlay children */
   children?: ReactNode;
   /** Overlay container className */
   className?: string;
@@ -33,7 +36,7 @@ const offScreenPos: Point = { x: -9999, y: -9999 };
 // TODO: use props for these classes
 export const Overlay = forwardRef(
   (
-    { position, children, className = "", size, scaled }: OverlayProps,
+    { position, children, className = "", size, scaled, index }: OverlayProps,
     ref?: Ref<OverlayLayer>
   ) => {
     const ogma = useOgma();
@@ -48,12 +51,15 @@ export const Overlay = forwardRef(
       newElement.className = className;
       //  html = getContent(ogma, pos, undefined, children);
 
-      const overlay = ogma.layers.addOverlay({
-        position: pos || offScreenPos,
-        element: newElement,
-        size: size || ({ width: "auto", height: "auto" } as any as Size),
-        scaled
-      });
+      const overlay = ogma.layers.addOverlay(
+        {
+          position: pos || offScreenPos,
+          element: newElement,
+          size: size || ({ width: "auto", height: "auto" } as any as Size),
+          scaled
+        },
+        index
+      );
 
       setLayer(overlay);
 
@@ -70,9 +76,10 @@ export const Overlay = forwardRef(
       if (layer) {
         const pos = getPosition(position, ogma) || offScreenPos;
         if (className) layer.element.className = className;
+        if (index !== undefined && isFinite(index)) layer.moveTo(index);
         layer.setPosition(pos);
       }
-    }, [position, className]);
+    }, [position, className, index]);
 
     if (!layer) return null;
 

src/overlay/types.ts

@@ -11,15 +11,15 @@ export type Content =
   | ((ogma: OgmaLib, position: Point | null) => ReactElement);
 
 export type TooltipEventFunctions = {
-  "backgroundClick": (target?: Point) => ReactNode,
-  "backgroundDoubleclick": (target?: Point) => ReactNode,
-  "backgroundRightclick": (target?: Point) => ReactNode,
-  "edgeClick": (target?: Edge) => ReactNode,
-  "edgeDoubleclick": (target?: Edge) => ReactNode,
-  "edgeHover": (target?: Edge) => ReactNode,
-  "edgeRightclick": (target?: Edge) => ReactNode,
-  "nodeClick": (target?: Node) => ReactNode,
-  "nodeDoubleclick": (target?: Node) => ReactNode,
-  "nodeHover": (target?: Node) => ReactNode,
-  "nodeRightclick": (target?: Node) => ReactNode
+  "backgroundClick": (target: Point) => ReactNode,
+  "backgroundDoubleclick": (target: Point) => ReactNode,
+  "backgroundRightclick": (target: Point) => ReactNode,
+  "edgeClick": (target: Edge) => ReactNode,
+  "edgeDoubleclick": (target: Edge) => ReactNode,
+  "edgeHover": (target: Edge) => ReactNode,
+  "edgeRightclick": (target: Edge) => ReactNode,
+  "nodeClick": (target: Node) => ReactNode,
+  "nodeDoubleclick": (target: Node) => ReactNode,
+  "nodeHover": (target: Node) => ReactNode,
+  "nodeRightclick": (target: Node) => ReactNode
 }

src/overlay/utils.ts

@@ -1,6 +1,6 @@
 import { ReactNode, ReactElement } from "react";
 import { renderToString } from "react-dom/server";
-import OgmaLib, { Node as OgmaNode, Edge, Point, Size } from "@linkurious/ogma";
+import OgmaLib, { Node as OgmaNode, Edge, Point } from "@linkurious/ogma";
 import { Content, PositionGetter, Placement, TooltipEventFunctions } from "./types";
 
 export function getContent(
@@ -37,33 +37,6 @@ export function getCloseButton(
   return "";
 }
 
-export function getAdjustedPlacement(
-  coords: Point,
-  placement: Placement,
-  dimensions: Size,
-  ogma: OgmaLib
-): Placement {
-  const { width: screenWidth, height: screenHeight } = ogma.view.getSize();
-  const { x, y } = ogma.view.graphToScreenCoordinates(coords);
-  let res = placement;
-  const { width, height } = dimensions;
-
-  if (placement === "left" && x - width < 0) res = "right";
-  else if (placement === "right" && x + width > screenWidth) res = "left";
-  else if (placement === "bottom" && y + height > screenHeight) res = "top";
-  else if (placement === "top" && y - height < 0) res = "bottom";
-
-  if (res === "right" || res === "left") {
-    if (y + height / 2 > screenHeight) res = "top";
-    else if (y - height / 2 < 0) res = "bottom";
-  } else {
-    if (x + width / 2 > screenWidth) res = "left";
-    else if (x - width / 2 < 0) res = "right";
-  }
-
-  return res;
-}
-
 export function getEventNameFromTooltipEvent(eventName: keyof TooltipEventFunctions): "mouseover" | "click" | "doubleclick" {
   if (eventName.endsWith("Doubleclick")) {
     return "doubleclick";
@@ -109,14 +82,19 @@ export function getOffset(target: OgmaNode | Edge | "background", zoom: number,
   // Get the offset of the layer based on the placement
   const offsetAmount = getOffsetAmount(target, zoom);
   const offset = { x: 0, y: 0 };
-  if (placement === "top") {
-    offset.y = -offsetAmount;
-  } else if (placement === "bottom") {
-    offset.y = offsetAmount;
-  } else if (placement === "left") {
-    offset.x = -offsetAmount;
-  } else if (placement === "right") {
-    offset.x = offsetAmount;
+  switch (placement) {
+    case "top":
+      offset.y = -offsetAmount;
+      break;
+    case "bottom":
+      offset.y = offsetAmount;
+      break;
+    case "left":
+      offset.x = -offsetAmount;
+      break;
+    case "right":
+      offset.x = offsetAmount;
+      break;
   }
   return offset;
 }

src/uuid.ts

@@ -0,0 +1,20 @@
+import OgmaLib from "@linkurious/ogma";
+import { Ogma } from "../../src";
+import { createRef } from "react";
+import { Geo } from "../../src";
+import { render } from "./utils";
+
+import * as L from "leaflet";
+OgmaLib.libraries["leaflet"] = L;
+
+describe("Geo Mode", () => {
+  it("enables geo mode when enabled prop is true", () => {
+    const ref = createRef<OgmaLib>();
+    render(
+      <Ogma ref={ref}>
+        <Geo enabled />
+      </Ogma>
+    );
+    expect(ref.current?.geo.enabled()).toBe(true);
+  });
+});

test/unit/geo.test.tsx

@@ -22,26 +22,26 @@ describe("Ogma", () => {
   let div: HTMLDivElement;
   beforeEach(() => (div = document.createElement("div")));
 
-  it("Ogma container renders without crashing", () => {
+  it("renders without crashing", () => {
     render(<Ogma graph={graph} />, div);
   });
 
-  it("Supports ref interface", () => {
+  it("supports ref interface", () => {
     const ref = React.createRef<OgmaLib>();
     render(<Ogma ref={ref} graph={graph} />, div);
     expect(ref.current).toBeDefined();
     expect(ref.current).toBeInstanceOf(OgmaLib);
   });
 
-  it("Ogma container renders with onReady callback", () => {
+  it("renders with onReady callback", () => {
     return new Promise((resolve) => {
       render(<Ogma graph={graph} onReady={(ogma) => resolve(ogma)} />, div);
     }).then((ogma) => {
       expect(ogma).toBeInstanceOf(OgmaLib);
     });
   });
 
-  it("Ogma container renders and takes options", () => {
+  it("renders and takes options", () => {
     const backgroundColor = "red";
     const minimumWidth = 500;
     return new Promise((resolve) => {
@@ -62,7 +62,23 @@ describe("Ogma", () => {
     });
   });
 
-  it("Ogma container passes the ogma instance to children", () => {
+  it("supports options changes", () => {
+    const backgroundColor = "red";
+    const ref = React.createRef<OgmaLib>();
+    const { rerender } = render(
+      <Ogma ref={ref} graph={graph} options={{ backgroundColor }} />,
+      div
+    );
+
+    expect(ref.current?.getOptions().backgroundColor).toBe(backgroundColor);
+
+    const newBackgroundColor = "blue";
+    rerender(<Ogma ref={ref} graph={graph} options={{ backgroundColor: newBackgroundColor }} />);
+    
+    expect(ref.current?.getOptions().backgroundColor).toBe(newBackgroundColor);
+  });
+
+  it("passes the ogma instance to children", () => {
     return new Promise((resolve) => {
       const Component = () => {
         const ogma = useOgma();