If you are a software developer, this post might help you understand the different types of tests that are done during a software development lifecycle 🔁 Each type of test plays a significant role in making your software resilient and powerful. In this article, I will be discussing the types of generic tests, their benefits, and the important differences between them.
Unit Testing for Frontend Apps
As the name suggests, a unit test is the cellular level test in the software. It should be written to test one single entity. Assuming your function follows the Single Responsibility Principle, a unit test can be written for covering a list of scenarios.
A unit test should not have any additional dependencies to write and run. These can help the developers to catch the bugs that can be introduced in the future. So, these tests solely benefit the developers in the long run. Some major benefits of unit tests are:
- They will help you build the new features making sure the existing functionality is still intact.
- They are low-level tests that can pinpoint the location of the source of bugs, which can make debugging easier and more efficient.
Code Sample
First, let’s create a simple React Native component with a Hello function for which we will be writing a unit test:
import React from 'react';
import { Text } from 'react-native';
const Hello = () => <Text>Hello, world!</Text>;
export default Hello;
Next, let’s add a test at __tests__/hello-test.js for our React Native component. It was written with the Jest library:
import React from 'react';
import {render} from '@testing-library/react-native';
import Hello from '../../../src/components/test-component';
describe('Hello', () => {
it('Correct message', () => {
const {queryByText} = render(<Hello />);
expect(queryByText('Hello, world!')).not.toBeNull();
});
});
The above test verifies that the Hello component renders the correct message.
Integration Testing
Integration tests are used to test the interactions between modules in your software. Extending the above example, we have two events that we need to test. One is showing the result in the dialog box, and the other is navigating the user to another page.
An integration test would require external dependency (like setting up database instances etc.) to be executed successfully. These tests can help both developers and non-developers to demonstrate the system application state, and would help catch sneaky bugs that might break some functionality 🐞
Some major benefits of integration testing for frontend apps are:
- These tests would help you to identify the bugs in the interface between modules.
- They help in simulating the behavior of our application with external APIs and third-party tools.
- Sometimes integration tests become integral if you have changed the code according to a new requirement and forgot to add the unit test for that change. In these cases, integration tests will know if something breaks.
E2E Testing in Frontend Applications
E2E tests help to test your application from start to finish. These tests are written to test the user experience in the real world and simulate different scenarios to make sure the system as a whole runs well ✅ Some major benefits of E2E tests are:
- Catch bugs earlier, before going live to production.
- It builds confidence in developers for the application test suite when the happy path is covered with E2E tests.
- Simulate the user behavior and reproduce any similar issue that an actual user might be facing.
Test Automation Using the TestProject OpenSDK
TestProject offers a cross-platform open-source test automation framework for testing web and mobile applications. The TestProject OpenSDK is available in most of the popular programming languages: Python, Java, JavaScript & C#.
Code Sample
Let’s see a sample test case to test the login functionality of a web page using the OpenSDK:
import { By } from 'selenium-webdriver';
import { Builder } from '@tpio/javascript-opensdk';
export const simpleTest = async (): Promise<void> => {
const driver = await new Builder().forBrowser('chrome').build();
await driver.get('https://example.testproject.io/web/');
await driver.findElement(By.css('#name')).sendKeys('John Smith');
await driver.findElement(By.css('#password')).sendKeys('12345');
await driver.findElement(By.css('#login')).click();
const passed = await driver.findElement(By.css('#logout')).isDisplayed();
console.log(passed ? 'Test Passed' : 'Test Failed');
await driver.quit();
};
In the above example, the OpenSDK is used along with a Selenium web driver to auto-fill the text boxes on the web page and click on the login button to verify if the logout button is displayed. It’s evident that the OpenSDK makes functional testing simpler by providing consistent APIs that can be used for both web & mobile.
Conclusion
These are the major types of testing you will see in any frontend application. In most applications, all these types of tests play a key role, but it totally depends upon the nature of the application to choose what kind of test would be most beneficial for it 💪
