Skip to content

Commit c3d9ac0

Browse files
ParvinmhParvinmh
committed
update cy test for tooltipPosition
1 parent 77ab5e0 commit c3d9ac0

File tree

1 file changed

+64
-95
lines changed

1 file changed

+64
-95
lines changed

‎src/packages/tooltip/tooltipPosition.cy.ts‎

Lines changed: 64 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -31,59 +31,7 @@ context("Tooltip Positioning - All Devices", () => {
3131
];
3232

3333
beforeEach(() => {
34-
// Use existing cypress setup page
3534
cy.visit("./cypress/setup/index.html");
36-
37-
// Add test elements dynamically
38-
cy.document().then((doc) => {
39-
// Clear existing content for clean test environment
40-
const container = doc.createElement("div");
41-
container.id = "tooltip-position-test-container";
42-
container.innerHTML = `
43-
<style>
44-
body { padding: 100px; margin: 0; font-family: Arial; }
45-
.test-container {
46-
display: flex;
47-
flex-direction: column;
48-
gap: 200px;
49-
min-height: 3000px;
50-
}
51-
.test-row {
52-
display: flex;
53-
justify-content: space-around;
54-
align-items: center;
55-
gap: 50px;
56-
}
57-
.test-element {
58-
width: 150px;
59-
height: 100px;
60-
background: #4CAF50;
61-
color: white;
62-
display: flex;
63-
align-items: center;
64-
justify-content: center;
65-
text-align: center;
66-
border-radius: 8px;
67-
font-size: 14px;
68-
padding: 10px;
69-
}
70-
</style>
71-
<div class="test-container">
72-
${positions
73-
.map(
74-
(pos, idx) => `
75-
<div class="test-row">
76-
<div id="test-element-${idx}" class="test-element" data-intro="Testing ${pos} position" data-position="${pos}">
77-
${pos}
78-
</div>
79-
</div>
80-
`
81-
)
82-
.join("")}
83-
</div>
84-
`;
85-
doc.body.appendChild(container);
86-
});
8735
});
8836

8937
viewportSizes.forEach(({ name, width, height }) => {
@@ -92,7 +40,7 @@ context("Tooltip Positioning - All Devices", () => {
9240
cy.viewport(width, height);
9341
});
9442

95-
positions.forEach((position, idx) => {
43+
positions.forEach((position) => {
9644
// Skip known edge cases where element positioning conflicts with tooltip size
9745
const shouldSkip =
9846
(name === "Mobile (iPhone 12 Pro)" && position === "top") ||
@@ -101,10 +49,22 @@ context("Tooltip Positioning - All Devices", () => {
10149
const testFn = shouldSkip ? it.skip : it;
10250

10351
testFn(`should correctly position tooltip: ${position}`, () => {
104-
const elementId = `test-element-${idx}`;
52+
// Create test element dynamically for this specific test
53+
cy.document().then((doc) => {
54+
const element = doc.createElement("div");
55+
element.id = "tooltip-test-element";
56+
element.style.cssText =
57+
"width: 150px; height: 100px; background: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; font-size: 14px; padding: 10px; margin: 300px auto;";
58+
element.setAttribute("data-intro", `Testing ${position} position`);
59+
element.setAttribute("data-position", position);
60+
element.textContent = position;
61+
doc.body.appendChild(element);
62+
});
63+
64+
cy.wait(100);
10565

10666
// Scroll element into view
107-
cy.get(`#${elementId}`).scrollIntoView({ duration: 300 });
67+
cy.get("#tooltip-test-element").scrollIntoView({ duration: 300 });
10868
cy.wait(200);
10969

11070
// Start intro.js with specific position
@@ -114,7 +74,7 @@ context("Tooltip Positioning - All Devices", () => {
11474
.setOptions({
11575
steps: [
11676
{
117-
element: `#${elementId}`,
77+
element: "#tooltip-test-element",
11878
intro: `Testing ${position} position on ${name}`,
11979
position: position,
12080
},
@@ -129,7 +89,7 @@ context("Tooltip Positioning - All Devices", () => {
12989
cy.wait(500);
13090

13191
// Get element and tooltip positions
132-
cy.get(`#${elementId}`).then(($element) => {
92+
cy.get("#tooltip-test-element").then(($element) => {
13393
const elementRect = $element[0].getBoundingClientRect();
13494

13595
cy.get(".introjs-tooltip")
@@ -274,15 +234,11 @@ context("Tooltip Positioning - All Devices", () => {
274234
cy.document().then((doc) => {
275235
const leftElement = doc.createElement("div");
276236
leftElement.id = "test-edge-left";
277-
leftElement.className = "test-element";
278-
leftElement.style.position = "absolute";
279-
leftElement.style.left = "10px";
280-
leftElement.style.top = "300px";
237+
leftElement.style.cssText =
238+
"width: 150px; height: 100px; background: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; position: absolute; left: 10px; top: 300px;";
281239
leftElement.setAttribute("data-intro", "Testing edge constraint");
282240
leftElement.textContent = "Left Edge";
283-
doc
284-
.getElementById("tooltip-position-test-container")
285-
?.appendChild(leftElement);
241+
doc.body.appendChild(leftElement);
286242
});
287243

288244
cy.wait(100);
@@ -321,20 +277,31 @@ context("Tooltip Positioning - All Devices", () => {
321277

322278
// Cross-device comparison test
323279
context("Cross-Device Consistency", () => {
324-
it("should maintain consistent relative positioning across devices", () => {
325-
const results: any[] = [];
326-
327-
// Test on multiple devices
328-
const devicesToCompare = [
329-
{ width: 375, height: 667 },
330-
{ width: 1920, height: 1080 },
331-
];
280+
const devicesToCompare = [
281+
{ name: "Mobile", width: 375, height: 667 },
282+
{ name: "Desktop", width: 1920, height: 1080 },
283+
];
332284

333-
devicesToCompare.forEach(({ width, height }, deviceIdx) => {
285+
devicesToCompare.forEach(({ name, width, height }) => {
286+
it(`should maintain correct positioning on ${name} (${width}x${height})`, () => {
334287
cy.viewport(width, height);
335-
cy.wait(300);
288+
cy.wait(100);
289+
290+
// Create test element for this device
291+
cy.document().then((doc) => {
292+
const element = doc.createElement("div");
293+
element.id = "consistency-test-element";
294+
element.style.cssText =
295+
"width: 150px; height: 100px; background: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 300px auto;";
296+
element.setAttribute("data-intro", "Consistency test");
297+
element.setAttribute("data-position", "bottom-middle-aligned");
298+
element.textContent = "Test";
299+
doc.body.appendChild(element);
300+
});
336301

337-
cy.get("#test-element-4").scrollIntoView(); // bottom-middle-aligned element
302+
cy.wait(100);
303+
304+
cy.get("#consistency-test-element").scrollIntoView();
338305
cy.wait(200);
339306

340307
cy.window().then((win) => {
@@ -343,7 +310,7 @@ context("Tooltip Positioning - All Devices", () => {
343310
.setOptions({
344311
steps: [
345312
{
346-
element: "#test-element-4",
313+
element: "#consistency-test-element",
347314
intro: "Consistency test",
348315
position: "bottom-middle-aligned",
349316
},
@@ -355,7 +322,7 @@ context("Tooltip Positioning - All Devices", () => {
355322

356323
cy.wait(500);
357324

358-
cy.get("#test-element-4").then(($element) => {
325+
cy.get("#consistency-test-element").then(($element) => {
359326
const elementRect = $element[0].getBoundingClientRect();
360327

361328
cy.get(".introjs-tooltip").then(($tooltip) => {
@@ -364,47 +331,49 @@ context("Tooltip Positioning - All Devices", () => {
364331
// Calculate relative position
365332
const elementCenter = elementRect.left + elementRect.width / 2;
366333
const tooltipCenter = tooltipRect.left + tooltipRect.width / 2;
367-
const relativeOffset = tooltipCenter - elementCenter;
368-
369-
results.push({
370-
device: `${width}x${height}`,
371-
relativeOffset,
372-
isBelow: tooltipRect.top > elementRect.bottom,
373-
});
334+
const relativeOffset = Math.abs(tooltipCenter - elementCenter);
374335

375336
// All devices should show tooltip below element
376337
expect(tooltipRect.top).to.be.greaterThan(elementRect.bottom);
338+
339+
// Tooltip should be horizontally centered (within tolerance)
340+
expect(relativeOffset).to.be.lessThan(10);
377341
});
378342
});
379343

380344
cy.window().then((win) => {
381345
(win as any).introJs.tour().exit(true);
382346
});
383347
});
384-
385-
// After all devices tested, verify consistency
386-
cy.wrap(results).then((res) => {
387-
if (res.length === 2) {
388-
// Relative offset should be similar (within 20px)
389-
const diff = Math.abs(res[0].relativeOffset - res[1].relativeOffset);
390-
expect(diff).to.be.lessThan(20);
391-
}
392-
});
393348
});
394349
});
395350

396351
// Performance test
397352
context("Performance", () => {
398353
it("should calculate positions quickly across rapid viewport changes", () => {
399-
cy.get("#test-element-4").scrollIntoView();
354+
// Create test element
355+
cy.document().then((doc) => {
356+
const element = doc.createElement("div");
357+
element.id = "performance-test-element";
358+
element.style.cssText =
359+
"width: 150px; height: 100px; background: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 300px auto;";
360+
element.setAttribute("data-intro", "Performance test");
361+
element.setAttribute("data-position", "bottom-middle-aligned");
362+
element.textContent = "Performance";
363+
doc.body.appendChild(element);
364+
});
365+
366+
cy.wait(100);
367+
368+
cy.get("#performance-test-element").scrollIntoView();
400369

401370
cy.window().then((win) => {
402371
(win as any).introJs
403372
.tour()
404373
.setOptions({
405374
steps: [
406375
{
407-
element: "#test-element-4",
376+
element: "#performance-test-element",
408377
intro: "Performance test",
409378
position: "bottom-middle-aligned",
410379
},

0 commit comments

Comments
 (0)