Skip to content

Commit 92f5fe7

Browse files
kineticjskineticjs
authored
chore: extend form-validity test for ui5-checkbox and ui5-select (#11823)
* chore: extend form-validity test for ui5-checkbox and ui5-select * chore: extend form-validity test for ui5-checkbox and ui5-select * chore: extend form-validity test for ui5-checkbox and ui5-select * chore: refactoring * chore: refactoring * chore: add messages to assertions * chore: test corrected * chore: test corrected * chore: test enhanced * chore: extend samples for show form validation
1 parent 1e8fe40 commit 92f5fe7

File tree

6 files changed

+189
-1
lines changed

6 files changed

+189
-1
lines changed

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,51 @@ describe('CheckBox Component', () => {
1919

2020
});
2121

22+
describe("Validation inside a form", () => {
23+
it("has correct validity", () => {
24+
cy.mount(<form method="get">
25+
<CheckBox id="cb" name="checkbox5" required text="unchecked ui5-checkbox with name and required" > </CheckBox>
26+
<button type="submit" > Submits forms </button>
27+
</form>);
28+
29+
cy.get("form")
30+
.then($item => {
31+
$item.get(0).addEventListener("submit", cy.stub().as("submit"));
32+
});
33+
34+
cy.get("button")
35+
.realClick();
36+
37+
cy.get("@submit")
38+
.should("have.not.been.called");
39+
40+
cy.get("#cb")
41+
.then($el => {
42+
const checkbox = $el[0] as CheckBox;
43+
expect(checkbox.formValidity.valueMissing, "Unchecked required checkbox should have formValidity with valueMissing=true").to.be.true;
44+
expect(checkbox.validity.valueMissing, "Unchecked required checkbox should have validity with valueMissing=true").to.be.true;
45+
expect(checkbox.validity.valid, "Unchecked required checkbox should have validity with valid=false").to.be.false;
46+
expect(checkbox.checkValidity(), "Unchecked required checkbox should fail validity check").to.be.false;
47+
expect(checkbox.reportValidity(), "Unchecked required checkbox should fail report validity").to.be.false;
48+
});
49+
50+
cy.get("#cb:invalid") // select using :invalid CSS pseudo-class
51+
.should("exist", "Unchecked required checkbox should have :invalid CSS class");
52+
53+
cy.get("#cb") // check the required checkbox
54+
.realClick();
55+
56+
cy.get("#cb")
57+
.then($el => {
58+
const checkbox = $el[0] as CheckBox;
59+
expect(checkbox.formValidity.valueMissing, "Checked required checkbox should have formValidity with valueMissing=false").to.be.false;
60+
expect(checkbox.validity.valueMissing, "Checked required checkbox should have validity with valueMissing=false").to.be.false;
61+
expect(checkbox.validity.valid, "Checked required checkbox should have validity with valid=true").to.be.true;
62+
expect(checkbox.checkValidity(), "Checked required checkbox should pass validity check").to.be.true;
63+
expect(checkbox.reportValidity(), "Checked required checkbox should pass report validity").to.be.true;
64+
});
65+
66+
cy.get("#cb:invalid").should("not.exist", "Checked required checkbox should not have :invalid CSS class");
67+
});
68+
});
69+

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,3 +250,61 @@ describe("Select - Properties", () => {
250250
cy.get("[ui5-select]").should("have.prop", "formFormattedValue", "");
251251
});
252252
});
253+
254+
describe("Select - Validation", () => {
255+
it("has correct validity", () => {
256+
cy.mount(
257+
<form method="get">
258+
<Select id="sel1" name="select1" required>
259+
<Option value="">Select an option</Option>
260+
<Option value="option1">Option 1</Option>
261+
<Option value="option2">Option 2</Option>
262+
</Select>
263+
<button type="submit">Submit</button>
264+
</form>
265+
);
266+
267+
cy.get("form")
268+
.then($item => {
269+
$item.get(0).addEventListener("submit", cy.stub().as("submit"));
270+
});
271+
272+
cy.get("button")
273+
.realClick();
274+
275+
cy.get("@submit")
276+
.should("have.not.been.called");
277+
278+
cy.get("#sel1")
279+
.then($el => {
280+
const select = $el[0] as Select;
281+
expect(select.formValidity.valueMissing, "Required Select with empty value should have formValidity with valueMissing=true").to.be.true;
282+
expect(select.validity.valueMissing, "Required Select with empty value should have validity with valueMissing=true").to.be.true;
283+
expect(select.validity.valid, "Required Select with empty value should have validity with valid=false").to.be.false;
284+
expect(select.checkValidity(), "Required Select with empty value should fail validity check").to.be.false;
285+
expect(select.reportValidity(), "Required Select with empty value should fail report validity").to.be.false;
286+
});
287+
288+
cy.get("#sel1:invalid").should("exist", "Required Select with empty value should have :invalid CSS class");
289+
290+
// select an option with a non-empty value
291+
// this should make the Select valid
292+
cy.get("#sel1")
293+
.realClick()
294+
.get("[ui5-option]")
295+
.eq(1)
296+
.realClick();
297+
298+
cy.get("#sel1")
299+
.then($el => {
300+
const select = $el[0] as Select;
301+
expect(select.formValidity.valueMissing, "Required Select with non-empty value should have formValidity with valueMissing=false").to.be.false;
302+
expect(select.validity.valueMissing, "Required Select with non-empty value should have validity with valueMissing=false").to.be.false;
303+
expect(select.validity.valid, "Required Select with non-empty value should have validity with valid=true").to.be.true;
304+
expect(select.checkValidity(), "Required Select with non-empty value should pass validity check").to.be.true;
305+
expect(select.reportValidity(), "Required Select with non-empty value should pass report validity").to.be.true;
306+
});
307+
308+
cy.get("#sel1:invalid").should("not.exist", "Required Select with non-empty value should not have :invalid CSS class");
309+
});
310+
});

‎packages/main/test/pages/CheckBox.html

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,17 @@
7474
<ui5-checkbox class="defaultPreventedCb" indeterminate></ui5-checkbox>
7575
<ui5-checkbox class="defaultPreventedCb" indeterminate checked></ui5-checkbox>
7676

77-
<br />
77+
<section>
78+
<ui5-title>Form validation:</ui5-title>
79+
<form method="get">
80+
<ui5-checkbox id="cbItem" text="I agree to the terms (required)" required value="agreement" name="agreement"></ui5-checkbox>
81+
<br/><br/>
82+
<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
83+
<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
84+
</form>
85+
</section>
86+
87+
<br/><br/>
7888
<ui5-title>Form submission</ui5-title>
7989
<form id="cbForm" method="get">
8090
<ui5-checkbox id="cbItem1" text="Option 1" checked value="option1" name="option"></ui5-checkbox>
@@ -102,8 +112,11 @@
102112
var input = document.querySelector("#field");
103113
var checkBox1 = document.querySelector("#cb1");
104114
var checkBox2 = document.querySelector("#cb2");
115+
var checkBoxInAForm = document.querySelector("#cbItem");
105116
var displayOnlyCb = document.querySelector("#displayOnlyCb");
106117
var cbFormSubmitted = document.querySelector("#cbFormSubmitted");
118+
var btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
119+
var formValidationMessage = document.getElementById('formValidationMessage');
107120
var cdCustomAria = document.querySelector("#accCustomAria");
108121
var counter = 0;
109122

@@ -135,6 +148,28 @@
135148

136149
alert("Form submitted with query string: " + queryString);
137150
});
151+
152+
btnCheckFormValidity.addEventListener('click', function() {
153+
checkFormValidity('cbItem');
154+
});
155+
156+
checkBoxInAForm.addEventListener('ui5-change', function() {
157+
setTimeout(() => {
158+
checkFormValidity('cbItem', true);
159+
}, 0);
160+
});
161+
162+
function checkFormValidity(elementId, delayed = false) {
163+
const element = document.getElementById(elementId);
164+
const isValid = element.checkValidity();
165+
166+
element.reportValidity();
167+
168+
// Show result
169+
formValidationMessage.hidden = false;
170+
formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
171+
formValidationMessage.design = isValid ? "Positive" : "Negative";
172+
}
138173
</script>
139174
</body>
140175

‎packages/main/test/pages/Select.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,20 @@ <h2>icon prop</h2>
244244
</ui5-select>
245245
</section>
246246

247+
<section>
248+
<ui5-title>Form validation</ui5-title>
249+
<form id="formValidation">
250+
<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
251+
<ui5-select id="selectInAForm" name="select2" required>
252+
<ui5-option value="">Please choose an option from the list:</ui5-option>
253+
<ui5-option value="Cozy">Cozy</ui5-option>
254+
<ui5-option value="Compact">Compact</ui5-option>
255+
<ui5-option value="Condensed">Condensed</ui5-option>
256+
</ui5-select>
257+
<br><br>
258+
<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
259+
</form>
260+
</section>
247261
</body>
248262
<script>
249263
var countries = [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];
@@ -260,7 +274,10 @@ <h2>icon prop</h2>
260274
var select = document.getElementById('mySelect');
261275
var select2 = document.getElementById('errorSelect');
262276
var select3 = document.getElementById('warningSelect');
277+
var selectInAForm = document.getElementById('selectInAForm');
263278
var lbl = document.getElementById('lblResult');
279+
var btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
280+
var formValidationMessage = document.getElementById('formValidationMessage');
264281
var counter = 0;
265282
var counterOpen = 0;
266283
var counterClose = 0;
@@ -365,5 +382,27 @@ <h2>icon prop</h2>
365382
btnSetInvalidValue.addEventListener("click", function(e) {
366383
mySelect7.value = "NAN";
367384
});
385+
386+
btnCheckFormValidity.addEventListener('click', function() {
387+
checkFormValidity('selectInAForm');
388+
});
389+
390+
selectInAForm.addEventListener('ui5-change', function() {
391+
setTimeout(() => {
392+
checkFormValidity('selectInAForm', true);
393+
}, 0);
394+
});
395+
396+
function checkFormValidity(elementId, delayed = false) {
397+
const element = document.getElementById(elementId);
398+
const isValid = element.checkValidity();
399+
400+
element.reportValidity();
401+
402+
// Show result
403+
formValidationMessage.hidden = false;
404+
formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
405+
formValidationMessage.design = isValid ? "Positive" : "Negative";
406+
}
368407
</script>
369408
</html>

‎packages/main/test/pages/styles/CheckBox.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,7 @@ ui5-checkbox:not(.ui5-cb-testing-wrap) {
1515
flex-direction: column;
1616
width: 250px
1717
}
18+
19+
form ui5-checkbox:invalid {
20+
outline: 2px solid var(--sapNegativeColor);
21+
}

‎packages/main/test/pages/styles/Select.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.select1auto {
22
background-color: var(--sapBackgroundColor);
33
}
4+
5+
form ui5-select:invalid {
6+
outline: 2px solid var(--sapNegativeColor);
7+
}

0 commit comments

Comments
 (0)