A test report dashboard is an organized summary of results. It is created and used to help stakeholders (product managers, analysts, testing teams, and developers) understand product quality and decide whether a product, feature or defect resolution is on track for release.
The idea is to build a Dashboard that quickly encapsulates test results from browser UI tests, windows UI tests, API tests, performance tests, etc., performed by a particular build.
I used MongoDB because its flexible schema makes it easy to evolve and store data. React and Express.js for building the web application and API.
So, the different testing frameworks would make the REST API call with the test results in JSON format to our application as soon as the test execution is completed.
Our App which will be running on a server would store this data and display it to all the stakeholders in real-time.
You can clone my code repository for GitHub for your reference : Link
You need Docker installed on your machine.
mongo-express. So, create a docker-compose.yml file, add the below content.
version: '3' services: mongodb: image: mongo ports: - 27017:27017 environment: - MONGO_INITDB_ROOT_USERNAME=admin - MONGO_INITDB_ROOT_PASSWORD=password volumes: - mongo-data:/data/db mongo-express: image: mongo-express ports: - 8081:8081 environment: - ME_CONFIG_MONGODB_ADMINUSERNAME=admin - ME_CONFIG_MONGODB_ADMINPASSWORD=password - ME_CONFIG_MONGODB_SERVER=mongodb volumes: mongo-data: driver: local
Run the Docker compose command -
$ docker-compose -f docker-compose.yml up
You need Node installed on your machine.
Create the React application by running this command
npx create-react-app <app-name>
Now navigate into the App and create the backend folder.
Inside this folder, we will create the backend
npm init -y.
So, that it connects to the MongoDB then we will come back and write the React later.
We will install these dependencies for our backend.
npm install express cors mongoose dotenv
Create the server.js file to connect to the database and the .env file to store the environment variables.
Now let's create the database schema. Create a new directory called
Add all the different schemas you want to create in the
Once this is done, we need to add the API endpoints routes to perform the CRUD operations.
Inside the backend folder, create another folder called routes and the CRUD operations code in it.
You can test the server by making an API call.
Now it's time to build the front end using React.
You also npm install
You need to edit the default template provided by React in
index.js, and in
You use components to tell what we want to see on the screen.
So, create a folder called components inside the src folder.
Create the components files or projects as per your project needs.
Once, this is done you can start the Dashboard by running the
npm start command.
The App should start running at localhost port- 3000.
Added some more data into the database and the Dashboard UI should look something like this.
Now, let's Dockerize our Dashboard application. So, it will be easy to start our app or run on only server easily.
We need to create a Dockerfile for the server and the client. The Dockerfile essentially contains the build instructions to build the image.
And it using the docker build command
$ docker build -t <image-name> .
To run our entire application together, i.e run all containers parallelly, we need to configure the docker-compose file.
So, I will be editing the existing docker-compose file.
To start the entire application services we need to run the following command:
$ docker-compose up
Note: You need to update the .env file in the backend since we are running the services within the docker container.
You can access the application at localhost port- 3000.
Well, that's it!
You can run this Dashboard App on your machine by following these steps
Clone the repo
$ git clone https://github.com/akshayca/Dashboard.git $ cd Dashboard
Start the app
Go to the project directory and run
$ docker-compose up --build
The app will start running at
Let me know if you need any help :)
Here are the links which you might find useful: