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

package/cypress/specs/Title.cy.tsx

@@ -1,36 +0,0 @@
-import Title from "../../src/Title.js";
-
-describe("Title", () => {
-	describe("Rendering ", () => {
-		it("h{n} tags rendered correctly", () => {
-			cy.mount(<Title id="titleH1" level="H1">Title Size 1</Title>);
-			cy.get("#titleH1").shadow().find("h1").should("exist");
-
-			cy.mount(<Title id="titleAuto">Title Size Auto (2)</Title>);
-			cy.get("#titleAuto").shadow().find("h2").should("exist");
-
-			cy.mount(<Title id="titleH2" level="H2">Title Size 2</Title>);
-			cy.get("#titleH2").shadow().find("h2").should("exist");
-
-			cy.mount(<Title id="titleH3" level="H3">Title Size 3</Title>);
-			cy.get("#titleH3").shadow().find("h3").should("exist");
-
-			cy.mount(<Title id="titleH4" level="H4">Title Size 4</Title>);
-			cy.get("#titleH4").shadow().find("h4").should("exist");
-
-			cy.mount(<Title id="titleH5" level="H5">Title Size 5</Title>);
-			cy.get("#titleH5").shadow().find("h5").should("exist");
-
-			cy.mount(<Title id="titleH6" level="H6">Title Size 6</Title>);
-			cy.get("#titleH6").shadow().find("h6").should("exist");
-		});
-
-		// it("should wrap the text of the title", () => {
-		// 	cy.mount(<Title size="H6" level="H6" id="wrapping-title" style={{ width: "200px" }}>Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</Title>);
-		// 	cy.get("#wrapping-title").should("have.css", "height", "64px");
-
-		// 	cy.mount(<Title size="H6" level="H6" id="truncated-title" wrappingType="None" style={{ width: "200px" }}>Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</Title>);
-		// 	cy.get("#truncated-title").should("have.css", "height", "16px");
-		// });
-	});
-});

package/cypress/specs/Toast.cy.tsx

@@ -1,45 +0,0 @@
-import Toast from "../../src/Toast.js";
-import List from "../../src/List.js";
-import ListItemStandard from "../../src/ListItemStandard.js";
-
-describe("Toast - test popover API", () => {
-	it("Should verify the toast has the popover attribute set to manual", () => {
-		cy.mount(
-			<Toast id="toast" open={true} placement="TopStart">TopStart</Toast>
-		);
-		cy.get<Toast>("[ui5-toast]")
-			.should("have.attr", "popover", "manual")
-			.should("be.visible");
-	});
-
-	it("Toast should stay on top of list after scroll", () => {
-		cy.mount(
-			<>
-				<Toast id="toast" open duration={999999} placement="TopStart">TopStart</Toast>
-				<List id="list" headerText="List with ListItemStandard" style={{ opacity: "0.7" }}>
-					<ListItemStandard additionalText="3">List Item 1</ListItemStandard>
-					<ListItemStandard additionalText="2">List Item 2</ListItemStandard>
-					<ListItemStandard additionalText="1">List Item 3</ListItemStandard>
-				</List>
-			</>
-		);
-
-		cy.get<Toast>("[ui5-toast]")
-			.should("have.attr", "popover", "manual")
-			.should("be.visible");
-
-		cy.get("#toast")
-			.then($toast => {
-				const toastRect = $toast[0].getBoundingClientRect();
-				cy.get("#list")
-					.should($list => {
-						const listRect = $list[0].getBoundingClientRect();
-						const isOverlapping = toastRect.right > listRect.left
-							&& toastRect.left < listRect.right
-							&& toastRect.bottom > listRect.top
-							&& toastRect.top < listRect.bottom;
-						expect(isOverlapping).to.be.true;
-					});
-			});
-	});
-});

package/cypress/specs/Tokenizer.cy.tsx

@@ -1,209 +0,0 @@
-import Tokenizer from "../../src/Tokenizer.js";
-import Token from "../../src/Token.js";
-import type { UI5CustomEvent } from "@ui5/webcomponents-base/dist/index.js";
-
-const onTokenDelete = (event: UI5CustomEvent<Tokenizer, "token-delete">) => {
-	event.detail.tokens.forEach(token => {
-		(event.target as Tokenizer).removeChild(token);
-	});
-};
-
-describe("Tokenizer - multi-line and Clear All", () => {
-	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
-		cy.mount(
-			<Tokenizer showClearAll={true} multiLine={true}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-				<Token text="Denmark"></Token>
-				<Token text="Estonia"></Token>
-				<Token text="Finland"></Token>
-				<Token text="Germany"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("exist");
-	});
-
-	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
-		cy.mount(
-			<Tokenizer showClearAll={true} multiLine={true}>
-				<Token text="Andora"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("exist");
-	});
-
-	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
-		cy.mount(
-			<Tokenizer showClearAll={true}>
-				<Token text="Andora"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
-		cy.mount(
-			<Tokenizer multiLine={true}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-				<Token text="Denmark"></Token>
-				<Token text="Estonia"></Token>
-				<Token text="Finland"></Token>
-				<Token text="Germany"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
-		cy.mount(
-			<Tokenizer showClearAll={true} multiLine={true} readonly={true}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-				<Token text="Denmark"></Token>
-				<Token text="Estonia"></Token>
-				<Token text="Finland"></Token>
-				<Token text="Germany"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'n-more' link is not rendered for multi-line tokenizer", () => {
-		cy.mount(
-			<Tokenizer multiLine={true} style={{ width: "100px" }}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-				<Token text="Denmark"></Token>
-				<Token text="Estonia"></Token>
-				<Token text="Finland"></Token>
-				<Token text="Germany"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--more-text")
-			.should("not.exist");
-	});
-
-	it("Pressing 'Clear All' link fires token-delete event", () => {
-		cy.mount(
-			<Tokenizer multiLine={true} showClearAll={true}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-			</Tokenizer>
-		);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.eq(0)
-			.click();
-
-		cy.get("@delete")
-			.should("have.been.calledOnce");
-	});
-
-	it("tests token removal", () => {
-		cy.mount(
-			<Tokenizer id="test-token-delete" style={{ width: "100px" }} onTokenDelete={onTokenDelete}>
-				<Token text="aute"></Token>
-				<Token text="ad"></Token>
-				<Token text="exercitation"></Token>
-				<Token text="esse"></Token>
-				<Token text="labore"></Token>
-				<Token text="amet"></Token>
-				<Token text="excepteur"></Token>
-			</Tokenizer>
-		);
-
-		cy.get("#test-token-delete")
-			.find("[ui5-token]")
-			.should("have.length", 7);
-
-		cy.get("#test-token-delete")
-			.shadow()
-			.find(".ui5-tokenizer-more-text")
-			.realClick();
-
-		cy.get("#test-token-delete")
-			.shadow()
-			.find("[ui5-responsive-popover]")
-			.should("be.visible");
-
-		cy.get("#test-token-delete")
-			.shadow()
-			.find("[ui5-responsive-popover] [ui5-list] [ui5-li]").eq(0)
-			.shadow()
-			.find(".ui5-li-deletebtn [ui5-button]")
-			.realClick();
-
-		cy.get("#test-token-delete")
-			.find("[ui5-token]")
-			.should("have.length", 6);
-	});
-
-	it("handles overflow mechanism as expected", () => {
-		cy.mount(
-			<Tokenizer style={{ width: "100%" }}>
-				<Token text="Andora"></Token>
-				<Token text="Bulgaria"></Token>
-				<Token text="Canada"></Token>
-				<Token text="Denmark"></Token>
-				<Token text="Estonia"></Token>
-				<Token text="Andora"></Token>
-			</Tokenizer>
-		);
-
-		cy.get("ui5-token")
-			.eq(5)
-			.as("lastToken");
-
-		cy.get("@lastToken")
-			.should("be.visible");
-
-		cy.viewport(500, 600);
-
-		cy.get("ui5-tokenizer")
-			.shadow()
-			.find("span")
-			.should("have.attr", "aria-haspopup", "dialog")
-			.as("n-more");
-
-		cy.get("@lastToken")
-			.should("be.hidden");
-
-		cy.viewport(600, 600);
-
-		cy.get("@lastToken")
-			.should("be.visible");
-	});
-});

package/cypress/specs/Toolbar.cy.tsx

@@ -1,194 +0,0 @@
-import Toolbar from "../../src/Toolbar.js";
-import ToolbarButton from "../../src/ToolbarButton.js";
-import ToolbarSelect from "../../src/ToolbarSelect.js";
-import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
-import ToolbarSeparator from "../../src/ToolbarSeparator.js";
-import ToolbarSpacer from "../../src/ToolbarSpacer.js";
-import type ToolbarItem from "../../src/ToolbarItem.js";
-import add from "@ui5/webcomponents-icons/dist/add.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
-import employee from "@ui5/webcomponents-icons/dist/employee.js";
-
-describe("Toolbar general interaction", () => {
-	it.skip("Should not return null upon calling getDomRef for all direct child items", () => {
-		cy.mount(
-			<Toolbar id="otb_standard">
-				<ToolbarButton text="Button 1"></ToolbarButton>
-				<ToolbarButton text="Button 2"></ToolbarButton>
-				<ToolbarButton text="Button 3"></ToolbarButton>
-				<ToolbarSelect>
-					<ToolbarSelectOption>1</ToolbarSelectOption>
-					<ToolbarSelectOption>2</ToolbarSelectOption>
-					<ToolbarSelectOption>3</ToolbarSelectOption>
-				</ToolbarSelect>
-				<ToolbarSeparator></ToolbarSeparator>
-				<ToolbarButton text="Button 4"></ToolbarButton>
-				<ToolbarButton text="Button 5"></ToolbarButton>
-				<ToolbarButton text="Button 6"></ToolbarButton>
-			</Toolbar>
-		);
-
-		cy.get("#otb_standard")
-			.as("toolbar");
-
-		cy.get("@toolbar")
-			.should("exist");
-
-		cy.get("@toolbar")
-			.children()
-			.each($el => {
-				const toolbarItem = $el[0] as ToolbarItem;
-				cy.wrap(toolbarItem.getDomRef())
-					.should("not.be.null")
-					.should("not.be.undefined");
-			});
-	});
-
-	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
-		cy.mount(
-			<Toolbar id="otb_spacer">
-				<ToolbarButton icon={add} text="Plus" design="Default"></ToolbarButton>
-				<ToolbarButton icon={employee} text="Hire"></ToolbarButton>
-				<ToolbarSeparator></ToolbarSeparator>
-				<ToolbarButton icon={add} text="Add"></ToolbarButton>
-				<ToolbarButton icon={decline} text="Decline"></ToolbarButton>
-				<ToolbarSpacer></ToolbarSpacer>
-				<ToolbarButton icon={add} text="Append"></ToolbarButton>
-			</Toolbar>
-		);
-
-		cy.get("#otb_spacer")
-			.as("toolbar");
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(500);
-
-		cy.get("@toolbar")
-			.shadow()
-			.find(".ui5-tb-overflow-btn-hidden")
-			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
-	});
-
-	it("shouldn't show overflow button if there is enough space", () => {
-		cy.mount(
-			<Toolbar style={{ width: "fit-content", " max-width": "100%;" }}>
-				<ToolbarButton icon={decline}>
-				</ToolbarButton>
-
-				<ToolbarButton icon={add}>
-				</ToolbarButton>
-
-				<ToolbarButton icon={employee}>
-				</ToolbarButton>
-			</Toolbar>
-		);
-
-		cy.get("[ui5-toolbar]")
-			.as("toolbar");
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(500);
-
-		cy.get("@toolbar")
-			.shadow()
-			.find(".ui5-tb-overflow-btn-hidden")
-			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
-	});
-
-	it("shouldn't display the overflow button when initially rendered in a hidden container and later made visible", () => {
-		cy.mount(
-			<div id="otb_hidden_container" style="display:none;">
-				<Toolbar id="otb_hidden">
-					<ToolbarButton icon={add} text="Append"></ToolbarButton>
-				</Toolbar>
-			</div>
-		);
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(500);
-
-		cy.get("#otb_hidden_container")
-			.as("hiddenContainer");
-
-		// show the hidden container
-		cy.get("@hiddenContainer")
-			.invoke("show");
-
-		// overflowbutton should not be rendered
-		cy.get("#otb_hidden")
-			.shadow()
-			.find(".ui5-tb-overflow-btn-hidden")
-			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
-	});
-
-	it("Should call event handlers on abstract item", () => {
-		cy.mount(
-			<Toolbar>
-				<ToolbarButton text="Button 1"></ToolbarButton>
-				<ToolbarSelect>
-					<ToolbarSelectOption>1</ToolbarSelectOption>
-					<ToolbarSelectOption selected={true}>2</ToolbarSelectOption>
-					<ToolbarSelectOption>3</ToolbarSelectOption>
-				</ToolbarSelect>
-			</Toolbar>
-		);
-
-		cy.get("ui5-toolbar-button[text='Button 1']")
-			.then(button => {
-				button.get(0).addEventListener("click", cy.stub().as("clicked"));
-			});
-
-		cy.get("ui5-button", { includeShadowDom: true }).contains("Button 1")
-			.click();
-
-		cy.get("@clicked")
-			.should("have.been.calledOnce");
-
-		cy.get("ui5-toolbar-select")
-			.then(select => {
-				select.get(0).addEventListener("ui5-click", cy.stub().as("clicked"));
-				select.get(0).addEventListener("ui5-change", cy.stub().as("changed"));
-				select.get(0).addEventListener("ui5-open", cy.stub().as("opened"));
-				select.get(0).addEventListener("ui5-close", cy.stub().as("closed"));
-			});
-
-		cy.get("ui5-select", { includeShadowDom: true })
-			.click();
-
-		cy.get("@clicked")
-			.should("have.been.calledOnce");
-		cy.get("@opened")
-			.should("have.been.calledOnce");
-
-		cy.get("ui5-option", { includeShadowDom: true })
-			.first()
-			.click();
-
-		cy.get("@changed")
-			.should("have.been.calledOnce");
-		cy.get("@closed")
-			.should("have.been.calledOnce");
-	});
-});
-
-describe("Accessibility", () => {
-	it("Should apply accessibile-name to the popover", () => {
-		cy.mount(
-			<Toolbar>
-				<ToolbarButton text="Button 1"></ToolbarButton>
-				<ToolbarButton text="Button 2"></ToolbarButton>
-				<ToolbarButton text="Button 3"></ToolbarButton>
-				<ToolbarSelect accessibleName="Select">
-					<ToolbarSelectOption>1</ToolbarSelectOption>
-					<ToolbarSelectOption>2</ToolbarSelectOption>
-					<ToolbarSelectOption>3</ToolbarSelectOption>
-				</ToolbarSelect>
-			</Toolbar>
-		);
-
-		cy.get("ui5-toolbar")
-			.shadow()
-			.find(".ui5-overflow-popover")
-			.should("have.attr", "accessible-name", "Available Values");
-	});
-});

package/cypress/specs/Tree.cy.tsx

@@ -1,72 +0,0 @@
-import Tree from "../../src/Tree.js";
-import "../../src/TreeItem.js";
-import TreeItem from "../../src/TreeItem.js";
-import Icon from "../../src/Icon.js";
-import bell from "@ui5/webcomponents-icons/dist/bell.js";
-
-describe("Tree Tests", () => {
-	it("tests accessibility properties forwarded to the list", () => {
-		cy.mount(
-			<>
-				<Tree
-					accessibleName="Tree"
-					accessibleNameRef="lblDesc1"
-					accessibleDescription="Description"
-					accessibleDescriptionRef="lblDesc2"
-				></Tree>
-				<div id="lblDesc1">Tree</div>
-				<div id="lblDesc2">Description</div>
-			</>
-		);
-
-		cy.get("[ui5-tree]")
-			.as("tree");
-
-		cy.get("@tree")
-			.shadow()
-			.find(".ui5-tree-root")
-			.should("have.attr", "accessible-name", "Tree")
-			.and("have.attr", "accessible-name-ref", "lblDesc1")
-			.and("have.attr", "accessible-description", "Description")
-			.and("have.attr", "accessible-description-ref", "lblDesc2");
-	});
-
-	it("Tests image slot", () => {
-		cy.mount(
-			<Tree>
-				<TreeItem id="image-slot-tree-item">
-					<Icon name={bell} slot="image" id="slotted-icon"></Icon>
-				</TreeItem>
-			</Tree>
-		);
-
-		cy.get("#image-slot-tree-item")
-			.shadow()
-			.find("slot[name='image']")
-			.should("exist")
-			.then($slot => {
-				const slotElement = $slot[0] as HTMLSlotElement;
-				const assignedNodes = slotElement.assignedNodes();
-				expect(assignedNodes.length).to.be.greaterThan(0);
-				cy.wrap(assignedNodes[0]).should("have.attr", "id", "slotted-icon");
-			});
-	});
-});
-
-describe("Tree Props", () => {
-	it("noDataText is properly rendered", () => {
-		cy.mount(
-			<>
-				<Tree noDataText="No data"></Tree>
-			</>
-		);
-
-		cy.get("[ui5-tree]")
-			.shadow()
-			.find("[ui5-tree-list]")
-			.shadow()
-			.find("[ui5-busy-indicator]")
-			.find(".ui5-list-nodata")
-			.should("exist")
-	});
-});