@datarailsshared/dr_renderer 1.5.159 → 1.5.168

package/tests/dr_chart_tooltip.test.js

@@ -1,789 +0,0 @@
-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),
-                clientWidth: 800,
-            },
-            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 (tooltip is smaller than anchor) on a zoomed chart", () => {
-            chartMock.container.clientWidth = 1600;
-            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:22px`);
-        });
-
-        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 (tooltip is smaller than anchor) on a zoomed chart", () => {
-            chartMock.container.clientWidth = 1600;
-            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:22px`);
-        });
-
-        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 - without correction)", () => {
-            chartMock.container.clientWidth = 1600;
-            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 400, y: 370 });
-        });
-
-        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 - without correction)", () => {
-            chartMock.container.clientWidth = 1600;
-            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 290, y: 440 });
-        });
-
-        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 - without correction)", () => {
-            chartMock.container.clientWidth = 1600;
-            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 510, y: 440 });
-        });
-
-        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",
-            });
-        });
-    });
-});