@sapudex/web-components 2.0.0 → 2.1.1

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/CountrySelector.cy.tsx

@@ -0,0 +1,215 @@
+import UDExCountrySelector from "../../src/CountrySelector.js";
+
+const defaultCountrySelector = <UDExCountrySelector	id="default"
+    searchPlaceholder="Search Countries and Regions"
+    label="Countries"
+    blockedCountryCodes="PL">
+</UDExCountrySelector>
+
+const countrySelectorWithoutFlags = <UDExCountrySelector id="country-selector-no-flags"
+    searchPlaceholder="Search Countries and Regions"
+    blockedCountry-Codes="PL"
+    hideFlagImages>
+</UDExCountrySelector>
+
+const countrySelectorWithSupportingText = <UDExCountrySelector
+    id="country-selector-supporting-text"
+    supportingText="Test supporting text"
+    searchPlaceholder="Search Countries and Regions"
+    height="400px">
+</UDExCountrySelector>
+
+describe("CountrySelector", () => {
+  const blockedCountryIsoCode = 'PL';
+  const initialCountryData = {
+    iso: 'FR',
+    phoneFmt: "+xxxx xxxx xxxx",
+    countryName: "France",
+    localName: "France",
+  }
+
+  const countrySelectorNoFlagClass = "udex-country-selector__dropdown--hide-flag";
+  const countrySelectorDisabledClass = "udex-country-selector__trigger--disabled";
+  const countrySelectorReadOnlyClass = "udex-country-selector__trigger--readonly";
+  const countrySelectorDisplayOnlyClass = "udex-country-selector__trigger--displayonly";
+
+  beforeEach(() => {
+    cy.mount(defaultCountrySelector)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__dropdown").should("be.visible")
+  });
+
+  it("renders flag icon when no country is selected", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__image").should("be.visible")
+  });
+
+  it("renders label", () => {
+    cy.get("#default").shadow().find("udex-text-field").shadow().find(".udex-text-field__label").should("have.text", "Countries")
+  });
+
+  it("renders placeholder in the dropdown's search", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__dropdown").find("udex-search").shadow().find("input").should("have.attr", "placeholder", "Search Countries and Regions")
+  });
+
+  it("renders supporting text", () => {
+    cy.mount(countrySelectorWithSupportingText)
+    cy.get("#country-selector-supporting-text").shadow().find("udex-status-message").shadow().find(".udex-status-message__supporting-text").should("have.text", "Test supporting text")
+  });
+
+  it("renders Standard valueState by default", () => {
+    cy.mount(countrySelectorWithSupportingText)
+    cy.get("#country-selector-supporting-text").should("have.attr", "value-state", "Standard")
+  });
+
+  it("renders Error valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Error"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Error")
+  });
+
+  it("renders Warning valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Warning"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Warning")
+  });
+
+  it("renders Success valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Success"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Success")
+  });
+
+  it('opens the dropdown on trigger click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  });
+
+  it('closes the dropdown on trigger click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('closes the dropdown on outside click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("body").click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('closes the dropdown on country selection', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('opens the dropdown on trigger icon click', () => {
+    cy.get("#default").shadow().find("#udexTextField").shadow().find("udex-control-button").click()
+    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  });
+
+  it('doesnt render blocked country', () => {
+    cy.get("#default").shadow().find("#dropdown").find("udex-list-item[id='PL']").should("not.exist")
+  });
+
+  it('renders readonly country selector', () => {
+    cy.mount(<UDExCountrySelector readonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorReadOnlyClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  });
+
+  it('renders disabled country selector', () => {
+    cy.mount(<UDExCountrySelector disabled></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisabledClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "disabled")
+  });
+
+  it('renders displayonly country selector', () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisplayOnlyClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  });
+
+  it('hides trigger icon when displayonly', () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("udex-control-button").should("not.be.visible")
+  });
+
+  it('add special class when hideFlagImages is true', () => {
+    cy.mount(countrySelectorWithoutFlags)
+    cy.get("#country-selector-no-flags").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().find(".udex-country-selector-item__image").should("not.exist")
+  });
+
+  it('renders initially selected country', () => {
+    cy.mount(<UDExCountrySelector id="country-selector-preselected" preselectedCountry="PL"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value", "Poland (Polska)")
+  });
+
+  it("emits open/close when dropdown opened/closed", () => {
+    const openHandler = cy.stub().as("openHandler")
+    const closeHandler = cy.stub().as("closeHandler")
+    cy.mount(<UDExCountrySelector onOpen={openHandler} onClose={closeHandler}></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("@openHandler").should("have.been.called")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("@closeHandler").should("have.been.called")
+  });
+
+  it('emits change-search when search field typing', () => {
+    const changeHandler = cy.stub().as("changeHandler")
+    document.addEventListener("change-search", changeHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
+    cy.get("@changeHandler").should("have.been.called")
+  });
+
+  it("emits reset-search when search reset button is clicked", () => {
+    const resetHandler = cy.stub().as("resetHandler")
+    document.addEventListener("reset-search", resetHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__reset-button").click()
+    cy.get("@resetHandler").should("have.been.called")
+  });
+
+  it('emits submit-search when user presses Enter key in the search', () => {
+    const submitHandler = cy.stub().as("submitHandler")
+    document.addEventListener("submit-search", submitHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Enter")
+    cy.get("@submitHandler").should("have.been.called")
+  });
+
+  it('emits selection-change when list item is clicked', () => {
+    const selectionHandler = cy.stub().as("selectionHandler")
+    cy.mount(<UDExCountrySelector onSelectionChange={selectionHandler}></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("[udex-country-selector]").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().click()
+
+    cy.get("@selectionHandler").should("have.been.called")
+  });
+
+  it('focus on element with corresponding starting letter', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("a").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+
+  it('focus on element with corresponding starting letter filtered by search value', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Tab").realPress("Tab").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Afghanistan (افغانستان)")
+  });
+
+  it('keyboard focus navigation for `ArrowDown`', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+
+  it('keyboard focus navigation for `ArrowUp`', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+});