DEV Community: Yazan Aabed

React-testing-library have fantastic testing

Yazan Aabed — Fri, 20 Jul 2018 20:08:18 +0000

I did not know what is testing, and why people check their implementation. So, I decided to learn more about it, and the favour is for Kent C. Dodds testing courses.

Check my other article about testing, and what I know about testing for more information “Make JavaScript Testing Work for You”.

Photo by Siniz Kim on Unsplash

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

A library is something that contains things you do it every day like jQuery includes an implementation for dealing with DOM element efficiently.

Testing is something cool in programming phases, I don’t know why people hate it. It gives you the confidence that your code never broke after a while, typically when the application going big every day, and new people joining your team.

Your test must make your code better. — Kent C. Dodds workshop.

So, what is react-testing-library? And why Kent C. Dodds built it for us? Let’s start by defining what is react-testing-library and how to use it.

React-testing-library is a small library change a way you deal with a DOM element, I mean instead of searching for a div element as a result from your component, this library gives you the ability to search for things using the final result, like what user sees in his browser, users see texts, not divs.

When you search for a text, this will give you the confidence that you are not testing the implementation details for your component. For example, if you have a header or navbar for your application and when the user logged in your header component need to change the text from login to be a username, react-testing-library make it easy for us.

What is the benefit of 100% testing coverage and the user for your application can’t even be logged in? For me, I didn’t get the chance to work with a team that tests their code. I hope this will be soon, I learn testing with my self and watch courses about this topic.

Check this example how things broke when you change the selector for your testing element.

If by mistake or by the requirement one of your team member change the class selector from “login-button” to something else, this will break your testing and need to change the test every time the selector changed.

To solve this problem, we can use react-testing-library to solve the selector problem by searching for login text inside the component.

For me, the second example is more comfortable to understand that you are searching for a login button and you want to click it. In that example, you will simulate the user behaviour.

The entry point is the render method from react-testing-library, it returns various utils, and you can use it with your tests.

There are also multiple entry points you can use it, check the Github account for this library for more information.

In the above example, the render method returns getByText util, and there are more and more:

container: This returns a regular DOM element that used to contain the rendered component.
getByLabelText: This will be used to get a form element that its label is the input text.
getByTestId: This will get an element by its data-testid attribute.

Another util is the wait method allows you to wait for a time, for example an API call. I suggest you give it a try by your self it is fantastic.

Like if my login button trigger a login API to make sure that this is the right user, this change will break our test because the getByText will through an exception that it is not finding the element. So to solve this we will use the wait method from react-testing-library, it will wait until the logout text appears on the page.

But, for an API call, please use something called mock with jest, I gave an introduction to it in my other article.

Also, don’t forget to clear your tests before each test, you can use abeforeEach method in jest or you can use react-testing-library util called a cleanup-after-each. You just need to import it from the library like this: import “react-testing-library/cleanup-after-each”;

Testing is essential don’t make it a secondary item for your application development phases. It will give you the confidence that your application is still working every release.

In my present team, we build things using AngularJS, and we don’t have the confidence that we can remove items or change class name even we can’t delete a file that we are sure that this file doesn’t used anywhere. My advice for any new team to set testing as standards for their team.

Conclusion

Don’t afraid of using this library, give it a try and read more about it. I think it will be an advantage for testing react application using jest. I heard people all the time afraid of these things and said it would add complexity. However, I am working now with a big team, and they don’t consider stuff for the long-term, this will goes wrong when your application goes significantly, after a while this will reduce the confidence of our front-end project, and this gives a miserable feeling every day.

In the end, It is incredible how people work every day to help other people make their coding life easy. I hope I will be one of them soon. Thank you for everyone give something new for the community.

Check this code I have created it on my codesandbox:

https://medium.com/media/7bfe9b585703dc21e58ca4049d1edbc3/href

Five Ways to Advanced React Patterns

Yazan Aabed — Tue, 03 Jul 2018 20:07:35 +0000

What I have learned after I watch Kent C. Dodds “Advanced React Patterns” course at Frontend Masters.

Photo by rawpixel.com from Pexels

I fall in love with ReactJS and start learning what I can determine. I begin watching courses, write code, read articles. After that, I decided to start writing what I learned from ReactJS community and the expert people out there.

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

Before continue reading this article I suggest you read my other article about ReactJS “What I know about ReactJS!” if you are a beginner with ReactJS, or watch Kent C. Dodds beginner course at “https://egghead.io/”.

Let’s get started learning advance ReactJS together.

React programming patterns are used to simplify large React applications and make your team experience easier, this helps your team to build separate components and share logic between them.

After reading this article, you will learn more about modern React patterns like Compound Components, Render Props, Prop Getters, Controller Props, Context API.

Advanced React Patterns

Software Patterns give you the ability to make your code more reusable, general.

Compound Components

A compound component is a way to write elements inside each other, but the primary condition is the inner components doesn’t work without their primary parent.

We can define it also as sharing the same state shared the same parent and shared parent state.

One of my favourite example the tabs component I have built it when I start learning ReactJS.

https://medium.com/media/f039cea09c73e99b79a33ed9cb95d168/href

Compound components example.

If you need to share things from the parent container to its children, you can use React.Children provide utilities for dealing with this.props.children.

Share props from parent component.

But, this solution not flexible enough for compound components, because when you change the order for your parts or wrap them inside another element, they will not now have access to the props, because of the map function loop through the first level inside the parent component.

To solve the above problem, we need another way to share state between components without broken if the user for your plugin changes the way he represents the element. We can use Context API to share state between components.

The first element to use Context API is called Provider, and the provider element is the wrapper parent for elements that shared the same state. Then we have the Consumer, that every component inside the provider can use it to get or retrieve the values from the provider.

How to create context element with React.

This is the parent element for every consumer needs to use the parent state.

For the above code, it is not a best practice to set object like this, because every time the render method called it creates a new reference and new object. So people said to put these things inside the component state even the callbacks to avoid re-render every time without need.

This is how to use the consumer and retrieve parent state.

Please note that the consumer children are function passed to the consumer and the consumer gives the state to the children.

Compound components are useful when my user for the component, does not need to care about the implementation details. For example, we have state in the parent component check if tabs clicked or not.

I recommend you try it by your self to learn more about how to share things between components, here is a simple project to start work. Try to make it use the Context API instead of React.Children.

Render Props

This technique use props, that’s why it is called render props. You pass a function as a render method that returns ReactJS element and used to render things.

The convention is to name it to render props, but no need to call it like that, some people also use children props as function. But, any properties you pass as a function to render things from another place this called as “Render props”.

I mean by props is that your component inputs. Let me show you an example in the next code.

Look at the end of the component. It is a children component but instead of using it as {this.props.children} we use it as a function and pass to it the arguments we need to make the user for our component return for us the components he needs. Look at the next code how to use this component.

Nice right? Try it by your self and change one of your props to a function and pass for it whatever you need to move. This trick allows you to create sharing things without even use the Context API.

In Kent C. Dodds “Advanced React Patterns” course at Frontend Masters he gives some excellent tips to use when using render props. I recommend also watch “Advanced React Component Patterns” course in egghead.io.

Photo by Ludemeula Fernandes on Unsplash

Controlled Components

Controlled is means that you are the one who responsible for changing the state for something by your self. One of the famous example your form inputs, when you pass a value props to your “input” things change.

Now when the user starts typing, you have to pass onChange event for your input to make sure you change it in your state. If you give a value attribute without changing the state, the user input will never reflect the actual text he enters.

That’s why it is called controlled, you control the changes and pass it another time to your input.

Kent C. Dodds also gives an excellent example, like when the user clicks something more than four times, and I need to give him a message and stop him from typing, this can’t happen if I am not the one who writes the component.

For my tabs component, I have changed that the active tab is now taking from the props and I am not the one who controls it. I trigger an event that the user clicks my component and you change the active tabs by your self.

State Reducer

A reducer is a simple function takes an input and return output without any changing on your application state. This type of services called a pure function.

A state reducer used to give your component a function to generate new state depends on the value returned from the reducer. For example on my tabs component user pass a prop called stateReducer as a function, and inside tabs component, we call this function on any change for the state to happen inside the tabs component and assign it as a new state.

This kind of patterns is the same as controlling a component by your props, but this time the component owner send you the old state and the changes and give you the decision to change the inner state.

State reducer example.

Pass state reducer to component.

The final code to trigger your state with the values returns from the state reducer. You can say that this somehow like reducers used in redux.

Higher-Order Components

Higher-Order component is a function that takes a ReactJS component and does some logic on top of it and returns new application component. This pattern is used in most of the library out there for ReactJS. For example, redux use this to merge props from store top level to any component.

Also, I have used this with Material-UI, to pass classes object to your component, or extends the style for their application components. This way of writing your application component with Material-UI called withStyle HOC.

Sidebar example for show user name or login button

Conclusion

After a while, I discovered that write about what you learn makes your information more strong. Give these pattern a try, they make your components unique, especially if you are one of the people love the open source community. These patterns make your components more reusable, more people to use it.

Is Learning ReactJS For You?

Yazan Aabed — Mon, 04 Jun 2018 22:58:03 +0000

ReactJS is an impressive library to create things and build a user interface. Team form Facebook made it for us.

Photo by Felix Russell-Saw on Unsplash

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

Before I learn to React, I don’t know why people love working with it that much, and companies ask about it every frontend interview. Moreover, people told me that writing HTML in a separate file is the best practice for your project, now React team write the template on another way inside your JavaScript file.

There is too many questions come to your mind before you learn React. However, I decided to start learning React. After I learn React, I understand why we write the template in that way. It shows to me that React is the future for the web development, it changes how I think about developing web applications.

Liquid error: internal

You can learn to React by yourself. I recommend every front-end engineer to learn it. React extends your knowledge, especially how you think about your design, your components, your user interface, your application architecture.

In this article, I give an overview what I know about ReactJS and what I learn about it. I hope you enjoy reading this.

Watch this video to know five things about React. — Dan Abramov & Burke H✪lland

Before I start to discuss the building items for any React project, I recommend people to watch these courses:

The Beginner’s Guide to React — Kent C. Dodds.
React For Beginners — Wes Bos.
Complete Intro to React — Brian Holt.

I discuss the elements of any React application and where is the starting point for any application with React. Also, I give an overview steps to build any React application.

This is my first React application 🔥✨

We need to import React writing React application.
We need to import the render function from react-dom.
We need to define where to render our application using render method.

Root Element

Any React application need a root container to start from it. render function give us the ability to render any React component to HTML DOM. The most thing I like about this render function is that you can test your application easy and render your application to fake DOM element with your testing library.

Components

The component is a View in MVC. You divide your application as you see the application design. For example Header, SideBar, Button.

Also, a component could be a page or a container like Home, Login, Dashboard.

React application divided into multiple React components, and every component contains a render method which is the entry point for your component.

Paragraph component

React library use the render method to know what to render when you use the Paragraph component. And this is how we use our components inside our project.

Use Paragraph component

I recommend you try to build component by yourself or try to divide any design you got in your job to component and think why you divide it like that.

Make sure to understand this quote before you divide your application into components.

“A component should, ideally, only be responsible for one piece of functionality.” — Fullstack React, Sophia Shoemaker & Nate Murray.

Programming Wisdom

@codewisdom

"The central enemy of reliability is complexity." - Geer et al.

16:29 PM - 03 Jun 2018

Components contain two primary weapons

You can use these two weapons to make your component more reusable and more flexible.

Props

Props are the inputs for your component, owned by the component parent and passed from there. Any component use props more reusable than other components hide its values inside it.

Props are the primary weapon for reusability because if we define the blogs array inside the Blogs component, can’t use in other places in the app or with other blogs values other places in our application needs.

These type of component that works only with props called stateless components. Every time you give the same component same input, it renders the same output or the same DOM.

Things to check when start working with props:

State

The component itself owns a state, a state can be modified using the component itself, or can be initialized using the props from outside.

The one place the state initialized is inside the constructor, after that you need to use a setState method from React.Component object to modify the state for your component.

These two weapons could be your enemy if you don’t use them wisely, mainly when you use the setState method in wrong places and trigger re-render without any need. So, please think twice before you design your components and what to use. If the component doesn’t take a state and get the values from outside, it is more reusable this called stateless components if the component manages its state this called stateful components.

Photo by Leon Rojas on Unsplash

Virtual DOM

React team modify things for us it doesn’t allow us to work with the browser DOM is built for us something called the virtual dom. React team take care of the changes with the DOM in an optimized way.

The problem with manual change for DOM:

Hard to keep track for every change.
It is slow for some cases to change the DOM using the JavaScript.
The Facebook team gave a talk and said that JavaScript is very fast but modify the DOM is too slow.
React team said that your component has to return the HTML you wish to see and react team take the responsibility from you to update the view for you.

The main reason that React team doesn’t take the state from the DOM because the DOM is too slow, so they decide to make the state change from their side.

Why would we want to do that our component’s state from its DOM representation? There are two good reasons:

1) It’s faster, 2) It’s less complicated.— REACT, REDUX AND JAVASCRIPT ARCHITECTURE

Steps to build react project

First thing for React application is to divide your UI into components and make sure that every component do one thing and responsible for one thing.

When you build the application components, try to build the components with static values and make sure it works fine without any server or any BE.

Think which component of your application contains a state. Add static state for your component and try to change it. Add events trigger to move data around the component. After this add the server to your components.

Timeline for React component

You can read more about React life cycle here.

The constructor for the component is run, and the initial state now did.
Then render method is called then call render for children to make sure to render the component.
The initial render now run.
The componentDidMount lifecycle is triggered.

Routing with React

The user request the index.html page and then the server doesn’t care what the user does.

When you build the user router at the browser, this called a single page application.

React router: The app wrap with router provider when the route changed all component listen for the change and check if the path for is it renders else return null.

Conclusion

Finally, I recommend every frontend engineer to give ReactJS a try; it is a fantastic library to build amazing applications. Don’t be afraid of these new things you can do it. Try to build things by yourself. Here is an article for ideas to learn to React using open source media APIS.