On my last post, I’ve talked one of design patterns, which is Template Method. Now I want to talk about other design pattern which is Publish-Subscribe. I used this pattern to make a communication between React components which are not directly related.
In this time, I will explain about one of design pattern that you can apply when developing a software. Yep, the pattern is called by Template Method. I also applied Template Method pattern when developing our project. In a simple explanation, Template Method is a pattern where there’s an abstract class that contains template(s) to execute its methods then its subclasses can override the method implementation as what’s needed.
Welcome back readers! Well, after creating 2 posts explaining about testing on frontend in a row, on this time I’ll also talk about testing! Lol. Actually this time will be more general. However, I applied this knowledge most of cases on frontend so I’ll give an example on frontend side too haha, forgive me plz. Yep, on this time I will talk about testing techniques which are spy, stub, and mock. I was really really starved to know what actually they are and now I want to end my curiosity. I’ll explain to you who actually they are! 😀
On my last post, I’ve talked about shallow rendering to test React components. This post is the sequel of that post since I’ll also talk about testing React components. The shallow rendering that I’ve done on the last post is using the help from
createRenderer function from React Addons Test Utils. Unfortunately, (until now) there are no function for traversing React element trees neatly just by using the help from React Addons Test Utils. If you want to check an element somewhere deep in the component tree, you will end up in a long chaining of
props.children.props.children… which it also happened to me and I think it’s not elegant.
There are several approaches to test React components. The first approach that I tried was render the real DOM on the virtual environment. I used TestUtils.renderIntoDocument to render component into a real DOM. For the first time, I didn’t get any problem until I used Chart.js using this React wrapper for displaying chart. I faced a new problem!
My team use React for creating frontend component, so this time I’ll explain about creating dropdown using React by creating the test first using Jest.