Unit Testing vs End-end Testing (Test-Café & Mocha/Chai)

Brief Intro:

An interviewer asked me how I utilize test-driven development, so I immediately began explaining my work with unit testing using mocha. I learned that there was another form of T.D.D, End-to-end testing, and in this article I will introduce you to both!

Unit Testing(Mocha/Chai)

Unit testing typically tests an individual component/function in your app. We will test the example functions written below to show how this works.

function sum(firstNumber, secondNumber){
  return +firstNumber + +secondNumber
}
function subtract (firstNum, secondNum){
  return firstNum - secondNum
}
module.exports = { //to export it for our tests to utilize
sum,
subtract,
}
console.log("It can sum 1 and 2", sum(1,2) === 3)// simplified test

For example, the code above has two functions to add or subtract two numbers from the user and if we want to test them we will need to export them. The console.log only serves to represent the two parts of a mocha test(message showcasing the purpose of the test & function holding the conditions of the test). Below we’ll discuss how to actually write a unit test in mocha and why you would want to.

Mocha/Chai unit testing for the functions we made above

As you can see above we will have to import our functions /algorithms we want to test as well as the functions we’ll use in our tests. Each test runs it’s function and checks if the outcome is the desired value.

The magic happens after you “npm run” your tests, which will go through and try each function with the conditions you applied. Our first two tests pass with flying colors; however, when we run our sum function with strings it does not output a string. With Mocha’s unit-testing I found this small error in an individual function of mine and now I will show you how end-to-end testing is different using Test-café.

End-to-end Testing(Test-Café)

In end-to-end testing, the behavioral flow of your application as a whole is tested.

Tests for my website snack maps verifying the sign up process works as well as the help video shows when clicked. I first select the elements on my page using CSS selectors and set them to variables. Then I use the functions that come along with ‘t’ in order to test that clicking my sign in button opens the sign up modal, inputting sign up data returns a successful sign-up message, and then clicking the ‘x’ on the sign up modal closes itself.

Unlike unit testing, we are not inputting values and testing what comes out. Test-café will go to the page of your front-end app, check the DOM elements you selected, and verify if they behave as intended. You are able to check your project as a whole through test-cafe rather than manually finding bugs.

I hope this article helps you understand the benefits of unit and end-to-end testing individually.