Last active
July 16, 2019 16:39
-
-
Save ned-alyona/a68a910c7fef1df521b06a5d394424e1 to your computer and use it in GitHub Desktop.
React components testing with Jest & Enzyme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check DatePicker popup open', () => { | |
const DateComponent = mount(<DateInput />), | |
dateInput = DateComponent.find("input[type='text']"); | |
dateInput.simulate('click'); | |
expect(DateComponent.find('.react-datepicker')).toHaveLength(1); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check prop title by default', () => { | |
const SpinnerComponent = mount(<Spinner />); | |
expect(SpinnerComponent.find('p').text()).toEqual('Please wait'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const date = '21.11.2015', | |
format = 'DD.MM.YYYY'; | |
it('check value is instanceof moment', () => { | |
const value = valueToDate(date, format); | |
expect(value instanceof moment).toBeTruthy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const date = '21.11.2015', | |
format = 'DD.MM.YYYY'; | |
it('render valueToDate utility with defined value', () => { | |
const value = valueToDate(date, format); | |
expect(value).toEqual(moment(date, format)); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check input component is wrapped in BaseFieldLayout', () => { | |
expect(BaseFieldHOCComponent.props.className).toEqual('form-group'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check subTitle is not rendered', () => { | |
const SpinnerComponent = mount(<Spinner />); | |
expect(SpinnerComponent.find('p').length).toEqual(1); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const props = { | |
subTitle: 'left 1 minute' | |
}, | |
SpinnerComponent = mount(<Spinner {...props} />); | |
it('render correct text', () => { | |
expect(SpinnerComponent.find('p').at(1).text()).toEqual(props.subTitle); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check the modal is closed', () => { | |
ModalTriggerComponent.instance().close(); | |
expect(ModalTriggerComponent.state().toggled).toBeFalsy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check the modal is opened', () => { | |
const event = { | |
preventDefault: () => {}, | |
stopPropagation: () => {} | |
}; | |
ModalTriggerComponent.instance().open(event); | |
expect(ModalTriggerComponent.state().toggled).toBeTruthy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const format = 'DD.MM.YYYY'; | |
it('render valueToDate utility with empty value', () => { | |
const value = valueToDate('', format); | |
expect(value).toEqual(null); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function rawMarkup(template) { | |
return {__html: template}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('with component', () => { | |
const props = { | |
component: () => {} | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />); | |
expect(ModalWrapperComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('without component', () => { | |
const ModalWrapperComponent = shallow(<ModalWrapper />); | |
expect(ModalWrapperComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import TestBaseFieldLayout from '../BaseFieldLayout'; | |
const BaseFieldLayout = (props) => <TestBaseFieldLayout {...defaultProps} {...props} />; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly component', () => { | |
expect(BaseFieldHOCComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly BaseFieldLayout component', () => { | |
const BaseFieldLayoutComponent = renderer.create(<BaseFieldLayout />).toJSON(); | |
expect(BaseFieldLayoutComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly date component', () => { | |
const DateInputComponent = renderer.create(<DateInput />).toJSON(); | |
expect(DateInputComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render ModalTrigger component correctly', () => { | |
const ModalTriggerComponent = shallow(<ModalTrigger><div /></ModalTrigger>); | |
expect(ModalTriggerComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly Spinner component', () => { | |
const SpinnerComponent = mount(<Spinner />); | |
expect(SpinnerComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly text component', () => { | |
const TextInputComponent = renderer.create(<TextInput />).toJSON(); | |
expect(TextInputComponent).toMatchSnapshot(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const store = createStore(() => ({})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const defaultProps = { | |
inputClassName: 'input-custom', | |
monthsShown: 1, | |
dateFormat: 'DD.MM.YYYY', | |
showMonthYearsDropdowns: false, | |
minDate: moment() | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const defaultProps = { | |
meta: { | |
touched: null, | |
error: null | |
}, | |
input: { | |
name: 'field-name' | |
}, | |
inputComponent: () => { return 'test case'; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check prop is null by default', () => { | |
const BaseFieldLayoutComponent = shallow(<BaseFieldLayout />); | |
expect(BaseFieldLayoutComponent.props().fieldLink).toBe(null); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correctly icon prop', () => { | |
const props = { | |
icon: <span className="icon-exclamation" /> | |
}, | |
BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />); | |
expect(BaseFieldLayoutComponent.find('span').hasClass('icon-exclamation')).toBeTruthy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const props = { | |
labelTooltipContent: 'tooltip for label' | |
}, | |
BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />); | |
it('check prop is rendered', () => { | |
expect(BaseFieldLayoutComponent.find('span').hasClass('tooltip-icon')).toBeTruthy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('ensure to have only one child (control element)', () => { | |
expect(ModalTriggerComponent.findWhere(node => node.key() === 'modal-control').length).toEqual(1); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import TestDateInput from '../DateInput'; | |
const DateInput = (props) => | |
<TestDateInput | |
{...defaultProps} | |
{...props} | |
/>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const defaultProps = { | |
minDate: moment(0) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check prop value', () => { | |
const props = { | |
show: true | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal'); | |
expect(ModalWrapperComponent.props().show).toEqual(true); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correct class name', () => { | |
const props = { | |
modalClassName: 'custom-class-name' | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal'); | |
expect(ModalWrapperComponent.hasClass('custom-class-name')).toEqual(true); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correct title', () => { | |
const props = { | |
title: 'Modal Title' | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('ModalTitle'); | |
expect(ModalWrapperComponent.props().children).toEqual('Modal Title'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const moment = require.requireActual('moment-timezone').tz.setDefault('America/Los_Angeles') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Jest Snapshot v1, https://goo.gl/fbAQLP | |
exports[`Render TextInput correctly component 1`] = ` | |
<input | |
className="input-custom" | |
disabled={undefined} | |
id={undefined} | |
name={undefined} | |
onBlur={undefined} | |
onChange={[Function]} | |
pattern={undefined} | |
placeholder={undefined} | |
readOnly={false} | |
required={undefined} | |
type="text" | |
value={undefined} | |
/> | |
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render date input correctly with null value', () => { | |
const props = { | |
value: null | |
}, | |
DateInputComponent = mount(<DateInput {...props} />); | |
expect((DateInputComponent).prop('value')).toEqual(null); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check the onChange callback', () => { | |
const onChange = jest.fn(), | |
props = { | |
value: '20.01.2018', | |
onChange | |
}, | |
DateInputComponent = mount(<DateInput {...props} />).find('input'); | |
DateInputComponent.simulate('change', { target: {value: moment('2018-01-22')} }); | |
expect(onChange).toHaveBeenCalledWith('22.01.2018'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check the type of value', () => { | |
const props = { | |
value: '10.03.2018' | |
}, | |
DateInputComponent = mount(<DateInput {...props} />); | |
expect(DateInputComponent.prop('value')).toBeString(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check month and years dropdowns displayed', () => { | |
const props = { | |
showMonthYearsDropdowns: true | |
}, | |
DateInputComponent = mount(<DateInput {...props} />).find('.datepicker'); | |
expect(DateInputComponent.hasClass('react-datepicker-hide-month')).toEqual(true); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check if field has error', () => { | |
const props = { | |
meta: { | |
touched: true, | |
error: 'This field is required' | |
} | |
}, | |
BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />); | |
expect(BaseFieldLayoutComponent.find('.error')).toHaveLength(1); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const props = { | |
subTitle: 'left 1 minute' | |
}, | |
SpinnerComponent = mount(<Spinner {...props} />); | |
it('type for subTitle is string', () => { | |
expect(SpinnerComponent.find('p').at(1).text()).toBeString(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check prop type for title is string', () => { | |
const props = { | |
title: 'Wait' | |
}, | |
SpinnerComponent = mount(<Spinner {...props} />); | |
expect(SpinnerComponent.find('p').text()).toBeString(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ModalTriggerComponent = mount(<ModalTrigger><div /></ModalTrigger>); | |
it('check children prop type', () => { | |
expect(ModalTriggerComponent.props().children).toBeObject(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correct component prop type', () => { | |
const props = { | |
component: () => {} | |
}, | |
ModalWrapperComponent = mount(<ModalWrapper {...props} />); | |
expect(ModalWrapperComponent.props().component).toBeFunction(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('render correct onHide prop type', () => { | |
const props = { | |
onHide: () => {} | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal'); | |
expect(ModalWrapperComponent.props().onHide).toBeFunction(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('check prop type', () => { | |
const props = { | |
show: true | |
}, | |
ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal'); | |
expect(ModalWrapperComponent.props().show).toBeBoolean(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let BaseFieldHOCComponent; | |
beforeEach(() => { | |
const TextInput = () => { return 'text input'; }, | |
BaseFieldHOCWrapper = BaseFieldHOC(TextInput), | |
TextField = reduxForm({ form: 'testForm' })(BaseFieldHOCWrapper); | |
BaseFieldHOCComponent = renderer.create( | |
<Provider store={store}> | |
<TextField name="text-input" /> | |
</Provider> | |
).toJSON(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment