@sapudex/web-components 2.33.0 → 2.35.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -1,6 +1,18 @@
 import {UDExFilterMenu, UDExFilterMenuItem, UDExFilterMenuGroupHeader, UDExFilterMenuSelectAll} from "../support/component-imports.js";
 import {UDExListMode} from "../../src/types/List.js";
 
+const filterMenuWithRating = <UDExFilterMenu
+  id="filter-menu-rating"
+  filter-name="Rating"
+  show-search-input="true"
+  mode={UDExListMode.MultiSelect}>
+  <UDExFilterMenuItem rating="5" ratingCount="5.0" totalCount="23"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="4" ratingCount="4.0" totalCount="17"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="3" ratingCount="3.0" totalCount="34"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="2" ratingCount="2.0" totalCount="40"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="1" ratingCount="1.0" totalCount="73"></UDExFilterMenuItem>
+</UDExFilterMenu>
+
 const filterMenu = <>
   <div id="resetClick"></div>
   <div id="resultClick"></div>
@@ -911,4 +923,45 @@ describe("Filter Menu component", () => {
       cy.get("#resultSelectAll").should("have.text", "ui5-select-all");
     });
   });
+
+  describe("Filter Menu Rating Indicator", () => {
+    it("renders rating indicator in dropdown items when rating is set", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find("[udex-rating-indicator]")
+        .should("exist");
+    });
+
+    it("passes correct rating attributes to dropdown list items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0)
+        .should("have.attr", "rating", "5")
+        .and("have.attr", "rating-count", "5.0")
+        .and("have.attr", "total-count", "23");
+    });
+
+    it("renders correct number of rating items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item")
+        .should("have.length", 5);
+    });
+
+    it("selects a rating item on click", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item")
+        .should("have.attr", "data-selected", "true");
+    });
+  });
 });

package/cypress/specs/ListItem.cy.tsx

@@ -4,8 +4,9 @@ import { UDExAvatarShape } from "../../dist/Avatar.js";
 import { UDExAvatarSize } from "../../src/Avatar.js";
 import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
+import { UDExDisplayType } from "../../src/RatingIndicator.js";
 
-const defaultListItem = <UDExListItem
+const defaultListItem = <UDExListItem         
   id="listItem"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -20,7 +21,7 @@ const defaultListItem = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemSuccess = <UDExListItem
+const listItemSuccess = <UDExListItem         
   id="listItemSuccess"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -33,7 +34,7 @@ const listItemSuccess = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemError = <UDExListItem
+const listItemError = <UDExListItem         
   id="listItemError"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -46,7 +47,7 @@ const listItemError = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWarning = <UDExListItem
+const listItemWarning = <UDExListItem         
   id="listItemWarning"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -59,7 +60,7 @@ const listItemWarning = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWithIcons = <UDExListItem
+const listItemWithIcons = <UDExListItem         
   id="listItemIcons"
   accessible-name="accessible-name"
   supporting-text="Supporting text"
@@ -73,6 +74,13 @@ const listItemWithIcons = <UDExListItem
   <UDExButton accessible-name='Action' slot='secondIcon' design='Tertiary' icon='decline' size='Small'></UDExButton>
 </UDExListItem>
 
+const listItemWithRating = <UDExListItem
+  id="listItemRating"
+  rating="4"
+  ratingCount="4.0"
+  totalCount="20">
+</UDExListItem>
+
 describe("ListItem", () => {
     describe("Default rendering", () => {
       it("should render the component", () => {
@@ -80,32 +88,36 @@ describe("ListItem", () => {
         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");
@@ -122,51 +134,91 @@ describe("ListItem", () => {
         cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "size", UDExAvatarSize.M);
       });
     });
-
+  
     describe("With Icons", () => {
       beforeEach(() => {
         cy.mount(listItemWithIcons);
       });
-
+  
       it("renders first and second icons when both slots are filled", () => {
         cy.get("#listItemIcons").find("udex-button").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 data-selected", () => {
         cy.realPress("Enter");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
-
+  
       it("pressing Space sets data-selected", () => {
         cy.realPress("Space");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
     });
-
+  
     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)");
       });
     });
+
+    describe("RatingIndicator", () => {
+      beforeEach(() => {
+        cy.mount(listItemWithRating);
+        cy.get("#listItemRating").shadow().find("[udex-rating-indicator]").as("rating");
+      });
+
+      it("renders rating indicator when rating is set", () => {
+        cy.get("@rating").should("exist");
+      });
+
+      it("passes correct value to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "value", "4");
+      });
+
+      it("passes correct rating-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "rating-count", "4.0");
+      });
+
+      it("passes correct total-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "total-count", "20");
+      });
+
+      it("sets max to 5 by default", () => {
+        cy.get("@rating").should("have.attr", "max", "5");
+      });
+
+      it("sets display to Desktop by default", () => {
+        cy.get("@rating").should("have.attr", "display", UDExDisplayType.Desktop);
+      });
+
+      it("sets disabled and readonly states by default", () => {
+        cy.get("@rating").should("have.attr", "disabled");
+        cy.get("@rating").should("have.attr", "readonly");
+      });
+
+      it("sets correct aria-label on rating indicator", () => {
+        cy.get("@rating").should("have.attr", "aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
+      });
+    });
 });