Skip to content

Commit d8adb03

Browse files
StefanDimitrov04StefanDimitrov04
authored
chore(ui5-input/multi-input, ui5-combobox/multi-combobox, ui5-textarea): extend form-validity tests (#12733)
chore(ui5-input/multi-input,ui5-combobox/multi-combobox,ui5-textarea): extend form-validity tests
1 parent 4a52be6 commit d8adb03

File tree

14 files changed

+677
-26
lines changed

14 files changed

+677
-26
lines changed

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

Lines changed: 72 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe("General Interaction", () => {
9191

9292
cy.get("@combobox").should("have.prop", "value", "One");
9393
cy.get("[ui5-cb-item]").first().should("have.prop", "selected", true);
94-
94+
9595
cy.window().then(window => {
9696
return window.getSelection()?.toString();
9797
}).should("contains", "ne");
@@ -921,7 +921,7 @@ describe("Accessibility", () => {
921921
// open the popover
922922
cy.get("@combo").shadow().find("input").realPress("F4");
923923
cy.get("@combo").shadow().find("input").realPress("ArrowDown");
924-
924+
925925
cy.get("@invisibleMessageSpan").should("have.text", "List item 2 of 6");
926926
});
927927

@@ -1257,14 +1257,14 @@ describe("Additional Navigation", () => {
12571257
const scrollableRect = picker[0].shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
12581258
const lastItem = document.querySelector("#combo-grouping ui5-cb-item-group:last-child ui5-cb-item:last-child");
12591259
const elementRect = lastItem!.getBoundingClientRect();
1260-
1260+
12611261
const isInVisibleArea = !(
12621262
elementRect.bottom < scrollableRect.top ||
12631263
elementRect.top > scrollableRect.bottom ||
12641264
elementRect.right < scrollableRect.left ||
12651265
elementRect.left > scrollableRect.right
12661266
);
1267-
1267+
12681268
expect(isInVisibleArea).to.be.true;
12691269
});
12701270

@@ -1279,14 +1279,14 @@ describe("Additional Navigation", () => {
12791279
const scrollableRect = picker[0].shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
12801280
const firstItem = document.querySelector("#combo-grouping ui5-cb-item-group:first-child ui5-cb-item:first-child");
12811281
const elementRect = firstItem!.getBoundingClientRect();
1282-
1282+
12831283
const isInVisibleArea = !(
12841284
elementRect.bottom < scrollableRect.top ||
12851285
elementRect.top > scrollableRect.bottom ||
12861286
elementRect.right < scrollableRect.left ||
12871287
elementRect.left > scrollableRect.right
12881288
);
1289-
1289+
12901290
expect(isInVisibleArea).to.be.true;
12911291
});
12921292
});
@@ -1398,7 +1398,7 @@ describe("Keyboard interaction", () => {
13981398

13991399
cy.get("#combo-grouping").shadow().find("input").realClick();
14001400
cy.get("#combo-grouping").should("be.focused");
1401-
1401+
14021402
cy.get("#combo-grouping").shadow().find("input").realClick();
14031403
cy.get("#combo-grouping").should("be.focused");
14041404

@@ -1922,7 +1922,7 @@ describe("Event firing", () => {
19221922

19231923
// Focus out to trigger change event
19241924
cy.get("body").realClick();
1925-
1925+
19261926
cy.get("@changeSpy").should('have.been.calledOnce');
19271927
cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
19281928
return event.target.value === "Algeria";
@@ -1997,7 +1997,7 @@ describe("Event firing", () => {
19971997

19981998
// Verify change event was fired
19991999
cy.get("@changeSpy").should('have.callCount', 1);
2000-
2000+
20012001
// Verify the event contains correct data
20022002
cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
20032003
return event.target.value === "Bahrain";
@@ -2106,11 +2106,11 @@ describe("Event firing", () => {
21062106

21072107
cy.get("@combo").shadow().find("[ui5-icon]").realClick();
21082108
cy.get("@combo").shadow().find("[inner-input]").realPress("ArrowDown");
2109-
2109+
21102110
cy.get("@changeSpy").should('have.callCount', 0);
2111-
2111+
21122112
cy.get("@combo").find("[ui5-cb-item]").first().realClick();
2113-
2113+
21142114
cy.get("@changeSpy").should('have.been.calledOnce');
21152115
cy.get("@changeSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
21162116
return event.target.value === "Algeria";
@@ -2131,7 +2131,7 @@ describe("Event firing", () => {
21312131

21322132
cy.get("#change-cb").shadow().find("[inner-input]").realClick();
21332133
cy.get("#change-cb").shadow().find("[inner-input]").realPress("ArrowDown");
2134-
2134+
21352135
cy.get("@changeSpy").should('have.callCount', 0);
21362136

21372137
cy.get("#change-cb").shadow().find("[inner-input]").realPress("ArrowDown");
@@ -2185,7 +2185,7 @@ describe("Event firing", () => {
21852185

21862186
cy.get("#input-cb").shadow().find("[inner-input]").realClick();
21872187
cy.get("#input-cb").shadow().find("[inner-input]").realPress("ArrowDown");
2188-
2188+
21892189
cy.get("@inputSpy").should('have.been.calledOnce');
21902190
cy.get("@inputSpy").should('have.been.calledWithMatch', Cypress.sinon.match(event => {
21912191
return event.target.value === "Argentina";
@@ -2597,7 +2597,7 @@ describe("Event firing", () => {
25972597

25982598
cy.get("@combo").should("have.prop", "_effectiveShowClearIcon", true);
25992599
cy.get("@combo").shadow().find(".ui5-input-clear-icon-wrapper").realClick();
2600-
cy.get("@inputSpy").should('have.been.calledTwice');
2600+
cy.get("@inputSpy").should('have.been.calledTwice');
26012601
});
26022602

26032603
it("should show all items if value does not match any item and arrow is pressed", () => {
@@ -2843,7 +2843,7 @@ describe("ComboBox Composition", () => {
28432843
cy.get("@combobox").should("have.prop", "_isComposing", true);
28442844

28452845
cy.get("@nativeInput").trigger("compositionend", { data: "사랑" });
2846-
2846+
28472847
cy.get("@nativeInput")
28482848
.invoke("val", "사랑")
28492849
.trigger("input", { inputType: "insertCompositionText" });
@@ -2897,7 +2897,7 @@ describe("ComboBox Composition", () => {
28972897
cy.get("@combobox").should("have.prop", "_isComposing", true);
28982898

28992899
cy.get("@nativeInput").trigger("compositionend", { data: "ありがとう" });
2900-
2900+
29012901
cy.get("@nativeInput")
29022902
.invoke("val", "ありがとう")
29032903
.trigger("input", { inputType: "insertCompositionText" });
@@ -2951,7 +2951,7 @@ describe("ComboBox Composition", () => {
29512951
cy.get("@combobox").should("have.prop", "_isComposing", true);
29522952

29532953
cy.get("@nativeInput").trigger("compositionend", { data: "谢谢" });
2954-
2954+
29552955
cy.get("@nativeInput")
29562956
.invoke("val", "谢谢")
29572957
.trigger("input", { inputType: "insertCompositionText" });
@@ -2973,3 +2973,57 @@ describe("ComboBox Composition", () => {
29732973
.should("have.attr", "value", "谢谢");
29742974
});
29752975
});
2976+
2977+
describe("Validation inside a form", () => {
2978+
it("has correct validity for valueMissing", () => {
2979+
cy.mount(
2980+
<form>
2981+
<ComboBox id="cmbForm" required></ComboBox>
2982+
<button type="submit" id="submitBtn">Submit</button>
2983+
</form>
2984+
);
2985+
2986+
cy.get("form").then($form => {
2987+
$form.get(0).addEventListener("submit", (e) => e.preventDefault());
2988+
$form.get(0).addEventListener("submit", cy.stub().as("submit"));
2989+
});
2990+
2991+
cy.get("#submitBtn")
2992+
.realClick();
2993+
2994+
cy.get("@submit")
2995+
.should("have.not.been.called");
2996+
2997+
cy.get("[ui5-combobox]")
2998+
.as("combo")
2999+
.ui5AssertValidityState({
3000+
formValidity: { valueMissing: true },
3001+
validity: { valueMissing: true, valid: false },
3002+
checkValidity: false,
3003+
reportValidity: false
3004+
});
3005+
3006+
cy.get("#cmbForm:invalid")
3007+
.should("exist");
3008+
3009+
cy.get("@combo")
3010+
.realType("Albania");
3011+
3012+
cy.get("@combo")
3013+
.ui5AssertValidityState({
3014+
formValidity: { valueMissing: false },
3015+
validity: { valueMissing: false, valid: true },
3016+
checkValidity: true,
3017+
reportValidity: true
3018+
});
3019+
3020+
cy.get("#cmbForm:invalid")
3021+
.should("not.exist");
3022+
3023+
cy.get("#submitBtn")
3024+
.realClick();
3025+
3026+
cy.get("@submit")
3027+
.should("have.been.calledOnce");
3028+
});
3029+
});

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2913,3 +2913,184 @@ describe("Input Composition", () => {
29132913
.should("have.attr", "value", "谢谢");
29142914
});
29152915
});
2916+
2917+
describe("Validation inside a form", () => {
2918+
it("has correct validity for valueMissing", () => {
2919+
cy.mount(
2920+
<form>
2921+
<Input id="inpForm" required></Input>
2922+
<button type="submit" id="submitBtn">Submit</button>
2923+
</form>
2924+
);
2925+
2926+
cy.get("form").then($form => {
2927+
$form.get(0).addEventListener("submit", (e) => e.preventDefault());
2928+
$form.get(0).addEventListener("submit", cy.stub().as("submit"));
2929+
});
2930+
2931+
cy.get("#submitBtn")
2932+
.realClick();
2933+
2934+
cy.get("@submit")
2935+
.should("have.not.been.called");
2936+
2937+
cy.get("[ui5-input]")
2938+
.as("input")
2939+
.ui5AssertValidityState({
2940+
formValidity: { valueMissing: true },
2941+
validity: { valueMissing: true, valid: false },
2942+
checkValidity: false,
2943+
reportValidity: false
2944+
});
2945+
2946+
cy.get("#inpForm:invalid")
2947+
.should("exist");
2948+
2949+
cy.get("@input")
2950+
.realType("Albania");
2951+
2952+
cy.get("@input")
2953+
.ui5AssertValidityState({
2954+
formValidity: { valueMissing: false },
2955+
validity: { valueMissing: false, valid: true },
2956+
checkValidity: true,
2957+
reportValidity: true
2958+
});
2959+
2960+
cy.get("#inpForm:invalid")
2961+
.should("not.exist");
2962+
2963+
cy.get("#submitBtn")
2964+
.realClick();
2965+
2966+
cy.get("@submit")
2967+
.should("have.been.calledOnce");
2968+
});
2969+
2970+
it("has correct validity for typeMismatch- Email", () => {
2971+
cy.mount(
2972+
<form>
2973+
<Input id="inpForm" required type="Email"></Input>
2974+
<button type="submit" id="submitBtn">Submit</button>
2975+
</form>
2976+
);
2977+
2978+
cy.get("form").then($form => {
2979+
$form.get(0).addEventListener("submit", (e) => e.preventDefault());
2980+
$form.get(0).addEventListener("submit", cy.stub().as("submit"));
2981+
});
2982+
2983+
cy.get("[ui5-input]")
2984+
.as("input")
2985+
.realClick()
2986+
.realType("email");
2987+
2988+
cy.get("@input")
2989+
.should("have.value", "email");
2990+
2991+
cy.get("#submitBtn")
2992+
.realClick();
2993+
2994+
cy.get("@submit")
2995+
.should("have.not.been.called");
2996+
2997+
cy.get("@input")
2998+
.ui5AssertValidityState({
2999+
formValidity: { typeMismatch: true },
3000+
validity: { typeMismatch: true, valid: false },
3001+
checkValidity: false,
3002+
reportValidity: false
3003+
});
3004+
3005+
cy.get("#inpForm:invalid")
3006+
.should("exist");
3007+
3008+
cy.get("@input")
3009+
.shadow()
3010+
.find("input")
3011+
.clear();
3012+
3013+
cy.get("@input")
3014+
.realType("[email protected]");
3015+
3016+
cy.get("@input")
3017+
.ui5AssertValidityState({
3018+
formValidity: { patternMismatch: false },
3019+
validity: { patternMismatch: false, valid: true },
3020+
checkValidity: true,
3021+
reportValidity: true
3022+
});
3023+
3024+
cy.get("#inpForm:invalid")
3025+
.should("not.exist");
3026+
3027+
cy.get("#submitBtn")
3028+
.realClick();
3029+
3030+
cy.get("@submit")
3031+
.should("have.been.calledOnce");
3032+
});
3033+
it("has correct validity for typeMismatch- URL", () => {
3034+
cy.mount(
3035+
<form>
3036+
<Input id="inpForm" required type="URL"></Input>
3037+
<button type="submit" id="submitBtn">Submit</button>
3038+
</form>
3039+
);
3040+
3041+
cy.get("form").then($form => {
3042+
$form.get(0).addEventListener("submit", (e) => e.preventDefault());
3043+
$form.get(0).addEventListener("submit", cy.stub().as("submit"));
3044+
});
3045+
3046+
cy.get("[ui5-input]")
3047+
.as("input")
3048+
.realClick()
3049+
.realType("google");
3050+
3051+
cy.get("@input")
3052+
.should("have.value", "google");
3053+
3054+
cy.get("#submitBtn")
3055+
.realClick();
3056+
3057+
cy.get("@submit")
3058+
.should("have.not.been.called");
3059+
3060+
cy.get("@input")
3061+
.ui5AssertValidityState({
3062+
formValidity: { typeMismatch: true },
3063+
validity: { typeMismatch: true, valid: false },
3064+
checkValidity: false,
3065+
reportValidity: false
3066+
});
3067+
3068+
cy.get("#inpForm:invalid")
3069+
.should("exist");
3070+
3071+
cy.get("@input")
3072+
.shadow()
3073+
.find("input")
3074+
.clear();
3075+
3076+
cy.get("@input")
3077+
.realType("https://www.google.com");
3078+
3079+
cy.get("@input")
3080+
.ui5AssertValidityState({
3081+
formValidity: { typeMismatch: false },
3082+
validity: { typeMismatch: false, valid: true },
3083+
checkValidity: true,
3084+
reportValidity: true
3085+
});
3086+
3087+
cy.get("#inpForm:invalid")
3088+
.should("not.exist");
3089+
3090+
cy.get("#submitBtn")
3091+
.realClick();
3092+
3093+
cy.get("@submit")
3094+
.should("have.been.calledOnce");
3095+
});
3096+
});

0 commit comments

Comments
 (0)