@sapudex/web-components 0.225.0 → 2.0.0

package/.eslintignore

@@ -5,6 +5,8 @@ dist
 test
 src/generated
 jsdoc-dist
-.eslintrc.js
-package-scripts.js
-bundle.esm.js
+.eslintrc.cjs
+package-scripts.cjs
+bundle.esm.js
+cypress/*
+cypress.config.*

package/.npsrc.json

@@ -0,0 +1,3 @@
+{
+  "config": "./package-scripts.cjs"
+}

package/config/{dev-server.js → dev-server.mjs}

@@ -1,7 +1,7 @@
-const fs = require("fs/promises");
-const { createServer } = require('vite');
-const yargs = require('yargs/yargs')
-const { hideBin } = require('yargs/helpers')
+import fs from "fs/promises";
+import { createServer } from 'vite';
+import yargs from 'yargs';
+import { hideBin }  from 'yargs/helpers';
 
 const argv = yargs(hideBin(process.argv))
 	.alias("c", "config")
@@ -13,7 +13,7 @@ const startVite = async (port) => {
 		server: {
 			port: port,
 			strictPort: true,
-			open: false,
+			open: true,
 			host: true,
 		},
 		logLevel: 'info',

package/config/wdio.conf.cjs

@@ -0,0 +1,3 @@
+const config = require("@ui5/webcomponents-tools/components-package/wdio.js");
+
+module.exports = config;

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/fixtures/secondary-navigation-items.ts

@@ -0,0 +1,121 @@
+const navItems = [
+  {
+    "path":"#test1",
+    "mobileLinkTitle":"Secondary Navigation 1 mobile",
+    "target":"_self",
+    "title":"Secondary Navigation 1",
+    "items":[
+      {
+        "path":"#secondary_nested_1",
+        "mobileLinkTitle":"string",
+        "target":"_self",
+        "title":"secondary nested 1",
+        "items":[
+          {
+            "path":"#test",
+            "mobileLinkTitle":"string",
+            "target":"_self",
+            "title":"tertiary nested 1",
+          },
+          {
+            "path":"#test",
+            "mobileLinkTitle":"string",
+            "target":"_self",
+            "title":"tertiary nested 2",
+            "items":[
+              {
+                "path":"#test",
+                "mobileLinkTitle":"string",
+                "target":"_self",
+                "title":"quaternary nested 1",
+                "active": true,
+              },
+              {
+                "path":"#test",
+                "mobileLinkTitle":"string",
+                "target":"_self",
+                "title":"quaternary nested 2",
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "path":"#secondary_nested_2",
+        "mobileLinkTitle":"string",
+        "target":"_self",
+        "title":"secondary nested 2",
+      },
+      {
+        "path":"#secondary_nested_3",
+        "mobileLinkTitle":"string",
+        "target":"_self",
+        "title":"secondary nested 3"
+      }
+    ],
+  },
+  {
+    "target":"_self",
+    "title":"Secondary Navigation 2",
+  },
+  {
+    "path":"#test3",
+    "mobileLinkTitle":"Secondary Navigation 3 mobile",
+    "target":"_self",
+    "title":"Secondary Navigation 3"
+  },
+  {
+    "path":"#test4",
+    "mobileLinkTitle":"string",
+    "target":"_self",
+    "title":"Secondary Navigation 4"
+  },
+  {
+    "path":"#test5",
+    "mobileLinkTitle":"string",
+    "target":"_self",
+    "title":"Secondary Navigation 5"
+  },
+  {
+    "path":"#test6",
+    "mobileLinkTitle":"string",
+    "target":"_self",
+    "title":"Secondary Navigation 6"
+  },
+  {
+    "path":"#test7",
+    "mobileLinkTitle":"string",
+    "target":"_self",
+    "title":"Secondary Navigation 7"
+  },
+  {
+    "path":"#test8",
+    "mobileLinkTitle":"string",
+    "target":"_self",
+    "title":"Secondary Navigation 8"
+  }
+];
+
+export const additionalNavItems = [
+  {
+    "path": "#path1",
+    "mobileLinkTitle": "Navigation link 1",
+    "target": "_self",
+    "title": "Navigation link 1"
+  },
+  {
+    "path": "#path2",
+    "mobileLinkTitle": "Navigation link 2",
+    "target": "_self",
+    "title": "Navigation link 2"
+  },
+  {
+    "path": "#path3",
+    "mobileLinkTitle": "Navigation link 3",
+    "target": "_self",
+    "title": "Navigation link 3",
+    "active": true
+  }
+];
+
+export default navItems;

package/cypress/specs/Accordion.cy.tsx

@@ -0,0 +1,142 @@
+import UDExAccordion from "../../src/Accordion.js";
+import UDExAccordionItem from "../../src/AccordionItem.js";
+
+const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionComponent">
+  <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 2" numberBadge="72">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 3" numberBadge="72">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 4" numberBadge="72">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 5" numberBadge="72">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+</UDExAccordion>
+
+describe("Accordion", () => {
+  beforeEach(() => {
+    cy.mount(defaultAccordion)
+  })
+
+  it("is correctly rendered", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion").should("be.visible");
+  });
+
+  it("renders right headline for component", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").should("have.text", "Test headline");
+  });
+
+  it("renders right amount of accordion items", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").should("have.length", 5);
+  });
+
+  it("clicking on expand all btn shows hidden ", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
+
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("be.visible").and("exist")
+    })
+  });
+
+  it("clicking on collapse all btn hides accordion content", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click().click()
+
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("not.be.visible").and("exist")
+    })
+  });
+
+  it("pressing Enter key on expand all btn shows hidden content", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click().realPress("Enter").realPress("Enter")
+
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("be.visible").and("exist")
+    })
+  });
+
+  it("press Enter key on collapse all btn hide accordion content", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").realPress("Enter").realPress("Enter")
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("not.be.visible").and("exist")
+    })
+  });
+
+  it("press Space key on expand all btn shows hidden content work correctly", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click().realPress("Enter").realPress("Enter")
+
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("be.visible").and("exist")
+    })
+  });
+
+  it("press Space key on collapse all btn hide accordion content", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").realPress("Space").realPress("Space")
+
+    const accordionItems = cy.get("[udex-accordion]").find("udex-accordion-item")
+    accordionItems.each($item => {
+      cy.wrap($item).shadow().find(".udex-accordion-item__content").should("not.be.visible").and("exist")
+    })
+  });
+
+  it("click on \"Home\" btn focus first accordion item", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).click().realPress("Home")
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().should("be.focused")
+  });
+
+  it("click on \"End\" btn focus first accordion item", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().click().realPress("End")
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).should("be.focused")
+  });
+
+  it("click on \"Arrow up\" btn move focus on first element if initial element is was the second", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(1).click().realPress("{uparrow}")
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().should("be.focused")
+  });
+
+  it("click on \"Arrow up\" btn move focus on the last element if initial element was the first", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().click().realPress("{uparrow}")
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).should("be.focused")
+  });
+
+  it("click on \"Arrow down\" btn move focus on the second element if initial element was the first", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().click().realPress("{downarrow}")
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(1).should("be.focused")
+  });
+
+  it("click on \"Arrow down\" btn move focus  the first element if initial element was the last ", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(4).click().realPress("{downarrow}")
+    cy.get("[udex-accordion]").find("udex-accordion-item").first().should("be.focused")
+  });
+
+  it("click on \"Tab\" btn move focus to the next element", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(2).click().realPress("Tab")
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(3).should("be.focused")
+  });
+
+  it("click on \"Shift + Tab\" btn move focus to the previouselement", () => {
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(2).click().realPress(["Shift", "Tab"])
+    cy.get("[udex-accordion]").find("udex-accordion-item").eq(1).should("be.focused")
+  });
+
+  it("emit ui5-toggle-items when toggle all btn clicked", () => {
+    const toggleItemsHandler = cy.stub().as("toggleItems")
+    cy.mount(<UDExAccordion onToggleItems={toggleItemsHandler} headline="Test headline" id="accordionComponent">
+      <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+        <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+      </UDExAccordionItem>
+    </UDExAccordion>)
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
+    cy.get("@toggleItems").should("have.been.called")
+  });
+});

package/cypress/specs/AccordionItem.cy.tsx

@@ -0,0 +1,60 @@
+import UDExAccordionItem from "../../src/AccordionItem.js";
+
+const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+    <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+</UDExAccordionItem>
+
+const expandedAccordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72" expanded>
+    <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+</UDExAccordionItem>
+
+describe('AccordionItem', () => {
+
+  beforeEach(() => {
+    cy.mount(accordionItem)
+  })
+
+  it("accordion item has right label", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__title").should("have.text", "Some label for item 172")
+  });
+
+  it("accordion item content not visible by default", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__content").should("exist").and("not.be.visible")
+  });
+
+  it("click on accordion item expand hidden content", () => {
+    cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__content").should("exist").and("be.visible")
+  });
+
+  it("click on accordion item add necessary class and change aria-expanded to true", () => {
+    cy.get("[udex-accordion-item]").click().shadow().find(".udex-accordion-item__header").should("have.attr", "aria-expanded")
+  });
+
+  it("accordion item content visible by default if expanded property is set", () => {
+    cy.mount(expandedAccordionItem)
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__content").should("be.visible")
+  });
+
+  it("can be clicked via keyboard using \"Enter\"", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__header").click().realPress("Enter").realPress("Enter")
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__content").should("exist").and("be.visible")
+  });
+
+  it("can be clicked via keyboard using \"Space\"", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__header").click().realPress("Space").realPress("Space")
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__content").should("exist").and("be.visible")
+  });
+
+  it("has a badge", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("exist").and("be.visible")
+  });
+
+  it("emit accordion-item-focus when item focused", () => {
+    const itemFocusHandler = cy.stub().as("itemFocus")
+    cy.mount(<UDExAccordionItem onAccordionItemFocus={itemFocusHandler} label="Some label for item 1" numberBadge="72">
+        <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+      </UDExAccordionItem>)
+    cy.get("[udex-accordion-item]").click().realPress("Tab")
+    cy.get("@itemFocus").should("have.been.called")
+  });
+});

package/cypress/specs/Avatar.cy.tsx

@@ -0,0 +1,71 @@
+import UDExAvatar from "../../src/Avatar.js";
+
+describe("Avatar", () => {
+  it("renders correctly", () => {
+    cy.mount(<UDExAvatar></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("exist")
+  });
+
+  it("renders icon correctly",  () => {
+    cy.mount(<UDExAvatar icon="employee"></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+
+  it("renders avatar with size S by default",  () => {
+    cy.mount(<UDExAvatar></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "size", "S");
+  });
+
+  it("renders avatar with Circle shape by default",  () => {
+    cy.mount(<UDExAvatar></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "shape", "Circle");
+  });
+
+  it("renders avatar with initials if no icon or image are provided",  () => {
+    cy.mount(<UDExAvatar initials="SM"></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "initials", "SM");
+  });
+
+  it("renders avatar with Accent6 color scheme by default",  () => {
+    cy.mount(<UDExAvatar initials="SM"></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "color-scheme", "Accent6");
+  });
+
+  it("maps and propagates color-scheme attribute correctly",  () => {
+    cy.mount(<UDExAvatar id="tealAvatar" color-scheme="Teal"></UDExAvatar>)
+    cy.get("#tealAvatar").shadow().find("ui5-avatar").should("have.attr", "color-scheme", "Accent7");
+  });
+
+  it("propagates size attribute correctly",  () => {
+    cy.mount(<UDExAvatar initials="SM" size="XL"></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "size", "XL");
+  });
+
+  it("propagates disabled attribute correctly",  () => {
+    cy.mount(<UDExAvatar initials="SM" disabled></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "disabled");
+  });
+
+  it("propagates interactive attribute correctly",  () => {
+    cy.mount(<UDExAvatar initials="SM" interactive></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "interactive");
+  });
+
+  it("propagates notification red dot correctly",  () => {
+    cy.mount(<UDExAvatar size="XS" showAttentionBadge></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find(".udex-avatar").then($avatar => {
+      const avatarStyles = window.getComputedStyle($avatar[0], ":before")
+      expect(avatarStyles.borderRadius).eqls("50%")
+    })
+  });
+
+  it("propagates shape attribute correctly",  () => {
+    cy.mount(<UDExAvatar initials="SM" shape="Square"></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "shape", "Square");
+  });
+
+  it("should not be clickable if interactive and disabled",  () => {
+    cy.mount(<UDExAvatar initials="SM" disabled interactive></UDExAvatar>)
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.be.disabled");
+  });
+});

package/cypress/specs/AvatarGroup.cy.tsx

@@ -0,0 +1,47 @@
+import UDExAvatar from "../../src/Avatar.js";
+import UDExAvatarGroup from "../../src/AvatarGroup.js";
+
+const defaultAvatarGroup = <UDExAvatarGroup>
+    <UDExAvatar initials="SM"></UDExAvatar>
+    <UDExAvatar initials="KZ"></UDExAvatar>
+    <UDExAvatar initials="DK"></UDExAvatar>
+    <UDExAvatar initials="MZ"></UDExAvatar>
+</UDExAvatarGroup>
+
+const individualAvatarGroup = <UDExAvatarGroup type="Individual" id="individual-avatars">
+    <UDExAvatar initials="SM"></UDExAvatar>
+    <UDExAvatar initials="KZ"></UDExAvatar>
+    <UDExAvatar initials="DK"></UDExAvatar>
+    <UDExAvatar initials="MZ"></UDExAvatar>
+</UDExAvatarGroup>
+
+describe("AvatarGroup", () => {
+  beforeEach(() => {
+    cy.mount(defaultAvatarGroup);
+  })
+
+  it("renders correctly", () => {
+    cy.get("[udex-avatar-group]").should("exist")
+  });
+
+  it("renders default avatar group", () => {
+    cy.get("[udex-avatar-group]").find("udex-avatar").then($avatar => {
+      const avatarStyles = window.getComputedStyle($avatar[0]);
+      expect(avatarStyles.marginInlineEnd).eqls("-20px")
+    })
+  });
+
+  it("renders individual avatar group", () => {
+    cy.mount(individualAvatarGroup)
+    cy.get("#individual-avatars").find("udex-avatar").then($avatar => {
+      const avatarStyles = window.getComputedStyle($avatar[0]);
+      expect(avatarStyles.marginInlineEnd).eqls("2px")
+    })
+  });
+
+  it("renders more button for oveflowing avatars", () => {
+    cy.viewport(100, 100)
+    cy.get("[udex-avatar-group]").shadow().find("ui5-button").should("have.text", '+3')
+  });
+});
+

package/cypress/specs/Badge.cy.tsx

@@ -0,0 +1,142 @@
+import UDExBadge from "../../src/Badge.js";
+import "@ui5/webcomponents-icons/employee.js";
+
+const defaultBadge = <UDExBadge id="badge" icon="employee">Default</UDExBadge>
+const iconStartBadge = <UDExBadge id="badge-icon-start" icon="employee" iconPlacement="Start">Default</UDExBadge>
+const numberBadge = <UDExBadge id="badge-number" design="Information" type="Number">72</UDExBadge>
+const numberBadgeRed = <UDExBadge id="badge-number-red" numberDesign="Red" type="Number">72</UDExBadge>
+const numberBadgeNeutral = <UDExBadge id="badge-number-neutral" numberDesign="Neutral" type="Number">72</UDExBadge>
+const smallBadge = <UDExBadge id="badge-small" design="Information" size="Small">Default</UDExBadge>
+const smallNumberBadge = <UDExBadge id="badge-number-small" type="Number" size="Small">Default</UDExBadge>
+const neutralBadge = <UDExBadge id="badge-neutral" design="Neutral">Default</UDExBadge>
+const positiveBadge = <UDExBadge id="badge-positive" design="Positive">Default</UDExBadge>
+const negativeBadge = <UDExBadge id="badge-negative" design="Negative">Default</UDExBadge>
+const warningBadge = <UDExBadge id="badge-warning" design="Warning">Default</UDExBadge>
+
+describe("Badge", () => {
+
+  it("tests if web component is correctly rendered", () => {
+    cy.mount(<UDExBadge>Default</UDExBadge>)
+    cy.get("[udex-badge]")
+      .shadow()
+      .find(".udex-badge")
+      .should("be.visible");
+  });
+
+  it("tests if badge renders content", () => {
+    cy.mount(defaultBadge)
+    cy.get("#badge").should("have.text", "Default");
+  });
+
+  it("tests if renders information design as default", () => {
+    cy.mount(defaultBadge)
+    cy.get("#badge")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--information")
+      .should("be.visible");
+  });
+
+  it("tests if renders neutral design", () => {
+    cy.mount(neutralBadge)
+    cy.get("#badge-neutral")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--neutral")
+      .should("be.visible");
+  });
+
+  it("tests if renders positive design", () => {
+    cy.mount(positiveBadge)
+    cy.get("#badge-positive")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--positive")
+      .should("be.visible");
+  });
+
+  it("tests if renders negative design", () => {
+    cy.mount(negativeBadge)
+    cy.get("#badge-negative")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--negative")
+      .should("be.visible");
+  });
+
+  it("tests if renders warning design", () => {
+    cy.mount(warningBadge)
+    cy.get("#badge-warning")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--warning")
+      .should("be.visible");
+  });
+
+  it("tests if renders number type", () => {
+    cy.mount(numberBadge)
+    cy.get("#badge-number")
+      .shadow()
+      .find(".udex-badge--number")
+      .should("be.visible");
+  });
+
+  it("tests if renders number type blue design as default", () => {
+    cy.mount(numberBadge);
+    cy.get("#badge-number")
+      .shadow()
+      .find(".udex-badge--number.udex-badge--blue")
+      .should("be.visible");
+  });
+
+  it("tests if renders number type neutral design", () => {
+    cy.mount(numberBadgeNeutral)
+    cy.get("#badge-number-neutral")
+      .shadow()
+      .find(".udex-badge--number.udex-badge--neutral")
+      .should("be.visible");
+  });
+
+  it("tests if renders number type red design", () => {
+    cy.mount(numberBadgeRed)
+    cy.get("#badge-number-red")
+      .shadow()
+      .find(".udex-badge--number.udex-badge--red")
+      .should("be.visible");
+  });
+
+  it("tests if renders medium size as default", () => {
+    cy.mount(defaultBadge)
+    cy.get("#badge")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--medium")
+      .should("be.visible");
+  });
+
+  it("tests if renders small size", () => {
+    cy.mount(smallBadge)
+    cy.get("#badge-small")
+      .shadow()
+      .find(".udex-badge--text.udex-badge--small")
+      .should("be.visible");
+  });
+
+  it("tests if renders number type small size", () => {
+    cy.mount(smallNumberBadge)
+    cy.get("#badge-number-small")
+      .shadow()
+      .find(".udex-badge--number.udex-badge--small")
+      .should("be.visible");
+  });
+
+  it("tests if renders icon at the end by default", () => {
+    cy.mount(defaultBadge)
+    cy.get("#badge")
+      .shadow()
+      .find(".udex-badge__icon--end")
+      .should("be.visible");
+  });
+
+  it("tests if renders icon at the start when specified", () => {
+    cy.mount(iconStartBadge)
+    cy.get("#badge-icon-start")
+      .shadow()
+      .find(".udex-badge__icon--start")
+      .should("be.visible");
+  });
+});