diff --git a/packages/fiori/cypress/specs/ProductSwitch.cy.tsx b/packages/fiori/cypress/specs/ProductSwitch.cy.tsx
index 16f1a40e1fab..d904834b042d 100644
--- a/packages/fiori/cypress/specs/ProductSwitch.cy.tsx
+++ b/packages/fiori/cypress/specs/ProductSwitch.cy.tsx
@@ -48,4 +48,86 @@ describe("List - getFocusDomRef Method", () => {
expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef());
});
});
-});
\ No newline at end of file
+});
+
+describe("ProductSwitch general interaction", () => {
+ it("tests 3-column desktop layout", () => {
+ cy.mount(
+
+
+
+
+
+
+ );
+
+ 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(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ 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(
+
+
+
+
+
+
+ );
+
+ 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(
+
+
+
+
+ );
+
+ cy.get("[ui5-product-switch]")
+ .shadow()
+ .find(".ui5-product-switch-root")
+ .should("have.css", "justify-content", "center")
+ .should("have.css", "align-items", "center");
+ });
+});
diff --git a/packages/fiori/cypress/specs/ProductSwitchItem.cy.tsx b/packages/fiori/cypress/specs/ProductSwitchItem.cy.tsx
new file mode 100644
index 000000000000..a4aea10ca80a
--- /dev/null
+++ b/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(
+
+ );
+
+ 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(
+
+ );
+
+ cy.get("[ui5-product-switch-item]")
+ .shadow()
+ .find(".ui5-product-switch-item-root")
+ .should("have.attr", "role", "listitem");
+ });
+});
\ No newline at end of file
diff --git a/packages/fiori/test/specs/ProductSwitch.spec.js b/packages/fiori/test/specs/ProductSwitch.spec.js
deleted file mode 100644
index f34f161f062e..000000000000
--- a/packages/fiori/test/specs/ProductSwitch.spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { assert } from "chai";
-
-describe("ProductSwitch general interaction", async () => {
- before(async () => {
- await browser.url(`test/pages/ProductSwitch.html`);
- });
-
- it("tests desktopColumns attribute", async () => {
- const productSwitchFourColumn = await browser.$("#productSwitchFourColumn");
- const productSwitchThreeColumn = await browser.$("#productSwitchThreeColumn");
- const threeColumnPSItemCount = (await productSwitchThreeColumn.getProperty("items")).length;
- const fourColumnPSItemCount = (await productSwitchFourColumn.getProperty("items")).length;
- const fourColumnPSAttrValue = parseInt(await productSwitchFourColumn.getAttribute("desktop-columns"));
- const threeColumnPSAttrValue = parseInt(await productSwitchThreeColumn.getAttribute("desktop-columns"));
-
- assert.isAbove(fourColumnPSItemCount, 6, "more than 6 items.");
- assert.strictEqual(fourColumnPSAttrValue, 4, "product switch should have 4 columns.");
-
- assert.isAtMost(threeColumnPSItemCount, 6, "6 items or less.");
- assert.strictEqual(threeColumnPSAttrValue, 3, "product switch should have 3 columns.");
- });
-});
-
-describe("ARIA attributes", () => {
- before(async () => {
- await browser.url(`test/pages/ProductSwitch.html`);
- });
-
- it ("role and aria-label set correctly", async () => {
- const productSwitch = await browser.$("#productSwitchFourColumn");
- const productSwitchRoot = await productSwitch.shadow$(".ui5-product-switch-root");
-
- assert.strictEqual(await productSwitchRoot.getAttribute("role"), "list", "should have role list");
- assert.strictEqual(await productSwitchRoot.getAttribute("aria-label"), "Products", "aria-label reference is correct");
- });
-});
-
-describe("ProductSwitch styles", async () => {
- before(async () => {
- await browser.url(`test/pages/ProductSwitch.html`);
- });
-
- it("tests root element inherit styles", async () => {
- const productSwitch = await browser.$("#productSwitchFlex");
- const productSwitchRoot = await productSwitch.shadow$(".ui5-product-switch-root");
- const justifyContent = await productSwitchRoot.getCSSProperty("justify-content");
- const alignItems = await productSwitchRoot.getCSSProperty("align-items");
-
- assert.strictEqual(justifyContent.value, "center", "style is inherited");
- assert.strictEqual(alignItems.value, "center", "style is inherited");
- });
-});
\ No newline at end of file
diff --git a/packages/fiori/test/specs/ProductSwitchItem.spec.js b/packages/fiori/test/specs/ProductSwitchItem.spec.js
deleted file mode 100644
index fc4eac76be3f..000000000000
--- a/packages/fiori/test/specs/ProductSwitchItem.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { assert } from "chai";
-
-describe("ProductSwitchItem general interaction", async () => {
- before(async () => {
- await browser.url(`test/pages/ProductSwitchItem.html`);
- });
-
- it("tests rendering", async () => {
- const productSwitchItem = await browser.$("#productSwitchItem");
-
- assert.ok(await productSwitchItem.shadow$(".ui5-product-switch-item-icon"), "Icon is rendered.");
- assert.ok(await productSwitchItem.shadow$(".ui5-product-switch-item-title"), "Title is rendered.");
- assert.ok(await productSwitchItem.shadow$(".ui5-product-switch-item-subtitle"), "SubTitle is rendered.");
- });
-});
-
-describe("ARIA attributes", () => {
- it("items role set correctly", async () => {
- const productSwitchItem = await browser.$("#productSwitchItem");
- const root = await productSwitchItem.shadow$(".ui5-product-switch-item-root");
- const role = await root.getAttribute("role");
- assert.strictEqual(role, "listitem", "should have role listitem");
- });
-});
\ No newline at end of file