So, this is more of a discussion, then a question.
I wrote some test cases for my react component, and started copying some asserting or search for DOM objects from other tests. Then I had the idea why not using a Object, which does has these common assertions as helper function.
const HelperShallowWrapper = wrapper => ({
dropdownShouldBeClosed: () => expect(wrapper.state('isDropdownClosed')).toBeTruthy(),
dropdownShouldBeOpen: () => expect(wrapper.state('isDropdownClosed')).toBeFalsy(),
inputShouldContainValue: (value: string) => expect(wrapper.find('#input').props().value).toBe(value),
clickDropdown: () => wrapper.find('#toggle').simulate('click'),
writeIntoVoucherInput: (value: string) =>
wrapper.find('#input').simulate('change', { target: { value } }),
})
With this, I can write my tests in more readable way. For instance one of my test
it('should not remove code on dropdown toggle', () => {
const wrapper = HelperShallowWrapper(<Input />)
wrapper.clickDropdown() /* open */
wrapper.writeIntoVoucherInput('7357-C0D3')
wrapper.clickDropdown() /* close */
wrapper.clickDropdown() /* open */
wrapper.inputShouldContainValue('7357-C0D3')
})
I could even return the object and chain these calls for extra brevity. I really do think this enables another developer to understand the test much better, and even extend them easier, if I have defined enough functions. Further, if the component changes in a way that I cant test it the way i've done before, I only need to change the helper function.
The only downside I saw, was that if a Test fails, it shows the name of the test, and display not the Row inside the test which failed, but the helper function.
So my questions is, is this too over-engineered? What do you guys think about this?
Aucun commentaire:
Enregistrer un commentaire