playbook_ui 13.13.0.pre.alpha.play900startratingasinput1657 → 13.13.0.pre.alpha.play10221678

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -1,22 +1,24 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
 
-import StarRating from "./_star_rating"
+import StarRating from "./_star_rating";
 
-const testId = "star-rating-kit"
+const testId = "star-rating-kit";
 
 describe("Star Rating Kit", () => {
   test("Expects to have correct classname", () => {
     render(
       <StarRating
           data={{ testid: testId }}
+          rating={2}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    expect(kit.className).toBe("pb_star_rating_kit")
 
-  })
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
 
   test('should render aria-label', () => {
     render(
@@ -25,47 +27,45 @@ describe("Star Rating Kit", () => {
           data={{ testid: testId }}
           rating={2}
       />
-    )
+    );
 
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-  })
+  });
 
-  test("Displays correct denominator", () => {
+  test("Displays two highlighted stars", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          denominator={4}
           rating={2}
-          size="xs"
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const stars = highlight.querySelectorAll(".pb_star_xs")
-    const count = stars.length
 
-    expect(count).toBe(4)
-  })
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
 
-  test("Uses correct size", () => {
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          layoutOption="number"
-          rating={2}
-          size="lg"
+          rating={3.5}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const title = kit.querySelector(".pb_star_rating_number_lg")
-    const stars = highlight.querySelectorAll(".pb_star_lg")
-    const count = stars.length
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
 
-    expect(title.className).toBe("pb_title_kit_size_2 pr_sm pb_star_rating_number_lg")
-    expect(count).toBe(5)
-  })
-})
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});