@ui5/webcomponents 2.11.0-rc.2 → 2.11.0-rc.4

package/cypress/specs/ComboBox.cy.tsx

@@ -1,198 +0,0 @@
-import ComboBox from "../../src/ComboBox.js";
-import ComboBoxItem from "../../src/ComboBoxItem.js";
-import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js";
-
-describe("Security", () => {
-	it("tests setting malicious text to items", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItem text="<script>alert('XSS')</script>"></ComboBoxItem>
-				<ComboBoxItem text="<b onmouseover=alert('XSS')></b>"></ComboBoxItem>
-				<ComboBoxItem text="Albania<button onClick='alert(1)'>alert</button>"></ComboBoxItem>
-			</ComboBox>
-		);
-
-		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
-			.should("have.text", "<script>alert('XSS')</script>");
-		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
-			.should("have.text", "<b onmouseover=alert('XSS')></b>");
-		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
-			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
-	});
-});
-
-describe("Keyboard interaction", () => {
-	it("tests navigating with arrow down when item text is contained in the previous selected item", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItem text="Bulgaria 1"></ComboBoxItem>
-				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
-				<ComboBoxItem text="Bul"></ComboBoxItem>
-			</ComboBox>
-		);
-
-		cy.get("[ui5-combobox]").as("combobox");
-
-		cy.get<ComboBox>("@combobox")
-			.shadow()
-			.find("input")
-			.as("inner");
-
-		cy.get("@inner").focus();
-
-		cy.get("@inner").realPress("F4");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
-
-		cy.get("@inner").realPress("ArrowDown");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
-
-		cy.get("@inner").realPress("ArrowDown");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
-	});
-
-	it("tests navigating with arrow down when item text is contained in the previous selected item (with grouping)", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItemGroup headerText="Bulgaria">
-					<ComboBoxItem text="Bulgar"></ComboBoxItem>
-					<ComboBoxItem text="Bulg"></ComboBoxItem>
-					<ComboBoxItem text="Bul"></ComboBoxItem>
-				</ComboBoxItemGroup>
-			</ComboBox>
-		);
-
-		cy.get("[ui5-combobox]").as("combobox");
-
-		cy.get<ComboBox>("@combobox")
-			.shadow()
-			.find("input")
-			.as("inner");
-
-		cy.get("@inner").focus();
-
-		cy.get("@inner").realPress("F4");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true);
-
-		cy.get("@inner").realPress("ArrowDown");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
-
-		cy.get("@inner").realPress("ArrowDown");
-		cy.get("@combobox")
-			.find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
-	});
-});
-
-describe("Event firing", () => {
-	it("tests if open and close events are fired correctly", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItem text="Algeria"></ComboBoxItem>
-				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
-				<ComboBoxItem text="England"></ComboBoxItem>
-			</ComboBox>
-		);
-
-		cy.get("ui5-combobox")
-			.as("combo");
-
-		cy.get("@combo").then($combo => {
-			$combo[0].addEventListener("focusin", () => {
-			$combo[0].setAttribute("open", "true");
-			});
-		});
-
-		cy.get("@combo").then($combo => {
-			$combo[0].addEventListener("ui5-open", cy.stub().as("comboOpened"));
-		});
-
-		cy.get("@combo").then($combo => {
-			$combo[0].addEventListener("ui5-close", cy.stub().as("comboClosed"));
-		});
-
-		cy.get("@combo")
-			.shadow()
-			.find("input")
-			.focus();
-
-		cy.get("@combo")
-			.shadow()
-			.find("ui5-icon")
-			.as("icon");
-
-		cy.get("@icon")
-			.click();
-
-		cy.get("@icon")
-			.click();
-
-		cy.get("@combo")
-			.shadow()
-			.find("ui5-responsive-popover")
-			.should("have.attr", "open");
-
-		cy.get("@comboClosed")
-			.should("have.been.calledOnce");
-
-		cy.get("@comboOpened")
-			.should("have.been.calledTwice");
-	});
-
-	it("should not fire 'change' event on focusout if value is not changed by user interaction", () => {
-		cy.mount(
-			<>
-				<ComboBox id="cb" value="ComboBox item text"></ComboBox>
-				<ComboBox id="another-cb"></ComboBox>
-			</>
-		);
-
-		cy.get("#cb").then($cb => {
-			$cb[0].addEventListener("ui5-change", cy.stub().as("changeStub"));
-		});
-
-		cy.get("#cb").shadow().find("input").click();
-		cy.get("#another-cb").shadow().find("input").click();
-		cy.get("@changeStub").should("not.have.been.called");
-
-		cy.get("#cb").then(($cb) => {
-			const comboBox = $cb[0] as ComboBox;
-			comboBox.value = "Another ComboBox item text";
-		});
-
-		cy.get("#cb").shadow().find("input").click();
-		cy.get("#another-cb").shadow().find("input").click();
-		cy.get("@changeStub").should("not.have.been.called");
-	});
-});
-describe("Accessibility", () => {
-	it("should announce the associated label when ComboBox is focused", () => {
-		cy.mount(
-			<>
-				<label for="cb">Should be the aria-label</label>
-				<ComboBox id="cb"/>
-			</>
-		);
-
-		cy.get('label[for="cb"]')
-			.invoke('text')
-			.then((labelText) => {
-
-				cy.get("[ui5-combobox]")
-					.shadow()
-					.find("input")
-					.as("innerInput");
-
-				cy.get("@innerInput")
-					.click();
-
-				cy.get("@innerInput")
-					.should("have.attr", "aria-label", labelText);
-			});
-	});
-});
-
-

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -1,75 +0,0 @@
-import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js";
-import DatePicker from "../../src/DatePicker.js";
-import DateTimePicker from "../../src/DateTimePicker.js";
-import TimePicker from "../../src/TimePicker.js";
-
-describe("Date related components in different timezone", () => {
-	before(() => {
-		cy.wrap({ setTimezone })
-			.invoke("setTimezone", "Pacific/Apia");
-
-		cy.wrap({ getTimezone })
-			.invoke("getTimezone")
-			.should("equal", "Pacific/Apia");
-	});
-
-	it("The date is with the correct offset in date picker", () => {
-		cy.mount(<DatePicker id="datePickerNow" value="now" formatPattern="dd/MM/yyyy"/>);
-
-		const now = new Date();
-		const offset = now.getTimezoneOffset();
-		now.setMinutes(now.getMinutes() + offset);
-		now.setHours(now.getHours() + 13);
-		const day = String(now.getDate()).padStart(2, "0");
-		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
-		const year = now.getFullYear();
-
-		const value = `${day}/${month}/${year}`;
-
-		cy.get("#datePickerNow")
-			.shadow()
-			.find("[ui5-datetime-input]")
-			.should("have.attr", "value", value);
-	});
-
-	it("The time is with the correct offset in time picker", () => {
-		cy.mount(<TimePicker id="timePickerNow" value="now" formatPattern="HH:mm:ss"/>);
-
-		const now = new Date();
-		const offset = now.getTimezoneOffset();
-		now.setMinutes(now.getMinutes() + offset);
-		now.setHours(now.getHours() + 13);
-		const hours = String(now.getHours()).padStart(2, "0");
-		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = String(now.getSeconds()).padStart(2, "0");
-
-		const value = `${hours}:${minutes}:${seconds}`;
-
-		cy.get("#timePickerNow")
-			.shadow()
-			.find("[ui5-datetime-input]")
-			.should("have.attr", "value", value);
-	});
-
-	it("The date and time are with the correct offset in date time picker", () => {
-		cy.mount(<DateTimePicker id="dateTimePickerNow" value="now" formatPattern="dd/MM/yyyy HH:mm:ss"/>);
-
-		const now = new Date();
-		const offset = now.getTimezoneOffset();
-		now.setMinutes(now.getMinutes() + offset);
-		now.setHours(now.getHours() + 13);
-		const day = String(now.getDate()).padStart(2, "0");
-		const month = String(now.getMonth() + 1).padStart(2, "0"); // Months are 0-based
-		const year = now.getFullYear();
-		const hours = String(now.getHours()).padStart(2, "0");
-		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = String(now.getSeconds()).padStart(2, "0");
-
-		const value = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
-
-		cy.get("#dateTimePickerNow")
-			.shadow()
-			.find("[ui5-datetime-input]")
-			.should("have.attr", "value", value);
-	});
-});