Skip to content

Commit 936a681

Browse files
metonymmetonym
committed
test(tooltip): add unit tests
1 parent ca4a121 commit 936a681

10 files changed

+263
-54
lines changed

‎tests/Tooltip.test.svelte

-54
This file was deleted.

‎tests/Tooltip/Tooltip.test.ts

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import { render, screen, fireEvent } from "@testing-library/svelte";
2+
import TooltipDefault from "./TooltipDefault.test.svelte";
3+
import TooltipHideIcon from "./TooltipHideIcon.test.svelte";
4+
import TooltipOpen from "./TooltipOpen.test.svelte";
5+
import TooltipCustomContent from "./TooltipCustomContent.test.svelte";
6+
import TooltipCustomIcon from "./TooltipCustomIcon.test.svelte";
7+
import TooltipDirections from "./TooltipDirections.test.svelte";
8+
import TooltipAlignments from "./TooltipAlignments.test.svelte";
9+
import TooltipEvents from "./TooltipEvents.test.svelte";
10+
import { user } from "../setup-tests";
11+
12+
describe("Tooltip", () => {
13+
test("should render with default props", () => {
14+
const { container } = render(TooltipDefault);
15+
expect(container.querySelector(".bx--tooltip__label")).toBeInTheDocument();
16+
expect(
17+
container.querySelector(".bx--tooltip__trigger"),
18+
).toBeInTheDocument();
19+
});
20+
21+
test("should hide icon when hideIcon is true", async () => {
22+
const { container } = render(TooltipHideIcon);
23+
24+
expect(
25+
container.querySelector(".bx--tooltip__trigger"),
26+
).not.toBeInTheDocument();
27+
expect(screen.getByText("Tooltip trigger")).toBeInTheDocument();
28+
await user.click(screen.getByText("Tooltip trigger"));
29+
expect(
30+
screen.getByText("This tooltip has its icon hidden"),
31+
).toBeInTheDocument();
32+
});
33+
34+
test("should show tooltip when open is true", () => {
35+
const { container } = render(TooltipOpen);
36+
37+
expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
38+
expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
39+
expect(
40+
screen.getByText("This tooltip is initially open"),
41+
).toBeInTheDocument();
42+
});
43+
44+
test("should open tooltip on focus", async () => {
45+
const { container } = render(TooltipDefault);
46+
47+
const trigger = container.querySelector(".bx--tooltip__trigger");
48+
assert(trigger);
49+
50+
await fireEvent.focus(trigger);
51+
expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
52+
expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
53+
});
54+
55+
test("should close tooltip on Escape key", async () => {
56+
const { container } = render(TooltipOpen);
57+
58+
expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
59+
60+
const tooltip = container.querySelector(".bx--tooltip");
61+
assert(tooltip);
62+
63+
await fireEvent.keyDown(tooltip, { key: "Escape" });
64+
expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
65+
});
66+
67+
test("should toggle tooltip on mousedown", async () => {
68+
const { container } = render(TooltipDefault);
69+
70+
const trigger = container.querySelector(".bx--tooltip__trigger");
71+
assert(trigger);
72+
73+
await user.click(trigger);
74+
expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
75+
76+
await user.click(trigger);
77+
expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
78+
});
79+
80+
test("should render custom slot content", () => {
81+
render(TooltipCustomContent);
82+
83+
expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
84+
expect(screen.getByText("Custom tooltip content")).toBeInTheDocument();
85+
});
86+
87+
test("should render custom icon via slot", async () => {
88+
render(TooltipCustomIcon);
89+
90+
expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
91+
expect(screen.getByText("🔍")).toBeInTheDocument();
92+
93+
await user.click(screen.getByTestId("custom-icon"));
94+
expect(screen.getByText("Custom icon tooltip")).toBeInTheDocument();
95+
});
96+
97+
test("should apply correct direction classes", () => {
98+
const { container } = render(TooltipDirections);
99+
100+
const tooltips = container.querySelectorAll(".bx--tooltip");
101+
102+
expect(tooltips.length).toBe(4);
103+
104+
expect(container.querySelector(".bx--tooltip--top")).toBeInTheDocument();
105+
expect(container.querySelector(".bx--tooltip--right")).toBeInTheDocument();
106+
expect(container.querySelector(".bx--tooltip--bottom")).toBeInTheDocument();
107+
expect(container.querySelector(".bx--tooltip--left")).toBeInTheDocument();
108+
109+
expect(screen.getByText("Tooltip with top direction")).toBeInTheDocument();
110+
expect(
111+
screen.getByText("Tooltip with right direction"),
112+
).toBeInTheDocument();
113+
expect(
114+
screen.getByText("Tooltip with bottom direction"),
115+
).toBeInTheDocument();
116+
expect(screen.getByText("Tooltip with left direction")).toBeInTheDocument();
117+
});
118+
119+
test("should apply correct alignment classes", () => {
120+
const { container } = render(TooltipAlignments);
121+
122+
const tooltips = container.querySelectorAll(".bx--tooltip");
123+
expect(tooltips.length).toBe(3);
124+
125+
expect(
126+
container.querySelector(".bx--tooltip--align-start"),
127+
).toBeInTheDocument();
128+
expect(
129+
container.querySelector(".bx--tooltip--align-center"),
130+
).toBeInTheDocument();
131+
expect(
132+
container.querySelector(".bx--tooltip--align-end"),
133+
).toBeInTheDocument();
134+
135+
expect(
136+
screen.getByText("Tooltip with start alignment"),
137+
).toBeInTheDocument();
138+
expect(
139+
screen.getByText("Tooltip with center alignment"),
140+
).toBeInTheDocument();
141+
expect(screen.getByText("Tooltip with end alignment")).toBeInTheDocument();
142+
});
143+
144+
test("should dispatch events when tooltip opens and closes", async () => {
145+
const { container } = render(TooltipEvents);
146+
147+
expect(screen.getByText("Open events: 0")).toBeInTheDocument();
148+
expect(screen.getByText("Close events: 0")).toBeInTheDocument();
149+
150+
const trigger = container.querySelector(".bx--tooltip__trigger");
151+
assert(trigger);
152+
153+
await user.click(trigger);
154+
expect(screen.getByText("Open events: 1")).toBeInTheDocument();
155+
156+
await user.keyboard("{Escape}");
157+
expect(screen.getByText("Close events: 1")).toBeInTheDocument();
158+
});
159+
160+
test("should close tooltip when clicking outside", async () => {
161+
const { container } = render(TooltipOpen);
162+
163+
expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
164+
165+
await user.click(document.body);
166+
expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
167+
});
168+
});

‎tests/Tooltip/TooltipAlignments.test.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
4+
const alignments = ["start", "center", "end"] as const;
5+
</script>
6+
7+
<div>
8+
{#each alignments as align}
9+
<div style="margin: 50px;">
10+
<Tooltip open={true} {align} iconDescription="Information">
11+
Tooltip with {align} alignment
12+
</Tooltip>
13+
</div>
14+
{/each}
15+
</div>

‎tests/Tooltip/TooltipCustomContent.test.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
</script>
4+
5+
<Tooltip open={true} iconDescription="Information">
6+
<p data-testid="tooltip-content">Custom tooltip content</p>
7+
</Tooltip>

‎tests/Tooltip/TooltipCustomIcon.test.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
</script>
4+
5+
<Tooltip iconDescription="Information">
6+
<div slot="icon" data-testid="custom-icon">🔍</div>
7+
Custom icon tooltip
8+
</Tooltip>

‎tests/Tooltip/TooltipDefault.test.svelte

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
</script>
4+
5+
<Tooltip iconDescription="Information" />

‎tests/Tooltip/TooltipDirections.test.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
4+
const directions = ["top", "right", "bottom", "left"] as const;
5+
</script>
6+
7+
<div>
8+
{#each directions as direction}
9+
<div style="margin: 50px;">
10+
<Tooltip open={true} {direction} iconDescription="Information">
11+
Tooltip with {direction} direction
12+
</Tooltip>
13+
</div>
14+
{/each}
15+
</div>

‎tests/Tooltip/TooltipEvents.test.svelte

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
4+
let openCount = 0;
5+
let closeCount = 0;
6+
7+
function handleOpen() {
8+
openCount += 1;
9+
}
10+
11+
function handleClose() {
12+
closeCount += 1;
13+
}
14+
</script>
15+
16+
<div>
17+
<p>Open events: {openCount}</p>
18+
<p>Close events: {closeCount}</p>
19+
20+
<Tooltip
21+
iconDescription="Information"
22+
on:open={handleOpen}
23+
on:close={handleClose}
24+
>
25+
Interact with this tooltip to trigger events
26+
</Tooltip>
27+
</div>

‎tests/Tooltip/TooltipHideIcon.test.svelte

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
</script>
4+
5+
<Tooltip
6+
hideIcon={true}
7+
triggerText="Tooltip trigger"
8+
iconDescription="Information"
9+
>
10+
This tooltip has its icon hidden
11+
</Tooltip>

‎tests/Tooltip/TooltipOpen.test.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
import { Tooltip } from "carbon-components-svelte";
3+
</script>
4+
5+
<Tooltip open={true} iconDescription="Information">
6+
This tooltip is initially open
7+
</Tooltip>

0 commit comments

Comments
 (0)