@roo-ui/components
Version:
134 lines (119 loc) • 6.31 kB
JavaScript
/* eslint-env jest */
import React from 'react';
import { shallow } from 'enzyme';
import { axe } from 'jest-axe';
import StarRating from './StarRating';
let ratingType;
let rating;
describe('<StarRating />', () => {
it('renders the icons', () => {
rating = '1';
ratingType = 'SELF_RATED';
const wrapper = shallow(<StarRating rating={rating} ratingType={ratingType} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.length).toBe(5);
});
it('renders correctly', () => {
const wrapper = shallow(<StarRating rating={rating} ratingType={ratingType} size="16" />);
expect(wrapper).toMatchSnapshot();
});
it('has no accessibility errors', async () => {
const wrapper = shallow(<StarRating rating={rating} ratingType={ratingType} size="16" />);
expect(await axe(wrapper.html())).toHaveNoViolations();
});
['AAA', 'SELF_RATED'].forEach((type) => {
describe(`${type} Rated <StarRating />`, () => {
const ratingTypeIcon = (type === 'AAA') ? 'star' : 'circle';
it('renders the 5 star rating', () => {
rating = '5';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}`);
});
it('renders the 4.5 star rating', () => {
rating = '4.5';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Half`);
});
it('renders the 4 star rating', () => {
rating = '4';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 3.5 star rating', () => {
rating = '3.5';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Half`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 3 star rating', () => {
rating = '3';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 2.5 star rating', () => {
rating = '2.5';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}Half`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 2 star rating', () => {
rating = '2';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 1.5 star rating', () => {
rating = '1.5';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}Half`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
it('renders the 1 star rating', () => {
rating = '1';
const wrapper = shallow(<StarRating rating={rating} ratingType={type} size="16" />);
const stars = wrapper.find('Icon');
expect(stars.at(0).prop('name')).toEqual(`${ratingTypeIcon}`);
expect(stars.at(1).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(2).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(3).prop('name')).toEqual(`${ratingTypeIcon}Border`);
expect(stars.at(4).prop('name')).toEqual(`${ratingTypeIcon}Border`);
});
});
});
});