Archive for the ‘Quality Assurance’ Category

Unit Testing React, D3 with Enzyme and Jest

Friday, January 24th, 2020

Introduction: — This blog is for how to test React component with Enzyme and Jest. In this blog, here we are discussing how to test react components which have d3 content with the help of Enzyme and Jest. This blog helps you to write test cases and also help you to choose the correct testing framework according to your requirement.

In this blog, I am going to cover some of the testing frameworks which are showing below.

  1. Jest
  2. Jasmine
  3. Enzyme

Jest

Jest is an open-source test framework created by Facebook that has great integration with React.js. It is a very powerful testing framework. The most known feature of jest is the snapshot. It is very helpful for testing.

Features of Jest:-

  1. Zero Configuration
  2. Fast and sandboxed
  3. Extensible Framework
  4. Codemods
  5. Snapshot

To know more about please go through with the below mention link:-

https://jestjs.io/docs/en/getting-started

Jasmine

Jasmine is one of the popular JavaScript unit testing frameworks which is capable of testing synchronous and asynchronous JavaScript code. It is used in BDD (behavior-driven development) programming which focuses more on the business value than on the technical details.

Features of Jasmine:-

  1. Jasmine does not depend on any other JavaScript framework.
  2. Jasmine does not require any DOM.
  3. All the syntax used in Jasmine framework is clean and obvious.
  4. Jasmine is heavily influenced by Rspec, JS Spec, and Jspec.
  5. Jasmine is an open-source framework and easily available in different versions like the stand-alone, ruby gem, Node.js, etc.

Suite Block:- Jasmine is a testing framework for JavaScript. A suite is the basic building block of Jasmine framework. The collection of similar type test cases written for a specific file or function is known as one suite. It contains two other blocks, one is “Describe()” and another one is “It()”.

One Suite block can have only two parameters, one “name of that suite” and another “Function declaration” that actually makes a call to our unit functionality that is to be tested.

Example:-

describe(“Hello World”, function () {it(“should Return Hello world”, function () {expect(HelloWorld()).toEqual(‘Hello World’);});});

Skip Block:- Jasmine also allows the developers to skip one or more than one test cases. These techniques can be applied at the Spec level or the Suite level. Depending on the level of application, this block can be called as a Skipping Spec and Skipping Suite respectively .we will skip a specific Spec or Suite using “x” character.

Example:-

describe(“Hello World”, function () {xit(“should Return Hello world”, function () {expect(HelloWorld()).toEqual(‘Hello World’);});});

Before And After Functions:- There are few before and after functions that are supported by jasmine.

  1. BeforeAll
  2. BeforeEach
  3. AfterAll
  4. AfterEach

BeforeAll:- Runs a function before any of the tests in this file run. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running tests.

Optionally, you can provide a timeout (in milliseconds) for specifying how long to wait before aborting. Note: The default timeout is 5 seconds.

Example :-

beforeAll((done) => {
document.body.appendChild(element);
barGraph = ReactDOM.render(
<BarGraph
configuration={config.verticalNumber}
data={config.data}
/>,
element
)
setTimeout(() => {
done();
}, 1000);
});

BeforeEach:- Runs a function before each of the tests in this file runs. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running the test.

Optionally, you can provide a timeout (in milliseconds) for specifying how long to wait before aborting.

Example :-

beforeEach( async () => {
if(global.ZFB_DOWNLOAD_INSTANCE) {
await clickByIdAfterWait(global.ZFB_DOWNLOAD_INSTANCE);
}
});

AfterAll:- Runs a function after all the tests in this file have completed. If the function returns a promise or is a generator, Jest waits for that promise to resolve before continuing.

Optionally, you can provide a timeout (in milliseconds) for specifying how long to wait before aborting.

Example :-

afterAll(‘do logout’, async () => { 
await clickByIdAfterWait(‘logout’);
});

AfterEach:- Runs a function after each one of the tests in this file completes. If the function returns a promise or is a generator, Jest waits for that promise to resolve before continuing.

Optionally, you can provide a timeout (in milliseconds) for specifying how long to wait before aborting.

Example:-

afterEach( async () => {
await wait(300);
await clickByIdAfterWait(‘editor-button-policygroups’);
await wait(300);
await selectEntities(vportPG, entity, [global.PG_INSTANCE_ID_2]);
});

Spies:- Jasmine spy is another functionality that does the exact same as its name specifies. It will allow you to spy on your application function calls. There are two types of spying technology available in Jasmine. The first methodology can be implemented by using spyOn() and the second methodology can be implemented using createSpy().

Example :-

spyOn(self.mockService, ‘fetch’).and.callThrough();VSDServiceTest.makeRequest = jasmine.createSpy(“makeRequest”).and.callFake(() => {
return new Promise((resolve, reject) => {
return resolve(‘Done’);
})
});

Enzyme

The enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.

Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal.

Before Installing enzyme please keep these below key points

  1. If you are using react 16.X than you need to install enzyme-adapter-react-16 and enzyme 3.X
  2. If you are using react 15.X than you need to install enzyme-adapter-react-15 and enzyme 2.X

Url:- https://airbnb.io/enzyme/docs/installation/

Running Enzyme Tests:- Enzyme is un-opinionated regarding which test runner or assertion library you use, and should be compatible with all major test runners and assertion libraries out there. The documentation and examples for enzyme use mocha and chai, but you should be able to extrapolate to your framework of choice. If you are interested in using enzyme with custom assertions and convenience functions for testing your React components, you can consider using:

This is some overview of the testing framework. Now the time for the main topic.

Testing React and D3 content with the enzyme

It is very difficult to test d3 content with react because enzyme or any other testing framework only render the render method of React. When I was looking for the solution to this problem. I read many of the documents some are supporting d3 testing with jasmine without React and some documents are for jest and with enzyme for React component testing. For testing both react and d3 together I have found one approach. I have rendered the dom with the enzyme but in the enzyme rendering, I am not able to fetch the d3 content. To fetch the d3 content I have used .html() method which provides the HTML of the current component. I have found the HTML but now the question is how to manipulate the HTML and how to test both d3 and React content. After a lot of searches, I found one manipulating library which is Cheerio. It is just like the jquery library. With the help of this, I am able to test together d3 and React. This summary of how I have test React and d3 together. Now I am going to talk in detail how everything works for me.

Issues:- To test React and d3 together it is very complicated. I have faced many issues while testing d3 and React together some of the important issues I am covering here.

  1. The main issue is that d3 content is not rendering with Enzyme.
  2. Find the d3 content with .html() now the problem how to manipulate that html().
  3. The transition is used in the d3.
  4. How to perform click event
  5. How to call React lifecycle methods.

These are some major challenges that I have faced while I am testing the react and d3 together with enzyme and jest.

Solutions

  • The main issue is that d3 content is not rendering with Enzyme.

Solution:- To render content I have use Enzyme mount method. Mount is used for full dom rendering. In my case, there is one problem which is the d3 content because we are using d3 content with the react content. I am using Enzyme mount with the help of the mount() method I am able to get the React component but I am not able to get the d3 content because the d3 content is mount with the render after the react mounting is done. After a lot of searching, I have found one solution to this problem. I have first got the HTML of the mounted dom and i am able to get complete HTML of the dom.

Example : –

import PieGraph from ‘./index’;
import React from ‘react’;
import { mount } from ‘enzyme’;describe(“PieGrpah”, () => {
let config;
beforeAll(async () => {
config = await getDataAndConfig(‘PieGraph’);
});it(“OtherOption by Number”, () => {
const pieGraph = mount(
<PieGraph
width={500}
height={500}
configuration={config.withoutOtherOption}
data={config.data}>
</PieGraph>
);
const html = pieGraph.find(‘svg’).html();
});
});

With the help of .html() method, I am able to get the d3 content but Now I have another problem that is shown below.

  • Find the d3 content with .html() now the problem how to manipulate that HTML.

Solution:- Now the problem is how to manipulate the HTML component to resolve the problem i have found one library that is Cheerio. The Cheerio is used for manipulating the HTML data. Cheerio is mainly used for manipulating the HTML content. It provides many cool methods. The Cheerio parses markup and provides an API for traversing/manipulating the resulting data structure.

To know more about cheerio please go through the below link.

https://www.npmjs.com/package/cheerio

Example:-

pieGraph.test.jsimport PieGraph from ‘./index’;
import React from ‘react’;
import { mount } from ‘enzyme’;
import { getDataAndConfig, getHtml, checkSvg } from ‘./helper’;describe(“PieGrpah”, () => {
let config;
beforeAll(async () => {
config = await getDataAndConfig(‘PieGraph’);
});describe(“OtherOption by Percentage”, () => {
let pieGraph, $;
beforeAll(async () => {
pieGraph = mount(
<PieGraph
width={500}
height={500}
configuration={config.percentage}
data={config.data}>
</PieGraph>
);
$ = getHtml(pieGraph, ‘svg’);
});it(“SVG Dimensions”, () => {
const result = checkSvg(pieGraph);
expect(result).toBeTruthy();
});
});
});Helper.jsconst cheerio = require(‘cheerio’);export const checkSvg = (component) => {
const $ = getHtml(component, ‘svg’);
const svgHeight = $(‘svg’).attr(‘height’);
const svgWidth = $(‘svg’).attr(‘width’);
return svgHeight == “500” && svgWidth == “500”;
}export const getHtml = (component, tag) => {
const cheerioData = cheerio.load(component.find(tag).html());
return cheerioData;
}

With help of cheerio, I was able to test most of the graph and also able to cover most of the cases but when I was testing the bar graph I was not able to get the HTML. After digging a lot, I was able to get to know what is the problem. The problem is mention below.

  • The transition is used in the d3.

Solution:- In some cases, they were using d3 transition for animation. Now the problem was that the d3 content was not ready at the time of mounting the component. So d3 content is not available into the HTML. This is a big problem to solve this problem I have used setTimeout. In the timeout section, I have updated the component. After updating the component I am able to solve this problem. I am able to get d3 content.

Example: –

barGraph.test.jsimport BarGraph from ‘./index’;
import React from ‘react’;
import { mount } from ‘enzyme’;
import { getDataAndConfig, getHtml, checkSvg } from ‘./helper’;describe(“Bar Graph”, () => {
let config;
beforeAll(async () => {
config = await getDataAndConfig(‘DynamicBarGraph’);
});
describe(“Graph with Brush”, () => {
let horizontalBrush, $;
beforeAll(async (done) => {
horizontalBrush = mount(
<BarGraph
width={500}
height={500}
configuration={config.horizontalBrush}
data={config.data}>
</BarGraph>
);
/* Delayed added because the bar is rendered with 300ms animation */
setTimeout(() => {
horizontalBrush.update();
done();
}, 350);
});it(“SVG Dimensions”, () => {
const result = checkSvg(horizontalBrush);
expect(result).toBeTruthy();
});});
});Helper.jsconst cheerio = require(‘cheerio’);export const checkSvg = (component) => {
const $ = getHtml(component, ‘svg’);
const svgHeight = $(‘svg’).attr(‘height’);
const svgWidth = $(‘svg’).attr(‘width’);
return svgHeight == “500” && svgWidth == “500”;
}export const getHtml = (component, tag) => {
const cheerioData = cheerio.load(component.find(tag).html());
return cheerioData;
}
  • How to perform click event.

Solution:- Thisis the most complicated problem for me because with the help of cheerio I am able to manipulate the HTML but cheerio is not provided the click event functionality. This is a blocker for me without this testing is incomplete. I had searched a lot then I found a solution. To checking the clickEvent I had use react-dom render. With the help of react-dom render I am able to test the click event. I had also used jest mock function for this.

Example:-

import React from ‘react’;
import { mount } from ‘enzyme’;
import ReactDOM from ‘react-dom’;
import PieGraph from ‘.’;describe(“PieGrpah”, () => {
let config;
beforeAll(async () => {
config = await getDataAndConfig(‘PieGraph’);
});
describe(“Click Event”, () => {
let pieGraph;
const mockCallBack = jest.fn();
const element = document.createElement(“div”);
beforeAll((done) => {
document.body.appendChild(element);
pieGraph = ReactDOM.render(
<PieGraph
width={500}
height={500}
configuration={config.withoutOtherOption}
data={config.data}
onMarkClick={mockCallBack}
/>,
element
)
setTimeout(() => {
done();
}, 1000);
});afterAll(() => {
document.body.removeChild(element);
});it(“Click On PieGraph”, () => {
element.querySelector(‘path’).click();
expect(mockCallBack).toHaveBeenCalled();
});
});
});
  • How to call React lifecycle methods.

Solution:- we all already know that React has some lifecycle methods. All the lifecycle methods have some unique functionality and execution time. Some have been called after mounting and some are called before mounting. In the gauge graph, an animation is applied to the needle. All the work is performing into the componentDidmount method. It is very difficult to find the angel of the needle and the percentage because both things are performing into the componentDidmount method. After searching a lot I have found one solution. I have tested this thing with the help of react-dom-render. With the help of this, I am able to get all the content like needle angle and percentage.

Example:-

import React from ‘react’;
import ReactDOM from ‘react-dom’;import { getDataAndConfig } from ‘../testHelper’;
import GaugeGraph from ‘.’;const cheerio = require(‘cheerio’);describe(“GaugeGraph”, () => {
let config;
beforeAll(async () => {
config = await getDataAndConfig(‘GaugeGraph’);
});describe(“Initial Configurations”, () => {
let gaugeGraph, $;
const element = document.createElement(“div”);
beforeAll((done) => {
document.body.appendChild(element);
gaugeGraph = ReactDOM.render(
<GaugeGraph
width={500}
height={500}
configuration={config.configuration}
data={config.data}
/>,
element
)
setTimeout(() => {
done();
$ = cheerio.load(element.innerHTML);
}, 3000);
});afterAll(() => {
document.body.removeChild(element);
});it(“SVG Dimensions”, () => {
const height = $(‘svg’).attr(‘height’);
const width = $(‘svg’).attr(‘width’);
expect(height).toEqual(“500”);
expect(width).toEqual(“500”);
});
});
});

API Testing and How to do it?

Thursday, January 23rd, 2020

Introduction

Before getting into what API testing is, it is essential to understand what an API is. An API (Application Programming Interface) indicates how two software programs should integrate with one another.

API (Application programming interfaces) testing is a kind of software testing that involves testing APIs directly and as part of integration testing and to determine if they meet the requirements of functionality, performance, security, and reliability. API testing is a form of Black Box testing and is conducted after the build is ready. The source code is not included here.

The Challenge

To test the APIs and the integrations, they enable a software system.

The solution

To perform API testing, a tool is required to structure and manage the test cases. Another requirement is full traceability of requirements and effective API documentation.

During API testing, certain bugs can be found. These bugs include:

  • Duplicate or missing functionality
  • Incompatibility of the error handling mechanism
  • Reliability issues
  • Security and performance issues
  • Improper messaging
  • Multi-threaded issues

The quality assurance team performs API testing. The testing is conducted after the build is ready. The source code will not be included here.

A request is sent to the API to analyze responses that include:

  • Accuracy of data
  • HTTP status code
  • Error codes of any errors that are returned by API
  • Results of non-functional tests like security and performance
  • Response time
  • Authorization checks

Use a test management tool that will help in API testing by letting you structure and categorize your test cases. The tool should also give you full requirements traceability along with high-level API documentation. During API testing, the following must be kept in mind:

  • The API must be tested to check what happens and what does not happen on a consistent basis.
  • Stress testing on the system must be performed through several API load tests.
  • The API must be tested for failures. Test the API consistently so that it fails consistently.
  • Group all the test cases by category.
  • Mention all the parameters that are selected in the test case.
  • Prioritize API function calls so that testing can be simplified and can be finished on time.
  • Make plans to perform call sequencing.
  • Create test cases for different and all API input combinations that are possible. This way, you can ensure that you get complete test coverage.
  • Reuse the test cases and also monitor the API when in production.
  • It depends on the manual and automated tests if you want better API testing outcomes.

API testing is a very important part of software quality assurance. With the right approach and the right tools, you can ensure it is carried out successfully. The more API testing is structured, the better will be the outcomes of the testing.

Key Insights into the Future of Software Testing — 2020 Vision

Thursday, January 23rd, 2020

Meta-description: Software testing is an industry that is growing rapidly, and the trends predicted for 2020 show a promising, revolutionary future.

With the growth of digital technology and the widespread use it has in our daily lives, the need for reliable and efficient software testing has also increased. Developers need to ensure product quality after an app design agency works on it and before it is rolled out into the market. As such, it is not an exaggeration to say that software testing determines the fate of a product.

Considering the huge role that software testing plays in the success of an app, it is important to know where the industry is headed to in the coming years. Such insights help us understand how better to improve the products that are put out most efficiently.

Before learning about future insights read another article about software testing from the link :- https://medium.com/@successivetech/getting-started-with-testing-react-component-e9e811856f3c

Below, we take a closer look at four main insights that are predicted to dominate the software testing industry in 2020:

  • Testing both the API layer and UI layer are equally important

Most professionals who are involved in software testing, such as developers, project managers, manual testers, and so on, test both the front and back-end of applications. This indicates that today, testing the API layer is equally important as testing the UI layer. Since testers are tasked with testing multiple layers of software, they must be equipped with the necessary tools so that they can test with ease. In the coming years, more testers will likely focus on both API and UPI layers.

  • Machine learning-enabled automated testing is the future

By 2020, the number of testers automating more than half of their API tests is expected to grow significantly. This means that automated testing will soon be the norm in the near future. Machine learning has already heavily impacted the way software is developed, and its impact on software testing is also expected to grow. For instance, machine learning can be used to optimize the test suite to search for excessive, or it can be used to predict the main test configurations based on previous checks.

  • Teams are working on shortening release cycles

Even though teams are not as agile as they wish to be, this trend is likely to change as they are continuously working on deploying more regularly. A huge number of software testers are expected to release either daily or weekly in the coming years, thus shortening their release cycles.

  • More focus on user experience

High-quality UX has grown to become one of the most important determinants of success for products in the world of software today. Regardless of whether the product is aimed at a simple user or for an experienced software developer, being user-friendly is a crucial key. This is exactly why testing user experience has become such a critical part of software testing, and the need for the best UI/UX design services is growing. This trend is expected to grow in the coming years.

Recent Posts

Recent Comments

Get In Touch

Ask Us Anything ?

Do you have experience in building apps and software for my requirements?

What technologies do you use to develop apps and software?

How do you guys handle off-shore projects?

What about post delivery support?