Skip to content

Commit 6927345

Browse files
afshinmafshinm
committed
fix(placeTooltip): using array filter for custom classnames
1 parent b1489be commit 6927345

File tree

2 files changed

+170
-73
lines changed

2 files changed

+170
-73
lines changed

‎src/core/placeTooltip.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -203,10 +203,10 @@ export default function placeTooltip(
203203
tooltipCssClass = this._options.tooltipClass;
204204
}
205205

206-
tooltipLayer.className = `introjs-tooltip ${tooltipCssClass || ''}`.replace(
207-
/^\s+|\s+$/g,
208-
""
209-
);
206+
tooltipLayer.className = ["introjs-tooltip", tooltipCssClass]
207+
.filter(Boolean)
208+
.join(" ");
209+
210210
tooltipLayer.setAttribute("role", "dialog");
211211

212212
currentTooltipPosition = this._introItems[this._currentStep].position;

‎tests/core/placeTooltip.test.js

Lines changed: 166 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,21 @@ import * as getOffset from "../../src/util/getOffset";
22
import * as getWindowSize from "../../src/util/getWindowSize";
33
import placeTooltip from "../../src/core/placeTooltip";
44

5-
65
describe("placeTooltip", () => {
76
test("should automatically place the tooltip position when there is enough space", () => {
8-
jest.spyOn(getOffset, 'default').mockReturnValue({
7+
jest.spyOn(getOffset, "default").mockReturnValue({
98
height: 100,
109
width: 100,
1110
top: 0,
12-
left: 0
11+
left: 0,
1312
});
1413

15-
jest.spyOn(getWindowSize, 'default').mockReturnValue({
14+
jest.spyOn(getWindowSize, "default").mockReturnValue({
1615
height: 1000,
17-
width: 1000
16+
width: 1000,
1817
});
1918

20-
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
19+
jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
2120
width: 100,
2221
height: 100,
2322
top: 200,
@@ -30,55 +29,73 @@ describe("placeTooltip", () => {
3029
const tooltipLayer = document.createElement("div");
3130
const arrowLayer = document.createElement("div");
3231

33-
placeTooltip.call({
34-
_currentStep: 0,
35-
_introItems: [{
36-
tooltip: 'hello',
37-
position: 'top'
38-
}],
39-
_options: {
40-
positionPrecedence: ['top', 'bottom', 'left', 'right'],
41-
autoPosition: true
42-
}
43-
}, targetElement, tooltipLayer, arrowLayer, false);
44-
45-
expect(tooltipLayer.className).toBe('introjs-tooltip introjs-top-right-aligned');
32+
placeTooltip.call(
33+
{
34+
_currentStep: 0,
35+
_introItems: [
36+
{
37+
tooltip: "hello",
38+
position: "top",
39+
},
40+
],
41+
_options: {
42+
positionPrecedence: ["top", "bottom", "left", "right"],
43+
autoPosition: true,
44+
},
45+
},
46+
targetElement,
47+
tooltipLayer,
48+
arrowLayer,
49+
false
50+
);
51+
52+
expect(tooltipLayer.className).toBe(
53+
"introjs-tooltip introjs-top-right-aligned"
54+
);
4655
});
4756

4857
test("should skip auto positioning when autoPosition is false", () => {
4958
const targetElement = document.createElement("div");
5059
const tooltipLayer = document.createElement("div");
5160
const arrowLayer = document.createElement("div");
5261

53-
placeTooltip.call({
54-
_currentStep: 0,
55-
_introItems: [{
56-
tooltip: 'hello',
57-
position: 'top'
58-
}],
59-
_options: {
60-
positionPrecedence: ['top', 'bottom'],
61-
autoPosition: false
62-
}
63-
}, targetElement, tooltipLayer, arrowLayer, false);
64-
65-
expect(tooltipLayer.className).toBe('introjs-tooltip introjs-top');
62+
placeTooltip.call(
63+
{
64+
_currentStep: 0,
65+
_introItems: [
66+
{
67+
tooltip: "hello",
68+
position: "top",
69+
},
70+
],
71+
_options: {
72+
positionPrecedence: ["top", "bottom"],
73+
autoPosition: false,
74+
},
75+
},
76+
targetElement,
77+
tooltipLayer,
78+
arrowLayer,
79+
false
80+
);
81+
82+
expect(tooltipLayer.className).toBe("introjs-tooltip introjs-top");
6683
});
6784

6885
test("should use floating tooltips when height/width is limited", () => {
69-
jest.spyOn(getOffset, 'default').mockReturnValue({
86+
jest.spyOn(getOffset, "default").mockReturnValue({
7087
height: 100,
7188
width: 100,
7289
top: 0,
73-
left: 0
90+
left: 0,
7491
});
7592

76-
jest.spyOn(getWindowSize, 'default').mockReturnValue({
93+
jest.spyOn(getWindowSize, "default").mockReturnValue({
7794
height: 100,
78-
width: 100
95+
width: 100,
7996
});
8097

81-
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
98+
jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
8299
width: 100,
83100
height: 100,
84101
top: 0,
@@ -91,35 +108,43 @@ describe("placeTooltip", () => {
91108
const tooltipLayer = document.createElement("div");
92109
const arrowLayer = document.createElement("div");
93110

94-
placeTooltip.call({
95-
_currentStep: 0,
96-
_introItems: [{
97-
tooltip: 'hello',
98-
position: 'left'
99-
}],
100-
_options: {
101-
positionPrecedence: ['top', 'bottom', 'left', 'right'],
102-
autoPosition: true
103-
}
104-
}, targetElement, tooltipLayer, arrowLayer, false);
105-
106-
expect(tooltipLayer.className).toBe('introjs-tooltip introjs-floating');
111+
placeTooltip.call(
112+
{
113+
_currentStep: 0,
114+
_introItems: [
115+
{
116+
tooltip: "hello",
117+
position: "left",
118+
},
119+
],
120+
_options: {
121+
positionPrecedence: ["top", "bottom", "left", "right"],
122+
autoPosition: true,
123+
},
124+
},
125+
targetElement,
126+
tooltipLayer,
127+
arrowLayer,
128+
false
129+
);
130+
131+
expect(tooltipLayer.className).toBe("introjs-tooltip introjs-floating");
107132
});
108133

109134
test("should use bottom middle aligned when there is enough vertical space", () => {
110-
jest.spyOn(getOffset, 'default').mockReturnValue({
135+
jest.spyOn(getOffset, "default").mockReturnValue({
111136
height: 100,
112137
width: 100,
113138
top: 0,
114-
left: 0
139+
left: 0,
115140
});
116141

117-
jest.spyOn(getWindowSize, 'default').mockReturnValue({
142+
jest.spyOn(getWindowSize, "default").mockReturnValue({
118143
height: 500,
119-
width: 100
144+
width: 100,
120145
});
121146

122-
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
147+
jest.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
123148
width: 100,
124149
height: 100,
125150
top: 0,
@@ -132,18 +157,90 @@ describe("placeTooltip", () => {
132157
const tooltipLayer = document.createElement("div");
133158
const arrowLayer = document.createElement("div");
134159

135-
placeTooltip.call({
136-
_currentStep: 0,
137-
_introItems: [{
138-
tooltip: 'hello',
139-
position: 'left'
140-
}],
141-
_options: {
142-
positionPrecedence: ['top', 'bottom', 'left', 'right'],
143-
autoPosition: true
144-
}
145-
}, targetElement, tooltipLayer, arrowLayer, false);
146-
147-
expect(tooltipLayer.className).toBe('introjs-tooltip introjs-bottom-middle-aligned');
160+
placeTooltip.call(
161+
{
162+
_currentStep: 0,
163+
_introItems: [
164+
{
165+
tooltip: "hello",
166+
position: "left",
167+
},
168+
],
169+
_options: {
170+
positionPrecedence: ["top", "bottom", "left", "right"],
171+
autoPosition: true,
172+
},
173+
},
174+
targetElement,
175+
tooltipLayer,
176+
arrowLayer,
177+
false
178+
);
179+
180+
expect(tooltipLayer.className).toBe(
181+
"introjs-tooltip introjs-bottom-middle-aligned"
182+
);
183+
});
184+
185+
test("should attach the global custom tooltip css class", () => {
186+
const targetElement = document.createElement("div");
187+
const tooltipLayer = document.createElement("div");
188+
const arrowLayer = document.createElement("div");
189+
190+
placeTooltip.call(
191+
{
192+
_currentStep: 0,
193+
_introItems: [
194+
{
195+
tooltip: "hello",
196+
position: "left",
197+
},
198+
],
199+
_options: {
200+
positionPrecedence: ["top", "bottom", "left", "right"],
201+
autoPosition: true,
202+
tooltipClass: "newclass",
203+
},
204+
},
205+
targetElement,
206+
tooltipLayer,
207+
arrowLayer,
208+
false
209+
);
210+
211+
expect(tooltipLayer.className).toBe(
212+
"introjs-tooltip newclass introjs-bottom-middle-aligned"
213+
);
214+
});
215+
216+
test("should attach the step custom tooltip css class", () => {
217+
const targetElement = document.createElement("div");
218+
const tooltipLayer = document.createElement("div");
219+
const arrowLayer = document.createElement("div");
220+
221+
placeTooltip.call(
222+
{
223+
_currentStep: 0,
224+
_introItems: [
225+
{
226+
tooltip: "hello",
227+
position: "left",
228+
tooltipClass: "myclass",
229+
},
230+
],
231+
_options: {
232+
positionPrecedence: ["top", "bottom", "left", "right"],
233+
autoPosition: true,
234+
},
235+
},
236+
targetElement,
237+
tooltipLayer,
238+
arrowLayer,
239+
false
240+
);
241+
242+
expect(tooltipLayer.className).toBe(
243+
"introjs-tooltip myclass introjs-bottom-middle-aligned"
244+
);
148245
});
149-
});
246+
});

0 commit comments

Comments
 (0)