@sapudex/web-components 2.0.0 → 2.1.1

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/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", () => {