Skip to content

Commit

Permalink
test: Fix failing unit test and warnings (#1773)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyletsang
kyletsang committed Jan 29, 2020
1 parent 56c1d77 commit 80bd3e2
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 61 deletions.
1 change: 1 addition & 0 deletions src/Label.js
View file
Expand Up @@ -8,6 +8,7 @@ const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);

const columnProps = PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string,
PropTypes.number,
PropTypes.shape({
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/Carousel.spec.js
View file
Expand Up @@ -31,8 +31,8 @@ describe('Carousel', () => {

describe('items', () => {
it('should render custom tag', () => {
const wrapper = mount(<CarouselItem tag="image" />);
expect(wrapper.find('image').length).toBe(1);
const wrapper = mount(<CarouselItem tag="img" />);
expect(wrapper.find('img').length).toBe(1);
});

it('should render an image if one is passed in', () => {
Expand Down
98 changes: 49 additions & 49 deletions src/__tests__/CustomInput.spec.js
View file
Expand Up @@ -5,17 +5,17 @@ import { CustomInput } from '../';
describe('Custom Inputs', () => {
describe('CustomCheckbox', () => {
it('should render an optional label', () => {
const checkbox = mount(<CustomInput type="checkbox" label="Yo!" />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" label="Yo!" />);
expect(checkbox.find('label').text()).toBe('Yo!');
});

it('should render children in the outer div', () => {
const checkbox = shallow(<CustomInput type="checkbox" />);
const checkbox = shallow(<CustomInput type="checkbox" id="yo" />);
expect(checkbox.type()).toBe('div');
});

it('should render an input with the type of checkbox', () => {
const checkbox = mount(<CustomInput type="checkbox" />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" />);
expect(checkbox.find('input').prop('type')).toBe('checkbox');
});

Expand All @@ -32,56 +32,56 @@ describe('Custom Inputs', () => {
});

it('should pass classNames to the outer div', () => {
const checkbox = mount(<CustomInput type="checkbox" className="yo" />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" className="yo" />);
expect(checkbox.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
});

it('should add class is-invalid when invalid is true', () => {
const checkbox = mount(<CustomInput type="checkbox" invalid />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" invalid />);
expect(checkbox.find('input').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const checkbox = mount(<CustomInput type="checkbox" valid />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" valid />);
expect(checkbox.find('input').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

it('should pass all other props to the input node', () => {
const checkbox = mount(<CustomInput type="checkbox" data-testprop="yo" />);
const checkbox = mount(<CustomInput type="checkbox" id="yo" data-testprop="yo" />);
expect(checkbox.find('input').prop('data-testprop')).toBe('yo');
});

it('should reference innerRef to the input node', () => {
const ref = React.createRef();
mount(<CustomInput type="checkbox" innerRef={ref} />);
mount(<CustomInput type="checkbox" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});
});

describe('CustomRadio', () => {
it('should render an optional label', () => {
const radio = mount(<CustomInput type="radio" label="Yo!" />);
const radio = mount(<CustomInput type="radio" id="yo" label="Yo!" />);
expect(radio.find('label').text()).toBe('Yo!');
});

it('should render children in the outer div', () => {
const radio = shallow(<CustomInput type="radio" />);
const radio = shallow(<CustomInput type="radio" id="yo" />);
expect(radio.type()).toBe('div');
});

it('should render an input with the type of radio', () => {
const radio = mount(<CustomInput type="radio" />);
const radio = mount(<CustomInput type="radio" id="yo" />);
expect(radio.find('input').prop('type')).toBe('radio');
});

it('should add class is-invalid when invalid is true', () => {
const radio = mount(<CustomInput type="radio" invalid />);
const radio = mount(<CustomInput type="radio" id="yo" invalid />);
expect(radio.find('input').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const radio = mount(<CustomInput type="radio" valid />);
const radio = mount(<CustomInput type="radio" id="yo" valid />);
expect(radio.find('input').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

Expand All @@ -98,36 +98,36 @@ describe('Custom Inputs', () => {
});

it('should pass classNames to the outer div', () => {
const radio = mount(<CustomInput type="radio" className="yo" />);
const radio = mount(<CustomInput type="radio" id="yo" className="yo" />);
expect(radio.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
});

it('should pass all other props to the input node', () => {
const radio = mount(<CustomInput type="radio" data-testprop="yo" />);
const radio = mount(<CustomInput type="radio" id="yo" data-testprop="yo" />);
expect(radio.find('input').prop('data-testprop')).toBe('yo');
});

it('should reference innerRef to the input node', () => {
const ref = React.createRef();
mount(<CustomInput type="radio" innerRef={ref} />);
mount(<CustomInput type="radio" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});
});

describe('CustomSwitch', () => {
it('should render an optional label', () => {
const checkbox = mount(<CustomInput type="switch" label="Yo!" />);
const checkbox = mount(<CustomInput type="switch" id="yo" label="Yo!" />);
expect(checkbox.find('label').text()).toBe('Yo!');
});

it('should render children in the outer div', () => {
const checkbox = shallow(<CustomInput type="switch" />);
const checkbox = shallow(<CustomInput type="switch" id="yo" />);
expect(checkbox.type()).toBe('div');
});

it('should render an input with the type of checkbox', () => {
const checkbox = mount(<CustomInput type="switch" />);
const checkbox = mount(<CustomInput type="switch" id="yo" />);
expect(checkbox.find('input').prop('type')).toBe('checkbox');
});

Expand All @@ -144,95 +144,95 @@ describe('Custom Inputs', () => {
});

it('should pass classNames to the outer div', () => {
const checkbox = mount(<CustomInput type="switch" className="yo" />);
const checkbox = mount(<CustomInput type="switch" id="yo" className="yo" />);
expect(checkbox.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
});

it('should add class is-invalid when invalid is true', () => {
const checkbox = mount(<CustomInput type="switch" invalid />);
const checkbox = mount(<CustomInput type="switch" id="yo" invalid />);
expect(checkbox.find('input').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const checkbox = mount(<CustomInput type="switch" valid />);
const checkbox = mount(<CustomInput type="switch" id="yo" valid />);
expect(checkbox.find('input').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

it('should pass all other props to the input node', () => {
const checkbox = mount(<CustomInput type="switch" data-testprop="yo" />);
const checkbox = mount(<CustomInput type="switch" id="yo" data-testprop="yo" />);
expect(checkbox.find('input').prop('data-testprop')).toBe('yo');
});

it('should reference innerRef to the input node', () => {
const ref = React.createRef();
mount(<CustomInput type="switch" innerRef={ref} />);
mount(<CustomInput type="switch" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});
});

describe('CustomSelect', () => {
it('should render children in the outer div', () => {
const select = shallow(<CustomInput type="select" />);
const select = shallow(<CustomInput type="select" id="yo" />);
expect(select.type()).toBe('select');
});

it('should add class is-invalid when invalid is true', () => {
const select = mount(<CustomInput type="select" invalid />);
const select = mount(<CustomInput type="select" id="yo" invalid />);
expect(select.find('select').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const select = mount(<CustomInput type="select" valid />);
const select = mount(<CustomInput type="select" id="yo" valid />);
expect(select.find('select').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

it('should add the size class when bsSize is provided', () => {
const select = mount(<CustomInput type="select" bsSize="lg" />);
const select = mount(<CustomInput type="select" id="yo" bsSize="lg" />);
expect(select.find('select').prop('className').indexOf('custom-select-lg') > -1).toBeTruthy();
});

it('should pass classNames to the outer div', () => {
const select = mount(<CustomInput type="select" className="yo" />);
const select = mount(<CustomInput type="select" id="yo" className="yo" />);
expect(select.find('.custom-select').prop('className').indexOf('yo') > -1).toBeTruthy();
});

it('should pass all other props to the input node', () => {
const select = mount(<CustomInput type="select" data-testprop="yo" />);
const select = mount(<CustomInput type="select" id="yo" data-testprop="yo" />);
expect(select.find('select').prop('data-testprop')).toBe('yo');
});

it('should remove type prop from the input node', () => {
const select = mount(<CustomInput type="select" />);
const select = mount(<CustomInput type="select" id="yo" />);
expect(select.find('select').prop('type')).toBeUndefined();
});

it('should reference innerRef to the select node', () => {
const ref = React.createRef();
mount(<CustomInput type="select" innerRef={ref} />);
mount(<CustomInput type="select" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLSelectElement);
});
});

describe('CustomFile', () => {
it('should render children in the outer div', () => {
const file = mount(<CustomInput type="file" />);
const file = mount(<CustomInput type="file" id="yo" />);
expect(file.find('.custom-file').first().type()).toBe('div');
});

it('should add class is-invalid when invalid is true', () => {
const file = mount(<CustomInput type="file" invalid />);
const file = mount(<CustomInput type="file" id="yo" invalid />);
expect(file.find('input').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const file = mount(<CustomInput type="file" valid />);
const file = mount(<CustomInput type="file" id="yo" valid />);
expect(file.find('input').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

it('should render an input with the type of file', () => {
const file = mount(<CustomInput type="file" />);
const file = mount(<CustomInput type="file" id="yo" />);
expect(file.find('input').prop('type')).toBe('file');
});

Expand All @@ -249,39 +249,39 @@ describe('Custom Inputs', () => {
});

it('should pass classNames to the outer div', () => {
const file = mount(<CustomInput type="file" className="yo" />);
const file = mount(<CustomInput type="file" id="yo" className="yo" />);
expect(file.find('.custom-file').prop('className').indexOf('yo') > -1).toBeTruthy();
});

it('should set the label when provided', () => {
const file = mount(<CustomInput type="file" label="yo" />);
const file = mount(<CustomInput type="file" id="yo" label="yo" />);
expect(file.find('label').text()).toBe('yo');
});

it('should pass all other props to the input node', () => {
const file = mount(<CustomInput type="file" data-testprop="yo" />);
const file = mount(<CustomInput type="file" id="yo" data-testprop="yo" />);
expect(file.find('input').prop('data-testprop')).toBe('yo');
});

it('should reference innerRef to the input node', () => {
const ref = React.createRef();
mount(<CustomInput type="file" innerRef={ref} />);
mount(<CustomInput type="file" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});

describe('onChange', () => {
it('calls props.onChange if it exists', () => {
const onChange = jest.fn();
const file = mount(<CustomInput type="file" onChange={onChange} />);
const file = mount(<CustomInput type="file" id="yo" onChange={onChange} />);

file.find('input').hostNodes().simulate('change');
expect(onChange).toHaveBeenCalled();
});
});

it('removes fakepath from file name', () => {
const file = mount(<CustomInput type="file" />);
const file = mount(<CustomInput type="file" id="yo" />);

file.find('input').hostNodes().simulate('change', {
target:{
Expand All @@ -293,7 +293,7 @@ describe('Custom Inputs', () => {
});

it('lists multiple files when supported', () => {
const file = mount(<CustomInput type="file" multiple/>);
const file = mount(<CustomInput type="file" id="yo" multiple/>);

file.find('input').hostNodes().simulate('change', {
target:{
Expand All @@ -312,33 +312,33 @@ describe('Custom Inputs', () => {

describe('CustomRange', () => {
it('should render children in the outer div', () => {
const range = shallow(<CustomInput type="range" />);
const range = shallow(<CustomInput type="range" id="yo" />);
expect(range.type()).toBe('input');
});

it('should add class is-invalid when invalid is true', () => {
const range = mount(<CustomInput type="range" invalid />);
const range = mount(<CustomInput type="range" id="yo" invalid />);
expect(range.find('input').prop('className').indexOf('is-invalid') > -1).toBeTruthy();
});

it('should add class is-valid when valid is true', () => {
const range = mount(<CustomInput type="range" valid />);
const range = mount(<CustomInput type="range" id="yo" valid />);
expect(range.find('input').prop('className').indexOf('is-valid') > -1).toBeTruthy();
});

it('should render an input with the type of range', () => {
const range = mount(<CustomInput type="range" />);
const range = mount(<CustomInput type="range" id="yo" />);
expect(range.find('input').prop('type')).toBe('range');
});

it('should pass all other props to the input node', () => {
const range = mount(<CustomInput type="range" data-testprop="yo" />);
const range = mount(<CustomInput type="range" id="yo" data-testprop="yo" />);
expect(range.find('input').prop('data-testprop')).toBe('yo');
});

it('should reference innerRef to the input node', () => {
const ref = React.createRef();
mount(<CustomInput type="range" innerRef={ref} />);
mount(<CustomInput type="range" id="yo" innerRef={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/DropdownMenu.spec.js
View file
Expand Up @@ -171,14 +171,14 @@ describe('DropdownMenu', () => {
expect(wrapper.find(Popper).prop('positionFixed')).toBe(true);
});

it('should not render multiple children when isOpen is false', () => {
it('should not render Popper when isOpen is false', () => {
const wrapper = mount(
<DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
<DropdownMenu right>Ello world</DropdownMenu>
</DropdownContext.Provider>
);

expect(wrapper.childAt(0).children().length).toBe(0);
expect(wrapper.find(Popper).length).toBe(0);
});

it('should render custom tag', () => {
Expand Down

0 comments on commit 80bd3e2

Please sign in to comment.