Skip to content

Commit bc4d92d

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
authored
Merge branch 'main' into user-menu-item
2 parents b7a71f3 + 5694559 commit bc4d92d

5 files changed

Lines changed: 326 additions & 19 deletions

File tree

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

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -970,11 +970,52 @@ describe("Validation inside a form", () => {
970970
});
971971
});
972972

973+
describe("DateRangePicker rejects relative dates", () => {
974+
const relativeKeywords = ["today", "tomorrow", "yesterday"];
975+
976+
relativeKeywords.forEach(keyword => {
977+
it(`typing '${keyword}' sets error state`, () => {
978+
cy.mount(<DateRangePicker></DateRangePicker>);
979+
980+
cy.get("[ui5-daterange-picker]")
981+
.as("dateRangePicker")
982+
.shadow()
983+
.find("[ui5-datetime-input]")
984+
.realClick()
985+
.should("be.focused");
986+
987+
cy.realType(keyword);
988+
cy.realPress("Enter");
989+
990+
cy.get("@dateRangePicker")
991+
.should("have.value", keyword)
992+
.should("have.attr", "value-state", "Negative");
993+
});
994+
});
995+
996+
it("valid concrete date range does not set error state", () => {
997+
cy.mount(<DateRangePicker displayFormat="dd/MM/yyyy"></DateRangePicker>);
998+
999+
cy.get("[ui5-daterange-picker]")
1000+
.as("dateRangePicker")
1001+
.shadow()
1002+
.find("[ui5-datetime-input]")
1003+
.realClick()
1004+
.should("be.focused");
1005+
1006+
cy.realType("09/09/2020 - 10/10/2020");
1007+
cy.realPress("Enter");
1008+
1009+
cy.get("@dateRangePicker")
1010+
.should("have.attr", "value-state", "None");
1011+
});
1012+
});
1013+
9731014
describe("DateRangePicker - Two Calendars Feature", () => {
9741015
describe("Basic Two Calendars Display", () => {
9751016
it("should display two calendars when showTwoMonths is true", () => {
9761017
cy.mount(
977-
<DateRangePicker showTwoMonths={true} value="Jan 1, 2024 - Jan 31, 2024" />
1018+
<DateRangePicker showTwoMonths={true} value="2024-01-01 - 2024-01-31" />
9781019
);
9791020

9801021
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -993,7 +1034,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
9931034

9941035
it("should display one calendar when showTwoMonths is false", () => {
9951036
cy.mount(
996-
<DateRangePicker showTwoMonths={false} value="Jan 1, 2024 - Jan 31, 2024" />
1037+
<DateRangePicker showTwoMonths={false} value="2024-01-01 - 2024-01-31" />
9971038
);
9981039

9991040
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1015,7 +1056,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
10151056

10161057
it("should show consecutive months in two calendars mode", () => {
10171058
cy.mount(
1018-
<DateRangePicker showTwoMonths={true} value="Mar 15, 2024 - Mar 20, 2024" />
1059+
<DateRangePicker showTwoMonths={true} value="2024-03-15 - 2024-03-20" />
10191060
);
10201061

10211062
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1040,7 +1081,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
10401081

10411082
it("should dynamically toggle showTwoMonths after initial render", () => {
10421083
cy.mount(
1043-
<DateRangePicker value="Jan 15, 2024 - Jan 20, 2024" />
1084+
<DateRangePicker value="2024-01-15 - 2024-01-20" />
10441085
);
10451086

10461087
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1143,7 +1184,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
11431184

11441185
it("should highlight selection across both calendars", () => {
11451186
cy.mount(
1146-
<DateRangePicker showTwoMonths={true} value="Jan 20, 2024 - Feb 10, 2024" />
1187+
<DateRangePicker showTwoMonths={true} value="2024-01-20 - 2024-02-10" />
11471188
);
11481189

11491190
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1161,7 +1202,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
11611202

11621203
it("should update value when selecting new range", () => {
11631204
cy.mount(
1164-
<DateRangePicker showTwoMonths={true} value="Jan 1, 2024 - Jan 5, 2024" />
1205+
<DateRangePicker showTwoMonths={true} value="2024-01-01 - 2024-01-05" />
11651206
);
11661207

11671208
const changeSpy = cy.spy().as("changeSpy");
@@ -1186,8 +1227,8 @@ describe("DateRangePicker - Two Calendars Feature", () => {
11861227

11871228
it("should respect min/max date constraints with two calendars", () => {
11881229
cy.mount(
1189-
<DateRangePicker
1190-
showTwoMonths={true}
1230+
<DateRangePicker
1231+
showTwoMonths={true}
11911232
formatPattern="dd/MM/yyyy"
11921233
minDate="10/01/2024"
11931234
maxDate="28/02/2024"
@@ -1224,7 +1265,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
12241265
describe("Navigation in Two Calendars Mode", () => {
12251266
it("should navigate both calendars forward", () => {
12261267
cy.mount(
1227-
<DateRangePicker showTwoMonths={true} value="Jan 15, 2024 - Jan 20, 2024" />
1268+
<DateRangePicker showTwoMonths={true} value="2024-01-15 - 2024-01-20" />
12281269
);
12291270

12301271
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1245,7 +1286,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
12451286

12461287
it("should navigate both calendars backward", () => {
12471288
cy.mount(
1248-
<DateRangePicker showTwoMonths={true} value="Mar 15, 2024 - Mar 20, 2024" />
1289+
<DateRangePicker showTwoMonths={true} value="2024-03-15 - 2024-03-20" />
12491290
);
12501291

12511292
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1268,7 +1309,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
12681309
describe("Picker Overlays", () => {
12691310
it("should show month picker overlay when clicking month button", () => {
12701311
cy.mount(
1271-
<DateRangePicker showTwoMonths={true} value="Jan 15, 2024 - Jan 20, 2024" />
1312+
<DateRangePicker showTwoMonths={true} value="2024-01-15 - 2024-01-20" />
12721313
);
12731314

12741315
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1297,7 +1338,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
12971338

12981339
it("should show year picker overlay when clicking year button", () => {
12991340
cy.mount(
1300-
<DateRangePicker showTwoMonths={true} value="Jan 15, 2024 - Jan 20, 2024" />
1341+
<DateRangePicker showTwoMonths={true} value="2024-01-15 - 2024-01-20" />
13011342
);
13021343

13031344
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1319,7 +1360,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
13191360

13201361
it("should return to day pickers after selecting from month picker", () => {
13211362
cy.mount(
1322-
<DateRangePicker showTwoMonths={true} value="Jan 15, 2024 - Jan 20, 2024" />
1363+
<DateRangePicker showTwoMonths={true} value="2024-01-15 - 2024-01-20" />
13231364
);
13241365

13251366
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1356,7 +1397,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
13561397
describe("Keyboard Navigation", () => {
13571398
it("should allow keyboard navigation through header buttons", () => {
13581399
cy.mount(
1359-
<DateRangePicker showTwoMonths={true} value="Jan 15, 2024 - Jan 20, 2024" />
1400+
<DateRangePicker showTwoMonths={true} value="2024-01-15 - 2024-01-20" />
13601401
);
13611402

13621403
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1413,7 +1454,7 @@ describe("DateRangePicker - Two Calendars Feature", () => {
14131454
describe("Edge Cases", () => {
14141455
it("should handle year boundary correctly", () => {
14151456
cy.mount(
1416-
<DateRangePicker showTwoMonths={true} value="Dec 15, 2025 - Dec 20, 2025" />
1457+
<DateRangePicker showTwoMonths={true} value="2025-12-15 - 2025-12-20" />
14171458
);
14181459

14191460
cy.get<DateRangePicker>("[ui5-daterange-picker]")
@@ -1447,5 +1488,3 @@ describe("DateRangePicker - Two Calendars Feature", () => {
14471488
});
14481489
});
14491490
});
1450-
1451-

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

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -965,3 +965,192 @@ describe("Validation inside a form", () => {
965965
.should("have.been.calledOnce");
966966
});
967967
});
968+
969+
describe("TextArea Composition", () => {
970+
it("should handle Korean composition correctly", () => {
971+
cy.mount(
972+
<TextArea
973+
id="textarea-composition-korean"
974+
placeholder="Type in Korean ..."
975+
/>
976+
);
977+
978+
cy.get("[ui5-textarea]")
979+
.as("textarea")
980+
.realClick();
981+
982+
cy.get("@textarea")
983+
.shadow()
984+
.find("textarea")
985+
.as("nativeTextarea")
986+
.focus();
987+
988+
cy.get("@nativeTextarea").trigger("compositionstart", { data: "" });
989+
990+
cy.get("@textarea").should("have.prop", "_isComposing", true);
991+
992+
cy.get("@nativeTextarea").trigger("compositionupdate", { data: "사랑" });
993+
994+
cy.get("@textarea").should("have.prop", "_isComposing", true);
995+
996+
cy.get("@nativeTextarea").trigger("compositionend", { data: "사랑" });
997+
998+
cy.get("@nativeTextarea")
999+
.invoke("val", "사랑")
1000+
.trigger("input", { inputType: "insertCompositionText" });
1001+
1002+
cy.get("@textarea").should("have.prop", "_isComposing", false);
1003+
1004+
cy.get("@textarea").should("have.attr", "value", "사랑");
1005+
});
1006+
1007+
it("should handle Japanese composition correctly", () => {
1008+
cy.mount(
1009+
<TextArea
1010+
id="textarea-composition-japanese"
1011+
placeholder="Type in Japanese ..."
1012+
/>
1013+
);
1014+
1015+
cy.get("[ui5-textarea]")
1016+
.as("textarea")
1017+
.realClick();
1018+
1019+
cy.get("@textarea")
1020+
.shadow()
1021+
.find("textarea")
1022+
.as("nativeTextarea")
1023+
.focus();
1024+
1025+
cy.get("@nativeTextarea").trigger("compositionstart", { data: "" });
1026+
1027+
cy.get("@textarea").should("have.prop", "_isComposing", true);
1028+
1029+
cy.get("@nativeTextarea").trigger("compositionupdate", { data: "ありがとう" });
1030+
1031+
cy.get("@textarea").should("have.prop", "_isComposing", true);
1032+
1033+
cy.get("@nativeTextarea").trigger("compositionend", { data: "ありがとう" });
1034+
1035+
cy.get("@nativeTextarea")
1036+
.invoke("val", "ありがとう")
1037+
.trigger("input", { inputType: "insertCompositionText" });
1038+
1039+
cy.get("@textarea").should("have.prop", "_isComposing", false);
1040+
1041+
cy.get("@textarea").should("have.attr", "value", "ありがとう");
1042+
});
1043+
1044+
it("should handle Chinese composition correctly", () => {
1045+
cy.mount(
1046+
<TextArea
1047+
id="textarea-composition-chinese"
1048+
placeholder="Type in Chinese ..."
1049+
/>
1050+
);
1051+
1052+
cy.get("[ui5-textarea]")
1053+
.as("textarea")
1054+
.realClick();
1055+
1056+
cy.get("@textarea")
1057+
.shadow()
1058+
.find("textarea")
1059+
.as("nativeTextarea")
1060+
.focus();
1061+
1062+
cy.get("@nativeTextarea").trigger("compositionstart", { data: "" });
1063+
1064+
cy.get("@textarea").should("have.prop", "_isComposing", true);
1065+
1066+
cy.get("@nativeTextarea").trigger("compositionupdate", { data: "谢谢" });
1067+
1068+
cy.get("@textarea").should("have.prop", "_isComposing", true);
1069+
1070+
cy.get("@nativeTextarea").trigger("compositionend", { data: "谢谢" });
1071+
1072+
cy.get("@nativeTextarea")
1073+
.invoke("val", "谢谢")
1074+
.trigger("input", { inputType: "insertCompositionText" });
1075+
1076+
cy.get("@textarea").should("have.prop", "_isComposing", false);
1077+
1078+
cy.get("@textarea").should("have.attr", "value", "谢谢");
1079+
});
1080+
1081+
it("should not revert value on Escape during composition", () => {
1082+
cy.mount(
1083+
<TextArea
1084+
id="textarea-composition-escape"
1085+
value="initial"
1086+
/>
1087+
);
1088+
1089+
cy.get("[ui5-textarea]")
1090+
.as("textarea")
1091+
.realClick();
1092+
1093+
cy.get("@textarea")
1094+
.shadow()
1095+
.find("textarea")
1096+
.as("nativeTextarea")
1097+
.focus();
1098+
1099+
cy.get("@nativeTextarea").trigger("compositionstart", { data: "" });
1100+
1101+
cy.get("@textarea").should("have.prop", "_isComposing", true);
1102+
1103+
cy.get("@nativeTextarea").trigger("compositionupdate", { data: "테스트" });
1104+
1105+
cy.get("@nativeTextarea")
1106+
.invoke("val", "initial테스트")
1107+
.trigger("input", { inputType: "insertCompositionText" });
1108+
1109+
cy.get("@nativeTextarea").trigger("keydown", { key: "Escape", keyCode: 27 });
1110+
1111+
cy.get("@textarea").should("have.attr", "value", "initial테스트");
1112+
1113+
cy.get("@nativeTextarea").trigger("compositionend", { data: "테스트" });
1114+
1115+
cy.get("@textarea").should("have.prop", "_isComposing", false);
1116+
1117+
cy.get("@textarea").should("have.attr", "value", "initial테스트");
1118+
});
1119+
1120+
it("should revert value on Escape after composition ends", () => {
1121+
cy.mount(
1122+
<TextArea
1123+
id="textarea-composition-escape-after"
1124+
value="initial"
1125+
/>
1126+
);
1127+
1128+
cy.get("[ui5-textarea]")
1129+
.as("textarea")
1130+
.realClick();
1131+
1132+
cy.get("@textarea")
1133+
.shadow()
1134+
.find("textarea")
1135+
.as("nativeTextarea")
1136+
.focus();
1137+
1138+
cy.get("@nativeTextarea").trigger("compositionstart", { data: "" });
1139+
1140+
cy.get("@nativeTextarea").trigger("compositionupdate", { data: "완료" });
1141+
1142+
cy.get("@nativeTextarea")
1143+
.invoke("val", "initial완료")
1144+
.trigger("input", { inputType: "insertCompositionText" });
1145+
1146+
cy.get("@nativeTextarea").trigger("compositionend", { data: "완료" });
1147+
1148+
cy.get("@textarea").should("have.prop", "_isComposing", false);
1149+
1150+
cy.get("@textarea").should("have.attr", "value", "initial완료");
1151+
1152+
cy.get("@nativeTextarea").realPress("Escape");
1153+
1154+
cy.get("@textarea").should("have.attr", "value", "initial");
1155+
});
1156+
});

0 commit comments

Comments
 (0)