@datarailsshared/dr_renderer 1.2.453 → 1.2.454

package/tests/dr_chart_tooltip.test.js

@@ -0,0 +1,739 @@
+import { DrChartTooltip, DR_TOOLTIP_OPTIONS_DEFAULT } from "../src/dr_chart_tooltip";
+const helpers = require("../src/dr-renderer-helpers");
+
+describe("DrChartTooltip", () => {
+    let chartMock;
+    let instance;
+    let anchorBBoxMock;
+    let anchorMock;
+    let positionMock;
+    let optionsMock;
+    let tooltipBBoxMock;
+    let tooltipMock;
+    let arrowElMock;
+    let chartBBoxMock;
+
+    beforeEach(() => {
+        chartBBoxMock = {
+            x: 0,
+            y: 0,
+            width: 800,
+            height: 600,
+        };
+        chartMock = {
+            renderer: {
+                text: jest.fn().mockImplementation((content) => ({
+                    attr: jest.fn().mockReturnThis(),
+                    css: jest.fn().mockReturnThis(),
+                    add: jest.fn().mockReturnThis(),
+                    hide: jest.fn().mockReturnThis(),
+                    getBBox: jest.fn().mockReturnValue({ width: 100, height: 50 }),
+                })),
+            },
+            container: {
+                getBoundingClientRect: jest.fn().mockReturnValue(chartBBoxMock),
+            },
+            chartWidth: 800,
+            chartHeight: 600,
+        };
+
+        instance = new DrChartTooltip(chartMock, {
+            fontSize: 12,
+            fontFamily: "Arial",
+            color: "#333",
+        });
+
+        anchorBBoxMock = { x: 100, y: 100, width: 50, height: 30 };
+        anchorMock = {
+            getBBox: jest.fn().mockReturnValue(anchorBBoxMock),
+        };
+        positionMock = { x: 60, y: 30, direction: "top" };
+        optionsMock = {
+            anchorOffset: 10,
+            arrowRadius: 3,
+            arrowSize: 10,
+            background: "#fff",
+            border: 1,
+            borderColor: "#DFE0E3",
+            borderRadius: 8,
+            boxShadow: "0px 4px 8px 1px rgba(0, 0, 0, 0.25)",
+            direction: "top",
+            followPointer: false,
+            outerOffset: 8,
+            paddings: [6, 12],
+            showArrow: true,
+        };
+        arrowElMock = {
+            setAttribute: jest.fn(),
+            removeAttribute: jest.fn(),
+        };
+        tooltipBBoxMock = { width: 40, height: 50 };
+        tooltipMock = {
+            attr: jest.fn(),
+            getBBox: jest.fn().mockReturnValue(tooltipBBoxMock),
+            element: {
+                querySelector: jest.fn().mockReturnValue(arrowElMock),
+            },
+        };
+
+        jest.spyOn(helpers, "clamp");
+        jest.spyOn(helpers, "removeSVGTextCorrection");
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("initializes with default options", () => {
+        const tooltip = new DrChartTooltip(chartMock);
+        expect(tooltip.getOptions()).toEqual({ ...DR_TOOLTIP_OPTIONS_DEFAULT });
+    });
+
+    it("initializes with merged options", () => {
+        expect(instance).toBeInstanceOf(DrChartTooltip);
+        expect(instance.getOptions()).toEqual({
+            ...DR_TOOLTIP_OPTIONS_DEFAULT,
+            fontSize: 12,
+            fontFamily: "Arial",
+            color: "#333",
+        });
+    });
+
+    describe("add", () => {
+        let localOptions;
+
+        beforeEach(() => {
+            localOptions = instance.getOptions();
+        });
+
+        it("return false unless content or anchor are provided", () => {
+            expect(instance.add()).toBe(false);
+        });
+
+        it("creates and show a tooltip on element mouseover", () => {
+            const anchor = document.createElement("div");
+            const content = "Tooltip Content";
+
+            const destroyMock = jest.fn();
+            const showMock = jest.fn();
+            instance.create = jest.fn().mockReturnValue({
+                destroy: destroyMock,
+                show: showMock,
+            });
+
+            instance.add(content, anchor);
+
+            anchor.dispatchEvent(new MouseEvent("mouseover", {}));
+            expect(instance.create).toHaveBeenCalledWith("Tooltip Content", anchor, localOptions);
+            expect(showMock).toHaveBeenCalled();
+
+            // destroy the previous tooltip
+            anchor.dispatchEvent(new MouseEvent("mouseover", {}));
+            expect(destroyMock).toHaveBeenCalled();
+        });
+
+        it("creates and show a tooltip on point mouseover", () => {
+            const anchor = document.createElement("div");
+            const content = "Tooltip Content";
+
+            const showMock = jest.fn();
+            instance.create = jest.fn().mockReturnValue({
+                show: showMock,
+            });
+
+            instance.add(content, anchor, { followPointer: true });
+            const event = new MouseEvent("mouseover", {});
+
+            anchor.dispatchEvent(event);
+            expect(instance.create).toHaveBeenCalledWith("Tooltip Content", event, {
+                ...localOptions,
+                ...{ followPointer: true },
+            });
+            expect(showMock).toHaveBeenCalled();
+        });
+
+        it("ignore mouseleave event unless tooltip is created", () => {
+            const anchor = document.createElement("div");
+            const content = "Tooltip Content";
+
+            const destroyMock = jest.fn();
+            const showMock = jest.fn();
+            instance.create = jest.fn().mockReturnValue({
+                destroy: destroyMock,
+                show: showMock,
+            });
+
+            instance.add(content, anchor, { followPointer: true });
+
+            anchor.dispatchEvent(new MouseEvent("mouseleave", {}));
+            expect(destroyMock).not.toHaveBeenCalled();
+        });
+
+        it("destroys tooltip on mouseleave", () => {
+            const anchor = document.createElement("div");
+            const content = "Tooltip Content";
+
+            const destroyMock = jest.fn();
+            const showMock = jest.fn();
+            instance.create = jest.fn().mockReturnValue({
+                destroy: destroyMock,
+                show: showMock,
+            });
+
+            instance.add(content, anchor, { followPointer: true });
+
+            anchor.dispatchEvent(new MouseEvent("mouseover", {}));
+            anchor.dispatchEvent(new MouseEvent("mouseleave", {}));
+            expect(destroyMock).toHaveBeenCalled();
+        });
+
+        it("updates tooltip position on mousemove", () => {
+            const anchor = document.createElement("div");
+            const content = "Tooltip Content";
+
+            const showMock = jest.fn();
+            instance.create = jest.fn().mockReturnValue({
+                show: showMock,
+            });
+            instance.setTooltipPosition = jest.fn();
+
+            instance.add(content, anchor, { followPointer: true });
+            const event = new MouseEvent("mousemove", {});
+
+            anchor.dispatchEvent(event);
+            // not call untill tooltip is created
+            expect(instance.setTooltipPosition).not.toHaveBeenCalled();
+            anchor.dispatchEvent(new MouseEvent("mouseover", {}));
+            anchor.dispatchEvent(event);
+            // update position for the existing tooltip
+            expect(instance.setTooltipPosition).toHaveBeenCalled();
+        });
+    });
+
+    describe("create", () => {
+        it("creates a tooltip with correct attributes and styles", () => {
+            const content = "Tooltip Content";
+            instance.setTooltipPosition = jest.fn();
+            const options = instance.getOptions();
+            const tooltip = instance.create(content, null, options);
+
+            expect(chartMock.renderer.text).toHaveBeenCalledWith(expect.stringContaining(content), 0, 0, true);
+            expect(tooltip.attr).toHaveBeenCalledWith({ class: "dr-renderer-tooltip" });
+            expect(tooltip.css).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    background: options.background,
+                    fontFamily: "Arial",
+                    fontSize: "12px",
+                    color: "#333",
+                    border: `${options.border}px solid ${options.borderColor}`,
+                    borderRadius: options.borderRadius + "px",
+                    boxShadow: options.boxShadow,
+                    color: options.color,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontFamily: options.fontFamily,
+                    fontSize: options.fontSize + "px",
+                    padding: options.paddings.map((p) => `${p}px`).join(" "),
+                })
+            );
+        });
+
+        it("sets a tooltip position", () => {
+            const options = instance.getOptions();
+            instance.setTooltipPosition = jest.fn();
+            instance.create("Tooltip content", null, options);
+            expect(instance.setTooltipPosition).toHaveBeenCalled();
+        });
+
+        it("adds an arrow if { showArrow: true }", () => {
+            const options = instance.getOptions();
+            instance.setTooltipPosition = jest.fn();
+            instance.create("Tooltip content", null, options);
+            expect(chartMock.renderer.text).toHaveBeenCalledWith(
+                'Tooltip content<span class="dr-renderer-tooltip_arrow" style="position: absolute"></span>',
+                0,
+                0,
+                true
+            );
+        });
+
+        it("does not add an arrow if { showArrow: false }", () => {
+            const options = instance.getOptions();
+            instance.setTooltipPosition = jest.fn();
+            instance.create("Tooltip content", null, { ...options, ...{ showArrow: false } });
+            expect(chartMock.renderer.text).toHaveBeenCalledWith("Tooltip content", 0, 0, true);
+        });
+    });
+
+    describe("setTooltipPosition", () => {
+        beforeEach(() => {
+            instance.getPosition = jest.fn().mockReturnValue(positionMock);
+            instance.setArrowPosition = jest.fn();
+        });
+
+        it("positions the tooltip correctly", () => {
+            instance.setTooltipPosition(tooltipMock, anchorMock, optionsMock);
+
+            expect(tooltipMock.attr).toHaveBeenCalledWith({
+                x: positionMock.x,
+                y: positionMock.y,
+                class: expect.stringContaining(positionMock.direction),
+            });
+        });
+
+        it("positions the tooltip arrow  correctly", () => {
+            instance.setTooltipPosition(tooltipMock, anchorMock, optionsMock);
+            expect(instance.setArrowPosition).toHaveBeenCalledWith(tooltipMock, positionMock, anchorMock, optionsMock);
+        });
+
+        it("does not position the tooltip arrow unless the arrows is on", () => {
+            optionsMock.showArrow = false;
+            instance.setTooltipPosition(tooltipMock, anchorMock, optionsMock);
+            expect(instance.setArrowPosition).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("setArrowPosition", () => {
+        let commonStyles;
+        let arrowBottomBorderStyles;
+        let arrowTopBorderStyles;
+        let arrowLeftBorderStyles;
+        let arrowRightBorderStyles;
+
+        beforeEach(() => {
+            commonStyles = `position:absolute;display:block;width:${optionsMock.arrowSize}px;height:${optionsMock.arrowSize}px;transform:rotate(-45deg);border-style:solid;border-width:${optionsMock.border}px;background:${optionsMock.background};`;
+            arrowBottomBorderStyles = `border-color:${optionsMock.borderColor} ${
+                optionsMock.borderColor
+            } transparent transparent;border-top-right-radius:${optionsMock.arrowRadius}px;top:-${optionsMock.arrowSize / 2}px;`;
+            arrowTopBorderStyles = `border-color:transparent transparent ${optionsMock.borderColor} ${
+                optionsMock.borderColor
+            };border-bottom-left-radius:${optionsMock.arrowRadius}px;bottom:-${optionsMock.arrowSize / 2}px;`;
+            arrowLeftBorderStyles = `border-color:transparent ${optionsMock.borderColor} ${
+                optionsMock.borderColor
+            } transparent;border-bottom-right-radius:${optionsMock.arrowRadius}px;right:-${optionsMock.arrowSize / 2}px;`;
+            arrowRightBorderStyles = `border-color:${optionsMock.borderColor} transparent transparent ${
+                optionsMock.borderColor
+            };border-top-left-radius:${optionsMock.arrowRadius}px;left:-${optionsMock.arrowSize / 2}px;`;
+        });
+
+        it("sets a top arrow position (tooltip is bigger than anchor)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 175,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:45px`);
+        });
+
+        it("sets a top arrow position (tooltip is smaller than anchor)", () => {
+            tooltipBBoxMock.width = 40;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 205,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:15px`);
+        });
+
+        it("sets a top arrow position (clamp left)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 0;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 0,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:8px`);
+        });
+
+        it("sets a top arrow position (clamp right)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 180;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 100,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:82px`);
+        });
+
+        it("sets a bottom arrow position (tooltip is bigger than anchor)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 175,
+                y: 180,
+                direction: "bottom",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowBottomBorderStyles}left:45px`);
+        });
+
+        it("sets a bottom arrow position (tooltip is smaller than anchor)", () => {
+            tooltipBBoxMock.width = 40;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 205,
+                y: 180,
+                direction: "bottom",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowBottomBorderStyles}left:15px`);
+        });
+
+        it("sets a bottom arrow position (clamp left)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 0;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 0,
+                y: 180,
+                direction: "bottom",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowBottomBorderStyles}left:8px`);
+        });
+
+        it("sets a bottom arrow position (clamp right)", () => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 180;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 100,
+                y: 180,
+                direction: "bottom",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowBottomBorderStyles}left:82px`);
+        });
+
+        it("sets a left arrow position (tooltip is bigger than anchor)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 175,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:45px`);
+        });
+
+        it("sets a left arrow position (tooltip is smaller than anchor)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 40;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 205,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:15px`);
+        });
+
+        it("sets a left arrow position (clamp top)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 0;
+            positionMock = {
+                x: 180,
+                y: 0,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:8px`);
+        });
+
+        it("sets a left arrow position (clamp bottom)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 180;
+            positionMock = {
+                x: 180,
+                y: 10,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:82px`);
+        });
+
+        it("sets a right arrow position (tooltip is bigger than anchor)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 175,
+                direction: "right",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowRightBorderStyles}top:45px`);
+        });
+
+        it("sets a right arrow position (tooltip is smaller than anchor)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 40;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 205,
+                direction: "right",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowRightBorderStyles}top:15px`);
+        });
+
+        it("sets a right arrow position (clamp top)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 0;
+            positionMock = {
+                x: 180,
+                y: 0,
+                direction: "right",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowRightBorderStyles}top:8px`);
+        });
+
+        it("sets a right arrow position (clamp bottom)", () => {
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 100;
+            anchorBBoxMock.width = 20;
+            anchorBBoxMock.height = 20;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 180;
+            positionMock = {
+                x: 180,
+                y: 10,
+                direction: "right",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowRightBorderStyles}top:82px`);
+        });
+
+        it("removes old styles", () => {
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.removeAttribute).toHaveBeenCalledWith("style");
+        });
+    });
+
+    describe("getCoords", () => {
+        beforeEach(() => {
+            tooltipBBoxMock.width = 100;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+        });
+
+        it("gets coordinates (top - without correction)", () => {
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 170 });
+        });
+
+        it("gets coordinates (top - bound to the chart - left)", () => {
+            anchorBBoxMock.x = 0;
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 170 });
+        });
+
+        it("gets coordinates (top - bound to the chart - right)", () => {
+            anchorBBoxMock.x = 1000;
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 692 /* chartWidth - tooltipWidth - offset */,
+                y: 170,
+            });
+        });
+
+        it("gets coordinates (bottom - without correction)", () => {
+            expect(instance.getCoords("bottom", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 260 });
+        });
+
+        it("gets coordinates (bottom - bound to the chart - left)", () => {
+            anchorBBoxMock.x = 0;
+            expect(instance.getCoords("bottom", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 260 });
+        });
+
+        it("gets coordinates (bottom - bound to the chart - right)", () => {
+            anchorBBoxMock.x = 1000;
+            expect(instance.getCoords("bottom", tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 692 /* chartWidth - tooltipWidth - offset */,
+                y: 260,
+            });
+        });
+
+        it("gets coordinates (left - without correction)", () => {
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 215 });
+        });
+
+        it("gets coordinates (left - bound to the chart - bottom)", () => {
+            anchorBBoxMock.y = 1000;
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 572 });
+        });
+
+        it("gets coordinates (left - bound to the chart - top)", () => {
+            anchorBBoxMock.y = 0;
+            tooltipBBoxMock.height = 100;
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 90,
+                y: 8,
+            });
+        });
+
+        it("gets coordinates (right - without correction)", () => {
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 260, y: 215 });
+        });
+
+        it("gets coordinates (right - bound to the chart - bottom)", () => {
+            anchorBBoxMock.y = 1000;
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 260,
+                y: 572,
+            });
+        });
+
+        it("gets coordinates (right - bound to the chart - top)", () => {
+            anchorBBoxMock.y = 0;
+            tooltipBBoxMock.height = 100;
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 260,
+                y: 8,
+            });
+        });
+    });
+
+    describe("getAnchorBox", () => {
+        beforeEach(() => {
+            chartBBoxMock.x = 100;
+            chartBBoxMock.y = 100;
+        });
+
+        it("returns the element bbox (svg element)", () => {
+            expect(
+                instance.getAnchorBox({
+                    getBBox: jest.fn().mockReturnValue({ x: 10, y: 10, width: 100, height: 20 }),
+                })
+            ).toEqual({ x: 10, y: 10, width: 100, height: 20 });
+        });
+
+        it("returns the element bbox (html element), uses chart x and y to get reletive coordinates", () => {
+            expect(
+                instance.getAnchorBox({
+                    getBoundingClientRect: jest.fn().mockReturnValue({ x: 150, y: 160, width: 100, height: 20 }),
+                })
+            ).toEqual({ x: 50, y: 60, width: 100, height: 20 });
+        });
+
+        it("returns the element bbox (point), uses chart x and y to get reletive coordinates", () => {
+            expect(instance.getAnchorBox({ x: 150, y: 160 })).toEqual({ x: 50, y: 60, width: 0, height: 0 });
+        });
+    });
+
+    describe("getPosition", () => {
+        it("returns coords and direction for provided direction if it's valid", () => {
+            optionsMock.direction = "left";
+            instance.getCoords = jest.fn().mockReturnValue({ x: 100, y: 100 });
+            expect(instance.getPosition(tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 100,
+                y: 100,
+                direction: "left",
+            });
+        });
+
+        it("looks for an appropriate directions unless it's valid", () => {
+            optionsMock.direction = "top";
+            instance.getCoords = jest.fn((direction) => {
+                // try top -> invalid, out of y
+                if (direction === "top") {
+                    return {
+                        x: 100,
+                        y: -20,
+                    };
+                    // try right, invalid -> out of x
+                } else if (direction === "right") {
+                    return {
+                        x: -100,
+                        y: 20,
+                    };
+                    // try bottom, invalid -> out of y
+                } else if (direction === "bottom") {
+                    return {
+                        x: 100,
+                        y: 2000,
+                    };
+                } else {
+                    return {
+                        x: 50,
+                        y: 50,
+                    };
+                }
+            });
+            expect(instance.getPosition(tooltipMock, anchorMock, optionsMock)).toEqual({
+                x: 50,
+                y: 50,
+                direction: "left",
+            });
+        });
+    });
+});