Front End Testing Types And Tools

AmiraArafa — Thu, 24 Jun 2021 17:27:40 +0000

What is Front End Testing?

Front End Testing is a testing technique in which Graphical User Interface (GUI), functionality and usability of web applications or a software are tested. The goal of Front end testing is testing overall functionalities to ensure the presentation layer of web applications or a software is defect free with successive updates.

Why Front End Testing Is Needed

Detecting Client-Side Performance Issues.
Validating Application Behavior on Different Browsers and Systems.
Improving Quality of User Interaction and Experience.
Detect changing in features which depends on each other.

Types Of Front End Testing

Essentially, testing Front-End testing can be divided into 3 categories:

1) E2E Testing

E2E Testing or end-to-end testing, is the practice of testing if the execution of an application is performing as designed from start to finish. The entire application is tested in real-world scenarios, which includes testing the communication between components such as the database, network, APIs etc. and executing your code in a diversity of browsers. Basically testing everything. It takes a lot of time to set up and costs the most.

2) Integration Testing

Integration Testing consists of testing the interaction between elements of your application, for example, communication between your UI and an API. It takes a shorter amount of time to set up, and isn't too expensive.

3) Unit Testing

Unit Testing is different as it consists of testing isolated parts of the code, as units. These units usually take the form of methods, properties, UI element actions etc. It is the fastest and cheapest to implement.

You've probably noted that the higher you go in our pyramid, the more time and money it takes to set up our tests. That's why a lot of projects tend to focus on unit tests as they can help you know if your code truly works by covering most scenarios, save time, and simplify deployment processes.

Recommended Testing Tools

There are many types of testing tools , We can refer to two of most important types of testing in React.

1) Jest

Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

2) React Testing Library

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children.

How To Create A Frontend Website Testing Plan?

Creating Frontend testing plan is a simple 4 step process.

Step 1) Find out tools for Managing Your Test Plan.

Step 2) Decide the budget for Front End Testing.

Step 3) Set the timeline for the entire process.

Step 4) Decide the entire scope of the project. The scope includes the following items.

OS and browsers used by users ISP plans of your audience.
Popular devices used by audience.
Proficiency of your audience.
Internet correction speed of the audience.

References

Styling in React

AmiraArafa — Wed, 10 Feb 2021 23:16:34 +0000

Choosing the right method for styling components isn’t an absolute truth. It’s a relative choice that should serve your use case, it depends on your personal preferences and the specific complexity of your application.

In this article, we’ll show useful ways to style your React components. The choice is yours, and please feel free to add your own experience, insights, and suggestions.

There seems to be a number of ways of styling React components, we will talk about some of them:

1-inline CSS
2-normal CSS
3-CSS in JS
4-CSS Modules

1. inline CSS

React lets you add CSS inline, written as attributes and passed to elements.

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

You can pass the styling directly or create a variable that stores style properties and then pass it to the element. With inline styles, you also have the option to combine CSS syntax with JSX code.

2. Regular CSS

Regular CSS is a common approach, arguably one step better than inline CSS.

The styles can be imported to any number of pages and elements unlike inline CSS, which is applied directly to the particular element.

Normal CSS has several advantages, such as native browser support (it requires no dependencies).

You can maintain any number of style sheets, and it can be easier to change or customize styles when needed.

3. CSS-in-JS

CSS-in-JS is a technique which enables you to use JavaScript to style components. When this JavaScript is parsed, CSS is generated (usually as a style element) and attached into the DOM.

There are several benefits to this approach. For example, the generated CSS is scoped by default, meaning that changes to the styles of a component won’t affect anything else outside that component.

Another advantage is that you can leverage the power of JavaScript to interact with the CSS. For example, you can create your own helper functions in JavaScript and use them directly in your CSS to modify the code.

react-jss is a library that implements the above-mentioned CSS-in-JS technique.

4. CSS modules

A CSS Module is a CSS file in which all class names are scoped locally by default.

CSS class names are scoped globally by default. This can lead to conflict, especially in large stylesheets, one style can override another. This is the problem CSS Modules solves. CSS classes are only available within the component where they are used.

A CSS module is basically a .css file that is compiled. When compiled, it produces two outputs. One is CSS that is a modified version of input CSS with the renamed class names. The other is a JavaScript object that maps the original CSS name with the renamed name.

Result

Remember that the main purpose of CSS Modules is to make CSS classes locally scoped and avoid conflicts in naming.

Conclusion

All these ways of styling react components have pros and cons.

It all boils down to both your own personal preferences and the specific complexity of your application.

DEV Community: AmiraArafa

Front End Testing Types And Tools

What is Front End Testing?

Why Front End Testing Is Needed

Types Of Front End Testing

1) E2E Testing

2) Integration Testing

3) Unit Testing

Recommended Testing Tools

1) Jest

2) React Testing Library

How To Create A Frontend Website Testing Plan?

References

Styling in React

There seems to be a number of ways of styling React components, we will talk about some of them:

1. inline CSS

2. Regular CSS

3. CSS-in-JS

4. CSS modules

Conclusion

References