@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/cypress/specs/{FormSupport.cy.ts → FormSupport.cy.tsx}

@@ -1,26 +1,24 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/CheckBox.js";
-import "../../src/ColorPicker.js";
-import "../../src/ComboBox.js";
-import "../../src/ComboBoxItem.js";
-import "../../src/DatePicker.js";
-import "../../src/DateRangePicker.js";
-import "../../src/DateTimePicker.js";
-import "../../src/Input.js";
-import "../../src/MultiComboBox.js";
-import "../../src/MultiComboBoxItem.js";
-import "../../src/MultiInput.js";
-import "../../src/Token.js";
-import "../../src/RadioButton.js";
-import "../../src/RangeSlider.js";
-import "../../src/Select.js";
-import "../../src/Option.js";
-import "../../src/Slider.js";
-import "../../src/StepInput.js";
-import "../../src/Switch.js";
-import "../../src/TextArea.js";
-import "../../src/TimePicker.js";
+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);
@@ -32,14 +30,14 @@ const getFormData = ($form: HTMLFormElement) => {
 
 describe("Form support", () => {
 	it("ui5-checkbox in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-checkbox id="cb1" text="ui5-checkbox without name"></ui5-checkbox>
-	<ui5-checkbox id="cb2" text="ui5-checkbox without name and value" checked></ui5-checkbox>
-	<ui5-checkbox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value"></ui5-checkbox>
-	<ui5-checkbox id="cb4" name="checkbox4" checked text="ui5-checkbox with name and value"></ui5-checkbox>
-	<ui5-checkbox id="cb5" name="checkbox5" required text="ui5-checkbox with name, value and required"></ui5-checkbox>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -73,13 +71,13 @@ describe("Form support", () => {
 	});
 
 	it("ui5-color-picker in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-color-picker id="color_picker1"></ui5-color-picker>
-	<ui5-color-picker id="color_picker2" value="blue"></ui5-color-picker>
-	<ui5-color-picker id="color_picker3" name="color_picker3"></ui5-color-picker>
-	<ui5-color-picker id="color_picker4" name="color_picker4" value="blue"></ui5-color-picker>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -104,14 +102,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-combobox in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-combobox id="combobox1"></ui5-combobox>
-	<ui5-combobox id="combobox2" value="ok"></ui5-combobox>
-	<ui5-combobox id="combobox3" name="combobox3"></ui5-combobox>
-	<ui5-combobox id="combobox4" name="combobox4" value="ok"></ui5-combobox>
-	<ui5-combobox id="combobox5" name="combobox5" required></ui5-combobox>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -148,14 +146,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-date-picker in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-date-picker id="date_picker1"></ui5-date-picker>
-	<ui5-date-picker id="date_picker2" value="ok"></ui5-date-picker>
-	<ui5-date-picker id="date_picker3" name="date_picker3"></ui5-date-picker>
-	<ui5-date-picker id="date_picker4" name="date_picker4" value="ok"></ui5-date-picker>
-	<ui5-date-picker id="date_picker5" name="date_picker5" required></ui5-date-picker>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -192,14 +190,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-daterange-picker in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-daterange-picker id="daterange_picker1"></ui5-daterange-picker>
-	<ui5-daterange-picker id="daterange_picker2" value="ok"></ui5-daterange-picker>
-	<ui5-daterange-picker id="daterange_picker3" name="daterange_picker3"></ui5-daterange-picker>
-	<ui5-daterange-picker id="daterange_picker4" name="daterange_picker4" value="ok"></ui5-daterange-picker>
-	<ui5-daterange-picker id="daterange_picker5" name="daterange_picker5" required></ui5-daterange-picker>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -236,14 +234,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-datetime-picker in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-datetime-picker id="datetime_picker1"></ui5-datetime-picker>
-	<ui5-datetime-picker id="datetime_picker2" value="ok"></ui5-datetime-picker>
-	<ui5-datetime-picker id="datetime_picker3" name="datetime_picker3"></ui5-datetime-picker>
-	<ui5-datetime-picker id="datetime_picker4" name="datetime_picker4" value="ok"></ui5-datetime-picker>
-	<ui5-datetime-picker id="datetime_picker5" name="datetime_picker5" required></ui5-datetime-picker>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -280,14 +278,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-input in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-input id="input1"></ui5-input>
-	<ui5-input id="input2" value="ok"></ui5-input>
-	<ui5-input id="input3" name="input3"></ui5-input>
-	<ui5-input id="input4" name="input4" value="ok"></ui5-input>
-	<ui5-input id="input5" name="input5" required></ui5-input>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -324,37 +322,34 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-combobox in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-multi-combobox id="multi_combobox1"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox2" value="ok"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox3">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox4" value="ok">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-
-
-	<ui5-multi-combobox id="multi_combobox5" name="multi_combobox5"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox6" name="multi_combobox6" value="ok"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox7" name="multi_combobox7">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox8" name="multi_combobox8" value="ok">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-
-	<ui5-multi-combobox id="multi_combobox9" no-validation required
-		name="multi_combobox9"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox10" required name="multi_combobox10" value="ok"></ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox11" required name="multi_combobox11">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-	<ui5-multi-combobox id="multi_combobox12" required name="multi_combobox12" value="ok">
-		<ui5-mcb-item selected text="ok"></ui5-mcb-item>
-	</ui5-multi-combobox>
-	<button type="submit">Submits forms</button>
-</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" no-validation 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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -391,34 +386,34 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-input in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-multi-input id="multi_input1"></ui5-multi-input>
-	<ui5-multi-input id="multi_input2" value="ok"></ui5-multi-input>
-	<ui5-multi-input id="multi_input3">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-	<ui5-multi-input id="multi_input4" value="ok">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-	<ui5-multi-input id="multi_input5" name="multi_input5"></ui5-multi-input>
-	<ui5-multi-input id="multi_input6" name="multi_input6" value="ok"></ui5-multi-input>
-	<ui5-multi-input id="multi_input7" name="multi_input7">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-	<ui5-multi-input id="multi_input8" name="multi_input8" value="ok">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-
-	<ui5-multi-input id="multi_input9" allow-custom-values required name="multi_input9"></ui5-multi-input>
-	<ui5-multi-input id="multi_input10" required name="multi_input10" value="ok"></ui5-multi-input>
-	<ui5-multi-input id="multi_input11" required name="multi_input11">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-	<ui5-multi-input id="multi_input12" required name="multi_input12" value="ok">
-		<ui5-token slot="tokens" text="ok"></ui5-token>
-	</ui5-multi-input>
-	<button type="submit">Submits forms</button>
-</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" allow-custom-values 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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -455,10 +450,10 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 1", () => {
-		cy.mount(html`<form  method="get">
-	<ui5-radio-button id="rb_1" required name="rb1"></ui5-radio-button>
-	<button type="submit">Submits forms</button>
-</form>`);
+		cy.mount(<form method="get">
+			<RadioButton id="rb_1" required name="rb1"></RadioButton>
+			<button type="submit">Submits forms</button>
+		</form>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -495,11 +490,10 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 2", () => {
-		cy.mount(html`<form  method="get">
-	<ui5-title>ui5-radio-button</ui5-title>
-	<ui5-radio-button required id="rb_2" required checked></ui5-radio-button>
-	<button type="submit">Submits forms</button>
-</form>`);
+		cy.mount(<form method="get">
+			<RadioButton required id="rb_2" checked></RadioButton>
+			<button type="submit">Submits forms</button>
+		</form>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -524,12 +518,12 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 3", () => {
-		cy.mount(html`<form  method="get">
-	<ui5-radio-button required name="rb3" id="rb_3" value="A" text="A"></ui5-radio-button>
-	<ui5-radio-button required name="rb3" id="rb_4" value="B" text="B"></ui5-radio-button>
-	<ui5-radio-button required value="C" text="C" checked></ui5-radio-button>
-	<button type="submit">Submits forms</button>
-</form>`);
+		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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -549,7 +543,6 @@ describe("Form support", () => {
 		cy.get("#rb_4")
 			.realClick();
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
 
@@ -567,13 +560,13 @@ describe("Form support", () => {
 	});
 
 	it("ui5-range-slider in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-range-slider id="range_slider1"></ui5-range-slider>
-	<ui5-range-slider id="range_slider2" start-value="25" end-value="75"></ui5-range-slider>
-	<ui5-range-slider id="range_slider3" name="range_slider3"></ui5-range-slider>
-	<ui5-range-slider id="range_slider4" name="range_slider4" start-value="25" end-value="75"></ui5-range-slider>
-	<button type="submit">Submits forms</button>
-</form>`);
+		cy.mount(<form method="get">
+			<RangeSlider id="range_slider1"></RangeSlider>
+			<RangeSlider id="range_slider2" start-value="25" end-value="75"></RangeSlider>
+			<RangeSlider id="range_slider3" name="range_slider3"></RangeSlider>
+			<RangeSlider id="range_slider4" name="range_slider4" start-value="25" end-value="75"></RangeSlider>
+			<button type="submit">Submits forms</button>
+		</form>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -597,61 +590,61 @@ describe("Form support", () => {
 			.should("be.equal", "range_slider3=0&range_slider3=100&range_slider4=25&range_slider4=75");
 	});
 
-	it("ui5-select in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-select id="select1">
-		<ui5-option selected>Option 1</ui5-option>
-		<ui5-option value="option2">Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<ui5-select id="select2">
-		<ui5-option>Option 1</ui5-option>
-		<ui5-option value="option2" selected>Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<ui5-select id="select3">
-		<ui5-option>Option 1</ui5-option>
-		<ui5-option value="option2">Option 2</ui5-option>
-		<ui5-option value="" selected>Option 3</ui5-option>
-	</ui5-select>
-
-	<ui5-select id="select4" name="select4">
-		<ui5-option selected>Option 1</ui5-option>
-		<ui5-option value="option2">Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<ui5-select id="select5" name="select5">
-		<ui5-option>Option 1</ui5-option>
-		<ui5-option value="option2" selected>Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<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>
-
-	<ui5-select id="select7" name="select7" required>
-		<ui5-option selected>Option 1</ui5-option>
-		<ui5-option value="option2">Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<ui5-select id="select8" name="select8" required>
-		<ui5-option>Option 1</ui5-option>
-		<ui5-option value="option2" selected>Option 2</ui5-option>
-		<ui5-option value="">Option 3</ui5-option>
-	</ui5-select>
-	<ui5-select id="select9" name="select9" required>
-		<ui5-option>Option 1</ui5-option>
-		<ui5-option value="option2">Option 2</ui5-option>
-		<ui5-option value="" selected>Option 3</ui5-option>
-	</ui5-select>
-
-	<button type="submit">Submits forms</button>
-</form>`);
+	it.skip("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 id="select4" name="select4">
+				<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="select6" name="select6">
+				<Option>Option 1</Option>
+				<Option value="option2">Option 2</Option>
+				<Option value="" selected>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>
+
+			<button type="submit">Submits forms</button>
+		</form>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
+		cy.wait(1000);
 
 		cy.get("form")
 			.then($item => {
@@ -690,13 +683,13 @@ describe("Form support", () => {
 	});
 
 	it("ui5-slider in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-slider id="slider1"></ui5-slider>
-	<ui5-slider id="slider2" value="100"></ui5-slider>
-	<ui5-slider id="slider3" name="slider3"></ui5-slider>
-	<ui5-slider id="slider4" name="slider4" value="100"></ui5-slider>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -721,13 +714,13 @@ describe("Form support", () => {
 	});
 
 	it("ui5-step-input in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-step-input id="step_input1"></ui5-step-input>
-	<ui5-step-input id="step_input2" value="4"></ui5-step-input>
-	<ui5-step-input id="step_input3" name="step_input3"></ui5-step-input>
-	<ui5-step-input id="step_input4" name="step_input4" value="4"></ui5-step-input>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -752,14 +745,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-switch in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-switch id="switch1" text="ui5-switch without name"></ui5-switch>
-	<ui5-switch id="switch2" text="ui5-switch without name and value" checked></ui5-switch>
-	<ui5-switch id="switch3" name="switch3" text="ui5-switch with name and without value"></ui5-switch>
-	<ui5-switch id="switch4" name="switch4" checked text="ui5-switch with name and value"></ui5-switch>
-	<ui5-switch id="switch5" name="switch5" required text="ui5-switch with name, value and required"></ui5-switch>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -793,14 +786,14 @@ describe("Form support", () => {
 	});
 
 	it("ui5-textarea in form", () => {
-		cy.mount(html`<form method="get">
-	<ui5-textarea id="textarea1"></ui5-textarea>
-	<ui5-textarea id="textarea2" value="ok"></ui5-textarea>
-	<ui5-textarea id="textarea3" name="textarea3"></ui5-textarea>
-	<ui5-textarea id="textarea4" name="textarea4" value="ok"></ui5-textarea>
-	<ui5-textarea id="textarea5" name="textarea5" required></ui5-textarea>
-	<button type="submit">Submits forms</button>
-</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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -837,15 +830,13 @@ describe("Form support", () => {
 	});
 
 	it("ui5-time-picker in form", () => {
-		/* eslint-disable no-irregular-whitespace */
-		cy.mount(html`<form method="get">
-	<ui5-time-picker id="time_picker1"></ui5-time-picker>
-	<ui5-time-picker id="time_picker2" value="1:10:10 PM"></ui5-time-picker>
-	<ui5-time-picker id="time_picker3" name="time_picker3" required></ui5-time-picker>
-	<ui5-time-picker id="time_picker4" name="time_picker4" value="1:10:10 PM" required></ui5-time-picker>
-	<button type="submit">Submits forms</button>
-</form>`);
-		/* eslint-enable no-irregular-whitespace */
+		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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -882,9 +873,9 @@ describe("Form support", () => {
 	});
 
 	it("Normal button does not submit forms", () => {
-		cy.mount(html`<form method="get">
-	<ui5-button id="b1">Does not submit forms</ui5-button>
-</form>`);
+		cy.mount(<form method="get">
+			<Button id="b1">Does not submit forms</Button>
+		</form>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);
@@ -902,36 +893,30 @@ describe("Form support", () => {
 			.should("have.not.been.called");
 	});
 
-	it("Submit button does submit forms", () => {
-		cy.mount(html`<form method="get">
-	<ui5-input name="input" value="ok"></ui5-input>
-	<ui5-input name="input_disabled" disabled value="ok"></ui5-input>
-	<ui5-select name="sel">
-		<ui5-option value="cozy">Cozy</ui5-option>
-		<ui5-option value="compact">Compact</ui5-option>
-		<ui5-option value="condensed" selected>Condensed</ui5-option>
-	</ui5-select>
-	<br><br>
-	<ui5-textarea id="ta" name="ta" value="ok"></ui5-textarea>
-	<ui5-textarea name="ta_disabled" disabled value="ok"></ui5-textarea>
-	<br><br>
-	<ui5-date-picker name="dp" value="Apr 10, 2019"></ui5-date-picker>
-	<ui5-date-picker name="dp_disabled" disabled value="Apr 10, 2019"></ui5-date-picker>
-	<br><br>
-	<ui5-checkbox name="cb" checked></ui5-checkbox>
-	<ui5-checkbox name="cb_disabled" disabled checked></ui5-checkbox>
-	<br><br>
-	<ui5-radio-button name="radio" text="A" value="a"></ui5-radio-button>
-	<ui5-radio-button name="radio" text="B" value="b" checked></ui5-radio-button>
-	<ui5-radio-button name="radio" text="C" value="c"></ui5-radio-button>
-	<br><br>
-	<ui5-step-input class="formsupport2auto" name="si" value="5" min="0" max="10" step="1"></ui5-step-input>
-	<ui5-step-input class="formsupport2auto" name="si_diabled" value="7" min="0" max="10" step="1"
-		disabled></ui5-step-input>
-	<br><br>
-	<ui5-button id="b1">Does not submit forms</ui5-button>
-	<ui5-button id="b2" submits>Submits forms</ui5-button>
-</form>`);
+	it.skip("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="asd"></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>);
 
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(200);