DEV Community

Discussion on: Make testable components using the Humble Object pattern

Collapse
 
phatngu48817768 profile image
Phat Nguyen • Edited

Hi, I wondered how you would test an event handler from the Presenter. Suppose there is an handleClick in Presenter that has some logic inside of it, and the result is a modified state.

export const photoListPresenter = ({ photos = [] }) => ({
photos,
isListEmpty: photos.length == 0,
Empty: EmptyList,
List: PhotoList,
handleClick: (e, oldPhotos) => {...do some logics and return newPhotos}
});

How can I test the logic of the handleClick method properly?

Collapse
 
krofdrakula profile image
Klemen Slavič

I would avoid having the presenter provide DOM event handlers, or state modifiers.

The reason for the first case is that you would essentially make the DOM a dependency of the presenter, and it shouldn't be; it's just a function that transforms props and serves as a facade pattern over the components it's composing.

For the second, even if you provide a new set of photos, the state of those photos is kept outside of this presenter and the presenter is only given the list of photos, therefore it cannot meaningfully affect the photos being passed to the component without risking it going out of sync with the rest of the application.

In this case, you might want to look into Hooks, as the presenter isn't meant to be stateful, just a pure transformation function over the props being passed to it.