@sapudex/web-components 0.225.0 → 2.0.0

package/cypress/specs/Textarea.cy.tsx

@@ -0,0 +1,205 @@
+import UDExTextArea from "../../src/TextArea.js";
+
+const defaultTextarea = <UDExTextArea
+  valueState="Standard"
+  id="defaultTextArea">
+</UDExTextArea>
+
+const textareaWithAttributes = <UDExTextArea
+  valueState="Standard"
+  label="Label"
+  value="Value"
+  rows={3}
+  supportingText="Supporting Text"
+  id="textAreaWithAttributes">
+</UDExTextArea>
+
+const textareaWithMaxLength = <UDExTextArea       
+  value="Test value"
+  maxlength={10}
+  id="limitedTextArea">
+</UDExTextArea>
+
+const growingTextarea = <UDExTextArea       
+  valueState="Standard"
+  value="123"
+  growing
+  growingMaxLines={5}
+  id="growingTextarea">
+</UDExTextArea>
+
+describe("Textarea", () => {
+  const LABEL_ACTIVE_CLASS = "udex-textarea__label--active";
+
+  beforeEach(() => {
+    cy.mount(defaultTextarea);
+  })
+
+  it("is correctly rendered", () => {
+    cy.mount(<UDExTextArea></UDExTextArea>);
+
+    cy.get("[udex-textarea]").should("exist");
+  });
+
+  it("has a hidden label if label property is not set", () => {
+    cy.get("#defaultTextArea").shadow().find(".hidden-label").should("have.text", "Text field")
+  });
+
+  it("required attribute is not set by default", () => {
+    cy.get("#defaultTextArea").shadow().find("textarea").then($textarea => {
+      expect($textarea).to.not.have.attr("required");
+      expect($textarea).to.not.have.attr("aria-required");
+    });
+  });
+
+  it("disabled attribute is not set by default", () => {
+    cy.get("#defaultTextArea").shadow().find("textarea").should("not.have.attr", "disabled")
+  });
+
+  it("readonly attribute is not set by default", () => {
+    cy.get("#defaultTextArea").shadow().find("textarea").then($textarea => {
+      expect($textarea).to.not.have.attr("readonly");
+      expect($textarea).to.not.have.attr("aria-readonly");
+    });
+  });
+
+  describe("Attributes propagation", () => {
+    beforeEach(() => {
+      cy.mount(textareaWithAttributes)
+    })
+
+    it("label attribute is set", () => {
+      cy.get("#textAreaWithAttributes").then($textArea => {
+        expect($textArea.attr("label")).eqls("Label")
+      })
+    });
+
+    it("value attribute is set", () => {
+      cy.get("#textAreaWithAttributes").then($textArea => {
+        expect($textArea.attr("value")).eqls("Value")
+      })
+    });
+
+    it("rows attribute is set", () => {
+      cy.get("#textAreaWithAttributes").then($textArea => {
+        expect($textArea.attr("rows")).eqls("3")
+      })
+    });
+
+    it("supportingText attribute is set", () => {
+      cy.get("#textAreaWithAttributes").then($textArea => {
+        expect($textArea.attr("supporting-text")).eqls("Supporting Text")
+      })
+    });
+
+    it("required attribute is set", () => {
+      cy.mount(<UDExTextArea required id="requiredTextArea"></UDExTextArea>)
+      cy.get("#requiredTextArea").shadow().find("textarea").then($textarea => {
+        expect($textarea).to.have.attr("required");
+        expect($textarea).to.have.attr("aria-required");
+      })
+    });
+
+    it("disabled attribute is set", () => {
+      cy.mount(<UDExTextArea disabled id="disabledTextArea"></UDExTextArea>)
+      cy.get("#disabledTextArea").shadow().find("textarea").should("have.attr", "disabled")
+    });
+
+    it("readonly attribute is set", () => {
+      cy.mount(<UDExTextArea readonly id="readonlyTextArea"></UDExTextArea>)
+      cy.get("#readonlyTextArea").shadow().find("textarea").then($textarea => {
+        expect($textarea).to.have.attr("readonly");
+        expect($textarea).to.have.attr("aria-readonly");
+      });
+    });
+
+    it("displayonly attribute sets readonly", () => {
+      cy.mount(<UDExTextArea id="displayonlyTextArea" displayonly></UDExTextArea>)
+      cy.get("#displayonlyTextArea").shadow().find("textarea").then($textarea => {
+        expect($textarea).to.have.attr("readonly");
+        expect($textarea).to.have.attr("aria-readonly");
+      });
+    });
+
+    it("aria-invalid attribute is set when valueState is Error", () => {
+      cy.mount(<UDExTextArea id="invalidTextArea" valueState="Error"></UDExTextArea>)
+      cy.get("#invalidTextArea").shadow().find("textarea").should("have.attr", "aria-invalid")
+    });
+  });
+
+  describe("ActiveClassName class is set", () => {
+    beforeEach(() => {
+      cy.mount(textareaWithAttributes);
+    })
+
+    it("if textarea has label and value", () => {
+      cy.get("#textAreaWithAttributes").shadow().find("label").then($label => {
+        expect($label.attr("class")).includes(LABEL_ACTIVE_CLASS)
+      })
+    });
+  });
+
+  describe("when maxlength attribute is set", () => {
+    beforeEach(() => {
+      cy.mount(textareaWithMaxLength);
+    })
+
+    it("maxlength property is set", () => {
+      cy.get("#limitedTextArea").shadow().find("textarea").then($textarea => {
+        expect($textarea.attr("maxlength")).eqls("10")
+      })
+    });
+
+    it("supportingText is correct if maxlength attribute is set", () => {
+      cy.get("#limitedTextArea").shadow().find("udex-status-message").then($statusMessage => {
+        expect($statusMessage.attr("supporting-text")).eqls("0 characters remaining")
+      })
+    });
+  });
+
+  describe("when growing attribute is set", () => {
+    beforeEach(() => {
+        cy.mount(growingTextarea)
+    })
+
+    it("tests if correct growing attribute value is applied", () => {
+      cy.get("#growingTextarea").should("have.attr", "growing")
+    });
+
+    it("grows in height when more lines are typed", () => {
+      cy.get("#growingTextarea").shadow().find("textarea").then($textarea => {
+        const initialHeight = $textarea[0].scrollHeight;
+
+        cy.wrap($textarea).type("3{enter}4{enter}");
+
+        cy.get("#growingTextarea").shadow().find("textarea").then($newTextarea => {
+        const newHeight = $newTextarea[0].scrollHeight;
+        expect(newHeight).to.be.greaterThan(initialHeight);
+        });
+      });
+    });
+
+    it("does not grow beyond the maximum height set by growingMaxLines", () => {
+      cy.get("#growingTextarea").shadow().find("textarea").then($textarea => {
+        cy.wrap($textarea).type(`1\n2\n3\n4\n5\n`);
+
+        cy.get("#growingTextarea").shadow().find("textarea").then($textAfterMax => {
+          const maxHeight = $textAfterMax[0].clientHeight;
+
+          cy.wrap($textAfterMax).type(`6\n7\n`);
+
+          cy.get("#growingTextarea").shadow().find("textarea").then($textAfterExceed => {
+            const newHeight = $textAfterExceed[0].clientHeight;
+            expect(newHeight).to.equal(maxHeight);
+          });
+        });
+      });
+    });
+
+    it("growingMaxLines attribute is set", () => {
+      cy.get("#growingTextarea").then($textArea => {
+        expect($textArea.attr("growing-max-lines")).eqls("5")
+      })
+    });
+  });
+});

package/cypress/specs/Toast.cy.tsx

@@ -0,0 +1,102 @@
+import UDExToast from "../../src/Toast.js";
+
+const basicToast = <UDExToast
+  id="toast"
+  duration={5000}
+  showCloseIcon={true}
+  open
+  >Toast content
+</UDExToast>
+
+const successToast = <UDExToast
+  id="successToast"
+  duration={5000}
+  showCloseIcon={true}
+  valueState="Success"
+  open
+  >Toast content
+</UDExToast>
+
+const errorToast = <UDExToast
+  id="errorToast"
+  duration={5000}
+  showCloseIcon={true}
+  valueState="Error"
+  open
+  >Toast content
+</UDExToast>
+
+const warningToast = <UDExToast
+  id="warningToast"
+  duration={5000}
+  showCloseIcon={true}
+  valueState="Warning"
+  open
+  >Toast content
+</UDExToast>
+
+describe("Toast", async () => {
+  beforeEach(() => {
+    cy.mount(basicToast);
+  })
+
+  it("is rendered correctly", () => {
+    cy.get("[udex-toast]").should("exist")
+  });
+
+  it("sets correctly duration", () => {
+    cy.get("#toast").then($toast => 
+      expect($toast.attr("duration")).to.eq("5000")
+    )
+  });
+
+  it("sets correctly valueState", () => {
+    cy.get("#toast").then($toast => 
+      expect($toast.attr("duration")).to.eq("5000")
+    )
+  });
+
+  it("renders content", () => {
+    cy.get("#toast").should("have.text", "Toast content")
+  });
+
+  it("renders default action state", () => {
+    cy.get("#toast").shadow().get(".udex-toast__icon").should("not.exist")
+  });
+
+  it("renders close icon", () => {
+    cy.get("#toast").shadow().find(".udex-toast__button").should("be.visible");
+  });
+
+  it("closes toast when clicking on close icon", () => {
+    cy.get("#toast").shadow().find(".udex-toast__button").click()
+    cy.get("#toast").should("not.be.visible");
+  });
+
+  describe("With Success valueState", () => {
+    it("renders sys-enter-2 icon when valueState is Success", () => {
+      cy.mount(successToast);
+      cy.get("#successToast").shadow().find(".udex-toast__icon").then($toastIcon => 
+       expect($toastIcon.attr("name")).to.eq("sys-enter-2")
+      )
+    });
+  })
+
+  describe("With Warning valueState", () => {
+    it("renders alert icon when valueState is Warning", () => {
+      cy.mount(warningToast);
+      cy.get("#warningToast").shadow().find(".udex-toast__icon").then($toastIcon => 
+       expect($toastIcon.attr("name")).to.eq("alert")
+      )
+    });
+  })
+
+  describe("With Error valueState", () => {
+    it("renders error icon when valueState is Error", () => {
+      cy.mount(errorToast);
+      cy.get("#errorToast").shadow().find(".udex-toast__icon").then($toastIcon => 
+        expect($toastIcon.attr("name")).to.eq("error")
+      )
+    });
+  })
+});

package/cypress/specs/Tooltip.cy.tsx

@@ -0,0 +1,75 @@
+import UDExTooltip from "../../src/Tooltip.js";
+import UDExButton from "../../src/Button.js";
+
+const basicTooltip = <UDExTooltip id="udex-tooltip" opener="opener">Lorem ipsum content</UDExTooltip>
+const tooltipWithTitle = <UDExTooltip id="udex-tooltip-title"  opener="opener" title="Title" placement="Top">Lorem ipsum content</UDExTooltip>
+const tooltipWithFocus = <UDExTooltip id="udex-tooltip-focus" opener="opener" title="Title" placement="Bottom" preventInitialFocus preventFocusRestore>Lorem ipsum content</UDExTooltip>  
+const tooltipOpener = <UDExButton id="opener">Default Tooltip opener</UDExButton>
+
+describe("Tooltip", () => {
+  it("tests if web component is correctly rendered", () => {
+    cy.mount(<UDExTooltip></UDExTooltip>);
+
+    cy.get("[udex-tooltip]").should("exist");
+  });
+  
+  it("renders the component without a title by default", () => {
+    cy.mount(basicTooltip);
+    cy.get("#udex-tooltip").should("not.have.property", "title")
+  });
+
+  it("sets the speficified title", () => {
+    cy.mount(tooltipWithTitle);
+    cy.get("#udex-tooltip-title").shadow()
+    .find(".udex-tooltip-title").should("have.text", "Title")
+  });
+
+  it("prevents initial focus when specified", () => {
+    cy.mount(tooltipWithFocus);
+    cy.get("#udex-tooltip-focus").shadow().find("ui5-popover").should("have.attr", "prevent-initial-focus")
+  });
+
+  it("prevents focus restore when specified", () => {
+    cy.mount(tooltipWithFocus);
+    cy.get("#udex-tooltip-focus").shadow().find("ui5-popover").should("have.attr", "prevent-focus-restore")
+  });
+
+  it("sets the placement property to End by default", () => {
+    cy.mount(basicTooltip);
+    cy.get("#udex-tooltip").shadow().find("ui5-popover").should(($tooltip) => {
+        expect($tooltip.attr("placement")).to.eq("End")
+    })
+  });
+
+  it("sets the placement property when specified", () => {
+    cy.mount(tooltipWithTitle);
+    cy.get("#udex-tooltip-title").shadow().find("ui5-popover").should(($tooltip) => {
+        expect($tooltip.attr("placement")).to.eq("Top")
+    })
+  });
+
+  it("opens tooltip on click", () => {
+    cy.mount(
+        <>
+          {tooltipOpener}
+          {basicTooltip}
+        </>
+      );
+
+    cy.get("udex-button").then(($opener) => {
+        const opener = $opener[0];
+        const tooltip = document.getElementById("udex-tooltip");
+
+        opener.addEventListener("click", () => {
+          tooltip.setAttribute("open", "true");
+        });
+    
+        opener.click();
+    
+        cy.wrap(tooltip)
+          .shadow()
+          .find("ui5-popover")
+          .should("have.attr", "open");
+      });
+  });
+});

package/cypress/specs/TruncatedText.cy.tsx

@@ -0,0 +1,44 @@
+import UDExTruncatedText from "../../src/TruncatedText.js";
+const basicTruncatedText = <UDExTruncatedText 
+  id="truncatedText"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum."
+  charLimit={150}>
+</UDExTruncatedText>
+
+const initiallyExpandedTruncatedText = <UDExTruncatedText 
+  id="initiallyExpandedTruncatedText"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mauris id aliquet consectetur. Nulla euismod ligula id ante feugiat ornare. Mauris enim velit, sodales eget lectus at, tristique condimentum sapien. Integer quam lacus, faucibus in lacus ut, ullamcorper dictum lacus. In ac lectus congue, blandit quam non, congue ante. Suspendisse sem mauris, tempor dignissim nisl facilisis, vulputate tincidunt turpis. In egestas nisl ut sollicitudin rutrum."
+  charLimit={150}
+  initiallyExpanded>
+</UDExTruncatedText>
+
+const notTruncatedText = <UDExTruncatedText 
+  id="notTruncatedText"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  charLimit={150}>
+</UDExTruncatedText>
+
+describe("TruncatedText", () => {
+  it("is correctly rendered", () => {
+    cy.mount(<UDExTruncatedText text="text"></UDExTruncatedText>);
+
+    cy.get("[udex-truncated-text]").should("exist");
+  });
+
+
+  it("is correctly initially expanded on render", () => {
+    const SUPPORTING_TEXT_TEST_VALUE = "Read less";
+    cy.mount(initiallyExpandedTruncatedText);
+    cy.get("#initiallyExpandedTruncatedText").shadow()
+    .find("#toggleButton").should("have.text", SUPPORTING_TEXT_TEST_VALUE);
+  });
+
+  it("has correct text after clicking on toggle", () => {
+    const SUPPORTING_TEXT_TEST_VALUE = "Read less";
+    cy.mount(basicTruncatedText);
+    const toggleButton = cy.get("#truncatedText").shadow()
+    .find("#toggleButton")
+    toggleButton.click()
+    toggleButton.should("have.text", SUPPORTING_TEXT_TEST_VALUE);
+  });
+});

package/cypress/specs/Upload.cy.tsx

@@ -0,0 +1,93 @@
+import UDExUpload from "../../src/Upload.js";
+import UDExUploadItem from "../../src/UploadItem.js";
+
+const basicUpload = <UDExUpload 
+  id="basicUpload" 
+  additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+  uploadButtonText="Choose file(s)"
+  uploadTitle="Upload title"
+  multiple={false}>
+</UDExUpload>
+
+const requiredUpload = <UDExUpload 
+  id="requiredUpload" 
+  additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+  uploadButtonText="Choose file(s)"
+  uploadTitle="Upload title"
+  multiple={false}
+  required>
+</UDExUpload>
+
+const singleUpload = <UDExUpload 
+  id="singleUpload" 
+  additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+  uploadButtonText="Choose file(s)"
+  uploadTitle="Upload title"
+  multiple={false}
+  errorText="Only one attachment is allowed">
+    <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
+</UDExUpload>
+
+describe("Upload", () => {
+  beforeEach(() => {
+    cy.mount(basicUpload)
+  });
+
+  it("correctly renders the title", () => {
+    cy.get("#basicUpload").shadow()
+    .find(".udex-upload__title").should("have.text", "Upload title")
+  });
+
+  it("correctly renders the additional text", async () => {
+    cy.get("#basicUpload").shadow()
+    .find(".udex-upload__additional-text").should("have.text", "Max 10MB files are allowed. Only support .jpg, .png and .svg files")
+  });
+
+  it("correctly renders the text in button for uploading files", () => {
+    cy.get("#basicUpload").shadow()
+    .find("udex-button").should("have.text", "Choose file(s)")
+  });
+
+  describe("Required", () => {
+    it("correctly renders the required attribute when specified", () => {
+      cy.mount(requiredUpload)
+      cy.get("#requiredUpload").shadow()
+      .find(".udex-upload__title").then($title => {
+        const titleCss = window.getComputedStyle($title[0], "::after")
+        expect(titleCss.content).to.eq('"*"');
+      })
+    });
+  })
+
+  describe("Single", () => {
+    beforeEach(() => {
+      cy.mount(singleUpload)
+    })
+
+    it("renders error message when uploading more than 1 file in single mode", () => {
+      cy.get("#singleUpload").shadow()
+      .find("#fileUploader").click()
+
+     cy.get("#singleUpload").shadow()
+      .find(".udex-upload__error").should("have.text", "Only one attachment is allowed")
+    });
+  })
+
+  it("correctly emits file-delete event when deleting item", () => {
+    const handleDelete = cy.stub().as("deleteHandler");
+    cy.mount(
+      <UDExUpload 
+      id="singleUpload" 
+      additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+      uploadButtonText="Choose file(s)"
+      uploadTitle="Upload title"
+      multiple={false}
+      onFileDelete={handleDelete}
+      errorText="Only one attachment is allowed">
+          <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
+      </UDExUpload>
+    );
+    cy.get("#singleUpload").find("udex-upload-item").shadow().find("udex-button").click()
+    cy.get("@deleteHandler").should("have.been.calledOnce")
+  });
+});

package/cypress/specs/UploadItem.cy.tsx

@@ -0,0 +1,93 @@
+import UDExUploadItem from "../../src/UploadItem.js";
+
+const uploadingUploadItem = <UDExUploadItem id="uploadingItem" fileName="File1" uploadState="Uploading" uploadPercentage={33}>
+    <span>Uploaded On: 1/1/2025 · File Size: 103 KB</span>
+</UDExUploadItem>
+
+const errorUploadItem = <UDExUploadItem id="errorItem" fileName="File1" uploadState="Error" uploadPercentage={44}>
+    <span>Error message</span>
+</UDExUploadItem>
+
+const uploadedUploadItem = <UDExUploadItem id="uploadedItem" fileName="File1" uploadState="Uploaded" uploadPercentage={55}>
+</UDExUploadItem>
+
+describe("UploadItem", () => {
+  describe("with Uploading state", () => {
+    beforeEach(() => {
+      cy.mount(uploadingUploadItem);
+    });
+
+    it("renders progress indicator with Information state for uploading", () => {
+      cy.get("#uploadingItem").shadow().find("udex-progress-bar").should("have.attr", "value-state", "Information");
+    });
+
+    it("displays name as plain text if file is not uploaded", () => {
+      cy.get("#uploadingItem").shadow().find(".udex-upload-item__name").should("be.visible");
+    });
+
+    it("renders upload percentage when uploadState is Uploading", () => {
+
+      cy.get("#uploadingItem")
+        .shadow()
+        .find("udex-progress-bar")
+        .should("exist").should("have.attr", "value", "33");
+    });
+  })
+
+
+  describe("with Error state", () => {
+    beforeEach(() => {
+      cy.mount(errorUploadItem);
+    });
+
+    it("renders progress indicator with Negative state for error", () => {
+      cy.get("#errorItem").shadow().find("udex-progress-bar").should("have.attr", "value-state", "Negative");
+    });
+
+    it("renders error message for error", () => {
+      cy.get("#errorItem").shadow().find(".udex-upload-item__error").should("be.visible");
+    });
+
+    it("renders upload percentage when uploadState is Error", () => {
+
+      cy.get("#errorItem")
+        .shadow()
+        .find("udex-progress-bar")
+        .should("exist").should("have.attr", "value", "44");
+    });
+  })
+
+  describe("with Uploaded state", () => {
+    beforeEach(() => {
+      cy.mount(uploadedUploadItem);
+    });
+
+    it("hides progress indicator when uploadState is Uploaded", () => {
+      cy.get("#uploadedItem").shadow().find("udex-progress-bar").should("not.exist");
+    });
+
+    it("displays uploaded item's name as a link", () => {
+      cy.get("#uploadedItem").shadow().find("udex-link").should("exist");
+    });
+
+    it("makes uploaded item's link downloadable", () => {
+      cy.get("#uploadedItem").shadow().find("udex-link").shadow()
+        .find(".ui5-link-root").should("have.attr", "download", "true");
+    });
+
+    it("emits request-delete event when delete button is clicked", () => {
+      const handleDelete = cy.stub().as("deleteHandler");
+      cy.mount(
+        <UDExUploadItem
+          id="uploadedItem"
+          fileName="File1"
+          uploadState="Uploaded"
+          uploadPercentage={33}
+          onRequestDelete={handleDelete}
+        />
+      );
+      cy.get("#uploadedItem").shadow().find("udex-button").click();
+      cy.get("@deleteHandler").should("have.been.calledOnce");
+    });
+  })
+});