Skip to content

Commit

Permalink
tooltip tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@binrysearch
binrysearch committed Sep 9, 2024
1 parent b5b5b57 commit fd12b20
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 162 deletions.
224 changes: 63 additions & 161 deletions src/packages/tooltip/placeTooltip.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,189 +1,91 @@
import * as getOffset from "../../util/getOffset";
import * as getWindowSize from "../../util/getWindowSize";
import { placeTooltip } from "./placeTooltip";
import { determineAutoPosition, TooltipPosition } from "./tooltipPosition";

const positionPrecedence: TooltipPosition[] = [
"bottom",
"top",
"right",
"left",
];

describe("placeTooltip", () => {
test("should automatically place the tooltip position when there is enough space", () => {
// Arrange
jest.spyOn(getOffset, "default").mockReturnValue({
height: 100,
width: 100,
top: 0,
left: 0,
});

jest.spyOn(getWindowSize, "default").mockReturnValue({
height: 1000,
width: 1000,
});

jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
x: 0,
y: 0,
toJSON: jest.fn,
width: 100,
height: 100,
top: 200,
left: 200,
bottom: 300,
right: 300,
});

const stepElement = document.createElement("div");
const tooltipLayer = document.createElement("div");
const arrowLayer = document.createElement("div");

// Act
placeTooltip(
tooltipLayer,
arrowLayer,
stepElement,
"top",
["top", "bottom", "left", "right"],
false,
true
);

// Assert
expect(tooltipLayer.className).toBe(
"introjs-tooltip introjs-top-right-aligned"
);
});

test("should skip auto positioning when autoPosition is false", () => {
// Arrange
const stepElement = document.createElement("div");
const tooltipLayer = document.createElement("div");
const arrowLayer = document.createElement("div");

// Act
placeTooltip(
tooltipLayer,
arrowLayer,
stepElement,
const position = determineAutoPosition(
positionPrecedence,
{
top: 200,
left: 200,
height: 100,
width: 100,
right: 300,
bottom: 300,
absoluteTop: 200,
absoluteLeft: 200,
absoluteRight: 300,
absoluteBottom: 300,
},
100,
100,
"top",
["top", "bottom"],
false,
false
{ height: 1000, width: 1000 }
);

// Assert
expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top");
expect(position).toBe("top-right-aligned");
});

test("should use floating tooltips when height/width is limited", () => {
// Arrange
jest.spyOn(getOffset, "default").mockReturnValue({
height: 100,
width: 100,
top: 0,
left: 0,
});

jest.spyOn(getWindowSize, "default").mockReturnValue({
height: 100,
width: 100,
});

jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
x: 0,
y: 0,
toJSON: jest.fn,
width: 100,
height: 100,
top: 0,
left: 0,
bottom: 0,
right: 0,
});

const stepElement = document.createElement("div");
const tooltipLayer = document.createElement("div");
const arrowLayer = document.createElement("div");

// Act
placeTooltip(
tooltipLayer,
arrowLayer,
stepElement,
"left",
["top", "bottom", "left", "right"],
false,
true
const position = determineAutoPosition(
positionPrecedence,
{
top: 0,
left: 0,
height: 100,
width: 100,
right: 0,
bottom: 0,
absoluteTop: 0,
absoluteLeft: 0,
absoluteRight: 0,
absoluteBottom: 0,
},
100,
100,
"top",
{ height: 100, width: 100 }
);

// Assert
expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating");
expect(position).toBe("floating");
});

test("should use bottom middle aligned when there is enough vertical space", () => {
// Arrange
jest.spyOn(getOffset, "default").mockReturnValue({
height: 100,
width: 100,
top: 0,
left: 0,
});

jest.spyOn(getWindowSize, "default").mockReturnValue({
height: 500,
width: 100,
});

jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
x: 0,
y: 0,
toJSON: jest.fn,
width: 100,
height: 100,
top: 0,
left: 0,
bottom: 0,
right: 0,
});

const stepElement = document.createElement("div");
const tooltipLayer = document.createElement("div");
const arrowLayer = document.createElement("div");

// Act
placeTooltip(
tooltipLayer,
arrowLayer,
stepElement,
"left",
["top", "bottom", "left", "right"],
false,
true
);

// Assert
expect(tooltipLayer.className).toBe(
"introjs-tooltip introjs-bottom-middle-aligned"
);
});

test("should attach the global custom tooltip css class", () => {
// Arrange
const stepElement = document.createElement("div");
const tooltipLayer = document.createElement("div");
const arrowLayer = document.createElement("div");

// Act
placeTooltip(
tooltipLayer,
arrowLayer,
stepElement,
const position = determineAutoPosition(
positionPrecedence,
{
top: 0,
left: 0,
height: 100,
width: 100,
right: 0,
bottom: 0,
absoluteTop: 0,
absoluteLeft: 0,
absoluteRight: 0,
absoluteBottom: 0,
},
100,
100,
"left",
["top", "bottom", "left", "right"],
false,
true,
"newClass"
{ height: 500, width: 100 }
);

// Assert
expect(tooltipLayer.className).toBe(
"introjs-tooltip newClass introjs-bottom-middle-aligned"
);
expect(position).toBe("bottom-middle-aligned");
});
});
2 changes: 1 addition & 1 deletion src/packages/tooltip/tooltipPosition.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export type TooltipPosition =
/**
* auto-determine alignment
*/
export function determineAutoAlignment(
function determineAutoAlignment(
offsetLeft: number,
tooltipWidth: number,
windowWidth: number,
Expand Down

0 comments on commit fd12b20

Please sign in to comment.