@sapudex/web-components 0.226.0 → 2.1.0

package/cypress/specs/Slider.cy.tsx

@@ -0,0 +1,24 @@
+import UDExSlider from "../../src/Slider.js";
+
+const defaultSlider = <UDExSlider value={2} max={20} step={4} showTooltip></UDExSlider>
+const sliderWithTicks = <UDExSlider value={10} max={20} step={4} showTickmarks labelInterval={2}></UDExSlider>
+
+describe("Slider component", () => {
+
+  it("is correctly rendered", () => {
+    cy.mount(defaultSlider)
+    cy.get("[udex-slider]").shadow().find(".ui5-slider-root").should("exist")
+  });
+
+  it("shows tickmarks when specified", () => {
+    cy.mount(sliderWithTicks)
+    cy.get("[udex-slider]").shadow().find(".ui5-slider-labels").find("li").should("have.length", 3)
+  });
+
+  it("shows tooltip when clicking on handle", () => {
+    cy.mount(defaultSlider)
+    cy.get("[udex-slider]").shadow().find(".ui5-slider-handle").realHover().then(() => {
+      cy.get("[udex-slider]").shadow().find(".ui5-slider-tooltip").should("be.visible").and("have.text", "2")
+    })
+  });
+});

package/cypress/specs/StatusBadge.cy.tsx

@@ -0,0 +1,28 @@
+import UDExStatusBadge from "../../src/StatusBadge.js"
+
+describe("StatusBadge", () => {
+  it("renders information badge by default", () => {
+    cy.mount(<UDExStatusBadge></UDExStatusBadge>)
+    cy.get("[udex-status-badge]").shadow().find("ui5-icon").should("have.attr", "name", "information")
+  });
+
+  it("renders error badge",  () => {
+    cy.mount(<UDExStatusBadge valueState="Error"></UDExStatusBadge>)
+    cy.get("[udex-status-badge]").shadow().find("ui5-icon").should("have.attr", "name", "error")
+  });
+
+  it("renders warning badge", () => {
+    cy.mount(<UDExStatusBadge valueState="Warning"></UDExStatusBadge>)
+    cy.get("[udex-status-badge]").shadow().find("ui5-icon").should("have.attr", "name", "alert")
+  });
+
+  it("renders success badge", () => {
+    cy.mount(<UDExStatusBadge valueState="Success"></UDExStatusBadge>)
+    cy.get("[udex-status-badge]").shadow().find("ui5-icon").should("have.attr", "name", "sys-enter-2")
+  });
+
+  it("renders edit badge", () => {
+    cy.mount(<UDExStatusBadge valueState="Edit"></UDExStatusBadge>)
+    cy.get("[udex-status-badge]").shadow().find("ui5-icon").should("have.attr", "name", "edit")
+  });
+});

package/cypress/specs/StatusMessage.cy.tsx

@@ -0,0 +1,29 @@
+import UDExStatusMessage from "../../src/StatusMessage.js";
+
+describe("StatusMessage", () => {
+  
+  it("tests if supporting text is rendered", () => {
+    cy.mount(<UDExStatusMessage supportingText="Supporting text"></UDExStatusMessage>)
+    cy.get("[udex-status-message]").shadow().find(".udex-status-message").should("have.text", "Supporting text")
+  });
+
+  it("renders standard status by default", () => {
+    cy.mount(<UDExStatusMessage></UDExStatusMessage>)
+    cy.get("[udex-status-message]").shadow().find("ui5-icon").should("not.exist")
+  });
+  
+  it("renders error status", () => {
+    cy.mount(<UDExStatusMessage valueState="Error"></UDExStatusMessage>)
+    cy.get("[udex-status-message]").shadow().find("ui5-icon").should("have.attr", "name", "error")
+  });
+
+  it("renders warning status", () => {
+    cy.mount(<UDExStatusMessage valueState="Warning"></UDExStatusMessage>)
+    cy.get("[udex-status-message]").shadow().find("ui5-icon").should("have.attr", "name", "alert")
+  });
+
+  it("renders success status", () => {
+    cy.mount(<UDExStatusMessage valueState="Success"></UDExStatusMessage>)
+    cy.get("[udex-status-message]").shadow().find("ui5-icon").should("have.attr", "name", "accept")
+  });
+});

package/cypress/specs/Switch.cy.tsx

@@ -0,0 +1,52 @@
+import UDExSwitch from "../../src/Switch.js";
+
+
+const defaultSwitch = <UDExSwitch></UDExSwitch>
+const switchWithAttributes = <UDExSwitch label="Label" tooltip="tooltip" accessibleName="test" checked disabled></UDExSwitch>
+
+describe("Switch", () => {
+  it("renders label element if label attribute is provided", () => {
+    cy.mount(switchWithAttributes)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__label").should("have.visible")
+  });
+
+  it("sets title attribute if tooltip attribute is provided", () => {
+    cy.mount(switchWithAttributes)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("have.attr", "title", "tooltip")
+  });
+
+  it("sets aria-disabled attribute to false by default", () => {
+    cy.mount(defaultSwitch)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("not.have.attr", "aria-disabled")
+  });
+
+  it("sets aria-disabled attribute to true if disabled attribute is provided", () => {
+    cy.mount(switchWithAttributes)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("have.attr", "aria-disabled")
+  });
+
+  it("sets aria-checked attribute to false by default", () => {
+    cy.mount(defaultSwitch)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("have.attr", "aria-checked", "false")
+  });
+
+  it("sets aria-checked attribute to true if checked attribute is proided", () => {
+    cy.mount(switchWithAttributes)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("have.attr", "aria-checked")
+  });
+
+  it("sets aria-label attribute to the value of accessibleName attribute", () => {
+    cy.mount(switchWithAttributes)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").should("have.attr", "aria-label", "test")
+  });
+
+  it("sets aria-checked attribute to true after click", () => {
+    cy.mount(defaultSwitch)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").click().should("have.attr", "aria-checked", "true")
+  });
+
+  it("sets aria-checked attribute to false after click if switch was already checked", () => {
+    cy.mount(defaultSwitch)
+    cy.get("[udex-switch]").shadow().find(".udex-switch__container").click().click().should("have.attr", "aria-checked", "false")
+  });;
+});

package/cypress/specs/Table.cy.tsx

@@ -0,0 +1,361 @@
+import UDExTable from "../../src/Table.js";
+import UDExTableHeaderRow from "../../src/TableHeaderRow.js";
+import UDExTableHeaderCell from "../../src/TableHeaderCell.js";
+import UDExTableRow from "../../src/TableRow.js";
+import UDExTableGroupRow from "../../src/TableGroupRow.js";
+import UDExTableCell from "../../src/TableCell.js";
+import UDExButton from "../../src/Button.js";
+import UDExLink from "../../src/Link.js";
+import UDExRatingIndicator from "../../src/RatingIndicator.js";
+
+const defaultTable = <UDExTable
+    id="table"
+    sticky-header
+    heading="Microsoft Surface and Apple MacBook"
+    accessibleName="table devices"
+    maxHeight="200px">
+      <UDExTableHeaderRow id="tableHeaderRow" slot="headerRow">
+        <UDExTableHeaderCell
+          id="tableHeaderCell"
+          icon-start="sap-icon://bell"
+          icon-end="sap-icon://accessibility"
+          highlighted>
+          Product
+        </UDExTableHeaderCell>
+        <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+        <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+        <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+      </UDExTableHeaderRow>
+      <UDExTableRow id="table-row">
+        <UDExTableCell id="table-cell" icon="sap-icon://bell">
+          <i><UDExLink id="link-row1">SURFACE PRO4</UDExLink></i>
+        </UDExTableCell>
+        <UDExTableCell><UDExButton id="button-row1" size="Small">Intel Core M3, i5</UDExButton></UDExTableCell>
+        <UDExTableCell>12.3 inches</UDExTableCell>
+        <UDExTableCell>2736 x 1824</UDExTableCell>
+        <UDExTableCell>4GB, 8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator id="rating-row1" class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><UDExButton id="button-row2" size="Small">SURFACE PRO3</UDExButton></UDExTableCell>
+        <UDExTableCell><UDExLink id="link-row2">Intel Core i3, Core i7</UDExLink></UDExTableCell>
+        <UDExTableCell>12 inches</UDExTableCell>
+        <UDExTableCell>2160 x 1440</UDExTableCell>
+        <UDExTableCell>4GB, 8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="sale">$799</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>1440 x 900</UDExTableCell>
+        <UDExTableCell>8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>2560 x 1600</UDExTableCell>
+        <UDExTableCell>8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$1,299</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableGroupRow
+        id="table-group-row"
+        group-title="Apple MacBook"
+        collapsible>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>2560 x 1600</UDExTableCell>
+          <UDExTableCell>8GB, 16GB</UDExTableCell>
+          <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$1,299</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+      </UDExTableGroupRow>
+      <UDExButton size="Small" icon="sap-icon://retail-store" design="Secondary" slot="actions">Back to Store</UDExButton>
+      <UDExButton size="Small" design="Tertiary" icon="sap-icon://cart" slot="actions">Cart</UDExButton>
+      <div class="footnotes" slot="footnotes">
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Microsoft Surface</UDExLink>: It's a line of touchscreen-based personal computers and interactive whiteboards designed and developed by Microsoft.</p>
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Apple MacBook</UDExLink>: It's known for its sleek design, high-quality performance, and integration with the macOS operating system.</p>
+      </div>
+  </UDExTable>
+
+const noDataTableDefault = <UDExTable
+    id="table-no-data-default">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const noDataTable = <UDExTable
+    id="table-no-data">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+      <p id="customNoData" slot="noData">No custom data found</p>
+  </UDExTable>
+
+
+const loadingTable =  <UDExTable loading={true}
+    id="table-loading">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const customWidthTable =  <UDExTable customColumns="50px 50px 50px"
+    id="table-custom-width">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell1</UDExTableCell>
+      <UDExTableCell>Cell2</UDExTableCell>
+      <UDExTableCell>Cell3</UDExTableCell>
+    </UDExTableRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell3</UDExTableCell>
+      <UDExTableCell>Cell4</UDExTableCell>
+      <UDExTableCell>Cell5</UDExTableCell>
+    </UDExTableRow>
+  </UDExTable>
+
+
+describe("Table", () => {
+  beforeEach(() => {
+   cy.mount(defaultTable)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#table").shadow().find(".udex-table").should("be.visible")
+  });
+
+  it("renders rows slot",  () => {
+    cy.get("#table").shadow().find("slot").should("have.length", 4)
+  });
+
+  it("renders header row slot",  () => {
+    cy.get("#table").shadow().find('slot[name="headerRow"]').should("have.length", 1)
+  });
+
+  it("renders actions slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-toolbar__actions > slot[name="actions"]').should("have.length", 1)
+  });
+
+  it("renders footnotes slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-footnotes > slot[name="footnotes"]').should("have.length", 1)
+  });
+
+  it("renders default no data content", () => {
+    cy.mount(noDataTableDefault)
+    cy.get("#table-no-data-default").shadow().find(".udex-table__no-data").should("have.text", "No data found")
+  });
+
+  it("renders custom no data slot", () => {
+    cy.mount(noDataTable)
+    cy.get("#table-no-data").shadow().find('.udex-table__no-data > slot[name="noData"]').should("have.length", 1)
+    expect(cy.get("#table-no-data").find("#customNoData").should("be.visible"))
+  });
+
+  it("renders header",  () => {
+    cy.get("#table").shadow().find(".udex-table-toolbar__title").should("have.text", "Microsoft Surface and Apple MacBook")
+  });
+
+  it("tests render the right maximum height",  () => {
+    cy.get("#table").shadow().find(".udex-table").then($tableWrap => {
+      const { maxHeight: tableMaxHeight } = window.getComputedStyle($tableWrap[0], "max-height")
+      expect(tableMaxHeight).eqls("200px")
+    })
+  });
+
+  it("tests render the sticky header",  () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").then($tableHeaderWrap => {
+      const { position: tableHeaderPosition } = window.getComputedStyle($tableHeaderWrap[0], "position")
+      expect(tableHeaderPosition).eqls("sticky")
+    })
+  });
+
+  it("renders the loading indicator", () => {
+    cy.mount(loadingTable)
+    cy.get("#table-loading").shadow().find("ui5-busy-indicator").should("be.visible")
+  });
+
+  it("renders accessible name",  () => {
+    cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
+  });
+
+  it("renders the right amount of header rows",  () => {
+    cy.get("#table").find("udex-table-header-row").should("have.length", 1)
+  });
+
+  it("renders correct number of table-header-row-cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of table-row-cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of rows of group", () => {
+   cy.get("#table").find("#table-group-row").find("udex-table-row").should("have.length", 3)
+  });
+
+  it("renders correct title of group button", () => {
+    cy.get("#table").find("#table-group-row").shadow().find(".udex-table-grow-btn").should("have.text", "Apple MacBook")
+  });
+
+  it("test hidden rows of group", () => {
+    cy.get("#table").find("#table-group-row").find(".udex-table-grow-rows").should("not.exist")
+  });
+
+  it("renders correct content in the header cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").first().should("have.text", "Product")
+  });
+
+  it("renders correct content in the cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").first().should("have.text", "SURFACE PRO4")
+  });
+
+  it("renders icons in the header cell", () => {
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").first().should("have.attr", "name", "sap-icon://bell")
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").eq(1).should("have.attr", "name", "sap-icon://accessibility")
+  });
+
+  it("renders icons in the cell", () => {
+    cy.get("#table").find("#table-cell").shadow().find(".udex-table-cell__icon").should("have.attr", "name", "sap-icon://bell")
+  });
+
+  it("renders columns with custom width when specified",  () => {
+    cy.mount(customWidthTable)
+    cy.get("#table-custom-width").find("udex-table-row").find("udex-table-cell").then($tableCell => {
+      const { width: cellWidth } = window.getComputedStyle($tableCell[0], "width")
+      expect(cellWidth).eqls("50px")
+    })
+  });
+
+  it("moves focus to previous interactive element after \"Arrow Left\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(6).find("#rating-row1").click({force: true}).realPress("{leftarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element after \"Arrow Right\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{rightarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element below after \"Arrow Down\" press",  () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{downarrow}")
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element above after \"Arrow Up\" press",  () => {
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").click({force: true}).realPress("{uparrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").shadow().find("a").then($link => {
+      const { outlineColor } = window.getComputedStyle($link[0]);
+      expect(outlineColor).eqls("rgb(34, 53, 72)")
+    })
+  });
+});

package/cypress/specs/Tag.cy.tsx

@@ -0,0 +1,122 @@
+import UDExTag from "../../src/Tag.js";
+import "@ui5/webcomponents-icons/decline.js";
+import "@ui5/webcomponents-icons/accept.js";
+
+const defaultTag = <UDExTag id="tag" text="Default"></UDExTag>
+const textTag = <UDExTag id="tag-text" text="Default" design="Text"></UDExTag>
+const mediumTag = <UDExTag id="tag-medium" text="Default" size="Medium"></UDExTag>
+const whiteTag = <UDExTag id="tag-white" text="White" design="White"></UDExTag>
+const outlineTag =<UDExTag id="tag-outlined" text="Outlined" design="Outlined"></UDExTag>
+const iconTag = <UDExTag id="tag-icon" text="Tag text" icon="decline"></UDExTag>
+const startIconTag = <UDExTag id="tag-icon-start" text="Tag text" icon="decline" iconPlacement="Start"></UDExTag>
+const readonlyTag = <UDExTag id="tag-readonly" text="Tag text" icon="accept" readOnly></UDExTag>
+const nonselectableTag = <UDExTag id="tag-nonselectable" text="Non selectable" non-selectable></UDExTag>
+const nonselectableIconTag = <UDExTag id="tag-nonselectable-icon" text="Non selectable" icon="decline" non-selectable></UDExTag>
+const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.com"></UDExTag>
+
+describe("Tag", () => {
+  it("is rendered", () => {
+    cy.mount(<UDExTag></UDExTag>)
+    cy.get("[udex-tag]").should("exist")
+  });
+
+  it("icon is rendered in the end by default", () => {
+    cy.mount(iconTag)
+    cy.get("#tag-icon").shadow().find(".udex-tag__icon").should("be.visible")
+  });
+
+  it("icon is rendered in the start when iconPlacement is Start", () => {
+    cy.mount(startIconTag)
+    cy.get("#tag-icon-start").shadow().find(".udex-tag__icon--start").should("be.visible")
+  });
+
+  it("readonly attribute is set", () => {
+    cy.mount(readonlyTag)
+    cy.get('#tag-readonly').shadow().find(".udex-tag--readonly").should("be.visible")
+  });
+
+  it("non-selectable attribute is set", () => {
+    cy.mount(nonselectableTag)
+    cy.get('#tag-nonselectable').shadow().find(".udex-tag--nonselectable").should("be.visible")
+  });
+
+  it("design is grey by default", () => {
+    cy.mount(defaultTag)
+    cy.get("#tag").shadow().find(".udex-tag-grey").should("be.visible")
+  });
+
+  it("white design is set", () => {
+    cy.mount(whiteTag)
+    cy.get("#tag-white").shadow().find(".udex-tag-white").should("be.visible")
+  });
+
+  it("text design is set", () => {
+    cy.mount(textTag)
+    cy.get("#tag-text").shadow().find(".udex-tag-text").should("be.visible")
+  });
+
+  it("oultined design is set", () => {
+    cy.mount(outlineTag)
+    cy.get("#tag-outlined").shadow().find(".udex-tag-outlined").should("be.visible")
+  });
+
+  it("size is Small by default", () => {
+    cy.mount(defaultTag)
+    cy.get("#tag").shadow().find(".udex-tag--small").should("be.visible")
+  });
+
+  it("medium size is set", () => {
+    cy.mount(mediumTag)
+    cy.get("#tag-medium").shadow().find(".udex-tag--medium").should("be.visible")
+  });
+
+  it("tag is selected on click", () => {
+    cy.mount(defaultTag)
+    cy.get("#tag").click().shadow().find(".udex-tag--selected").should("be.visible")
+  });
+
+  it("selected tag emits event", () => {
+    cy.mount(defaultTag);
+
+    cy.get("#tag").then(($el) => {
+      const handler = cy.stub().as("selectionChange");
+      $el[0].addEventListener("selectionChange", handler);
+    });
+
+    cy.get("#tag").click();
+
+    cy.get("@selectionChange").should("have.been.called");
+  });
+
+
+  it("tag icon emits event", () => {
+    cy.mount(iconTag);
+
+    cy.get("#tag-icon").then(($el) => {
+      const handler = cy.stub().as("iconClick");
+      $el[0].addEventListener("iconClick", handler);
+    });
+
+    cy.get("#tag-icon").shadow().find(".udex-tag__icon").click();
+
+    cy.get("@iconClick").should("have.been.called");
+  });
+
+
+  it("non-selectable tag can't be selected", () => {
+    cy.mount(nonselectableTag)
+    const nonSelectableTag = cy.get("#tag-nonselectable")
+    nonSelectableTag.click()
+    nonSelectableTag.shadow().find(".udex-tag--selected").should("not.exist")
+  });
+
+  it("icon is clickable in the non-selectable tag", () => {
+    cy.mount(nonselectableIconTag)
+    cy.get("#tag-nonselectable-icon").shadow().find(".udex-tag__btn-icon").click()
+  });
+
+  it("tests if tag with link is correctly rendered", () => {
+    cy.mount(linkTag)
+    cy.get("#tag-link").shadow().find("a").should("be.visible")
+  });
+});