Forem: Ruhul Amin

What is Unit Testing? Why Unit Testing is Important?

Ruhul Amin — Fri, 04 Mar 2022 18:57:15 +0000

What is Unit Testing?

Unit Testing is a type of software testing where individual units or components of software are tested. The purpose is to verify that each unit of the software code works as expected. Units are tested by developers during the development (coding phase) of an application. The unit isolates a section of test code and verifies its accuracy. A unit can be an individual function, method, method, module or object.

The main aim is to isolate each unit of the system to identify, analyze and fix the defects.

Coding is an important step in software development. So before doing this coding, the requirements are collected and analyzed, the architecture is designed, the platform, tools and programming language are decided. Then if the project gets bigger, coding is started by going through some more steps (like class and interaction design). Now an important thing when writing code is unit testing where different units are tested. Now what does the unit mean? A module can be considered as a single, interface can be considered as a unit, class can be considered as a unit, and function can also be considered as a single. I will now talk about writing test code with a single function. When we write big programs, we write each task into a separate function and one function will do only one task. If it is ever seen that a function is doing more than one thing, then it is necessary to break down the function and write smaller functions. So this function is the smallest unit.

Unit Testing - Advantages:

Reduces Defects in the Newly developed features or reduces bugs when changing the existing functionality.
Unit Testing will reduce cost as defects are captured at an early stage.
It improves design and allows better code refactoring.
Improves design and allows better refactoring of code.
Unit Tests, when integrated with build gives the quality of the build as well.

How to do unit test?

After writing the function, you have to write another function in a separate file for that function which will call that function through different input parameters. Then we have to compare the output to see if the output we are expecting and the output the function is giving are equal. Diameter, our unit became test. Different packages have been developed to facilitate unit testing in all programming languages prevalent in the industry. Although the unit can be tested without using these packages.

Unit Testing LifeCyle:

Unit Testing Techniques:

Black Box Testing - Using which the user interface, input and output are tested.
White Box Testing - used to test each one of those functions behaviour is tested.
Gray Box Testing - Used to execute tests, risks and assessment methods.

What is Redux? Why we should use it?

Ruhul Amin — Fri, 25 Feb 2022 11:55:19 +0000

What is Redux: Redux is a state management library that manages our application's all data and states. It is mostly used as a state management tool with React, Although we are discussing the use of Redax with React here, it is not the only one that can be used with React. We can use Redux in Angular, Vue, Vanila js if we want.

By now we understand that Redux is mainly used to manage the application state. So let's take a look at the state at a glance.

State is basically an object that contains specific information or data of a component. Since everything in the React is a component, when we work with the component state of the React, we need to transfer data from different component states to another component. Then we can manage the state by sending data through "Props".

Why we should use Redux:

Suppose we have a lot of child components inside a parent. Now we want to change from one child component to another child component, so how do we do that? Let's look at the diagram below.

If we do not use Redux then we need to do props drilling to send data from one child component to another.

What is Prop drilling: Reacts data flow system is unidirectional. When we need to pass data from one component to another component of a tree need to use the prop drilling process. In this process, props are passed from one component to another component that does not need the data but only helps in passing it through the tree. It’s called prop drilling.

Why we should avoid prop drilling?

React is a very popular JavaScript library. The reason is that it is easy to implement and its great performance in a single-page application. But one of the biggest obstacles developers face when working with the library is components re-rendering excessively, which slows down the application performance. And component re-rendering is especially damaging when developers need components to communicate with each other in a process known as prop drilling.
That is why we should avoid prop drilling, And the Redux will help us to get rid of this problem.

Now let us know about the hook of Redux. Redux basically stands on three concepts

1.Store: Redux saves all the data of the application in one place and that is called Store

2.Reducer: Redux will not allow changes directly to this store. Redux has to be told in advance what changes need to be made in the store if this happens.

3.Action: And the message that needs to be sent to Redux to tell 'what happened' is Action.

What is CRUD Operation? How to Build CRUD Operations using React, Node, Express, and MongoDB?

Ruhul Amin — Thu, 30 Dec 2021 10:47:34 +0000

CRUD:

CRUD stands for Create, Read, Update, and Delete. CRUD typically refers to operations performed in a database. When an application is connected to a database, it adds data to the database, reads the data, updates any data can delete the data is called CRUD operation.

Create — To insert any record into the database.
Read — To retrieve records from the database.
Update — To update a record in the database.
Delete — To delete a record in the database

How to Build your CRUD Application:

To create a CRUD operation first of all we need to create a react application. To create your React application, typenpx create-react-app <Your app name> in your terminal.

You'll see that the packages are being installed. After creating this react project go to the project folder and open it, then open the terminal and command npm start.
Now you will see the default React template, like this:

That means you successfully created a react application.

Now we will go to your code editor and open the app.js file You will see a default boilerplate like this

Now we need to create another project for the server. Before installing the server environment you must install node.js software on your computer.
Now you can create a directory on your computer for the server, and open the directory in your terminal. Now you can create a server following steps.

npm init -y
Npm install express cors mongodb dotenv nodemon

Insert the 2 following lines in your scripts property in your package.json file

"scripts": {
    "start": "node index.js",
    "start-dev": "nodemon index.js"

Now open the project create a file named index.js and insert other necessary things.

const express = require("express");
const { MongoClient } = require("mongodb");
require("dotenv").config();
const cors = require("cors");
const ObjectId = require("mongodb").ObjectId;
const app = express();
const port = process.env.PORT || 5000;

Must Use middleware in your index.js file

app.use(cors());
app.use(express.json());

And then create your MongoDB cluster and input your .env file and use it on your index.js file like this.

const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.qu1uq.mongodb.net/myFirstDatabase?retryWrites=true&w=majority`;

Now we create a function like the following code and create a database and connect with the database. write everything in the try block.

async function run() {
  try {
await client.connect();
    const database = client.db("modernFurniture");
    const productsCollection = database.collection("products");
    const ordersCollection = database.collection("orders");
    const usersCollection = database.collection("users");
    const reviewsCollection = database.collection("reviews");

  } finally {
    // await client.close();
  }
}
run().catch(console.dir);

Let’s start CRUD Operations:

Create Operation:

Now we create an HTML input form for getting some data and send it to the server for the Create operation.

We use Axios and react hook form to send data to the server. For installing Axios write command on your terminal npm i axios, and for install react hook form npm install react-hook-form

const AddProduct = () => {
  const { register, handleSubmit, reset } = useForm();
  const onSubmit = (data) => {
    axios
   .post("http://localhost:5000/products", data)
      .then((res) => {
        “Do something”        }
      });
  };

Now we create a post API on the node server to create data into the database.

   app.post("/products", async (req, res) => {
      const product = req.body;
      const result = await productsCollection.insertOne(product);
      res.json(result);
    });

Read Operation:

Now we create a component on our client-side and send a request to the server for getting all data to show our browser. And when the server responds then stores the data in a state. And we can show data on the UI.

Create a get request to get data from the database:

  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch("http://localhost:5000/products")
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, []);

Sending data to the browser from the server:

   // GET API
    app.get("/products", async (req, res) => {
      const cursor = productsCollection.find({});
      const products = await cursor.toArray();
      res.json(products);
    });

Update Operation:

If further need to update the existing data then we use to update operation. First, we create an update request on our client-side with the following code.

 const user = { email };
    fetch("http://localhost:5000/users/admin", {
      method: "PUT",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(user),
    })
      .then((res) => res.json())
      .then((data) => {
        "do something";
      });

Then the response from the server:

   // make a admin user
    app.put("/users/admin", async (req, res) => {
      const user = req.body;
      const filter = { email: user.email };
      const updateDoc = { $set: { role: "Admin" } };
      const result = await usersCollection.updateOne(filter, updateDoc);
      res.json(result);
    });

We make the normal user to an admin user use that above code.

Delete Operation:

When we need to delete any data from the database then we use the delete operation. There we want to delete a customer order.

const url = `http://localhost:5000/orders/${id}`;
        fetch(url, {
          method: "DELETE",
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.deletedCount > 0) {
             alert("Deleted!", "Your order has been deleted.", "success");
            }
          });

Server response:

  // delete single order
    app.delete("/orders/:id", async (req, res) => {
      const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const result = await ordersCollection.deleteOne(query);
      res.json(result);
    });

Now the server response and the order delete from ui and delete from the database also.

What is context API? why we should use it? How to use it in react?

Ruhul Amin — Thu, 30 Dec 2021 04:55:40 +0000

Context API: The Context API is a React structure that allows passing data from one component to another component without prop drilling.

Why we should use it?

Well, before we know why context should be used, we need to know what is a component and what is props drilling.

Component: When our application becomes too large, it becomes very difficult to manage that application. To make the application easier to manage, we break it down into smaller sections, that is called components. Reusability is one of the biggest features of creating components.

Prop drilling: Reacts data flow system is unidirectional. When we need to pass data from one component to another component of a tree need to use the prop drilling process. In this process, props are passed from one component to another component that does not need the data but only helps in passing it through the tree. It’s called prop drilling.

Why we should avoid prop drilling?

How to use it in react?

First of all, in our application, we need to import a createContext() function from react, and create a context. Then export it, So that it can be used by other components. And through a provider, we will pass in all the data as value.

Then we will use all other components as childrenof this context so that every component can use the data.

import React, { createContext } from "react";
import useFirebase from "../../hooks/useFirebase";
export const AuthContext = createContext();
const AuthProvider = ({ children }) => {
  const allContexts = useFirebase();
  return (
    <AuthContext.Provider value={allContexts}>
      {children}
    </AuthContext.Provider>
  );
};
export default AuthProvider;

Now we will create another file and use the import useContext() function from react, and pass into the context data and returnit, so we can be used it by other components.

import { useContext } from "react";
import { AuthContext } from "../contexts/AuthProvider/AuthProvider";
const useAuth = () => {
  const auth = useContext(AuthContext);
  return auth;
};
export default useAuth;

And finally Wrapping all children by the AuthProvider.

function App() {
  return (
    <AuthProvider>
      <Booking />
      <Dashboard />
    </AuthProvider>
  );
}
export default App;

Now we can use all the data from any component without prop drilling.