chore(ui5-product-switch): migrate wdio tests to cypress (#11907)

Convert ProductSwitch and ProductSwitchItem tests to Cypress component tests while maintaining test coverage and functionality parity with original specs.

JIRA: BGSOFUIPIRIN-6816

Author: NakataCode

packages/fiori/cypress/specs/ProductSwitch.cy.tsx

@@ -48,4 +48,86 @@ describe("List - getFocusDomRef Method", () => {
 				expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef());
 			});
 	});
-});
+});
+
+describe("ProductSwitch general interaction", () => {
+	it("tests 3-column desktop layout", () => {
+		cy.mount(
+			<ProductSwitch desktopColumns={3}>
+				<ProductSwitchItem titleText="Home" subtitleText="Central Home" icon="home"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Analytics Cloud" subtitleText="Analytics Cloud" icon="business-objects-experience"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Catalog" subtitleText="Ariba" icon="contacts"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Guided Buying" icon="credit-card"></ProductSwitchItem>
+			</ProductSwitch>
+		);
+
+		cy.get("[ui5-product-switch]")
+			.should("have.attr", "desktop-columns", "3")
+			.invoke("prop", "items")
+			.should("have.length", 4)
+			.should("have.length.at.most", 6);
+	});
+
+	it("tests 4-column desktop layout", () => {
+		cy.mount(
+			<ProductSwitch desktopColumns={4}>
+				<ProductSwitchItem titleText="Home" subtitleText="Central Home" icon="home"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Analytics Cloud" subtitleText="Analytics Cloud" icon="business-objects-experience"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Catalog" subtitleText="Ariba" icon="contacts"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Guided Buying" icon="credit-card"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Strategic Procurement" icon="cart-3"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Travel & Expense" subtitleText="Concur" icon="flight"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Vendor Management" subtitleText="Fieldglass" icon="shipping-status"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Human Capital Management" icon="customer"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Sales Cloud" subtitleText="Sales Cloud" icon="sales-notification"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Commerce Cloud" subtitleText="Commerce Cloud" icon="retail-store"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Marketing Cloud" subtitleText="Marketing Cloud" icon="marketing-campaign"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Service Cloud" icon="family-care"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Customer Data Cloud" icon="customer-briefing"></ProductSwitchItem>
+				<ProductSwitchItem titleText="S/4HANA" icon="batch-payments"></ProductSwitchItem>
+			</ProductSwitch>
+		);
+
+		cy.get("[ui5-product-switch]")
+			.should("have.attr", "desktop-columns", "4")
+			.invoke("prop", "items")
+			.should("have.length", 14)
+			.should("have.length.above", 6);
+	});
+});
+
+describe("ProductSwitch ARIA attributes", () => {
+	it("role and aria-label set correctly", () => {
+		cy.mount(
+			<ProductSwitch>
+				<ProductSwitchItem titleText="Home" subtitleText="Central Home" icon="home"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Analytics Cloud" subtitleText="Analytics Cloud" icon="business-objects-experience"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Catalog" subtitleText="Ariba" icon="contacts"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Guided Buying" icon="credit-card"></ProductSwitchItem>
+			</ProductSwitch>
+		);
+
+		cy.get("[ui5-product-switch]")
+			.shadow()
+			.find(".ui5-product-switch-root")
+			.should("have.attr", "role", "list")
+			.should("have.attr", "aria-label", "Products");
+	});
+});
+
+describe("ProductSwitch styles", () => {
+	it("tests root element inherit styles", () => {
+		cy.mount(
+			<ProductSwitch style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+				<ProductSwitchItem titleText="Home" subtitleText="Central Home" icon="home"></ProductSwitchItem>
+				<ProductSwitchItem titleText="Analytics Cloud" subtitleText="Analytics Cloud" icon="business-objects-experience"></ProductSwitchItem>
+			</ProductSwitch>
+		);
+
+		cy.get("[ui5-product-switch]")
+			.shadow()
+			.find(".ui5-product-switch-root")
+			.should("have.css", "justify-content", "center")
+			.should("have.css", "align-items", "center");
+	});
+});

packages/fiori/cypress/specs/ProductSwitchItem.cy.tsx

@@ -0,0 +1,41 @@
+import ProductSwitchItem from "../../src/ProductSwitchItem.js";
+
+describe("ProductSwitchItem general interaction", () => {
+	it("tests rendering", () => {
+		cy.mount(
+			<ProductSwitchItem 
+				titleText="Test Title" 
+				subtitleText="Test Subtitle" 
+				icon="home"
+			></ProductSwitchItem>
+		);
+
+		cy.get("[ui5-product-switch-item]")
+			.shadow()
+			.find(".ui5-product-switch-item-icon")
+			.should("exist");
+
+		cy.get("[ui5-product-switch-item]")
+			.shadow()
+			.find(".ui5-product-switch-item-title")
+			.should("exist");
+
+		cy.get("[ui5-product-switch-item]")
+			.shadow()
+			.find(".ui5-product-switch-item-subtitle")
+			.should("exist");
+	});
+});
+
+describe("ProductSwitchItem ARIA attributes", () => {
+	it("items role set correctly", () => {
+		cy.mount(
+			<ProductSwitchItem titleText="Test Title"></ProductSwitchItem>
+		);
+
+		cy.get("[ui5-product-switch-item]")
+			.shadow()
+			.find(".ui5-product-switch-item-root")
+			.should("have.attr", "role", "listitem");
+	});
+});