Skip to content

Commit eda7bdf

Browse files
nikoletavnvnikoletavnv
authored
chore(ui5-multi-combobox, ui5-combobox): fix unstable tests
Fixes #11979
1 parent 4fe4f5a commit eda7bdf

File tree

3 files changed

+44
-29
lines changed

3 files changed

+44
-29
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ComboBox from "../../src/ComboBox.js";
22
import ComboBoxItem from "../../src/ComboBoxItem.js";
33
import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
4+
import ResponsivePopover from "../../src/ResponsivePopover.js";
45
import Link from "../../src/Link.js";
56
import Input from "../../src/Input.js";
67
import Button from "../../src/Button.js";
@@ -30,6 +31,11 @@ describe("General Interaction", () => {
3031
cy.get("@dropdownIcon")
3132
.realClick();
3233

34+
cy.get("[ui5-combobox]")
35+
.shadow()
36+
.find<ResponsivePopover>("ui5-responsive-popover")
37+
.ui5ResponsivePopoverOpened();
38+
3339
cy.get("[ui5-combobox]")
3440
.shadow()
3541
.find("[ui5-responsive-popover]")
@@ -56,6 +62,11 @@ describe("General Interaction", () => {
5662
cy.get("@dropdownIcon")
5763
.realClick();
5864

65+
cy.get("[ui5-combobox]")
66+
.shadow()
67+
.find<ResponsivePopover>("ui5-responsive-popover")
68+
.ui5ResponsivePopoverOpened();
69+
5970
cy.get("[ui5-cb-item]")
6071
.eq(4)
6172
.should("be.visible");

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe("General", () => {
7070
cy.get("[ui5-multi-combobox]")
7171
.should("have.attr", "focused");
7272
});
73-
73+
7474
it("Open all items popover on nmore click", () => {
7575
cy.mount(
7676
<MultiComboBox style="width: 100px">
@@ -169,7 +169,7 @@ describe("General", () => {
169169
.shadow()
170170
.find("input")
171171
.realClick();
172-
172+
173173
cy.get("@mcb")
174174
.should("be.focused");
175175

@@ -417,10 +417,10 @@ describe("General", () => {
417417
.shadow()
418418
.find("input")
419419
.realClick();
420-
420+
421421
cy.get("@mcb")
422422
.should("be.focused");
423-
423+
424424
cy.realType("I");
425425

426426
cy.get("@mcb")
@@ -594,7 +594,7 @@ describe("General", () => {
594594
cy.get("@popover")
595595
.find(".ui5-mcb-select-all-checkbox")
596596
.realClick();
597-
597+
598598
cy.get("@selectionChangeEvent")
599599
.should("have.been.calledOnce");
600600

@@ -657,7 +657,7 @@ describe("General", () => {
657657

658658
cy.get("@moreButton")
659659
.realClick();
660-
660+
661661
cy.get<ResponsivePopover>("@popover")
662662
.ui5ResponsivePopoverOpened();
663663

@@ -708,7 +708,7 @@ describe("General", () => {
708708
cy.get("[ui5-multi-combobox]")
709709
.as("mcb")
710710
.realClick();
711-
711+
712712
cy.get("@mcb")
713713
.should("be.focused");
714714

@@ -866,9 +866,6 @@ describe("MultiComboBox Truncated Tokens", () => {
866866
cy.get("@token")
867867
.realClick();
868868

869-
cy.get("@token")
870-
.should("be.focused");
871-
872869
cy.get("[ui5-multi-combobox]")
873870
.shadow()
874871
.find("[ui5-tokenizer]")
@@ -1901,7 +1898,7 @@ describe("Event firing", () => {
19011898
it("Should prevent selection-change on CTRL+A", () => {
19021899
const onSelectionChange = (e:Event) => {
19031900
e.preventDefault();
1904-
}
1901+
}
19051902

19061903
cy.mount(
19071904
<MultiComboBox onSelectionChange={onSelectionChange}>
@@ -1974,17 +1971,16 @@ describe("Event firing", () => {
19741971
cy.get("[ui5-multi-combobox]")
19751972
.shadow()
19761973
.find("input")
1977-
.should("have.value", "1");
1974+
.as("input");
1975+
1976+
cy.get("@input").should("have.value", "1");
19781977

19791978
cy.get("[ui5-multi-combobox]")
19801979
.shadow()
19811980
.find(".ui5-input-clear-icon-wrapper")
19821981
.realClick();
19831982

1984-
cy.get("[ui5-multi-combobox]")
1985-
.shadow()
1986-
.find("input")
1987-
.should("have.value", "");
1983+
cy.get("@input").should("have.value", "");
19881984

19891985
cy.get("@inputEvent")
19901986
.should("have.been.calledTwice");
@@ -2325,7 +2321,7 @@ describe("Accessibility", () => {
23252321
.find("[ui5-token]")
23262322
.last()
23272323
.should("be.focused");
2328-
2324+
23292325
cy.get("[ui5-multi-combobox]")
23302326
.realPress("Backspace");
23312327

@@ -2355,7 +2351,7 @@ describe("Accessibility", () => {
23552351
.find("[ui5-token]")
23562352
.last()
23572353
.should("be.focused");
2358-
2354+
23592355
cy.get("[ui5-multi-combobox]")
23602356
.realPress("Backspace");
23612357

@@ -2399,7 +2395,7 @@ describe("Accessibility", () => {
23992395
.should("have.attr", "aria-label", label);
24002396
});
24012397

2402-
it("Should apply aria-controls and aria-haspopup", async () => {
2398+
it("Should apply aria-controls and aria-haspopup", () => {
24032399
cy.mount(<MultiComboBox></MultiComboBox>);
24042400

24052401
cy.get("[ui5-multi-combobox]")
@@ -2418,7 +2414,7 @@ describe("Accessibility", () => {
24182414
.should("have.attr", "aria-haspopup", "dialog");
24192415
});
24202416

2421-
it.skip("Value state type should be added to the screen readers default value states announcement", async () => {
2417+
it("Value state type should be added to the screen readers default value states announcement", () => {
24222418
cy.mount(
24232419
<>
24242420
<MultiComboBox id="positive-mcb" valueState="Positive"></MultiComboBox>
@@ -2435,7 +2431,9 @@ describe("Accessibility", () => {
24352431
cy.get("#warning-mcb")
24362432
.shadow()
24372433
.find("#ui5-multi-combobox-valueStateDesc")
2438-
.should("have.text", VALUE_STATE_TYPE_WARNING.defaultText);
2434+
.should("have.text", `${VALUE_STATE_TYPE_WARNING.defaultText} ${VALUE_STATE_WARNING.defaultText}`);
2435+
2436+
cy.get("#warning-mcb").realClick();
24392437

24402438
cy.get("#warning-mcb")
24412439
.shadow()
@@ -2445,7 +2443,9 @@ describe("Accessibility", () => {
24452443
cy.get("#error-mcb")
24462444
.shadow()
24472445
.find("#ui5-multi-combobox-valueStateDesc")
2448-
.should("have.text", VALUE_STATE_TYPE_ERROR.defaultText);
2446+
.should("have.text", `${VALUE_STATE_TYPE_ERROR.defaultText} ${VALUE_STATE_ERROR.defaultText}`);
2447+
2448+
cy.get("#error-mcb").realClick();
24492449

24502450
cy.get("#error-mcb")
24512451
.shadow()
@@ -2483,7 +2483,7 @@ describe("Accessibility", () => {
24832483
.shadow()
24842484
.find("input[type='checkbox']")
24852485
.should("not.exist");
2486-
2486+
24872487
cy.get("@checkbox")
24882488
.shadow()
24892489
.find(".ui5-checkbox-root")
@@ -2826,7 +2826,7 @@ describe("Keyboard Handling", () => {
28262826
.find("[ui5-token]")
28272827
.last()
28282828
.should("be.focused");
2829-
2829+
28302830
cy.get("[ui5-multi-combobox]")
28312831
.realPress("Backspace");
28322832

@@ -2864,7 +2864,7 @@ describe("Keyboard Handling", () => {
28642864

28652865
cy.get("[ui5-multi-combobox]")
28662866
.realPress("Escape");
2867-
2867+
28682868
cy.get("[ui5-multi-combobox]")
28692869
.shadow()
28702870
.find<ResponsivePopover>("ui5-responsive-popover")
@@ -3171,7 +3171,7 @@ describe("Keyboard Handling", () => {
31713171
.find("[ui5-tokenizer]")
31723172
.find("[ui5-token]")
31733173
.should("not.exist");
3174-
3174+
31753175
cy.get("[ui5-multi-combobox]")
31763176
.should("be.focused");
31773177
});
@@ -3803,7 +3803,7 @@ describe("Keyboard Handling", () => {
38033803
.shadow()
38043804
.find("input")
38053805
.realClick();
3806-
3806+
38073807
cy.get("[ui5-multi-combobox]")
38083808
.should("be.focused");
38093809

‎packages/main/src/MultiComboBox.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1945,11 +1945,15 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
19451945
return `${text} ${this.valueStateDefaultText || ""}`;
19461946
}
19471947

1948+
let valueStateInnerText = this.valueStateMessage.map(el => el.textContent).join(" ");
1949+
// append space before the value state message text if it is not empty
1950+
valueStateInnerText = valueStateInnerText.trim().length ? ` ${valueStateInnerText}` : "";
1951+
19481952
if (this.getValueStateLinksShortcutsTextAcc) {
1949-
return `${text}`.concat(" ", this.getValueStateLinksShortcutsTextAcc, " ", this.valueStateMessage.map(el => el.textContent).join(" "));
1953+
return `${text} ${this.getValueStateLinksShortcutsTextAcc}${valueStateInnerText}`;
19501954
}
19511955

1952-
return `${text}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
1956+
return `${text}${valueStateInnerText}`;
19531957
}
19541958

19551959
get valueStateDefaultText(): string {

0 commit comments

Comments
 (0)