@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/cypress/specs/Search.mobile.cy.tsx

@@ -0,0 +1,287 @@
+import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Search from "../../src/Search.js";
+import SearchItem from "../../src/SearchItem.js";
+import SearchScope from "../../src/SearchScope.js";
+
+describe("Search Field on mobile device", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice();
+	});
+
+	it("tests opening the dialog when search is clicked / focused", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "open", true);
+	});
+
+	it("tests closing the dialog when cancel button is pressed", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find(".ui5-search-popup-searching-header [ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "open", false);
+	});
+
+	it("should fire search event without item when user types value and hits enter / search on Virtual Keyboard", () => {
+		const spy = cy.spy();
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.then(search => {
+				search.get(0).addEventListener("ui5-search", spy);
+				search.get(0).addEventListener("ui5-search", cy.stub().as("search"));
+			});
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("be.focused");
+
+		cy.realType("test{enter}");
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "open", false);
+
+		cy.get("@search").should("have.been.calledOnce");
+		cy.wrap(spy).should("have.been.calledWithMatch", Cypress.sinon.match(event => {
+			return event.detail.item === undefined;
+		}));
+		cy.get("[ui5-search]").should("have.prop", "value", "test");
+	});
+
+	it("should fire search event with item when user types and hits enter / search on Virtual Keyboard", () => {
+		const spy = cy.spy();
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.then(search => {
+				search.get(0).addEventListener("ui5-search", spy);
+				search.get(0).addEventListener("ui5-search", cy.stub().as("search"));
+			});
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("be.focused");
+
+		cy.realType("Item 1{enter}");
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "open", false);
+
+		cy.get("@search").should("have.been.calledOnce");
+		cy.wrap(spy).should("have.been.calledWithMatch", Cypress.sinon.match(event => {
+			return event.detail.item.text === "Item 1";
+		}));
+	});
+
+	it.skip("should revert value of search if dialog is closed by cancel", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.should("be.focused");
+
+		cy.realPress("T");
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "value", "T");
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find(".ui5-search-popup-searching-header [ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverClosed();
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "value", "");
+	});
+
+	it("should fill value if provided before open", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true} value="initial">
+					<SearchItem text="Item 1" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.should("have.prop", "value", "initial");
+	});
+
+	it("should not open when clicking on the scopes select", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true} value="initial">
+					<SearchItem text="Item 1" />
+					<SearchScope slot="scopes" text="Scope 1" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-select]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "open", false);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-select]")
+			.should("have.prop", "opened", true);
+	});
+
+	it("should accept autocompleted text after pressing go/enter on virtual keyboard", () => {
+		cy.mount(
+			<>
+				<Search showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</Search>
+			</>
+		);
+
+		cy.get("[ui5-search]")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("be.focused");
+
+		cy.realType("Ite");
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "value", "Ite");
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
+			.should("be.focused");
+
+		cy.realType("{enter}");
+
+		cy.get("[ui5-search]")
+			.should("have.prop", "value", "Item 1");
+	});
+});

package/cypress/specs/SearchField.cy.tsx

@@ -0,0 +1,427 @@
+import SearchField from "../../src/SearchField.js";
+import SearchScope from "../../src/SearchScope.js";
+import {
+	SEARCH_FIELD_SCOPE_SELECT_LABEL,
+	SEARCH_FIELD_CLEAR_ICON,
+	SEARCH_FIELD_SEARCH_ICON,
+	SEARCH_FIELD_LABEL
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("SearchField general interaction", () => {
+	describe("Attribute propagation", () => {
+		it("should pass placeholder to inner input", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField placeholder={attributeValue}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "placeholder", attributeValue);
+		});
+
+		it("Value attribute is propagated properly", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField value={attributeValue}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.value", attributeValue);
+		});
+
+		it("accessibleName to aria-label", () => {
+			const attributeValue = "test";
+
+			cy.mount(<SearchField accessibleName={attributeValue}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-label", attributeValue);
+		});
+
+		it("accessibleName should have default value if not set", () => {
+			cy.mount(<SearchField></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-label", SEARCH_FIELD_LABEL.defaultText);
+		});
+
+		it("accessibleDescription should propagate if set", () => {
+			cy.mount(<SearchField accessibleDescription="Test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "aria-description", "Test");
+		});
+	});
+
+	describe("Collapsed Search Field", () => {
+		it("collapsed search field button accessibility", () => {
+			cy.mount(<SearchField collapsed={true} placeholder="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-button]")
+				.shadow()
+				.find("button")
+				.as("inner-button");
+
+			cy.get("@inner-button")
+				.should("have.attr", "aria-expanded", "false");
+
+			cy.get("@inner-button")
+				.should("have.attr", "title", SEARCH_FIELD_SEARCH_ICON.defaultText);
+			cy.get("@inner-button")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_ICON.defaultText);
+		});
+
+		it("should fire search search on search icon click", () => {
+			cy.mount(<SearchField value="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			// click on search icon
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='search']")
+				.realClick();
+
+			// search should be called
+			cy.get("@searched")
+				.should("have.been.calledOnce");
+		});
+	});
+
+	describe("Expanded Search Field", () => {
+		it("input field should be rendered as an expanded search field", () => {
+			cy.mount(<SearchField placeholder="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-button]")
+				.should("not.exist");
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("exist");
+		});
+
+		it("expanded empty search field button accessibility", () => {
+			cy.mount(<SearchField placeholder="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon]")
+				.shadow()
+				.find("svg")
+				.as("search-icon");
+
+			cy.get("@search-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_SEARCH_ICON.defaultText);
+			cy.get("@search-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_ICON.defaultText);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find(".ui5-search-field-root")
+				.should("have.attr", "role", "search");
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.should("have.attr", "role", "searchbox");
+		});
+
+		it("expanded search field button accessibility", () => {
+			cy.mount(<SearchField value="text"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon]")
+				.shadow()
+				.find("svg")
+				.as("search-icon");
+
+			cy.get("@search-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_SEARCH_ICON.defaultText);
+			cy.get("@search-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SEARCH_ICON.defaultText);
+		});
+	});
+
+	describe("Expanded Search Field with clear icon", () => {
+		it("clear icon should not be visible when input value is empty", () => {
+			cy.mount(<SearchField placeholder="test" showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.should("not.exist");
+		});
+
+		it("clear icon should be visible when input value is not empty", () => {
+			cy.mount(<SearchField value="test" showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.should("exist");
+		});
+
+		it("clear icon accessibility", () => {
+			cy.mount(<SearchField value="test" showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.shadow()
+				.find("svg")
+				.as("clear-icon");
+
+			cy.get("@clear-icon")
+				.find("title")
+				.should("contain.text", SEARCH_FIELD_CLEAR_ICON.defaultText);
+			cy.get("@clear-icon")
+				.should("have.attr", "aria-label", SEARCH_FIELD_CLEAR_ICON.defaultText);
+		});
+	});
+
+	describe("Events", () => {
+		it("fires search event on Enter", () => {
+			cy.mount(<SearchField value="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("Enter");
+
+			cy.get("@searched")
+				.should("have.been.calledOnce");
+		});
+
+		it("fires search event search icon click", () => {
+			cy.mount(<SearchField value="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='search']")
+				.realClick();
+
+			cy.get("@searched")
+				.should("have.been.calledOnce");
+		});
+
+		it("should not fire search event when value is empty", () => {
+			cy.mount(<SearchField></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-search", cy.stub().as("searched"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("Enter");
+
+			cy.get("@searched")
+				.should("not.be.called");
+		});
+
+		it("fires input event on typing", () => {
+			cy.mount(<SearchField></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-input", cy.stub().as("input"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("input")
+				.realClick();
+
+			cy.get("@searchfield")
+				.should("be.focused");
+
+			cy.get("@searchfield")
+				.realPress("a")
+				.realPress("b")
+				.realPress("c");
+
+			cy.get("@input")
+				.should("have.been.calledThrice");
+		});
+
+		it("fires input event on clear icon press", () => {
+			cy.mount(<SearchField value="test" showClearIcon={true}></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-input", cy.stub().as("input"));
+				});
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-icon][name='decline']")
+				.realClick();
+
+			cy.get("@input")
+				.should("have.been.calledOnce");
+		});
+	});
+
+	describe("Scoped Search Field", () => {
+		it("ui5-select should not be rendered on Default Search Field", () => {
+			cy.mount(<SearchField value="test"></SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-select]")
+				.should("not.exist");
+		});
+
+		it("ui5-select accessibility", () => {
+			cy.mount(
+				<SearchField value="test">
+					<SearchScope text="Apps" slot="scopes"></SearchScope>
+				</SearchField>
+			);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.shadow()
+				.find("[role='combobox']")
+				.should("have.attr", "aria-label", SEARCH_FIELD_SCOPE_SELECT_LABEL.defaultText);
+
+			cy.get("@scope")
+				.shadow()
+				.find(".ui5-select-root")
+				.should("have.attr", "title", SEARCH_FIELD_SCOPE_SELECT_LABEL.defaultText);
+		});
+
+		it("Two options should be rendered in the scope", () => {
+			cy.mount(<SearchField value="test">
+				<SearchScope text="Apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.find("[ui5-option]")
+				.should("have.length", 2);
+		});
+
+		it("scope-change event should be fired, when a scope option is selected", () => {
+			cy.mount(<SearchField value="test">
+				<SearchScope text="Apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.then(searchfield => {
+					searchfield.get(0).addEventListener("ui5-scope-change", cy.stub().as("scopeChanged"));
+				});
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.realClick();
+
+			cy.get("@scope")
+				.realPress("ArrowDown");
+
+			cy.get("@scope")
+				.realPress("Enter");
+
+			cy.get("@scopeChanged")
+				.should("have.been.calledOnce");
+		});
+	});
+});