streamlit

1
/**
2
 * Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License");
5
 * you may not use this file except in compliance with the License.
6
 * You may obtain a copy of the License at
7
 *
8
 *     http://www.apache.org/licenses/LICENSE-2.0
9
 *
10
 * Unless required by applicable law or agreed to in writing, software
11
 * distributed under the License is distributed on an "AS IS" BASIS,
12
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
 * See the License for the specific language governing permissions and
14
 * limitations under the License.
15
 */
16

17
const defaultTooltip = `This is a really long tooltip.\nLorem ipsum dolor sit am\
18
et, consectetur adipiscing elit. Ut ut turpis vitae\njusto ornare venenatis a \
19
vitae leo. Donec mollis ornare ante, eu ultricies\ntellus ornare eu. Donec ero\
20
s risus, ultrices ut eleifend vel, auctor eu turpis.\nIn consectetur erat vel \
21
ante accumsan, a egestas urna aliquet. Nullam eget\nsapien eget diam euismod e\
22
leifend. Nulla purus enim, finibus ut velit eu,\nmalesuada dictum nulla. In no\
23
n arcu et risus maximus fermentum eget nec ante.`;
24

25
const tooltipCodeBlock1 = `This\nis\na\ncode\nblock!`;
26
const tooltipCodeBlock2 = `for i in range(10):\n    x = i * 10\n    print(x)`;
27

28
const tooltipTextBlock1 = `This is a regular text block!\nTest1\nTest2`;
29
const tooltipTextBlock2 = `thisisatooltipwithnoindents. It has some spaces but\
30
 no idents.`;
31

32
describe("tooltips on widgets", () => {
33
  before(() => {
34
    cy.loadApp("http://localhost:3000/");
35
  });
36

37
  it("displays tooltips on textinput", () => {
38
    cy.get(`.stTextInput .stTooltipIcon`).should("have.length", 1);
39
  });
40

41
  it("displays tooltips on numberinput", () => {
42
    cy.get(`.stNumberInput .stTooltipIcon`).should("have.length", 1);
43
  });
44

45
  it("displays tooltips on checkbox", () => {
46
    cy.get(`.stCheckbox .stTooltipIcon`).should("have.length", 1);
47
  });
48

49
  it("displays tooltips on radio", () => {
50
    cy.get(`.stRadio .stTooltipIcon`).should("have.length", 1);
51
  });
52

53
  it("displays tooltips on button", () => {
54
    // button mounts two .stTooltipIcon elements, one for mobile, one regular
55
    cy.get(`.stButton .stTooltipIcon`).should("have.length", 2);
56
  });
57

58
  it("displays tooltips on selectbox", () => {
59
    cy.get(`.stSelectbox .stTooltipIcon`).should("have.length", 1);
60
  });
61

62
  it("displays tooltips on timeinput", () => {
63
    cy.get(`.stTimeInput .stTooltipIcon`).should("have.length", 1);
64
  });
65

66
  it("displays tooltips on dateinput", () => {
67
    cy.get(`.stDateInput .stTooltipIcon`).should("have.length", 1);
68
  });
69

70
  it("displays tooltips on colorpicker", () => {
71
    cy.get(`[data-testid="stColorPicker"] .stTooltipIcon`).should(
72
      "have.length",
73
      1
74
    );
75
  });
76

77
  it("displays tooltips on fileuploader", () => {
78
    cy.get(`[data-testid="stFileUploader"] .stTooltipIcon`).should(
79
      "have.length",
80
      1
81
    );
82
  });
83

84
  it("displays tooltips on multiselect", () => {
85
    cy.get(`.stMultiSelect .stTooltipIcon`).should("have.length", 1);
86
  });
87

88
  it("displays tooltips on textarea", () => {
89
    cy.get(`.stTextArea .stTooltipIcon`).should("have.length", 1);
90
  });
91

92
  it("displays tooltips on sliders", () => {
93
    // two sliders, st.slider and st.select_slider
94
    cy.get(`.stSlider .stTooltipIcon`).should("have.length", 2);
95
  });
96

97
  it("displays tooltips on metric", () => {
98
    cy.get(`[data-testid=stMetricLabel] .stTooltipIcon`).should(
99
      "have.length",
100
      1
101
    );
102
  });
103
});
104

105
describe("tooltip text with dedent on widgets", () => {
106
  before(() => {
107
    cy.loadApp("http://localhost:3000/");
108

109
    // This test seems to be especially sensitive to the header getting in the
110
    // way of being able to mouseover tooltip icons, so we just get rid of it
111
    // entirely to avoid having to deal with the problem.
112
    cy.get(".stApp > header").invoke("css", "display", "none");
113
  });
114

115
  it("Display text properly on tooltips on text input", () => {
116
    cy.get(`.stTextInput .stTooltipIcon`).invoke("show").click();
117
    cy.get("[data-testid=stMarkdownContainer]").should(
118
      "contain",
119
      defaultTooltip
120
    );
121
  });
122

123
  it("Display text properly on tooltips on numberinput", () => {
124
    cy.get(`.stNumberInput .stTooltipIcon`).invoke("show").click();
125
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
126
      "contain",
127
      tooltipCodeBlock1
128
    );
129
  });
130

131
  it("Display text properly on tooltips on checkbox", () => {
132
    cy.get(`.stCheckbox .stTooltipIcon`).invoke("show").click();
133
    cy.get("[data-testid=stMarkdownContainer]").should(
134
      "contain",
135
      tooltipTextBlock1
136
    );
137
  });
138

139
  it("Display text properly on tooltips on radio", () => {
140
    cy.get(`.stRadio .stTooltipIcon`).invoke("show").click();
141
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
142
      "contain",
143
      tooltipCodeBlock2
144
    );
145
  });
146

147
  it("Display text properly on tooltips on Selectbox", () => {
148
    cy.get(`.stSelectbox .stTooltipIcon`).invoke("show").click();
149
    cy.get("[data-testid=stMarkdownContainer]").should(
150
      "contain",
151
      defaultTooltip
152
    );
153
  });
154

155
  it("Display text properly on tooltips on timeinput", () => {
156
    cy.get(`.stTimeInput .stTooltipIcon`).invoke("show").click();
157
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
158
      "contain",
159
      tooltipCodeBlock1
160
    );
161
  });
162

163
  it("Display text properly on tooltips on dateinput", () => {
164
    cy.get(`.stDateInput .stTooltipIcon`).invoke("show").click();
165
    cy.get("[data-testid=stMarkdownContainer]").should(
166
      "contain",
167
      tooltipTextBlock1
168
    );
169
  });
170

171
  //This one needs to be the first slider
172
  it("Display text properly on tooltips on sliders", () => {
173
    cy.get(`.stSlider .stTooltipIcon`).eq(0).invoke("show").click();
174
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
175
      "contain",
176
      tooltipCodeBlock2
177
    );
178
  });
179

180
  it("Display text properly on tooltips on colorpicker", () => {
181
    cy.get(`[data-testid="stColorPicker"]  .stTooltipIcon`)
182
      .invoke("show")
183
      .click();
184
    cy.get("[data-testid=stMarkdownContainer]").should(
185
      "contain",
186
      tooltipTextBlock2
187
    );
188
  });
189

190
  it("Display text properly on tooltips on fileuploader", () => {
191
    cy.get(`[data-testid="stFileUploader"] .stTooltipIcon`)
192
      .invoke("show")
193
      .click();
194
    cy.get("[data-testid=stMarkdownContainer]").should(
195
      "contain",
196
      defaultTooltip
197
    );
198
  });
199

200
  it("Display text properly on tooltips on multiselect", () => {
201
    cy.get(`.stMultiSelect .stTooltipIcon`)
202
      .invoke("show")
203
      .click({ force: true })
204
      .trigger("mouseover", { force: true });
205
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
206
      "contain",
207
      tooltipCodeBlock1
208
    );
209
  });
210

211
  it("Display text properly on tooltips on textarea", () => {
212
    cy.get(`.stTextArea .stTooltipIcon`)
213
      .invoke("show")
214
      .click({ force: true })
215
      .trigger("mouseover", { force: true });
216
    cy.get("[data-testid=stMarkdownContainer]").should(
217
      "contain",
218
      tooltipTextBlock1
219
    );
220
  });
221

222
  it("Display text properly on tooltips on sliders", () => {
223
    cy.getIndexed(".stSlider .stTooltipIcon", 1)
224
      .invoke("show")
225
      .trigger("mouseenter", { force: true })
226
      .trigger("mouseover", { force: true });
227
    cy.get("[data-testid=stMarkdownContainer] .stCodeBlock").should(
228
      "contain",
229
      tooltipCodeBlock2
230
    );
231
  });
232

233
  it("Display text properly on tooltips on button", () => {
234
    cy.get(".stButton [data-testid=stTooltipHoverTarget]").trigger(
235
      "mouseover",
236
      { force: true }
237
    );
238
    cy.get("[data-testid=stMarkdownContainer]").should(
239
      "contain",
240
      tooltipTextBlock2
241
    );
242
  });
243

244
  it("Display text properly on tooltips on metric", () => {
245
    cy.get(
246
      "[data-testid=stMetricLabel] [data-testid=stTooltipHoverTarget]"
247
    ).trigger("mouseover", { force: true });
248
    cy.get("[data-testid=stMarkdownContainer]").should(
249
      "contain",
250
      tooltipTextBlock2
251
    );
252
  });
253
});
254