@sapudex/web-components 2.1.0 → 2.2.0

package/cypress/fixtures/footer-links.ts

@@ -0,0 +1,221 @@
+export const quickLinks = [
+{
+    "title":"Cloud Solutions",
+    "url":"#",
+    "id":"cloud",
+    "target":"_blank",
+},
+{
+    "title":"Sustainability Management",
+    "url":"#",
+    "id":"sustainability",
+    "target":"_blank",
+},
+{
+    "title":"Business Network",
+    "url":"#",
+    "id":"business",
+    "target":"_blank",
+},
+{
+    "title":"Conversational AI",
+    "url":"#",
+    "id":"conversational",
+    "target":"_blank",
+},
+{
+    "title":"SAP Insights",
+    "url":"#",
+    "id":"sapInsights",
+    "target":"_blank",
+},
+{
+    "title":"SAP Community",
+    "url":"#",
+    "id":"sapCommunity",
+    "target":"_blank",
+}
+];
+
+export const trendingLinks = [
+{
+    "title":"What is Grow?",
+    "url":"#",
+    "id":"whatIsGrow",
+    "target":"_self",
+},
+{
+    "title":"What is RISE?",
+    "url":"#",
+    "id":"whatIsRise",
+    "target":"_blank",
+},
+{
+    "title":"Sustainability",
+    "url":"#",
+    "id":"sustainability",
+    "target":"_blank",
+},
+{
+    "title":"Transforming Offerings",
+    "url":"#",
+    "id":"transforming",
+    "target":"_blank",
+},
+{
+    "title":"Partner Ecosystem",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"SAP Community",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"Developer",
+    "url":"#",
+    "id":"developer",
+    "target":"_blank",
+},
+{
+    "title":"Support Portal",
+    "url":"#",
+    "target":"_blank",
+}
+];
+
+export const aboutLinks = [
+{
+    "title":"Company Information",
+    "url":"#",
+    "id":"company",
+    "target":"_top",
+},
+{
+    "title":"Worldwide Directory",
+    "url":"#",
+    "id":"worldwide",
+    "target":"_blank",
+},
+{
+    "title":"Investor Relations",
+    "url":"#",
+    "id":"investor",
+    "target":"_blank",
+},
+{
+    "title":"Careers",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"News and Press",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"Events",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"Customer Stories",
+    "url":"#",
+    "target":"_blank",
+},
+{
+    "title":"Newsletter",
+    "url":"#",
+    "target":"_blank",
+}
+];
+
+export const siteInformationLinks = [
+{
+    "title":"Privacy",
+    "url":"#",
+    "id":"privacy",
+    "target":"_parent",
+},
+{
+    "title":"Terms of Use",
+    "url":"#",
+    "id":"terms",
+    "target":"_blank",
+},
+{
+    "title":"Legal Disclosure",
+    "url":"#",
+    "id":"legal",
+    "target":"_blank",
+},
+{
+    "title":"Copyright",
+    "url":"#",
+    "id":"copyright",
+    "target":"_blank",
+},
+{
+    "title":"Trademark",
+    "url":"#",
+    "id":"trademark",
+    "target":"_blank",
+},
+{
+    "title":"Cookie Preferences",
+    "url":"#",
+    "id":"cookie",
+    "target":"_blank",
+},
+{
+    "title":"Do Not Share/Sell My Personal Information",
+    "url":"#",
+    "target":"_blank",
+}
+];
+
+export const socialLinks = [
+{
+    "url":"https://facebook.com",
+    "iconUrl":"./assets/facebook.svg",
+    "id":"facebookId",
+    "name":"facebook",
+    "target":"_blank",
+},
+{
+    "url":"https://twitter.com",
+    "iconUrl":"./assets/twitter.svg",
+    "id":"twitterId",
+    "name":"twitter",
+    "target":"_blank",
+},
+{
+    "url":"https://youtube.com",
+    "iconUrl":"./assets/youtube.svg",
+    "id":"youtubeId",
+    "name":"youtube",
+    "target":"_blank",
+},
+{
+    "url":"https://linkedin.com",
+    "iconUrl":"./assets/linkedin.svg",
+    "id":"linkedinId",
+    "name":"linkedin",
+    "target":"_blank",
+},
+{
+    "url":"https://instagram.com",
+    "iconUrl":"./assets/instagram.svg",
+    "id":"instagramId",
+    "name":"instagram",
+    "target":"_blank",
+},
+{
+    "url":"https://sap.com",
+    "iconUrl":"./assets/email.svg",
+    "id":"sapId",
+    "name":"sap",
+    "target":"_blank",
+}
+];

package/cypress/specs/Checkbox.cy.tsx

@@ -0,0 +1,92 @@
+import UDExCheckbox from "../../src/Checkbox.js";
+
+describe("Checkbox", () => {
+  it("renders corectly", () => {
+    cy.mount(<UDExCheckbox></UDExCheckbox>)
+    cy.get("[udex-checkbox]").should("exist")
+  });
+
+  it("correctly text as label", () => {
+    cy.mount(<UDExCheckbox text="checkbox"></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find("ui5-label")
+    .should("have.text", "checkbox")
+  });
+
+  it("renders readonly corectly", () => {
+    cy.mount(<UDExCheckbox readonly></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-readonly", "true")
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
+      const {color} = window.getComputedStyle($checkbox[0])
+      expect(color).eqls("rgb(85, 107, 129)")
+   })
+  });
+
+  it("renders disabled corectly", () => {
+    cy.mount(<UDExCheckbox disabled></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-disabled", "true")
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
+      const { opacity } = window.getComputedStyle($checkbox[0])
+      expect(opacity).eqls("1")
+   })
+  });
+
+  it("renders displayonly corectly", () => {
+    cy.mount(<UDExCheckbox displayOnly></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find("ui5-icon").should("be.visible")
+  });
+
+  it("correctly sets aria-checked", () => {
+    cy.mount(<UDExCheckbox checked></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-checked", "true")
+  });
+
+  it("renders required corectly", () => {
+    cy.mount(<UDExCheckbox required></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-required", "true")
+  });
+
+  it("sets wrappintType to `None` by default", () => {
+    cy.mount(<UDExCheckbox required></UDExCheckbox>)
+    cy.get("[udex-checkbox]").should("have.attr", "wrapping-type", "None")
+  });
+
+  it("correctly sets accessible name", () => {
+    cy.mount(<UDExCheckbox accessibleName="checkbox"></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-label", "checkbox")
+  });
+
+  it("correctly sets accessible name ref", () => {
+    cy.mount(<>
+    <p id="checkbox">Checkox</p>
+    <UDExCheckbox accessibleNameRef="checkbox"></UDExCheckbox>
+    </> )
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
+    .should("have.attr", "aria-label", "Checkox")
+  });
+
+  it("correctly sets valueState to `None` by default", () => {
+    cy.mount(<UDExCheckbox></UDExCheckbox>)
+    cy.get("[udex-checkbox]").should("have.attr", "value-state", "None")
+  });
+
+  it("correctly sets valueState to `Success`", () => {
+    cy.mount(<UDExCheckbox valueState="Success"></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
+      const {borderColor} = window.getComputedStyle($checkbox[0])
+      expect(borderColor).eqls("rgb(54, 164, 29)")
+   })
+  });
+
+    it("correctly sets valueState to `Error`", () => {
+    cy.mount(<UDExCheckbox valueState="Error"></UDExCheckbox>)
+    cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
+      const {borderColor} = window.getComputedStyle($checkbox[0])
+      expect(borderColor).eqls("rgb(238, 57, 57)")
+   })
+  });
+});

package/cypress/specs/Footer.cy.tsx

@@ -0,0 +1,313 @@
+import UDExFooter from "../../src/Footer.js";
+import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+
+const defaultFooter = <UDExFooter
+  id="footer"
+  logoLink="#test"
+  logoTitle="SAP Title"
+  logoAriaLabel="SAP Homepage"
+  logoUrl='./assets/sap-logo.svg'
+  contactNumbersList='[{"country":"France","number":"400-619-0727"},{"country":"United State","number":"1-800-872-1727"}]'
+  localCountryNumbersLink='#'
+  chatWithUsLink='#'
+  quickLinks={JSON.stringify(quickLinks)}
+  trendingLinks = {JSON.stringify(trendingLinks)}
+  aboutLinks = {JSON.stringify(aboutLinks)}
+  siteInformationLinks = {JSON.stringify(siteInformationLinks)}
+  socialLinks = {JSON.stringify(socialLinks)}
+  contactUsLink='#'>
+</UDExFooter>
+
+describe("Footer", () => {
+  beforeEach(() => {
+    cy.mount(defaultFooter)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#footer").shadow().find(".udex-footer").should("be.visible")
+  });
+
+  it("renders phone numbers", () => {
+    cy.get("#footer").shadow().find(".udex-footer__number").first().should("have.text", "400-619-0727")
+    cy.get("#footer").shadow().find(".udex-footer__number").eq(1).should("have.text", "1-800-872-1727")
+  });
+
+  it("renders contact link", () => {
+    cy.get("#footer").shadow().find(".udex-footer__contact-us-link").first().should("have.attr", "href", "#")
+  });
+
+  it("renders chat link", () => {
+    cy.get("#footer").shadow().find(".udex-footer__chat-with-us-link").first().should("have.attr", "href", "#")
+  });
+
+  it("renders quick link target", () => {
+    cy.get("#footer").shadow().find(".udex-footer__quick-links a").should("have.attr", "target", "_blank")
+  });
+
+  it("renders trending link target", () => {
+    cy.get("#footer").shadow().find(".udex-footer__trending-links a").should("have.attr", "target", "_self")
+  });
+
+  it("renders site about sap link target", () => {
+    cy.get("#footer").shadow().find(".udex-footer__about-links a").first().should("have.attr", "target", "_top")
+  });
+
+  it("renders site information link target", () => {
+    cy.get("#footer").shadow().find(".udex-footer__site-information-links a").first().should("have.attr", "target", "_parent")
+  });
+
+  it("renders social link target", () => {
+    cy.get("#footer").shadow().find(".udex-footer__social-container a").first().should("have.attr", "target", "_blank")
+  });
+
+  it("renders all social links", () => {
+    cy.get("#footer").shadow().find(".udex-footer__social-container a").should("have.length", 6)
+  });
+
+  it("renders copyright", () => {
+    cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", "© 2025 SAP SE or an SAP affiliate company. All rights reserved.")
+  });
+
+  it("renders chinese text when specified in url", () => {
+    setLanguage("zh_cn")
+    cy.mount(defaultFooter)
+    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
+    cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
+  });
+
+  describe("Desktop tests", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.mount(defaultFooter)
+      cy.on('window:alert', () => false)
+    });
+
+    it("renders links holder", () => {
+      cy.get("#footer").shadow().find(".udex-footer__links").should("be.visible")
+    });
+
+    it("does not render accordion", () => {
+      cy.get("#footer").shadow().find("udex-accordion").should("not.exist");
+    });
+
+    it("renders all quick links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__quick-links .udex-footer__links-list--desktop li").should("have.length", 6)
+    });
+
+    it("renders all trending links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__trending-links .udex-footer__links-list--desktop li").should("have.length", 8)
+    });
+
+    it("renders site aboout sap links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__about-links .udex-footer__links-list--desktop li").should("have.length", 8)
+    });
+
+    it("renders site information links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__site-information-links .udex-footer__links-list--desktop li").should("have.length", 7)
+    });
+
+    it("sets data-id attribute to quick links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__quick-links a").each(($quickLink, index) => {
+        expect($quickLink[0]).attr("data-id").eqls(quickLinks[index].id)
+      })
+    });
+
+    it("sets data-id attribute to trending links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__trending-links a").each(($trendingLink, index) => {
+        if($trendingLink[0].hasAttribute("data-id")) {
+          expect($trendingLink[0]).attr("data-id").eqls(trendingLinks[index].id)
+        }
+      })
+    });
+
+    it("sets data-id attribute to about links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__about-links a").each(($aboutLink, index) => {
+        if($aboutLink[0].hasAttribute("data-id")) {
+          expect($aboutLink[0]).attr("data-id").eqls(aboutLinks[index].id)
+        }
+      })
+    });
+
+    it("sets data-id attribute to site information links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__site-information-links a").each(($siteLink, index) => {
+       if($siteLink[0].hasAttribute("data-id")) {
+        expect($siteLink[0]).attr("data-id").eqls(siteInformationLinks[index].id)
+       }
+      })
+    });
+
+    it("sets data-id attribute to social links", () => {
+      cy.get("#footer").shadow().find(".udex-footer__social-container  a").each(($socialLink, index) => {
+        expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
+      })
+    });
+
+    it("corectly renders default logo title", () => {
+      cy.get("#footer").shadow().find(".udex-footer__logo a").should("have.attr", "title", "SAP Title")
+    });
+
+    it("sets aria-label for logo link", () => {
+      cy.get("#footer").shadow().find(".udex-footer__logo a").should("have.attr", "aria-label", "SAP Homepage")
+    });
+
+    it("emits \"ui5-logo-click\" when clicking on logo", () => {
+      const logoClickHandler = cy.stub().as("logoClickHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("logo-click", logoClickHandler)
+      ).shadow().find(".udex-footer__logo a").click()
+
+      cy.get("@logoClickHandler").should("have.been.called")
+    });
+
+    it("emits \"ui5-back-to-top-click\" when clicking on back button", () => {
+      const backToTopHandler = cy.stub().as("backToTopHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("back-to-top-click", backToTopHandler)
+      ).shadow().find(".udex-footer__back-to-top-button").click()
+
+      cy.get("@backToTopHandler").should("have.been.called")
+    });
+
+    it("emits \"ui5-back-to-top-click\" when clicking on back button", () => {
+      const backToTopHandler = cy.stub().as("backToTopHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("back-to-top-click", backToTopHandler)
+      ).shadow().find(".udex-footer__back-to-top-button").click()
+
+      cy.get("@backToTopHandler").should("have.been.called")
+    });
+
+
+    it("emits \"contact-email-click\" when clicking on email", () => {
+      const contactEmailClickHandler = cy.stub().as("contactEmailHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("contact-email-click", contactEmailClickHandler)
+      ).shadow().find(".udex-footer__contact-us-link").then($emailLink => {
+        $emailLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@contactEmailHandler").should("have.been.called")
+    });
+
+    it("emits \"ui5-contact-chat-click\" when click on chat link", () => {
+      const contactChatClickHandler = cy.stub().as("contactChatClickHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("contact-chat-click", contactChatClickHandler)
+      ).shadow().find(".udex-footer__chat-with-us a").click()
+
+      cy.get("@contactChatClickHandler").should("have.been.called")
+    });
+
+    it("emits \"ui5-quick-links-click\" when click on quick links", () => {
+      const expectedDetails = {
+        name: "Cloud Solutions",
+        id: "cloud"
+      }
+
+      const quickLinksClickHandler = cy.stub().as("quickLinksHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("quick-links-click", quickLinksClickHandler)
+      ).shadow().find(".udex-footer__quick-links a").first().click()
+
+      cy.get("@quickLinksHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    });
+
+    it("emits \"ui5-trending-click\" when click on trending links", () => {
+      const expectedDetails = {
+        name: "What is Grow?",
+        id: "whatIsGrow"
+      }
+
+      const trendingLinksClickHandler = cy.stub().as("trendingLinksHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("trending-click", trendingLinksClickHandler)
+      ).shadow().find(".udex-footer__trending-links a").first().then($trendingLink => {
+        $trendingLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@trendingLinksHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    });
+
+    it("emits \"ui5-about-sap-click\" when click on about links", () => {
+      const expectedDetails = {
+        name: "Company Information",
+        id: "company"
+      }
+
+      const aboutSapClickHandler = cy.stub().as("aboutSapHandler")
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("about-sap-click", aboutSapClickHandler)
+      ).shadow().find(".udex-footer__about-links a").first().then($aboutLink => {
+        $aboutLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@aboutSapHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    });
+
+    it("emits \"ui5-site-information-click\" when click on information links", () => {
+      const expectedDetails = {
+        name: "Privacy",
+        id: "privacy"
+      }
+
+      const siteInfoClickHandler = cy.stub().as("siteInfoClickHandler")
+
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("site-information-click", siteInfoClickHandler)
+      ).shadow().find(".udex-footer__site-information-links a").first().then($siteInfoLink => {
+        $siteInfoLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@siteInfoClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    });
+
+    it("emits \"contact-phone-local-numbers-click\" when click on social links", () => {
+      const localPhoneCickHandler = cy.stub().as("localPhoneHandler")
+
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("contact-phone-local-numbers-click", localPhoneCickHandler)
+      ).shadow().find(".udex-footer__remark-link").then($localPhoneLink => {
+        $localPhoneLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@localPhoneHandler").should("have.been.called")
+    });
+
+    it("emits \"ui5-social-media-link-click\" when click on social links", () => {
+      const expectedDetails = {
+        name: "facebook",
+        id: "facebookId"
+      }
+
+      const socialMediaLinkCickHandler = cy.stub().as("socialMediaLinkHandler")
+
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("social-media-link-click", socialMediaLinkCickHandler)
+      ).shadow().find(".udex-footer__social-container a").first().then($socialLink => {
+        $socialLink[0].removeAttribute("href")
+      }).click()
+
+      cy.get("@socialMediaLinkHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
+    });
+  });
+
+  describe("Mobile tests", () => {
+    beforeEach(() => {
+      cy.viewport(900, 1080)
+      cy.mount(defaultFooter)
+    });
+
+    it("renders accordion", () => {
+      cy.get("#footer").shadow().find("udex-accordion").should("exist")
+    });
+
+    it("does not render links holder", () => {
+      cy.get("#footer").shadow().find(".udex-footer__links").should("not.exist")
+    });
+
+    it("tests if mobile view is correctly rendered", () => {
+      cy.get("#footer").shadow().find("udex-accordion-item.udex-footer__action-item").should("exist")
+    });
+  });
+});

package/cypress/specs/ListItem.cy.tsx

@@ -1,5 +1,5 @@
 import UDExListItem from "../../src/ListItem.js"
-import Icon from "@ui5/webcomponents/dist/Icon.js"
+import UDExButton from "../../src/Button.js"
 
 const defaultListItem = <UDExListItem         
 id="listItem"
@@ -64,8 +64,8 @@ additional-text="Additional Text"
 imageSize="M"
 imageShape="Square">
     Default List Item
-    <Icon slot="firstIcon" name="edit"></Icon>
-    <Icon slot="secondIcon" name="decline"></Icon>
+    <UDExButton accessible-name='Action' slot='firstIcon' design='Tertiary' icon='edit' size='Small'></UDExButton>
+    <UDExButton accessible-name='Action' slot='secondIcon' design='Tertiary' icon='decline' size='Small'></UDExButton>
 </UDExListItem>
 
 describe("ListItem", () => {
@@ -119,7 +119,7 @@ describe("ListItem", () => {
       });
   
       it("renders first and second icons when both slots are filled", () => {
-        cy.get("#listItemIcons").find("ui5-icon").should("have.length", 2);
+        cy.get("#listItemIcons").find("udex-button").should("have.length", 2);
       });
   
       it("becomes selected when clicking", () => {

package/cypress/specs/PhoneNumberField.cy.tsx

@@ -118,12 +118,12 @@ describe("PhoneNumberField", () => {
 
     it("check that the maxlength and formatting is applied correctly", () => {
       cy.mount(defaultPhoneNumberField)
-      cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 67891")
+      cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 6789123")
     });
 
     it("check that the phone format with brackets is applied correctly", () => {
       cy.mount(defaultPhoneNumberField)
-      cy.get("#default").shadow().find("input").type(`+180123456789123456`).should("have.value", "+1 (801) 234-5678");
+      cy.get("#default").shadow().find("input").type(`+180123456789123456`).should("have.value", "+1 (801) 234-56789123");
     });
 
     it("emit input when the value of the component changes", () => {