nexxtway/react-rainbow

View on GitHub
src/components/Rating/__test__/rating.spec.js

Summary

Maintainability
B
6 hrs
Test Coverage
import React from 'react';
import { mount } from 'enzyme';
import Rating from '..';
import { StyledLabel } from '../styled';
import ErrorText from '../../Input/styled/errorText';

describe('<Rating />', () => {
    it('should set the value of the star hovered to the state and set the value passed to the state when the mouse leave the component', () => {
        const component = mount(<Rating value="2" />);
        component.find('input[value=3]').simulate('mouseover');
        expect(component.state().value).toBe('3');
        component.simulate('mouseleave');
        expect(component.state().value).toBe('2');
    });
    it('should not set the value of the star hovered to the state when readOnly is true', () => {
        const component = mount(<Rating value="2" readOnly />);
        component.find('input[value=4]').simulate('mouseover');
        expect(component.state().value).toBe('2');
    });
    it('should render a label when label prop is passed', () => {
        const component = mount(<Rating label="Rating Label" />);
        expect(component.find(StyledLabel).exists()).toBe(true);
    });
    it('should set "left" to labelAlignment prop passed in the Label component', () => {
        const component = mount(<Rating label="Rating Label" labelAlignment="left" />);
        expect(component.find(StyledLabel).prop('labelAlignment')).toBe('left');
    });
    it('should set "right" to labelAlignment prop passed in the Label component', () => {
        const component = mount(<Rating label="Rating Label" labelAlignment="right" />);
        expect(component.find(StyledLabel).prop('labelAlignment')).toBe('right');
    });
    it('should set "center" to labelAlignment if prop not passed in the Label component', () => {
        const component = mount(<Rating label="Rating Label" />);
        expect(component.find(StyledLabel).prop('labelAlignment')).toBe('center');
    });
    it('should set the inputs as required when required is true', () => {
        const component = mount(<Rating label="Rating Label" required />);
        component.find('input[type="radio"]').forEach(input => {
            expect(input.prop('required')).toBe(true);
        });
    });
    it('should show the help message', () => {
        const component = mount(
            <Rating label="Rating Label" bottomHelpText={<p id="help-text" />} />,
        );
        expect(component.find('#help-text').exists()).toBe(true);
    });
    it('should show the error message', () => {
        const component = mount(<Rating label="Rating Label" error="Error text" />);
        const errorTextId = component.find(ErrorText).prop('id');
        expect(errorTextId).toMatch(/error-message/);
        component.find('input[type="radio"]').forEach(input => {
            expect(input.prop('aria-describedby')).toBe(errorTextId);
        });
    });
});