@sapudex/web-components 0.226.0 → 2.1.0

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)")
+  });
+});

package/cypress/specs/ListItem.cy.tsx

@@ -0,0 +1,162 @@
+import UDExListItem from "../../src/ListItem.js"
+import Icon from "@ui5/webcomponents/dist/Icon.js"
+
+const defaultListItem = <UDExListItem         
+id="listItem"
+accessibleName="accessible-name"
+supportingText="Supporting text"
+image="image"
+imageAlt="Person Avatar"
+additionalText="Additional Text"
+additionalTextState="Information"
+imageSize="M"
+imageShape="Square"
+type="Circle">
+    Default List Item
+</UDExListItem>
+
+const listItemSuccess = <UDExListItem         
+id="listItemSuccess"
+accessibleName="accessible-name"
+supportingText="Supporting text"
+image="./stories/list/image.png"
+imageAlt="Person Avatar"
+additionalText="Additional Text"
+additionalTextState="Success"
+imageSize="M"
+imageShape="Square">
+    Default List Item
+</UDExListItem>
+
+const listItemError = <UDExListItem         
+id="listItemError"
+accessibleName="accessible-name"
+supportingText="Supporting text"
+image="./stories/list/image.png"
+imageAlt="Person Avatar"
+additionalText="Additional Text"
+additionalTextState="Error"
+imageSize="M"
+imageShape="Square">
+    Default List Item
+</UDExListItem>
+
+const listItemWarning = <UDExListItem         
+id="listItemWarning"
+accessibleName="accessible-name"
+supportingText="Supporting text"
+image="./stories/list/image.png"
+imageAlt="Person Avatar"
+additionalText="Additional Text"
+additionalTextState="Warning"
+imageSize="M"
+imageShape="Square">
+    Default List Item
+</UDExListItem>
+
+const listItemWithIcons = <UDExListItem         
+id="listItemIcons"
+accessible-name="accessible-name"
+supporting-text="Supporting text"
+image="./stories/list/image.png"
+image-alt="Person Avatar"
+additional-text="Additional Text"
+imageSize="M"
+imageShape="Square">
+    Default List Item
+    <Icon slot="firstIcon" name="edit"></Icon>
+    <Icon slot="secondIcon" name="decline"></Icon>
+</UDExListItem>
+
+describe("ListItem", () => {
+    describe("Default rendering", () => {
+      it("should render the component", () => {
+        cy.mount(<UDExListItem />);
+        cy.get("[udex-list-item]").should("exist");
+      });
+    });
+  
+    describe("Basic attributes", () => {
+      beforeEach(() => {
+        cy.mount(defaultListItem);
+      });
+  
+      it("has correct supporting text", () => {
+        cy.get("#listItem").shadow().find(".udex-list__supporting-text").should("have.text", "Supporting text");
+      });
+  
+      it("has correct avatar", () => {
+        cy.get("#listItem").shadow().find(".udex-list__avatar").should("exist");
+      });
+  
+      it("has avatar of size M", () => {
+        cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "size", "M");
+      });
+  
+      it("has avatar of shape Square", () => {
+        cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "shape", "Square");
+      });
+  
+      it("has avatar with alternative text", () => {
+        cy.get("#listItem").shadow().find(".udex-list__avatar").find("img").should("have.attr", "alt", "Person Avatar");
+      });
+  
+      it("renders bullet marker at the start of the item", () => {
+        cy.get("#listItem").shadow().find(".udex-list__circle").should("exist");
+      });
+  
+      it("has correct accessibleName", () => {
+        cy.get("#listItem").shadow().find(".udex-list__content-wrap").should(($wrapper) => {
+          const itemId = $wrapper.attr("_id");
+          expect($wrapper.attr("aria-labelledby")).to.eq(`${itemId}-invisibleText`);
+        });
+      });
+    });
+  
+    describe("With Icons", () => {
+      beforeEach(() => {
+        cy.mount(listItemWithIcons);
+      });
+  
+      it("renders first and second icons when both slots are filled", () => {
+        cy.get("#listItemIcons").find("ui5-icon").should("have.length", 2);
+      });
+  
+      it("becomes selected when clicking", () => {
+        cy.get("#listItemIcons").shadow().find(".udex-list__item").click();
+        cy.get("#listItemIcons").should("have.attr", "selected");
+      });
+  
+      it("pressing Enter sets aria-current", () => {
+        cy.realPress("Enter");
+        cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "aria-current");
+      });
+  
+      it("pressing Space sets aria-current", () => {
+        cy.realPress("Space");
+        cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "aria-current");
+      });
+    });
+  
+    describe("Additional Text States", () => {
+      it("shows Information state", () => {
+        cy.mount(defaultListItem);
+        cy.get("#listItem").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(0, 64, 176)");
+      });
+  
+      it("shows Success state", () => {
+        cy.mount(listItemSuccess);
+        cy.get("#listItemSuccess").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(30, 89, 47)");
+      });
+  
+      it("shows Error state", () => {
+        cy.mount(listItemError);
+        cy.get("#listItemError").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(132, 6, 6)");
+      });
+  
+      it("shows Warning state", () => {
+        cy.mount(listItemWarning);
+        cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");
+      });
+    });
+});  

package/cypress/specs/PhoneNumberField.cy.tsx

@@ -0,0 +1,193 @@
+import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
+
+const defaultPhoneNumberField = <UDExPhoneNumberField id="default"
+  valueState="Standard"
+  label="Phone Number"
+  supportingText="Supporting Text"
+  height="350px"></UDExPhoneNumberField>
+
+const requiredPhoneNumberField = <UDExPhoneNumberField id="required"
+  valueState="Standard"
+  height="350px"
+  required></UDExPhoneNumberField>
+
+const disabledPhoneNumberField = <UDExPhoneNumberField id="disabled"
+  valueState="Standard"
+  height="350px"
+  disabled></UDExPhoneNumberField>
+
+const readonlyPhoneNumberField = <UDExPhoneNumberField id="readonly"
+  valueState="Standard"
+  height="350px"
+  readonly></UDExPhoneNumberField>
+
+const displayonlyPhoneNumberField = <UDExPhoneNumberField id="displayonly"
+  valueState="Standard"
+  height="350px"
+  displayonly></UDExPhoneNumberField>
+
+const selectedPhoneNumberField = <UDExPhoneNumberField id="selected"
+  valueState="Standard"
+  height="350px"
+  selectedIso="BY"></UDExPhoneNumberField>
+
+const blockedPhoneNumberField = <UDExPhoneNumberField id="blocked"
+  valueState="Standard"
+  height="350px"
+  label="Phone Number"
+  supporting-text="Supporting Text"
+  blocked-country-codes="PL, DE"></UDExPhoneNumberField>
+
+describe("PhoneNumberField", () => {
+  it("is correctly rendered",  () => {
+    cy.mount(defaultPhoneNumberField)
+    cy.get("#default").shadow().find(".udex-phone-number-field").should("be.visible")
+  });
+
+  describe("Attributes propagation", () => {
+    it("label attribute value is set", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("label").should("be.visible").and("have.text", "Phone Number")
+    });
+
+    it("correct supportingText attribute value is applied", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("udex-status-message").shadow().find(".udex-status-message").should("have.text", "Supporting Text")
+    });
+
+    it("correct required attribute is applied",  () => {
+      cy.mount(requiredPhoneNumberField)
+      cy.get("#required").shadow().find("input").should("have.attr", "required")
+      cy.get("#required").shadow().find("input").should("have.attr", "aria-required", "true")
+    });
+
+    it("correct disabled attribute is applied",  () => {
+      cy.mount(disabledPhoneNumberField)
+      cy.get("#disabled").shadow().find("input").should("have.attr", "disabled")
+      cy.get("#disabled").shadow().find("input").should("have.attr", "aria-disabled", "true")
+    });
+
+    it("correct readonly attribute is applied",  () => {
+      cy.mount(readonlyPhoneNumberField)
+      cy.get("#readonly").shadow().find("input").should("have.attr", "readonly")
+      cy.get("#readonly").shadow().find("input").should("have.attr", "aria-readonly", "true")
+    });
+
+    it("correct displayonly attribute is applied",  () => {
+      cy.mount(displayonlyPhoneNumberField)
+      cy.get("#displayonly").shadow().find("input").should("have.attr", "readonly")
+      cy.get("#displayonly").shadow().find("input").should("have.attr", "aria-readonly", "true")
+    });
+
+    it("correct selectedIso attribute is applied",  () => {
+      cy.mount(selectedPhoneNumberField)
+      cy.get("#selected").shadow().find("input").should("have.attr", "placeholder", "+375 X XXXX XX-XX-XX")
+    });
+
+    it("selected country is focused in the dropdown list when selectedIso attribute is applied",  () => {
+      cy.mount(selectedPhoneNumberField)
+      cy.get("#selected").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click()
+
+      cy.get("#selected").shadow().find("udex-dropdown").find("udex-list").find("udex-list-item[selected]").should("have.attr", "id", "BY")
+    });
+
+    it("tests if blocked countries are not displayed",  () => {
+      cy.mount(blockedPhoneNumberField)
+      cy.get("#blocked").shadow().find("udex-list-item[id='PL']").should("not.exist")
+      cy.get("#blocked").shadow().find("udex-list-item[id='DE']").should("not.exist")
+    });
+  });
+
+  describe("General interaction",  () => {
+    it("only digits can be entered and '+' character is added", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("0123456789test#@$(%$^&*()").should("have.value", "+0 123456789")
+    });
+
+    it("limits dropdown's height when height property is set", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click()
+      cy.get("#default").shadow().find("udex-dropdown").should("have.attr", "height", "350px")
+    });
+
+    it("country is selected automatically if the prefix matches the entered number", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("38012")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+    });
+
+    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")
+    });
+
+    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");
+    });
+
+    it("emit input when the value of the component changes", () => {
+      const inputHandler = cy.stub().as("inputHandler")
+      document.addEventListener("input", inputHandler)
+      cy.mount(<UDExPhoneNumberField></UDExPhoneNumberField>)
+      cy.get("[udex-phone-number-field]").shadow().find("input").click().type("012")
+      cy.get("@inputHandler").should("have.been.called")
+    });
+
+    it('focus on element with corresponding starting letter', () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("b").realPress("Enter")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.text", "Bahamas (Bahamas) +1")
+    });
+
+    it("emit change when the input operation has finished by pressing Enter", () => {
+      const changeHandler = cy.stub().as("changeHandler")
+      cy.mount(<UDExPhoneNumberField onChange={changeHandler}></UDExPhoneNumberField>)
+      cy.get("[udex-phone-number-field]").shadow().find("input").click().realPress("1").realPress("2").realPress("Enter")
+      cy.get("@changeHandler").should("have.been.called")
+    });
+
+    it("emit change when the country is selected from the list", () => {
+      const changeHandler = cy.stub().as("changeHandler")
+      cy.mount(<UDExPhoneNumberField onChange={changeHandler}></UDExPhoneNumberField>)
+      cy.get("[udex-phone-number-field]").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("b").realPress("Enter")
+      cy.get("@changeHandler").should("have.been.called")
+    });
+  });
+
+  describe("if focused",  () => {
+    it("should have no value",  () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").click().should("have.value", "")
+    });
+
+    it("should have phone prefix value if country is selected",  () => {
+      cy.mount(selectedPhoneNumberField)
+      cy.get("#selected").shadow().find("input").click().should("have.value", "+375")
+    });
+  });
+
+  describe("if lost focus",  () => {
+    it("should have initial phone prefix value if country is not selected",  () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").click().realPress("Tab")
+      cy.get("#default").shadow().find("input").should("have.attr", "placeholder", "+X XXX-XXX-XXXX")
+    });
+
+    it("should have initial phone prefix value if incorrect prefix entered",  () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("+00000").click().realPress("Tab")
+      cy.get("#default").shadow().find("input").should("have.attr", "placeholder", "+0 XXXXXXXXX");
+    });
+
+    it("should remove non-numeric characters like '-' and format the number with the default prefix",  () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("0123-456-789").should("have.value", "+0 123456789")
+    });
+
+    it("should sanitize input by removing invalid characters and interpret the number as a US number",  () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("123-abc-456!@#").should("have.value", "+1 (234) 56")
+    });
+  });
+});

package/cypress/specs/Review.cy.tsx

@@ -0,0 +1,49 @@
+import UDExButton from "../../src/Button.js";
+import UDExRatingBar from "../../src/RatingBar.js";
+import UDExReview from "../../src/Review.js";
+
+const defaultReview = <UDExReview id="review-standard" rating={4.5} reviews={200}>
+    <span slot="defaultText">Share your thought with other customers</span>
+    <UDExButton slot="reviewButton">Write a review</UDExButton>
+</UDExReview>
+
+const emptyReview = <UDExReview id="review-empty">
+    <span slot="defaultText">Share your thought with other customers</span>
+    <UDExButton slot="reviewButton">Write a review</UDExButton>
+</UDExReview>
+
+const reviewWithBreakdown = <UDExReview id="review-breakdown" rating={4.5} reviews={200}>
+    <UDExRatingBar rating={5} percentage={70} show-percentage></UDExRatingBar>
+    <UDExRatingBar rating={4} percentage={50} show-percentage></UDExRatingBar>
+    <UDExRatingBar rating={3} percentage={20} show-percentage></UDExRatingBar>
+    <UDExRatingBar rating={2} percentage={15} show-percentage></UDExRatingBar>
+    <UDExRatingBar rating={1} percentage={10} show-percentage></UDExRatingBar>
+    <UDExButton slot="reviewButton">Write a review</UDExButton>
+</UDExReview>
+
+describe("Review", () => {
+  it("renders standard mode", () => {
+    cy.mount(defaultReview)
+    cy.get("#review-standard").shadow().find(".udex-review__rating").should("have.text", "4.5")
+  });
+
+  it("has maximum rating when the upper limit is exceeded", () => {
+    cy.mount(<UDExReview rating={500}></UDExReview>)
+    cy.get("[udex-review]").shadow().find(".udex-review__rating").should("have.text", "5")
+  });
+
+  it("has minimum rating when the lower limit is exceeded", () => {
+    cy.mount(<UDExReview rating={-500}></UDExReview>)
+    cy.get("[udex-review]").shadow().find(".udex-review__rating").should("have.text", "0")
+  });
+
+  it("Tests empty review", () => {
+    cy.mount(emptyReview)
+    cy.get("#review-empty").shadow().find(".udex-review__empty-container").should("be.visible")
+  });
+
+  it("Renders breakdown", () => {
+    cy.mount(reviewWithBreakdown)
+    cy.get("#review-breakdown").shadow().find(".udex-review__container").should("be.visible")
+  });
+});