Merge branch 'mcbgrouping' of github.com:SAP/ui5-webcomponents into m…

…cbgrouping
SAP · May 26, 2022 · 6b2a850 · 6b2a850
2 parents dfc11a2 + 480466d
commit 6b2a850
Showing 1 changed file with 84 additions and 0 deletions.
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1362,6 +1362,90 @@ describe("MultiComboBox general interaction", () => {
 			await input.keys("ArrowDown");
 
 
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+			await groupItem.keys("Enter");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated");
+
+			await groupItem.keys("Space");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated)");
+
+			await groupItem.keys("ArrowUp");
+
+			assert.equal(await groupItem.getProperty("focused"), false, "The first group header should be focused");
+			assert.equal(await mcb.getProperty("focused"), true, "The first group header should be focused");
+		});
+	});
+
+	describe("Grouping", () => {
+		it ("Tests group filtering", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			let listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			await arrow.click();
+
+			assert.strictEqual(groupItems.length, 3, "Group items should be 3");
+			assert.strictEqual(listItems.length, 12, "Items should be 12");
+
+			await input.keys("B");
+
+			popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			assert.strictEqual(groupItems.length, 1, "Filtered group items should be 1");
+			assert.strictEqual(listItems.length, 1, "Filtered items should be 1");
+
+			await input.keys("Backspace");
+			await input.keys(['E', 'u', 'r', 'o', 'p', 'e']);
+
+			assert.equal(await popover.getProperty("opened"), false, "Popover should not be open");
+		});
+
+		it ("Tests group item focusability", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+		});
+
+		it ("Group header keyboard handling", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+
 			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
 			await groupItem.keys("Enter");