Merge pull request #11 from bigbellies/rating-tests

Added tests for Rating and RatingStar

src/Rating/Rating.js

@@ -65,6 +65,7 @@ class Rating extends Component<Props, State> {
         {times(maxRating, index => (
           <RatingStar
             key={index}
+            aria-label={index + 1}
             size={size}
             active={isSelecting ? selectedIndex >= index : rating >= index + 1}
             onClick={() => this.handleStarClick(index)}

src/Rating/__tests__/Rating.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import { fireEvent, cleanup } from 'react-testing-library';
+import Rating from '../Rating';
+import 'jest-styled-components';
+
+afterEach(cleanup);
+
+it('renders correctly for a basic rating', () => {
+  const { container } = render(<Rating />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders correctly with a default rating', () => {
+  const { container } = render(<Rating defaultRating={3} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders correctly with a different max rating', () => {
+  const { container } = render(<Rating maxRating={10} />);
+  expect(container).toMatchSnapshot();
+});
+
+describe('sizes', () => {
+  ['small', 'medium', 'large'].forEach(size => {
+    it(`renders correctly for a select with size ${size}`, () => {
+      const { container } = render(<Rating size={size} />);
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
+
+describe('behavior', () => {
+  it('should call onRate with correct values when a rating is selected', () => {
+    const handleRate = jest.fn();
+    const { getByLabelText } = render(<Rating onRate={handleRate} />);
+    const fifthStar = getByLabelText('5');
+    fireEvent.click(fifthStar);
+    expect(handleRate).toHaveBeenCalledWith({ rating: 5, maxRating: 5 });
+  });
+
+  it('should call not call onRate when disabled', () => {
+    const handleRate = jest.fn();
+    const { getByLabelText } = render(<Rating onRate={handleRate} disabled />);
+    const fifthStar = getByLabelText('5');
+    fireEvent.click(fifthStar);
+    expect(handleRate).not.toHaveBeenCalled();
+  });
+});

src/Rating/__tests__/RatingStar.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import RatingStar from '../RatingStar';
+import 'jest-styled-components';
+
+it('renders correctly in basic form', () => {
+  const { container } = render(<RatingStar />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders correctly when active', () => {
+  const { container } = render(<RatingStar active />);
+  expect(container).toMatchSnapshot();
+});
+
+describe('sizes', () => {
+  ['small', 'medium', 'large'].forEach(size => {
+    it(`renders correctly for a select with size ${size}`, () => {
+      const { container } = render(<RatingStar size={size} />);
+      expect(container).toMatchSnapshot();
+    });
+  });
+});