Skip to content

Commit 936e6b7

Browse files
BenjaminCharmesml-evs
BenjaminCharmes
and
ml-evs
authored
Unify tooltip styling and add block version display (#1454)
Co-authored-by: Matthew Evans <[email protected]>
1 parent 55b0bc5 commit 936e6b7

26 files changed

+700
-567
lines changed

‎webapp/cypress/component/BlockTooltipTest.cy.jsx‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
import BlockTooltip from "@/components/BlockTooltip.vue";
2+
3+
describe("BlockTooltip", () => {
4+
describe("with icon mode (showIcon=true)", () => {
5+
const blockInfoWithAttributes = {
6+
attributes: {
7+
name: "Example Block",
8+
description: "This is an example block description.",
9+
version: "1.2.3",
10+
accepted_file_extensions: [".pdf", ".docx", ".xlsx"],
11+
},
12+
};
13+
14+
it("renders the tooltip with correct content on hover", () => {
15+
cy.mount(BlockTooltip, {
16+
propsData: { blockInfo: blockInfoWithAttributes, showIcon: true },
17+
});
18+
19+
cy.get(".info-icon").trigger("mouseenter", { force: true });
20+
21+
cy.get("[data-testid='styled-tooltip']")
22+
.should("be.visible")
23+
.within(() => {
24+
cy.contains(blockInfoWithAttributes.attributes.name).should("be.visible");
25+
cy.contains(blockInfoWithAttributes.attributes.description).should("be.visible");
26+
cy.contains("Block implementation version: 1.2.3").should("be.visible");
27+
cy.contains(".pdf").should("be.visible");
28+
cy.contains(".docx").should("be.visible");
29+
cy.contains(".xlsx").should("be.visible");
30+
});
31+
});
32+
33+
it("hides the tooltip on mouseleave", () => {
34+
cy.mount(BlockTooltip, {
35+
propsData: { blockInfo: blockInfoWithAttributes, showIcon: true },
36+
});
37+
38+
cy.get(".info-icon").trigger("mouseenter", { force: true });
39+
cy.get(".info-icon").trigger("mouseleave", { force: true });
40+
41+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
42+
});
43+
44+
it("shows and hides tooltip on focus and blur", () => {
45+
cy.mount(BlockTooltip, {
46+
propsData: { blockInfo: blockInfoWithAttributes, showIcon: true },
47+
});
48+
49+
cy.get(".info-icon").focus();
50+
cy.get("[data-testid='styled-tooltip']").should("be.visible");
51+
52+
cy.get(".info-icon").blur();
53+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
54+
});
55+
56+
it("handles blockInfo without version gracefully", () => {
57+
const blockInfoNoVersion = {
58+
attributes: {
59+
name: "Block Without Version",
60+
description: "This block has no version.",
61+
accepted_file_extensions: [".txt"],
62+
},
63+
};
64+
65+
cy.mount(BlockTooltip, {
66+
propsData: { blockInfo: blockInfoNoVersion, showIcon: true },
67+
});
68+
69+
cy.get(".info-icon").trigger("mouseenter", { force: true });
70+
71+
cy.get("[data-testid='styled-tooltip']")
72+
.should("be.visible")
73+
.within(() => {
74+
cy.contains("Version:").should("not.exist");
75+
cy.contains(blockInfoNoVersion.attributes.name).should("be.visible");
76+
});
77+
});
78+
});
79+
80+
describe("without icon mode (showIcon=false - dropdown)", () => {
81+
const blockInfoDirect = {
82+
name: "Sample Block",
83+
description: "This is a sample block description.",
84+
version: "2.0.0",
85+
accepted_file_extensions: [".jpg", ".png", ".gif"],
86+
};
87+
88+
it("renders the tooltip with correct content on hover", () => {
89+
cy.mount(BlockTooltip, {
90+
propsData: { blockInfo: blockInfoDirect, showIcon: false },
91+
});
92+
93+
cy.get("a.dropdown-item").trigger("mouseenter");
94+
95+
cy.get("[data-testid='styled-tooltip']")
96+
.should("be.visible")
97+
.within(() => {
98+
cy.contains(blockInfoDirect.name).should("be.visible");
99+
cy.contains(blockInfoDirect.description).should("be.visible");
100+
cy.contains("Block implementation version: 2.0.0").should("be.visible");
101+
cy.contains("Accepted file extensions:").should("be.visible");
102+
cy.contains(".jpg, .png, .gif").should("be.visible");
103+
});
104+
});
105+
106+
it("hides the tooltip on mouseleave", () => {
107+
cy.mount(BlockTooltip, {
108+
propsData: { blockInfo: blockInfoDirect, showIcon: false },
109+
});
110+
111+
cy.get("a.dropdown-item").trigger("mouseenter");
112+
cy.get("a.dropdown-item").trigger("mouseleave");
113+
114+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
115+
});
116+
117+
it("shows and hides tooltip on focus and blur", () => {
118+
cy.mount(BlockTooltip, {
119+
propsData: { blockInfo: blockInfoDirect, showIcon: false },
120+
});
121+
122+
cy.get("a.dropdown-item").focus();
123+
cy.get("[data-testid='styled-tooltip']").should("be.visible");
124+
125+
cy.get("a.dropdown-item").blur();
126+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
127+
});
128+
129+
it("displays block name in dropdown item", () => {
130+
cy.mount(BlockTooltip, {
131+
propsData: { blockInfo: blockInfoDirect, showIcon: false },
132+
});
133+
134+
cy.get("a.dropdown-item").should("contain.text", blockInfoDirect.name);
135+
});
136+
});
137+
138+
describe("with both data formats", () => {
139+
it("handles blockInfo.attributes format correctly", () => {
140+
const blockInfoWithAttributes = {
141+
attributes: {
142+
name: "Attributes Format",
143+
description: "Using attributes format",
144+
version: "1.0.0",
145+
},
146+
};
147+
148+
cy.mount(BlockTooltip, {
149+
propsData: { blockInfo: blockInfoWithAttributes, showIcon: true },
150+
});
151+
152+
cy.get(".info-icon").trigger("mouseenter", { force: true });
153+
cy.get("[data-testid='styled-tooltip']").should("contain.text", "Attributes Format");
154+
});
155+
156+
it("handles direct blockInfo format correctly", () => {
157+
const blockInfoDirect = {
158+
name: "Direct Format",
159+
description: "Using direct format",
160+
version: "2.0.0",
161+
};
162+
163+
cy.mount(BlockTooltip, {
164+
propsData: { blockInfo: blockInfoDirect, showIcon: false },
165+
});
166+
167+
cy.get("a.dropdown-item").trigger("mouseenter");
168+
cy.get("[data-testid='styled-tooltip']").should("contain.text", "Direct Format");
169+
});
170+
});
171+
172+
describe("accepted file extensions", () => {
173+
it("displays extensions as list when showIcon=true", () => {
174+
const blockInfo = {
175+
attributes: {
176+
name: "Block With Extensions",
177+
description: "Test extensions",
178+
accepted_file_extensions: [".csv", ".tsv"],
179+
},
180+
};
181+
182+
cy.mount(BlockTooltip, {
183+
propsData: { blockInfo, showIcon: true },
184+
});
185+
186+
cy.get(".info-icon").trigger("mouseenter", { force: true });
187+
188+
cy.get("[data-testid='styled-tooltip']")
189+
.should("be.visible")
190+
.within(() => {
191+
cy.get("ul li").should("have.length", 2);
192+
cy.contains(".csv").should("be.visible");
193+
cy.contains(".tsv").should("be.visible");
194+
});
195+
});
196+
197+
it("displays extensions inline when showIcon=false", () => {
198+
const blockInfo = {
199+
name: "Block With Extensions",
200+
description: "Test extensions",
201+
accepted_file_extensions: [".csv", ".tsv"],
202+
};
203+
204+
cy.mount(BlockTooltip, {
205+
propsData: { blockInfo, showIcon: false },
206+
});
207+
208+
cy.get("a.dropdown-item").trigger("mouseenter");
209+
210+
cy.get("[data-testid='styled-tooltip']")
211+
.should("be.visible")
212+
.within(() => {
213+
cy.contains(".csv, .tsv").should("be.visible");
214+
});
215+
});
216+
217+
it("does not show extensions section when none provided", () => {
218+
const blockInfo = {
219+
attributes: {
220+
name: "No Extensions Block",
221+
description: "No extensions",
222+
},
223+
};
224+
225+
cy.mount(BlockTooltip, {
226+
propsData: { blockInfo, showIcon: true },
227+
});
228+
229+
cy.get(".info-icon").trigger("mouseenter", { force: true });
230+
231+
cy.get("[data-testid='styled-tooltip']")
232+
.should("be.visible")
233+
.within(() => {
234+
cy.contains("Accepted file extensions").should("not.exist");
235+
});
236+
});
237+
});
238+
});

‎webapp/cypress/component/CreatorsTest.cy.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ describe("Creators.vue", () => {
3737
});
3838

3939
mockCreators.forEach((creator) => {
40-
cy.contains(creator.display_name).should("not.exist");
40+
cy.get(".creators-container")
41+
.find(":not([data-testid='styled-tooltip'])")
42+
.should("not.contain", creator.display_name);
4143
});
4244
});
4345

‎webapp/cypress/component/NotificationDotTest.cy.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,31 +43,31 @@ describe("NotificationDot", () => {
4343
it(`shows the correct tooltip message`, () => {
4444
if (tooltipText) {
4545
cy.get(".notification-dot").trigger("mouseenter");
46-
cy.get("#tooltip").should("have.attr", "data-show");
47-
cy.get("#tooltip p").contains(tooltipText);
46+
cy.get("[data-testid='styled-tooltip']").should("have.attr", "data-show");
47+
cy.get("[data-testid='styled-tooltip'] p").contains(tooltipText);
4848
} else {
4949
cy.get(".notification-dot").should("not.exist");
50-
cy.get("#tooltip").should("not.have.attr", "data-show");
50+
cy.get("[data-testid='styled-tooltip']").should("not.exist");
5151
}
5252
});
5353

5454
it(`shows and hides tooltip on mouseenter and mouseleave`, () => {
5555
if (tooltipText) {
5656
cy.get(".notification-dot").trigger("mouseenter");
57-
cy.get("#tooltip").should("have.attr", "data-show");
57+
cy.get("[data-testid='styled-tooltip']").should("have.attr", "data-show");
5858

5959
cy.get(".notification-dot").trigger("mouseleave");
60-
cy.get("#tooltip").should("not.have.attr", "data-show");
60+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
6161
}
6262
});
6363

6464
it(`shows and hides tooltip on focus and blur`, () => {
6565
if (tooltipText) {
6666
cy.get(".notification-dot").focus();
67-
cy.get("#tooltip").should("have.attr", "data-show");
67+
cy.get("[data-testid='styled-tooltip']").should("have.attr", "data-show");
6868

6969
cy.get(".notification-dot").blur();
70-
cy.get("#tooltip").should("not.have.attr", "data-show");
70+
cy.get("[data-testid='styled-tooltip']").should("not.have.attr", "data-show");
7171
}
7272
});
7373
});

‎webapp/cypress/component/StyledBlockHelpTest.cy.jsx‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎webapp/cypress/component/StyledBlockInfoTest.cy.jsx‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

0 commit comments

Comments
 (0)