Front-End Testing | Grasp it Quickly
Tags: webdev, frontend, beginners, testing
Published: 2024-02-28 17:32:35


![bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3by4quhdvikg75kuvli0.png)

We often hear that software testing is a very young field, but sometimes we forget that it is the software part that is young, not the testing part. In fact, I would argue that almost every conscious invention since the beginning of time has been a product of testing.

When Thomas Edison was asked if his work yielded results, he replied, “Results? From where? I got lots of results. "I know a thousand things that won't work," he said. We don't usually think of it this way, but how could Edison have come up with thousands of useless things if he hadn't tested them?

Testing has become very important in the field of software nowadays. It is possible that we may encounter errors as an application becomes more complex and the number of code lines increases. Such a scenario is valid in projects where the time spent on writing tests is considered costly.

Writing tests at the time an application starts being built by software developers reduces the time and money cost. Otherwise, software projects where testing is considered costly may end in disappointment. We must approve and verify the application to ensure that we meet user needs.

![app is crashing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1cki4wh3hfniqhhb6i6.png)

I would like to tell you a good story that can give an example of this situation. Tom, who is still at the beginning of his career and is in the development team in the back-end area, is tasked with making a web interface that will have an API connection in the front-end area. It creates the interface and successfully establishes the API connection with this interface. When he wants to present his task to his team with great excitement, it comes to his mind that he has never written a test. It's too late now 🙂

He can't present his task the way he wants because Tom didn't test the API connection with real data when coding the interface. For this reason, the request from the API will not come. For this reason, the mobile compatibility of the interface is disrupted and the application becomes unusable at that moment.

The conclusion to be drawn from this story; Let's be ourselves and not skip the testing part in every application writing process. This is a very important issue, whether it is the work we will present to our team or the interface that users need. In addition, whether we are new to the sector or already in the sector, learning about this subject and making our team feel this importance is a very important step.

Now that we understand the importance of writing tests, let's take a look at what a test is, what it is in the front-end field, and how to write it:

## What is Front-End Testing, How Do We Write It?

![production test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpevfct7kcc0ipvdc8jj.gif)

Before moving on to this topic, “What is Testing?” Let's answer the question.

> Testing is the process of executing a program or system with the intent of finding errors.

Well; testing; It is a process that aims to find errors in a running program or system. We test scenarios that may cause errors. Situations that could be meaningful are our scenarios.

A test doesn't just start and end in software development. In an application, the testing part starts from the interface design. It continues with the software part in the advanced stage. We even continue this even when the application is productized. So, as you can see, the testing part is a constantly repeating cycle. It never ends.

![building app phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py7737g5i5dfztigs4k8.png)

## What is Front-End Testing?

Front-end testing; it focuses on the interaction between the user and the software. Tests performed in this area should answer the following questions:

- Does a function or a component give the desired output?
- In which scenarios would this method or component cause an error?

We are actually talking about writing tests for the front-end area, but we can say that writing tests is the same concept and the same approach, whether on the back-end or front-end side.

While a database is not required in front-end testing, a browser may be required to simulate the written test. Now, with a small example, actually “how do we write tests on the front-end side?” Let's answer the question.

Before writing a test, we will need a piece of code to test. I would like to give a very simple example:

![divider function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vvqd3q23icait27w7ih.png)

Do you think this piece of code written in Javascript will work as expected in all cases?

Yes? No? 🤔

No, this code does not work in all cases. For example, as a result of part 1 / 0, the browser enters an infinite loop and your device crashes. This code causes an undesirable result. In order to prevent this and similar situations in advance, the test part warns us in the development environment before we run the code piece in the browser.

Now let's write the test codes of this code in the scenario we are considering:

![frontend test code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb1hx8whn3tgazslup0l.png)

To run this code, we write the “**npm test**” command in the terminal. As a result, we should see the following output in the terminal.

![test code result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5icu9e0zkqynm22wu3wg.png)

If you are not very familiar with these technical parts, I can discuss the types of tests and how to perform the necessary setup in subsequent articles.

Thank you very much if you have read the content until here.

In this content, in general terms, "what is the importance of writing tests?" , “what is the test?” and “an example” I quickly discussed the subject under the headings.

In the following sections, I will cover more technical issues regarding testing.

Hope to see you in the next content.

![bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmxfmkunim15x6zild2b.png)