Adds some tests to RatingBar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditus/react-web-retail",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "A set of reusable React web components based on Material UI for retail applications.",
   "private": false,
   "main": "dist/index.js",

src/components/rating-bar/rating-bar.jsx

@@ -22,6 +22,7 @@ import RatingSummary from '../rating-summary/rating-summary';
  */
 function RatingBar(props) {
   const {
+    label,
     ratings,
     averageRating,
     totalRatings,
@@ -50,6 +51,7 @@ function RatingBar(props) {
       <Typography
         aria-describedby={id}
         aria-owns={id}
+        aria-label={label}
         aria-haspopup="true"
         onMouseEnter={handlePopoverOpen}
         onMouseLeave={handlePopoverClose}
@@ -60,7 +62,7 @@ function RatingBar(props) {
         ref={popoverAnchor}
       >
         <Rating
-          defaultValue={averageRating}
+          value={averageRating}
           size="small"
           precision={0.5}
           readOnly
@@ -114,6 +116,11 @@ RatingBar.propTypes = {
     PropTypes.number,
   ]),
 
+  /**
+   * Specifies the accessible label.
+   */
+  label: PropTypes.string,
+
   /**
    * Specifies the ratings to display. The array must be exactly 5 items in
    * length. Index 0 is the first star, index 1 is the second star, and so on.
@@ -137,6 +144,7 @@ RatingBar.propTypes = {
 
 RatingBar.defaultProps = {
   averageRating: null,
+  label: 'Rating',
   ratings: null,
   totalRatings: null,
   onTotalRatingClick: null,

src/components/rating-bar/rating-bar.test.jsx

@@ -0,0 +1,128 @@
+/**
+ * @jest-environment jsdom
+ */
+
+//
+// Copyright (c) DITUS INC. All rights reserved. See LICENSE file in the project
+// root for details.
+//
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import RatingBar from './rating-bar';
+
+describe('RatingBar', () => {
+  it('does not display when no ratings are specified.', async () => {
+    const { container } = render(
+      <RatingBar />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('does not display when exactly five ratings are not specified.', async () => {
+    const { container, rerender } = render(
+      <RatingBar
+        ratings={[]}
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(
+      <RatingBar
+        ratings={[1, 2, 3, 4]}
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+
+    rerender(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5, 6]}
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('displays when exactly five ratings are specified.', async () => {
+    const { container } = render(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+      />,
+    );
+
+    expect(container).not.toBeEmptyDOMElement();
+  });
+
+  it('displays the average rating as stars with up to 1 decimal place.', async () => {
+    const { container, rerender } = render(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+        averageRating={5}
+      />,
+    );
+
+    expect(container).not.toBeEmptyDOMElement();
+    expect(screen.queryByLabelText('5 Stars')).not.toBeNull();
+
+    rerender(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+        averageRating={4.5}
+      />,
+    );
+
+    expect(screen.queryByLabelText('4.5 Stars')).not.toBeNull();
+
+    rerender(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+        averageRating={4.625}
+      />,
+    );
+
+    expect(screen.queryByLabelText('4.5 Stars')).not.toBeNull();
+  });
+
+  it('displays a popover when the mouse hovers above the star rating.', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+        averageRating={5}
+      />,
+    );
+
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+
+    const rating = screen.queryByLabelText('Rating');
+    await user.hover(rating);
+
+    expect(screen.queryByRole('presentation')).toBeInTheDocument();
+  });
+
+  it('hides the popover when the mouse moves off of the star rating.', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <RatingBar
+        ratings={[1, 2, 3, 4, 5]}
+        averageRating={5}
+      />,
+    );
+
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+
+    const rating = screen.queryByLabelText('Rating');
+    await user.hover(rating);
+
+    expect(screen.queryByRole('presentation')).toBeInTheDocument();
+
+    await user.unhover(rating);
+
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+  });
+});