@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/specs/FormSupport.cy.tsx

@@ -0,0 +1,975 @@
+import Button from "../../src/Button.js";
+import CheckBox from "../../src/CheckBox.js";
+import ColorPicker from "../../src/ColorPicker.js";
+import ComboBox from "../../src/ComboBox.js";
+import DatePicker from "../../src/DatePicker.js";
+import DateRangePicker from "../../src/DateRangePicker.js";
+import DateTimePicker from "../../src/DateTimePicker.js";
+import Input from "../../src/Input.js";
+import MultiComboBox from "../../src/MultiComboBox.js";
+import MultiComboBoxItem from "../../src/MultiComboBoxItem.js";
+import MultiInput from "../../src/MultiInput.js";
+import Token from "../../src/Token.js";
+import RadioButton from "../../src/RadioButton.js";
+import RangeSlider from "../../src/RangeSlider.js";
+import Select from "../../src/Select.js";
+import Option from "../../src/Option.js";
+import Slider from "../../src/Slider.js";
+import StepInput from "../../src/StepInput.js";
+import Switch from "../../src/Switch.js";
+import TextArea from "../../src/TextArea.js";
+import TimePicker from "../../src/TimePicker.js";
+
+const getFormData = ($form: HTMLFormElement) => {
+	const formData = new FormData($form);
+	const entries = [...formData.entries()];
+	return entries.map(entry => {
+		return `${entry[0]}=${entry[1] as string}`;
+	}).join("&");
+};
+
+describe("Form support", () => {
+	it("ui5-checkbox in form", () => {
+		cy.mount(<form method="get">
+			<CheckBox id="cb1" text="ui5-checkbox without name" > </CheckBox>
+			<CheckBox id="cb2" text="ui5-checkbox without name and value" checked > </CheckBox>
+			<CheckBox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value" > </CheckBox>
+			<CheckBox id="cb4" name="checkbox4" checked text="ui5-checkbox with name and value" > </CheckBox>
+			<CheckBox id="cb5" name="checkbox5" required text="ui5-checkbox with name, value and required" > </CheckBox>
+			<button type="submit" > Submits forms </button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#cb5")
+			.realClick();
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "checkbox4=on&checkbox5=on");
+	});
+
+	it("ui5-color-picker in form", () => {
+		cy.mount(<form method="get">
+			<ColorPicker id="color_picker1"></ColorPicker>
+			<ColorPicker id="color_picker2" value="blue"></ColorPicker>
+			<ColorPicker id="color_picker3" name="color_picker3"></ColorPicker>
+			<ColorPicker id="color_picker4" name="color_picker4" value="blue"></ColorPicker>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "color_picker3=rgba(255,255,255,1)&color_picker4=blue");
+	});
+
+	it("ui5-combobox in form", () => {
+		cy.mount(<form method="get">
+			<ComboBox id="combobox1"></ComboBox>
+			<ComboBox id="combobox2" value="ok"></ComboBox>
+			<ComboBox id="combobox3" name="combobox3"></ComboBox>
+			<ComboBox id="combobox4" name="combobox4" value="ok"></ComboBox>
+			<ComboBox id="combobox5" name="combobox5" required></ComboBox>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#combobox5")
+			.realClick();
+
+		cy.get("#combobox5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "combobox3=&combobox4=ok&combobox5=ok");
+	});
+
+	it("ui5-date-picker in form", () => {
+		cy.mount(<form method="get">
+			<DatePicker id="date_picker1"></DatePicker>
+			<DatePicker id="date_picker2" value="ok"></DatePicker>
+			<DatePicker id="date_picker3" name="date_picker3"></DatePicker>
+			<DatePicker id="date_picker4" name="date_picker4" value="ok"></DatePicker>
+			<DatePicker id="date_picker5" name="date_picker5" required></DatePicker>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#date_picker5")
+			.realClick();
+
+		cy.get("#date_picker5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "date_picker3=&date_picker4=ok&date_picker5=ok");
+	});
+
+	it("ui5-daterange-picker in form", () => {
+		cy.mount(<form method="get">
+			<DateRangePicker id="daterange_picker1"></DateRangePicker>
+			<DateRangePicker id="daterange_picker2" value="ok"></DateRangePicker>
+			<DateRangePicker id="daterange_picker3" name="daterange_picker3"></DateRangePicker>
+			<DateRangePicker id="daterange_picker4" name="daterange_picker4" value="ok"></DateRangePicker>
+			<DateRangePicker id="daterange_picker5" name="daterange_picker5" required></DateRangePicker>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#daterange_picker5")
+			.realClick();
+
+		cy.get("#daterange_picker5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "daterange_picker3=&daterange_picker4=ok&daterange_picker5=ok");
+	});
+
+	it("ui5-datetime-picker in form", () => {
+		cy.mount(<form method="get">
+			<DateTimePicker id="datetime_picker1"></DateTimePicker>
+			<DateTimePicker id="datetime_picker2" value="ok"></DateTimePicker>
+			<DateTimePicker id="datetime_picker3" name="datetime_picker3"></DateTimePicker>
+			<DateTimePicker id="datetime_picker4" name="datetime_picker4" value="ok"></DateTimePicker>
+			<DateTimePicker id="datetime_picker5" name="datetime_picker5" required></DateTimePicker>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#datetime_picker5")
+			.realClick();
+
+		cy.get("#datetime_picker5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "datetime_picker3=&datetime_picker4=ok&datetime_picker5=ok");
+	});
+
+	it("ui5-input in form", () => {
+		cy.mount(<form method="get">
+			<Input id="input1"></Input>
+			<Input id="input2" value="ok"></Input>
+			<Input id="input3" name="input3"></Input>
+			<Input id="input4" name="input4" value="ok"></Input>
+			<Input id="input5" name="input5" required></Input>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#input5")
+			.realClick();
+
+		cy.get("#input5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "input3=&input4=ok&input5=ok");
+	});
+
+	it("ui5-multi-combobox in form", () => {
+		cy.mount(<form method="get">
+			<MultiComboBox id="multi_combobox1"></MultiComboBox>
+			<MultiComboBox id="multi_combobox2" value="ok"></MultiComboBox>
+			<MultiComboBox id="multi_combobox3">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<MultiComboBox id="multi_combobox4" value="ok">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<MultiComboBox id="multi_combobox5" name="multi_combobox5"></MultiComboBox>
+			<MultiComboBox id="multi_combobox6" name="multi_combobox6" value="ok"></MultiComboBox>
+			<MultiComboBox id="multi_combobox7" name="multi_combobox7">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<MultiComboBox id="multi_combobox8" name="multi_combobox8" value="ok">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<MultiComboBox id="multi_combobox9" noValidation required
+				name="multi_combobox9"></MultiComboBox>
+			<MultiComboBox id="multi_combobox10" required name="multi_combobox10" value="ok"></MultiComboBox>
+			<MultiComboBox id="multi_combobox11" required name="multi_combobox11">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<MultiComboBox id="multi_combobox12" required name="multi_combobox12" value="ok">
+				<MultiComboBoxItem selected text="ok"></MultiComboBoxItem>
+			</MultiComboBox>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#multi_combobox9")
+			.realClick();
+
+		cy.get("#multi_combobox9")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "multi_combobox5=&multi_combobox6=ok&multi_combobox7=&multi_combobox7=ok&multi_combobox8=ok&multi_combobox8=ok&multi_combobox9=ok&multi_combobox10=ok&multi_combobox11=&multi_combobox11=ok&multi_combobox12=ok&multi_combobox12=ok");
+	});
+
+	it("ui5-multi-input in form", () => {
+		cy.mount(<form method="get">
+			<MultiInput id="multi_input1"></MultiInput>
+			<MultiInput id="multi_input2" value="ok"></MultiInput>
+			<MultiInput id="multi_input3">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+			<MultiInput id="multi_input4" value="ok">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+			<MultiInput id="multi_input5" name="multi_input5"></MultiInput>
+			<MultiInput id="multi_input6" name="multi_input6" value="ok"></MultiInput>
+			<MultiInput id="multi_input7" name="multi_input7">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+			<MultiInput id="multi_input8" name="multi_input8" value="ok">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+
+			<MultiInput id="multi_input9" required name="multi_input9"></MultiInput>
+			<MultiInput id="multi_input10" required name="multi_input10" value="ok"></MultiInput>
+			<MultiInput id="multi_input11" required name="multi_input11">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+			<MultiInput id="multi_input12" required name="multi_input12" value="ok">
+				<Token slot="tokens" text="ok"></Token>
+			</MultiInput>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#multi_input9")
+			.realClick();
+
+		cy.get("#multi_input9")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "multi_input5=&multi_input6=ok&multi_input7=&multi_input7=ok&multi_input8=ok&multi_input8=ok&multi_input9=ok&multi_input10=ok&multi_input11=&multi_input11=ok&multi_input12=ok&multi_input12=ok");
+	});
+
+	it("ui5-radio-button in form 1", () => {
+		cy.mount(<form method="get">
+			<RadioButton id="rb_1" required name="rb1"></RadioButton>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#rb_1")
+			.realClick();
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "rb1=on");
+	});
+
+	it("ui5-radio-button in form 2", () => {
+		cy.mount(<form method="get">
+			<RadioButton required id="rb_2" checked></RadioButton>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "");
+	});
+
+	it("ui5-radio-button in form 3", () => {
+		cy.mount(<form method="get">
+			<RadioButton required name="rb3" id="rb_3" value="A" text="A"></RadioButton>
+			<RadioButton required name="rb3" id="rb_4" value="B" text="B"></RadioButton>
+			<RadioButton required value="C" text="C" checked></RadioButton>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#rb_4")
+			.realClick();
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "rb3=B");
+	});
+
+	it("ui5-range-slider in form", () => {
+		cy.mount(<form method="get">
+			<RangeSlider id="range_slider1"></RangeSlider>
+			<RangeSlider id="range_slider2" startValue={25} endValue={75}></RangeSlider>
+			<RangeSlider id="range_slider3" name="range_slider3"></RangeSlider>
+			<RangeSlider id="range_slider4" name="range_slider4" startValue={25} endValue={75}></RangeSlider>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "range_slider3=0&range_slider3=100&range_slider4=25&range_slider4=75");
+	});
+
+	it("ui5-select in form", () => {
+		cy.mount(<form method="get">
+			<Select id="select1">
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select2">
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="" selected>Option 3</Option>
+			</Select>
+
+			<Select value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select id="select4" name="select4">
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select id="select44" name="select44" value="Option 1">
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select id="select5" name="select5">
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select55" name="select55" value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<Select id="select7" name="select7" required>
+				<Option selected>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select8" name="select8" required>
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select9" name="select9" required>
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="" selected>Option 3</Option>
+			</Select>
+
+			<Select id="select77" name="select77" required value="Option 1">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select88" name="select88" required value="option2">
+				<Option>Option 1</Option>
+				<Option value="option2" selected>Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+			<Select id="select99" name="select99" required value="Option 3">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="">Option 3</Option>
+			</Select>
+
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		// Explicitly insert ui5-select with option that has attribute to empty string otherwise JSX will
+		// set is a property and it won't be applied to the DOM and it can't be achieved using setAttribute method
+		cy.get("#select7")
+			.then($el => {
+				$el[0].insertAdjacentHTML("beforebegin", `
+				<ui5-select id="select6" name="select6">
+					<ui5-option>Option 1</ui5-option>
+					<ui5-option value="option2">Option 2</ui5-option>
+					<ui5-option value="" selected>Option 3</ui5-option>
+				</ui5-select>`);
+			});
+
+		cy.get("#select6")
+			.should("be.visible");
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#select9")
+			.realClick();
+
+		cy.get("#select9")
+			.should("have.attr", "opened");
+
+		cy.get("#select9")
+			.find("[ui5-option]")
+			.eq(1)
+			.realClick();
+
+		cy.get("#select99")
+			.realClick();
+
+		cy.get("#select99")
+			.should("have.attr", "opened");
+
+		cy.get("#select99")
+			.find("[ui5-option]")
+			.eq(1)
+			.realClick();
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "select4=Option 1&select44=Option 1&select5=option2&select55=option2&select6=&select7=Option 1&select8=option2&select9=option2&select77=Option 1&select88=option2&select99=option2");
+	});
+
+	it("ui5-slider in form", () => {
+		cy.mount(<form method="get">
+			<Slider id="slider1"></Slider>
+			<Slider id="slider2" value={100}></Slider>
+			<Slider id="slider3" name="slider3"></Slider>
+			<Slider id="slider4" name="slider4" value={100}></Slider>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "slider3=0&slider4=100");
+	});
+
+	it("ui5-step-input in form", () => {
+		cy.mount(<form method="get">
+			<StepInput id="step_input1"></StepInput>
+			<StepInput id="step_input2" value={4}></StepInput>
+			<StepInput id="step_input3" name="step_input3"></StepInput>
+			<StepInput id="step_input4" name="step_input4" value={4}></StepInput>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "step_input3=0&step_input4=4");
+	});
+
+	it("ui5-switch in form", () => {
+		cy.mount(<form method="get">
+			<Switch id="switch1" textOn="ui5-switch without name"></Switch>
+			<Switch id="switch2" textOn="ui5-switch without name and value" checked></Switch>
+			<Switch id="switch3" name="switch3" textOn="ui5-switch with name and without value"></Switch>
+			<Switch id="switch4" name="switch4" checked textOn="ui5-switch with name and value"></Switch>
+			<Switch id="switch5" name="switch5" required textOn="ui5-switch with name, value and required"></Switch>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#switch5")
+			.realClick();
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "switch4=on&switch5=on");
+	});
+
+	it("ui5-textarea in form", () => {
+		cy.mount(<form method="get">
+			<TextArea id="textarea1"></TextArea>
+			<TextArea id="textarea2" value="ok"></TextArea>
+			<TextArea id="textarea3" name="textarea3"></TextArea>
+			<TextArea id="textarea4" name="textarea4" value="ok"></TextArea>
+			<TextArea id="textarea5" name="textarea5" required></TextArea>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#textarea5")
+			.realClick();
+
+		cy.get("#textarea5")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "textarea3=&textarea4=ok&textarea5=ok");
+	});
+
+	it("ui5-time-picker in form", () => {
+		cy.mount(<form method="get">
+			<TimePicker id="time_picker1"></TimePicker>
+			<TimePicker id="time_picker2" value="1:10:10 PM"></TimePicker>
+			<TimePicker id="time_picker3" name="time_picker3" required></TimePicker>
+			<TimePicker id="time_picker4" name="time_picker4" value="1:10:10 PM" required></TimePicker>
+			<button type="submit">Submits forms</button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+
+		cy.get("#time_picker3")
+			.realClick();
+
+		cy.get("#time_picker3")
+			.realType("ok", { delay: 100 });
+
+		cy.get("button")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "time_picker3=ok&time_picker4=1:10:10 PM");
+	});
+
+	it("Button's click doesn't submit form on prevent default", () => {
+		cy.mount(<form method="get">
+			<Button id="b1" type="Submit">Preventable button</Button>
+		</form>);
+
+		cy.get("#b1")
+			.then($item => {
+				$item.get(0).addEventListener("ui5-click", e => e.preventDefault());
+				$item.get(0).addEventListener("ui5-click", cy.stub().as("click"));
+			});
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#b1")
+			.realClick();
+
+		cy.get("#b1")
+			.realPress("Enter");
+
+		cy.get("#b1")
+			.realPress("Space");
+
+		cy.get("@click")
+			.should("have.been.calledThrice");
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+	});
+
+	it("Normal button does not submit forms", () => {
+		cy.mount(<form method="get">
+			<Button id="b1">Does not submit forms</Button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#b1")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+	});
+
+	it("Submit button does submit forms", () => {
+		cy.mount(<form method="get">
+			<Input name="input" value="ok"></Input>
+			<Input name="input_disabled" disabled value="ok"></Input>
+			<Select name="sel">
+				<Option value="cozy">Cozy</Option>
+				<Option value="compact">Compact</Option>
+				<Option value="condensed" selected>Condensed</Option>
+			</Select>
+			<TextArea id="ta" name="ta" value="ok"></TextArea>
+			<TextArea name="ta_disabled" disabled value="ok"></TextArea>
+			<DatePicker name="dp" value="Apr 10, 2019"></DatePicker>
+			<DatePicker name="dp_disabled" disabled value="Apr 10, 2019"></DatePicker>
+			<CheckBox name="cb" checked></CheckBox>
+			<CheckBox name="cb_disabled" disabled checked></CheckBox>
+			<RadioButton name="radio" text="A" value="a"></RadioButton>
+			<RadioButton name="radio" text="B" value="b" checked></RadioButton>
+			<RadioButton name="radio" text="C" value="c"></RadioButton>
+			<StepInput name="si" value={5} min={0} max={10} step={1}></StepInput>
+			<StepInput name="si_diabled" value={7} min={0} max={10} step={1}
+				disabled></StepInput>
+			<Button id="b1">Does not submit forms</Button>
+			<Button id="b2" submits>Submits forms</Button>
+		</form>);
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#ta")
+			.realClick();
+
+		cy.get("#b2")
+			.realClick();
+
+		cy.get("@submit")
+			.should("have.been.called");
+
+		cy.get("form")
+			.then($el => {
+				return getFormData($el.get(0));
+			})
+			.should("be.equal", "input=ok&sel=condensed&ta=ok&dp=Apr 10, 2019&cb=on&radio=b&si=5");
+	});
+});