Skip to content

Commit 219eb29

Browse files
PetyaMarkovaBogdanovaPetyaMarkovaBogdanova
authored
chore(ui5-toolbar-select): value and label added (#11972)
* chore(ui5-toolbar-select): value and label added * chore(ui5-toolbar): add select APIs to ToolbarSelectTemplate * chore(ui5-toolbar): add select APIs * chore(ui5-toolbar): add select APIs to ToolbarSelect * chore(ui5-toolbar): add select APIs to ToolbarSelect * chore(ui5-toolbar): add select APIs to ToolbarSelect * chore(ui5-toolbar): add select APIs to ToolbarSelect * chore(ui5-toolbar-select): add missing select APIs * chore(ui5-toolbar-select): add tests for ToolbarSelect APIs * chore(ui5-toolbar-select): add cypress tests for ToolbarSelect component * Delete packages/main/test/pages/Toolbar.html * chore(ui5-toolbar-select): add cypress tests for ToolbarSelect component * Restore deleted Toolbar.html * Update @SInCE version in ToolbarSelect.ts
1 parent 77bd73e commit 219eb29

File tree

5 files changed

+246
-79
lines changed

5 files changed

+246
-79
lines changed

‎packages/main/cypress/specs/Toolbar.cy.tsx‎

Lines changed: 25 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -325,20 +325,20 @@ describe("Toolbar general interaction", () => {
325325
it("Should render ui5-button by toolbar template, when slotting ui5-toolbar-button elements", () => {
326326
cy.mount(
327327
<Toolbar>
328-
<ToolbarButton
329-
icon="decline"
328+
<ToolbarButton
329+
icon="decline"
330330
stableDomRef="tb-button-decline"
331-
overflowPriority="NeverOverflow"
332-
text="Left 2"
331+
overflowPriority="NeverOverflow"
332+
text="Left 2"
333333
/>
334-
<ToolbarButton
335-
icon="employee"
334+
<ToolbarButton
335+
icon="employee"
336336
overflowPriority="NeverOverflow"
337-
text="Left 3"
337+
text="Left 3"
338338
/>
339339
</Toolbar>
340340
);
341-
341+
342342
cy.get("[ui5-toolbar]")
343343
.find("[ui5-toolbar-button]")
344344
.first()
@@ -353,51 +353,51 @@ describe("Toolbar general interaction", () => {
353353
.should("be.visible")
354354
.should("have.length", 2);
355355
});
356-
356+
357357
it("Should call child events only once", () => {
358358
cy.mount(
359359
<>
360360
<Toolbar data-testid="clickCountToolbar">
361-
<ToolbarButton
362-
icon="add"
363-
text="Left 1 (long)"
361+
<ToolbarButton
362+
icon="add"
363+
text="Left 1 (long)"
364364
data-testid="clickCounter"
365365
/>
366-
<ToolbarButton
367-
icon="decline"
368-
text="Left 2"
366+
<ToolbarButton
367+
icon="decline"
368+
text="Left 2"
369369
data-testid="clearCounter"
370370
/>
371371
</Toolbar>
372372
<input data-testid="input" defaultValue="0" />
373373
</>
374374
);
375-
375+
376376
// Create stubs for event tracking
377377
cy.get("[data-testid='clickCountToolbar']")
378378
.as("toolbar")
379379
.then($toolbar => {
380380
$toolbar.get(0).addEventListener("click", cy.stub().as("toolbarClickStub"));
381381
});
382-
382+
383383
cy.get("[data-testid='clickCounter']")
384384
.as("clickCounter")
385385
.then($button => {
386386
$button.get(0).addEventListener("click", cy.stub().as("counterClickStub"));
387387
});
388-
388+
389389
cy.get("[data-testid='clearCounter']")
390390
.as("clearCounter")
391391
.then($button => {
392392
$button.get(0).addEventListener("click", cy.stub().as("clearClickStub"));
393393
});
394-
394+
395395
// Set up input manipulation logic
396396
cy.get("@toolbar").then($toolbar => {
397397
$toolbar.get(0).addEventListener("click", (e) => {
398398
const input = document.querySelector("[data-testid='input']") as HTMLInputElement;
399399
const target = e.target as HTMLElement;
400-
400+
401401
if (target.dataset.testid === "clearCounter") {
402402
input.value = "0";
403403
} else if (target.dataset.testid === "clickCounter") {
@@ -406,16 +406,16 @@ describe("Toolbar general interaction", () => {
406406
}
407407
});
408408
});
409-
409+
410410
cy.get("[data-testid='input']").invoke("val", "0");
411-
411+
412412
cy.get("@clickCounter").realClick();
413-
413+
414414
cy.get("[data-testid='input']").should("have.prop", "value", "1");
415-
415+
416416
cy.get("@toolbarClickStub").should("have.been.calledOnce");
417417
cy.get("@counterClickStub").should("have.been.calledOnce");
418-
418+
419419
cy.get("[data-testid='input']").invoke("val", "0");
420420
});
421421
});
@@ -495,54 +495,6 @@ describe("Toolbar in Dialog", () => {
495495

496496
//ToolbarSelect
497497
describe("Toolbar Select", () => {
498-
it("Should render the select with the correct attributes inside the popover", () => {
499-
cy.mount(
500-
<div style="width: 250px;">
501-
<Toolbar id="otb_e">
502-
<ToolbarSelect value-state="Critical" accessible-name="Add" accessible-name-ref="title" id="toolbar-select">
503-
<ToolbarSelectOption>1</ToolbarSelectOption>
504-
<ToolbarSelectOption selected>2</ToolbarSelectOption>
505-
<ToolbarSelectOption>3</ToolbarSelectOption>
506-
</ToolbarSelect>
507-
508-
509-
<ToolbarSelect disabled class="custom-class">
510-
<ToolbarSelectOption>1</ToolbarSelectOption>
511-
<ToolbarSelectOption selected>2</ToolbarSelectOption>
512-
<ToolbarSelectOption>3</ToolbarSelectOption>
513-
</ToolbarSelect>
514-
</Toolbar>
515-
</div>
516-
);
517-
518-
const otb = cy.get("#otb_e").as("otb");
519-
520-
cy.get("@otb")
521-
.shadow()
522-
.find(".ui5-tb-overflow-btn")
523-
.click();
524-
const overflowButton = otb.shadow().find(".ui5-tb-overflow-btn");
525-
526-
cy.get("@otb")
527-
.shadow()
528-
.find(".ui5-overflow-popover").as("popover")
529-
.should("have.attr", "open", "open");
530-
overflowButton.click();
531-
cy.wait(500);
532-
533-
cy.get("@otb")
534-
.find("#toolbar-select")
535-
.should("have.attr", "value-state", "Critical")
536-
537-
.should("have.attr", "accessible-name", "Add")
538-
539-
.should("have.attr", "accessible-name-ref", "title")
540-
541-
cy.get("@otb")
542-
.find(".custom-class")
543-
.should("have.attr", "disabled", "disabled");
544-
545-
});
546498

547499
//ToolbarButton
548500
it.skip("Should render the button with the correct text inside the popover", async () => {

‎packages/main/cypress/specs/ToolbarSelect.cy.tsx‎

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,55 @@ describe("Toolbar general interaction", () => {
2121
.should("have.attr", "value-state", "Critical");
2222
});
2323

24+
it("Should render the select with the correct attributes inside the popover", () => {
25+
cy.mount(
26+
<div style="width: 250px;">
27+
<Toolbar id="otb_e">
28+
<ToolbarSelect value-state="Critical" accessible-name="Add" accessible-name-ref="title" id="toolbar-select">
29+
<ToolbarSelectOption>1</ToolbarSelectOption>
30+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
31+
<ToolbarSelectOption>3</ToolbarSelectOption>
32+
</ToolbarSelect>
33+
34+
35+
<ToolbarSelect disabled class="custom-class">
36+
<ToolbarSelectOption>1</ToolbarSelectOption>
37+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
38+
<ToolbarSelectOption>3</ToolbarSelectOption>
39+
</ToolbarSelect>
40+
</Toolbar>
41+
</div>
42+
);
43+
44+
const otb = cy.get("#otb_e").as("otb");
45+
46+
cy.get("@otb")
47+
.shadow()
48+
.find(".ui5-tb-overflow-btn")
49+
.click();
50+
const overflowButton = otb.shadow().find(".ui5-tb-overflow-btn");
51+
52+
cy.get("@otb")
53+
.shadow()
54+
.find(".ui5-overflow-popover").as("popover")
55+
.should("have.attr", "open", "open");
56+
overflowButton.click();
57+
cy.wait(500);
58+
59+
cy.get("@otb")
60+
.find("#toolbar-select")
61+
.should("have.attr", "value-state", "Critical")
62+
63+
.should("have.attr", "accessible-name", "Add")
64+
65+
.should("have.attr", "accessible-name-ref", "title")
66+
67+
cy.get("@otb")
68+
.find(".custom-class")
69+
.should("have.attr", "disabled", "disabled");
70+
71+
});
72+
2473
it("Should render the select with disabled property correctly", () => {
2574
cy.mount(
2675
<Toolbar>
@@ -42,7 +91,7 @@ describe("Toolbar general interaction", () => {
4291
it("Should render accessible name correctly", () => {
4392
cy.mount(
4493
<Toolbar>
45-
<ToolbarSelect
94+
<ToolbarSelect
4695
accessibleName="Add"
4796
accessibleNameRef="title"
4897
>
@@ -110,4 +159,104 @@ describe("Toolbar general interaction", () => {
110159

111160
cy.get("@changeStub").should("have.been.called");
112161
});
162+
163+
describe("value and label properties", () => {
164+
it("Should verify the initial value of the ToolbarSelect", () => {
165+
// Mount the Toolbar with a ToolbarSelect component
166+
cy.mount(
167+
<Toolbar>
168+
<ToolbarSelect value="Option 2">
169+
<span slot="label">Select an Option:</span>
170+
<ToolbarSelectOption>Option 1</ToolbarSelectOption>
171+
<ToolbarSelectOption>Option 2</ToolbarSelectOption>
172+
<ToolbarSelectOption>Option 3</ToolbarSelectOption>
173+
</ToolbarSelect>
174+
</Toolbar>
175+
);
176+
177+
// Verify the initial value of the ToolbarSelect
178+
cy.get("ui5-select", { includeShadowDom: true })
179+
.should("have.attr", "value", "Option 2");
180+
});
181+
182+
it("Should verify the label slot content", () => {
183+
// Mount the Toolbar with a ToolbarSelect component
184+
cy.mount(
185+
<Toolbar>
186+
<ToolbarSelect value="Option 2">
187+
<span slot="label">Select an Option:</span>
188+
<ToolbarSelectOption>Option 1</ToolbarSelectOption>
189+
<ToolbarSelectOption>Option 2</ToolbarSelectOption>
190+
<ToolbarSelectOption>Option 3</ToolbarSelectOption>
191+
</ToolbarSelect>
192+
</Toolbar>
193+
);
194+
195+
// Verify the label slot content
196+
cy.get("ui5-toolbar-select")
197+
.find("span[slot='label']")
198+
.should("contain.text", "Select an Option:");
199+
});
200+
201+
it("Should change the value and update the selection", () => {
202+
// Mount the Toolbar with a ToolbarSelect component
203+
cy.mount(
204+
<Toolbar>
205+
<ToolbarSelect value="Option 2">
206+
<ToolbarSelectOption>Option 1</ToolbarSelectOption>
207+
<ToolbarSelectOption>Option 2</ToolbarSelectOption>
208+
<ToolbarSelectOption>Option 3</ToolbarSelectOption>
209+
</ToolbarSelect>
210+
</Toolbar>
211+
);
212+
213+
// Change the value of the ToolbarSelect
214+
cy.get("ui5-select", { includeShadowDom: true })
215+
.realClick()
216+
.find("ui5-option")
217+
.contains("Option 3")
218+
.realClick();
219+
220+
// Verify the updated value of the ToolbarSelect
221+
cy.get("ui5-select", { includeShadowDom: true })
222+
.should("have.attr", "value", "Option 3");
223+
});
224+
225+
it("Should handle a value with no corresponding option", () => {
226+
// Mount the Toolbar with a ToolbarSelect component
227+
cy.mount(
228+
<Toolbar>
229+
<ToolbarSelect value="NonExistentOption">
230+
<ToolbarSelectOption>Option 1</ToolbarSelectOption>
231+
<ToolbarSelectOption>Option 2</ToolbarSelectOption>
232+
<ToolbarSelectOption>Option 3</ToolbarSelectOption>
233+
</ToolbarSelect>
234+
</Toolbar>
235+
);
236+
237+
// Verify that no option is selected when the value does not match any option
238+
cy.get("ui5-select", { includeShadowDom: true })
239+
.should("have.attr", "value", "NonExistentOption");
240+
});
241+
242+
it("Should update the value programmatically and reflect the selection", () => {
243+
// Mount the Toolbar with a ToolbarSelect component
244+
cy.mount(
245+
<Toolbar>
246+
<ToolbarSelect value="Option 1">
247+
<ToolbarSelectOption>Option 1</ToolbarSelectOption>
248+
<ToolbarSelectOption>Option 2</ToolbarSelectOption>
249+
<ToolbarSelectOption>Option 3</ToolbarSelectOption>
250+
</ToolbarSelect>
251+
</Toolbar>
252+
);
253+
254+
// Update the value programmatically
255+
cy.get("ui5-toolbar-select").invoke("attr", "value", "Option 3");
256+
257+
// Verify the updated value and selection
258+
cy.get("ui5-select", { includeShadowDom: true })
259+
.should("have.attr", "value", "Option 3");
260+
});
261+
});
113262
});

0 commit comments

Comments
 (0)