@instructure/ui-rating 8.53.3-snapshot-9 → 8.53.3-snapshot-11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-9](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-9) (2024-02-28)
+## [8.53.3-snapshot-11](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-11) (2024-02-29)
 
 **Note:** Version bump only for package @instructure/ui-rating
 

package/es/Rating/__new-tests__/Rating.test.js

@@ -0,0 +1,128 @@
+var _Rating, _Rating2, _Rating3, _Rating4, _Rating5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { View } from '@instructure/ui-view';
+import { Rating } from '../index';
+describe('<Rating />', () => {
+  it('should render the correct number of icons', () => {
+    const _render = render(_Rating || (_Rating = /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        iconCount: 5
+      }))),
+      container = _render.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(5);
+  });
+  it('should handle a valueMax of zero', () => {
+    const _render2 = render(_Rating2 || (_Rating2 = /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        valueMax: 0
+      }))),
+      container = _render2.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(3);
+  });
+  it('should fill the correct number of icons', () => {
+    const _render3 = render(_Rating3 || (_Rating3 = /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 89,
+        valueMax: 100
+      }))),
+      container = _render3.container;
+    const filledIcons = container.querySelectorAll('svg[name="IconStar"]');
+    expect(filledIcons).toHaveLength(4);
+  });
+  it('never renders more than `iconCount` icons', () => {
+    const _render4 = render(_Rating4 || (_Rating4 = /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 110,
+        valueMax: 100
+      }))),
+      container = _render4.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(5);
+  });
+  it('should render screen reader text to give context', () => {
+    const _render5 = render( /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 89,
+        valueMax: 100,
+        formatValueText: (current, max) => `${current} out of ${max}`
+      })),
+      container = _render5.container;
+    expect(container).toHaveTextContent('Course rating 4 out of 5');
+  });
+  it('should meet a11y standards', async () => {
+    const _render6 = render(_Rating5 || (_Rating5 = /*#__PURE__*/React.createElement(Rating, {
+        label: "Course rating",
+        iconCount: 5
+      }))),
+      container = _render6.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  describe('when passing down props to View', () => {
+    const allowedProps = {
+      margin: 'small'
+    };
+    View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, () => {
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const expectedErrorMessage = `Warning: [undefined] prop '${prop}' is not allowed.`;
+          const props = {
+            [prop]: 'foo'
+          };
+          render( /*#__PURE__*/React.createElement(Rating, Object.assign({
+            label: "Course rating",
+            iconCount: 5
+          }, props)));
+          expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+          consoleErrorSpy.mockRestore();
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          render( /*#__PURE__*/React.createElement(Rating, Object.assign({
+            label: "Course rating",
+            iconCount: 5
+          }, props)));
+          expect(consoleErrorSpy).not.toHaveBeenCalled();
+          consoleErrorSpy.mockRestore();
+        });
+      }
+    });
+  });
+});

package/es/RatingIcon/__new-tests__/RatingIcon.test.js

@@ -0,0 +1,109 @@
+var _RatingIcon, _RatingIcon2, _RatingIcon3, _RatingIcon4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InstUISettingsProvider } from '@instructure/emotion';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { RatingIcon } from '../index';
+describe('<RatingIcon />', () => {
+  it('transitions when filled on render and animateFill is true', async () => {
+    const _render = render( /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            Transition: {
+              duration: '100ms'
+            }
+          }
+        }
+      }, _RatingIcon || (_RatingIcon = /*#__PURE__*/React.createElement(RatingIcon, {
+        filled: true,
+        animateFill: true
+      })))),
+      container = _render.container;
+    await waitFor(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStar');
+      expect(icon).toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+  });
+  it('transitions when filled after render and animateFill is true', async () => {
+    const _render2 = render( /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            Transition: {
+              duration: '100ms'
+            }
+          }
+        }
+      }, _RatingIcon2 || (_RatingIcon2 = /*#__PURE__*/React.createElement(RatingIcon, {
+        filled: false,
+        animateFill: true
+      })))),
+      container = _render2.container,
+      rerender = _render2.rerender;
+    await waitFor(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStarLight');
+      expect(icon).not.toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+    rerender( /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+      theme: {
+        componentOverrides: {
+          Transition: {
+            duration: '100ms'
+          }
+        }
+      }
+    }, _RatingIcon3 || (_RatingIcon3 = /*#__PURE__*/React.createElement(RatingIcon, {
+      filled: true,
+      animateFill: true
+    }))));
+    await waitFor(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStar');
+      expect(icon).toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_RatingIcon4 || (_RatingIcon4 = /*#__PURE__*/React.createElement(RatingIcon, {
+        filled: true,
+        animateFill: true
+      }))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/Rating/__new-tests__/Rating.test.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _View = require("@instructure/ui-view/lib/View");
+var _index = require("../index");
+var _Rating, _Rating2, _Rating3, _Rating4, _Rating5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Rating />', () => {
+  it('should render the correct number of icons', () => {
+    const _render = (0, _react2.render)(_Rating || (_Rating = /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        iconCount: 5
+      }))),
+      container = _render.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(5);
+  });
+  it('should handle a valueMax of zero', () => {
+    const _render2 = (0, _react2.render)(_Rating2 || (_Rating2 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        valueMax: 0
+      }))),
+      container = _render2.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(3);
+  });
+  it('should fill the correct number of icons', () => {
+    const _render3 = (0, _react2.render)(_Rating3 || (_Rating3 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 89,
+        valueMax: 100
+      }))),
+      container = _render3.container;
+    const filledIcons = container.querySelectorAll('svg[name="IconStar"]');
+    expect(filledIcons).toHaveLength(4);
+  });
+  it('never renders more than `iconCount` icons', () => {
+    const _render4 = (0, _react2.render)(_Rating4 || (_Rating4 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 110,
+        valueMax: 100
+      }))),
+      container = _render4.container;
+    const icons = container.querySelectorAll('svg');
+    expect(icons).toHaveLength(5);
+  });
+  it('should render screen reader text to give context', () => {
+    const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        iconCount: 5,
+        valueNow: 89,
+        valueMax: 100,
+        formatValueText: (current, max) => `${current} out of ${max}`
+      })),
+      container = _render5.container;
+    expect(container).toHaveTextContent('Course rating 4 out of 5');
+  });
+  it('should meet a11y standards', async () => {
+    const _render6 = (0, _react2.render)(_Rating5 || (_Rating5 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
+        label: "Course rating",
+        iconCount: 5
+      }))),
+      container = _render6.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  describe('when passing down props to View', () => {
+    const allowedProps = {
+      margin: 'small'
+    };
+    _View.View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, () => {
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const expectedErrorMessage = `Warning: [undefined] prop '${prop}' is not allowed.`;
+          const props = {
+            [prop]: 'foo'
+          };
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Rating, Object.assign({
+            label: "Course rating",
+            iconCount: 5
+          }, props)));
+          expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+          consoleErrorSpy.mockRestore();
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Rating, Object.assign({
+            label: "Course rating",
+            iconCount: 5
+          }, props)));
+          expect(consoleErrorSpy).not.toHaveBeenCalled();
+          consoleErrorSpy.mockRestore();
+        });
+      }
+    });
+  });
+});

package/lib/RatingIcon/__new-tests__/RatingIcon.test.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _emotion = require("@instructure/emotion");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _RatingIcon, _RatingIcon2, _RatingIcon3, _RatingIcon4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<RatingIcon />', () => {
+  it('transitions when filled on render and animateFill is true', async () => {
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            Transition: {
+              duration: '100ms'
+            }
+          }
+        }
+      }, _RatingIcon || (_RatingIcon = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
+        filled: true,
+        animateFill: true
+      })))),
+      container = _render.container;
+    await (0, _react2.waitFor)(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStar');
+      expect(icon).toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+  });
+  it('transitions when filled after render and animateFill is true', async () => {
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
+        theme: {
+          componentOverrides: {
+            Transition: {
+              duration: '100ms'
+            }
+          }
+        }
+      }, _RatingIcon2 || (_RatingIcon2 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
+        filled: false,
+        animateFill: true
+      })))),
+      container = _render2.container,
+      rerender = _render2.rerender;
+    await (0, _react2.waitFor)(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStarLight');
+      expect(icon).not.toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+    rerender( /*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
+      theme: {
+        componentOverrides: {
+          Transition: {
+            duration: '100ms'
+          }
+        }
+      }
+    }, _RatingIcon3 || (_RatingIcon3 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
+      filled: true,
+      animateFill: true
+    }))));
+    await (0, _react2.waitFor)(() => {
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+      expect(icon.getAttribute('name')).toBe('IconStar');
+      expect(icon).toHaveClass('transition--scale-entered');
+    }, {
+      timeout: 500
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_RatingIcon4 || (_RatingIcon4 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
+        filled: true,
+        animateFill: true
+      }))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-rating",
-  "version": "8.53.3-snapshot-9",
+  "version": "8.53.3-snapshot-11",
   "description": "A static rating component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.53.3-snapshot-9",
-    "@instructure/emotion": "8.53.3-snapshot-9",
-    "@instructure/shared-types": "8.53.3-snapshot-9",
-    "@instructure/ui-a11y-content": "8.53.3-snapshot-9",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-9",
-    "@instructure/ui-icons": "8.53.3-snapshot-9",
-    "@instructure/ui-motion": "8.53.3-snapshot-9",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-9",
-    "@instructure/ui-testable": "8.53.3-snapshot-9",
-    "@instructure/ui-view": "8.53.3-snapshot-9",
+    "@instructure/console": "8.53.3-snapshot-11",
+    "@instructure/emotion": "8.53.3-snapshot-11",
+    "@instructure/shared-types": "8.53.3-snapshot-11",
+    "@instructure/ui-a11y-content": "8.53.3-snapshot-11",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-11",
+    "@instructure/ui-icons": "8.53.3-snapshot-11",
+    "@instructure/ui-motion": "8.53.3-snapshot-11",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-11",
+    "@instructure/ui-testable": "8.53.3-snapshot-11",
+    "@instructure/ui-view": "8.53.3-snapshot-11",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-9",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-9",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-9",
-    "@instructure/ui-themes": "8.53.3-snapshot-9"
+    "@instructure/ui-axe-check": "8.53.3-snapshot-11",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-11",
+    "@instructure/ui-themes": "8.53.3-snapshot-11",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Rating/__new-tests__/Rating.test.tsx

@@ -0,0 +1,140 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { View } from '@instructure/ui-view'
+
+import { Rating } from '../index'
+
+describe('<Rating />', () => {
+  it('should render the correct number of icons', () => {
+    const { container } = render(<Rating label="Course rating" iconCount={5} />)
+    const icons = container.querySelectorAll('svg')
+
+    expect(icons).toHaveLength(5)
+  })
+
+  it('should handle a valueMax of zero', () => {
+    const { container } = render(<Rating label="Course rating" valueMax={0} />)
+    const icons = container.querySelectorAll('svg')
+
+    expect(icons).toHaveLength(3)
+  })
+
+  it('should fill the correct number of icons', () => {
+    const { container } = render(
+      <Rating
+        label="Course rating"
+        iconCount={5}
+        valueNow={89}
+        valueMax={100}
+      />
+    )
+    const filledIcons = container.querySelectorAll('svg[name="IconStar"]')
+
+    expect(filledIcons).toHaveLength(4)
+  })
+
+  it('never renders more than `iconCount` icons', () => {
+    const { container } = render(
+      <Rating
+        label="Course rating"
+        iconCount={5}
+        valueNow={110}
+        valueMax={100}
+      />
+    )
+
+    const icons = container.querySelectorAll('svg')
+
+    expect(icons).toHaveLength(5)
+  })
+
+  it('should render screen reader text to give context', () => {
+    const { container } = render(
+      <Rating
+        label="Course rating"
+        iconCount={5}
+        valueNow={89}
+        valueMax={100}
+        formatValueText={(current, max) => `${current} out of ${max}`}
+      />
+    )
+
+    expect(container).toHaveTextContent('Course rating 4 out of 5')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<Rating label="Course rating" iconCount={5} />)
+
+    const axeCheck = await runAxeCheck(container)
+    expect(axeCheck).toBe(true)
+  })
+
+  describe('when passing down props to View', () => {
+    const allowedProps: { [key: string]: any } = {
+      margin: 'small'
+    }
+
+    View.allowedProps
+      .filter((prop) => prop !== 'children')
+      .forEach((prop) => {
+        if (Object.keys(allowedProps).indexOf(prop) < 0) {
+          it(`should NOT allow the '${prop}' prop`, () => {
+            const consoleErrorSpy = jest
+              .spyOn(console, 'error')
+              .mockImplementation(() => {})
+            const expectedErrorMessage = `Warning: [undefined] prop '${prop}' is not allowed.`
+            const props = {
+              [prop]: 'foo'
+            }
+
+            render(<Rating label="Course rating" iconCount={5} {...props} />)
+            expect(consoleErrorSpy).toHaveBeenCalledWith(
+              expect.stringContaining(expectedErrorMessage),
+              expect.any(String)
+            )
+
+            consoleErrorSpy.mockRestore()
+          })
+        } else {
+          it(`should allow the '${prop}' prop`, () => {
+            const props = { [prop]: allowedProps[prop] }
+            const consoleErrorSpy = jest
+              .spyOn(console, 'error')
+              .mockImplementation(() => {})
+
+            render(<Rating label="Course rating" iconCount={5} {...props} />)
+            expect(consoleErrorSpy).not.toHaveBeenCalled()
+
+            consoleErrorSpy.mockRestore()
+          })
+        }
+      })
+  })
+})