DEV Community: Edem Agbenyo

Test-Driven Development in React: Building Reliable Applications from Scratch

Edem Agbenyo — Thu, 26 Oct 2023 10:08:28 +0000

Imagine you've spent weeks building an application, and it's now live and working well. Users are happy with it. Then, a few months later, your boss asks for some new features. You dive into the project and start writing code, but suddenly, you begin to notice a lot of errors popping up. Fixing them takes a considerable amount of time because you have to remember what each piece of code does and where it fits. This is where tests in your code can make a big difference. Writing tests gives you the confidence to make changes to your code without worrying.

In this comprehensive guide, we'll explore Test-Driven Development (TDD) in the context of building a React.js application. We'll focus on the fundamentals of testing a React application. We'll create our own React application using the basic building blocks and even develop our own testing helper functions.

Building a React Application from Scratch

While create-react-app is great for quickly setting up a React project, in this case, we won't need all the boilerplate that comes with it. We want to stick to the core React functionalities. This follows the first TDD principle, YAGNI (You Ain’t Gonna Need It), which simply implies that you should only add libraries and code that you need to prevent technical debt in the future.

Installing Dependencies

Before we start, ensure that you have npm installed. If not, head to https://nodejs.org for installation instructions. Once that's done, create a folder for our application and follow these steps:

Initialize the project with npm init -y.
Open the package.json file and set the test property to use jest.
Install Jest by running npm install --save-dev jest.
Install React with npm install --save react react-dom.
Install Babel for transpiling your code with the following commands:
- npm install --save-dev @babel/preset-env @babel/preset-react
- npm install --save-dev @babel/plugin-transform-runtime
- npm install --save @babel/runtime.
Configure Babel to use the plugins you just installed by creating a new file, .babelrc, with the following content:

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/transform-runtime"]
}

Creating Your First Test

Let's build an online clothing store that displays a list of products on its page. We'll start by creating the first page, the product page. It shows details about a product and will be a React component named Product. The first step in the TDD cycle is to write a failing test.

We create a test file in test/Product.test.js with the following content:

describe("Product", () => {
  it("renders the title", () => {
  });
})

In the above code, the describe keyword defines a test suite, which is simply a set of tests with a given name. The name could be a React component, a function, or a module. The it function defines a single test. The first argument is the description of the test and should start with a present-tense verb to make it read in plain English. For example, the test above reads as "Product renders the title."

Note: All Jest functions, such as describe and it, are required and available in the global namespace when you run npm run test, so there is no need to explicitly import them.

When we run npm run test, the test will pass because empty tests always pass. Let's add an expectation to our test:

describe("Product", () => {
  it("renders the title", () => {
    expect(document.body.textContent).toContain("iPhone 14 Pro")
  });
})

The expect function compares an expected value against a received value. In our case, the expected value is "iPhone 14 Pro," and the actual value is whatever is inside document.body.textContent. The expectation will pass only if document.body.textContent contains the text "iPhone 14 Pro."

When we run the test, we get an error message indicating that Jest is not able to access document and suggests installing jsdom for our test environment.

Note: A test environment is a piece of code that runs before and after your test suite. In this instance, the jsdom environment sets globals and document objects and turns Node.js into a browser-like environment.

Let's go ahead and install jsdom:

npm install --save-dev jest-environment-jsdom

One more thing, let's update package.json and tell it to use jsdom as our test environment:

{
   ...,
   "jest": {
     "testEnvironment": "jsdom"
   }
}

Now, run the test again, and you will see a different error, which is typical of a failing test. This error message can be divided into four parts:

The name of the failing test.
The expected answer.
The actual answer.
The location in the source where the error occurred.

This is expected since we haven't written any production code yet. To make this test pass, we need to render our Product component into a React container, just as React works in production.

To render a component in React, follow these steps:

Create a container.
Make the container the root.
Attach our component to the root.

This can be done in one line as follows:

...
ReactDOM.createRoot(container).render(component)
...

To achieve the same in our test, do the following:

Create the container:

const container = document.createElement('div');
document.body.appendChild(container);

We create the container element and append it to the document. This is necessary because some of the events are only accessible if the element is part of the document tree.

Create the component:

...
const product = {
  title: "iPhone 14 Pro",
}
const component = <Product product={product} />
...

When you put it all together, we have:

describe("Product", () => {
  it("renders the title", () => {
    const container = document.createElement('div');
    document.body.appendChild(container);
    const product = {
        title: "iPhone 14 Pro",
    }
    const component = <Product product={product} />
    ReactDOM.createRoot(container).render(component)
    expect(document.body.textContent).toContain("iPhone 14 Pro")
  });
})

We need to include the two standard React imports at the top since we are using ReactDOM and JSX:

import React from "react";
import ReactDOM from "react-dom/client";

When we run the test as it is now, we get a ReferenceError because Product is not defined. To make this test pass, we need to create a Product component and import it in our test.

Create a Product.jsx file and inside it, enter the following:

export const Product = () => {};

Run the test, and we get a new error

This new error suggests that the string we expected is different from what we received. Let's update our component to fix the test error:

export const Product = () => "iPhone 14 Pro";

When we run the test, we get the same error, which is due to the asynchronous nature of React 18's render function. This causes the expectation to run before the DOM is modified.

We can fix this by using the helper function act provided by ReactDOM, which ensures the DOM is modified before other code is executed, making our expectation execute only after the DOM is modified.

We import act as follows:

import { act } from "react-dom/test-utils";

We also have to update the jest property in the package.json:

{
   ...,
   "jest": {
     "testEnvironment": "jsdom",
     "globals": {
       "IS_REACT_ACT_ENVIRONMENT": true
     }
   }
}

Now, update the line that renders the component to be:

...
act(() =>
  ReactDOM.createRoot(container).render(component)
)
...

Run the test again, and you will finally see our test passing with no errors.

Expanding the Test

The above test will pass as long as we expect the content of the body to have "iPhone 14 Pro". However, this is not our desired outcome. To make the test pass for other title values, we introduce a prop to our component. Now, our component should look like this:

export const Product = ({ product }) => <p>{product.title}</p>;

Let's add another test to the suite:

it("renders another the title", () => {
    const container = document.createElement("div");
    document.body.appendChild(container);
    const product = {
      title: "Samsung",
    };
    const component = <Product product={product} />;
    act(() => ReactDOM.createRoot(container).render(component));
    console.log(document.body.textContent);
    expect(document.body.textContent).toContain("Samsung");
});

When we run our test, it should pass. However, there is a small issue. The test is passing because of the way the toContain works, but when we inspect the textContent in the second test, we see something strange.

When we run the code above, we get:

This indicates that the components are not independent. The document is not being cleared between renders, and we don't want that to happen. We want each unit of the test to be separate from the other. To fix that, we replace appendChild with replaceChildren.

Run the test again, and we should be good to go.

Conclusion:

In this article, we've explored the fundamental principles of Test-Driven Development (TDD) in the context of building a React.js application. We've gone through the process of setting up a basic React application, writing our first failing test, and making it pass by creating the necessary React component and utilizing the act function to ensure asynchronous code is handled correctly.

By following these TDD practices, you can build more reliable and maintainable React applications that are easier to modify and extend in the future. In the next post in this series, we will refactor the test by extracting the repetitive code.

TypeScript Typing in React Component

Edem Agbenyo — Fri, 23 Jun 2023 17:00:00 +0000

When creating a React component in TypeScript, it is important to correctly type the component and specify the type it returns, which should be a component itself. Failure to do so will result in an error. Let's take a look at an example:

import React from "react";

export const Child = () => {
  return {
     name:"Edem"
  }
};

const Parent = () => {
  return (
    <>
      <Child/>
    </>
  );
};

In the above code snippet, there are several errors. Firstly, the component Child is returning an object instead of a valid JSX element. Additionally, the typings are missing, which can lead to potential issues.

To fix this, we can apply the type definition React.FC (representing a React Function Component) to the Child component. This enforces that the component returns a valid JSX element. Here is the corrected solution:

import React from "react";

export const Child:React.FC = () => {
  return <div>Hi there</div>
};

const Parent = () => {
  return (
    <>
      <Child />
    </>
  );
};

Now, let's consider a scenario where we want to pass some props to the child component. In such cases, we need to inform the child component about the expected prop types. This can be achieved by using interfaces/type. Here is an updated example:

import React from "react";

interface Props {
  content: string;
}
export const Child:React.FC<Props> = (props) => {
  return <div>{props.content}</div>
};

const Parent = () => {
  return (
    <>
      <Child content={"Hi there"} />
    </>
  );
};

By following these practices, we can ensure proper typing and make our React components more robust, reliable and maintainable when using TypeScript.

100 Days of Java: Day 4 List manipulation

Edem Agbenyo — Fri, 09 Jun 2023 08:08:20 +0000

Welcome to Day 4 of the 100 Days of Code challenge! Today, we have an interesting Java code snippet that demonstrates how to remove items from a list using different ways. Let's break down the code and understand how it works.

import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;

public class Day004 {

    public static void main(String[] args){
        List<Person> barcelonaTeam = new ArrayList<>();
        barcelonaTeam.add(new Person("001","Messi",LocalDate.of(1990,9,21)));
        barcelonaTeam.add(new Person("002","Pique",LocalDate.of(1989,8,1)));

        barcelonaTeam.add(new Person("003","Jordi",LocalDate.of(1990,9,21)));

        barcelonaTeam.add(new Person("004","Busquets",LocalDate.of(1990,9,21)));

        removeItemUsingEquals(barcelonaTeam);

        removeItemUsingAnSpecificFilter(barcelonaTeam);

        System.out.println(barcelonaTeam);

    }

    private static void removeItemUsingAnSpecificFilter(List<Person> team){
        team.removeIf(person -> "Jordi".equals(person.getName()));
    }
    private static void removeItemUsingEquals(List<Person> barcelonaTeam) {
        var messi = new Person("1", "Messi", LocalDate.of(1940, 10, 9));
        barcelonaTeam.remove(lennon);
    }

    static class Person{
        private String id;
        private String name;
        private LocalDate dateOfBrith;

        public Person(String id, String name, LocalDate dateOfBrith) {
            this.id = id;
            this.name = name;
            this.dateOfBrith = dateOfBrith;
        }

        public String getId() {
            return id;
        }

        public String getName() {
            return name;
        }

        public LocalDate getDateOfBrith() {
            return dateOfBrith;
        }

        @Override
        public boolean equals(Object o){
            if(this==o) {
                return true;
            }
            if(o==null || getClass() != o.getClass()) return false;
            var person = (Person)o;
            return Objects.equals(id, person.id) && Objects.equals(name, person.name) && Objects.equals(dateOfBrith, person.dateOfBrith);
        }

        @Override
        public int hashCode(){
            return Objects.hash(id,name, dateOfBrith);
        }
        @Override
        public String toString() {
            return "Person{" +
                    "name='" + name + '\'' +
                    '}';
        }
    }
}

To start, we import necessary classes and define a Person class within the Day004 class. The Person class represents an individual with properties such as id, name, and dateOfBirth. It also overrides methods like equals(), hashCode(), and toString().

Inside the main method, we create a List called barcelonaTeam(yes I am a Barca Fan, sorry this is an old team) to store instances of the Person class.

We populate the barcelonaTeam list with four Person objects representing the members of the Barcelona Team 2019-2020. Each Person object is created using the new Person(...) syntax and initialized with specific values for id, name, and dateOfBirth.

Next, we call two methods to remove items from the barcelonaTeam list: removeItemUsingEquals(barcelonaTeam) and removeItemUsingAnSpecificFilter(barcelonaTeam).

In the removeItemUsingEquals method, we create a new Person object named messi with the same values as the first member of the Barca team. We then use the remove() method of the list to remove the messi object from the list. This works because we have overridden the equals() method in the Person class to compare objects based on their properties.

In the removeItemUsingAnSpecificFilter method, we use the removeIf() method of the list with a lambda expression as a filter. The lambda expression checks if the person's name is equal to "Jordi" and removes the matching person from the list.

Finally, we print the barcelonaTeam list using System.out.println() to see the resulting list after the removal operations.

In summary, this code snippet demonstrates two different approaches to remove items from a list in Java. The first approach uses the remove() method by creating an object that matches the item to be removed. The second approach utilizes the removeIf() method with a specific filter condition to remove items that meet the criteria.

That's it for Day 4! Stay tuned for the next code snippet and explanation. Happy coding!

100 Days of Java: Day 3 Scheduler

Edem Agbenyo — Mon, 05 Jun 2023 06:27:23 +0000

Welcome to Day 3 of the 100 Days Java! Today, we'll be exploring a Java code snippet that demonstrates how we can schedule a task to execute periodically using ScheduledExecutorService. Here is the code that implements scheduling:

import java.time.LocalTime;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class Day003 {

    private final ScheduledExecutorService scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

    public static void main(String[] args) throws InterruptedException {
        var day003 = new Day003();
        day003.printCurrentTimeEvery2Seconds();
        Thread.sleep(15_000);
        day003.stopPrinting();
    }

    public void printCurrentTimeEvery2Seconds() {
        Runnable task = () -> System.out.println(LocalTime.now());
        scheduledExecutorService.scheduleAtFixedRate(task, 0, 2, TimeUnit.SECONDS);
    }

    public void stopPrinting() {
        scheduledExecutorService.shutdown();
    }

}

To begin, we import necessary classes from the Java standard libraries, including LocalTime for time-related operations, and Executors and ScheduledExecutorService for task scheduling.

Next, we define a class called Day003. This class contains a ScheduledExecutorService object called scheduledExecutorService, which is responsible for scheduling and executing tasks.

Moving on to the main method, which is the entry point of our program. Inside this method, we create an instance of the Day003 class named day003.

We then call the printCurrentTimeEvery2Seconds method on our day003 object. This method schedules a task to print the current time every 2 seconds. The task is defined using a lambda expression, which simply prints the current time using LocalTime.now().

After scheduling the task, we introduce a delay using Thread.sleep(15_000) to allow the task to run for 15 seconds.

Finally, we call the stopPrinting method on our day003 object to stop the execution of the scheduled task.

Let's summarize what this code does. When we run this program, it will start printing the current time every 2 seconds using LocalTime.now(). This is achieved by scheduling a task with the ScheduledExecutorService to execute at a fixed rate of every 2 seconds. The task is stopped after running for 15 seconds.

This code snippet showcases how to use ScheduledExecutorService to schedule and execute tasks at specified intervals. It is a powerful feature that can be utilized for various timed operations and background tasks in your Java applications.

That's it for Day 3! Stay tuned for the next code snippet and explanation tomorrow. Happy coding!

Code credits: https://github.com/hbelmiro

100 Days of Java: Day 2

Edem Agbenyo — Fri, 02 Jun 2023 11:05:37 +0000

Welcome to Day 2 of the 100 Days of Code challenge! Today, we'll be diving into a Java code snippet that deals with date and time manipulation. Let's break down the code and understand what each part does.

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

public final class MyDateFormatter {

    private static final DateTimeFormatter FORMATTER = DateTimeFormatter.ofPattern("dd/MM/yyyy HH:mm:ss");

    public static void main(String[] args) {
        LocalDateTime currentDateTime = LocalDateTime.now();
        String formattedDateTime = currentDateTime.format(FORMATTER);
        System.out.println(formattedDateTime);
    }

}

To begin, we import two classes from the java.time package: LocalDateTime and DateTimeFormatter. These classes provide functionalities to handle dates, times, and their formatting.

Next, we define a class called MyDateFormatter. The final keyword means that this class cannot be extended, ensuring that it remains as is. This class will contain our code for today.

Within the class, we declare a constant variable called FORMATTER of type DateTimeFormatter. This formatter object is used to specify the desired format for the date and time.

Moving on to the main method, we create a LocalDateTime object named currentDateTime using the now() method. This object represents the current date and time.

We then format this currentDateTime using the FORMATTER object, and store the formatted date and time as a string in the variable formattedDateTime.

Finally, we use System.out.println() to print the formattedDateTime string to the console.

Now that we understand the code, let's summarize what it does. When we run this program, it will display the current date and time in the format specified by the FORMATTER. In this case, the format is "dd/MM/yyyy HH:mm:ss", which means the date will be displayed as day/month/year, followed by the time in hours:minutes:seconds.

This simple code snippet demonstrates how to work with dates and times in Java using the java.time package. Feel free to experiment with different formats or explore more functionalities provided by this package.

That's it for Day 2! Stay tuned for the next code snippet and explanation tomorrow. Happy coding!

Code credits: https://github.com/hbelmiro/

100 Days of Java: Day 1

Edem Agbenyo — Thu, 01 Jun 2023 06:50:22 +0000

Day 001 - Generating a Random Number in Java

Welcome to Day 001 of the 100 Days of Code challenge! In this series, we will explore different Java code snippets and explain them in simple terms. Today, we will dive into generating a random number within a specific range using Java.

import java.security.SecureRandom;

public final class Day001 {

    public static final SecureRandom SECURE_RANDOM = new SecureRandom();

    public static void main(String[] args) {
        System.out.println("Generating a random number between  100 and 200");
        System.out.println(randomNumber(50, 100));
    }

    private static int randomNumber(int minimum, int maximum) {
        return SECURE_RANDOM.nextInt(maximum - minimum) + minimum;
    }

}

Code Explanation:

Let's break down the above code snippet and understand how it works step by step:

Importing Required Classes:

The code begins by importing the necessary class, SecureRandom, from the java.security package. This class provides a cryptographically strong random number generator.

Defining the Day001 Class:

Next, we define a class named Day001. The public final keywords indicate that this class cannot be extended or subclassed.

Creating a SecureRandom Object:

Inside the Day001 class, we declare a public constant variable called SECURE_RANDOM, which is an instance of the SecureRandom class. This variable will be used to generate random numbers securely.

The main() Method:

The main method is the entry point of the program. When the code is executed, this method is called automatically. It takes an array of strings as its argument, although we are not using it in this example.

Printing a Message:

Within the main method, we print the message "Generating a random number between 100 and 200" using the System.out.println() method. This message indicates the range within which our random number will be generated.

Generating the Random Number:

After printing the message, we call the randomNumber() method and pass the minimum and maximum values (100 and 200) as arguments.

The randomNumber() Method:

The randomNumber() method is a private helper method we defined that takes two integers, as input. It generates a random number within the specified range and returns it as the result.

Calculating the Random Number:

This is where the real magic happens. Inside the randomNumber() method, we use the nextInt() method of the SecureRandom class to generate a random integer. We calculate the range of the random number by subtracting the minimum from the maximum. Then, we add the minimum value to the result to ensure the number falls within the desired range.

Printing the Random Number:
Back in the main method, we print the generated random number using the System.out.println() method.

Today, we learned how to generate a random number within a specific range using Java. By utilizing the SecureRandom class, we ensured that the generated numbers are cryptographically strong. Feel free to modify the range and experiment with different values to generate random numbers for your own projects.
Congratulations on completing Day 001 of the 100 Days of Code challenge!

Stay tuned for Day 002, where we will explore another exciting Java code snippet! Happy coding!

Type of grants in OAuth

Edem Agbenyo — Thu, 30 Mar 2023 08:03:36 +0000

What is OAuth?

OAuth is a protocol that facilitates the exchange of information and resources among distinct parties in a secure and reliable manner. It is an authorization protocol that is used to perform two main functions: federated identity (allowing a user to log into an application using a social application account) and delegated authority (allowing a third-party application to access your resource on your behalf from a social application account).

The OAuth protocol performs these functions using two types of grants classified by the type of client communicating with the authorization and resource server: authorization code grant (server-side workflow) and implicit grant (client-side workflow).

Authorization Code Grant Type

The perfect candidate for this type of grant is a 3-tier client-server-database application that is able to securely store information because of the direct access to the database layer. Let's describe the flow for communication between the resource server and the authorization server:

The end user (resource owner) tries to grant a web application access to its resources (eg. list of friends) on Facebook.
The end user is redirected to Facebook and presented with the consent screen from Facebook stating the permission it seeks to grant the application on behalf of the user.
The user accepts the consent form, and the application is given an authorization code (tag), which can be used only once.
The web application sends the authorization code(tag) to the authorization server along with the client's ID and client secret to retrieve the access token.
The Authorization server responds to the web application with an access token, which can be used to make another request to access resources from the Resource server. The application uses the access token to access information about the user, in this case, the list of friends.

Implicit Grant Type

This grant type is suited for untrusted types of client applications, such as browser-based applications that are only written in HTML, CSS, and JavaScript without the need for a server to run them. These types of applications are not capable of storing or transmitting secure information.

Due to the nature of these applications, they have a simpler workflow when compared to the Authorization Code grant type. For this flow, we have the following steps:

The end user (resource owner) tries to grant a web application access to its list of friends on Facebook.
The end user is redirected to Facebook and presented with the consent screen from Facebook stating the permission it seeks to grant the application on behalf of the user.
The user accepts the consent form, and the application is given an access token, which can be used to retrieve the information needed by the application.
The application uses the access token received in the previous step to get the list of friends from the user's Facebook account.

Conclusion

OAuth 2.0 is a powerful protocol that enables the secure and reliable exchange of information and resources between different parties. By using either the Authorization code grant or implicit grant types, developers can build applications that allow users to securely log in or delegate authority to third-party applications. With the popularity of social media applications, OAuth 2.0 has become a crucial tool for developers who want to build secure and reliable applications that can interact with social media platforms.

Understanding Crypto tokens

Edem Agbenyo — Tue, 15 Feb 2022 22:31:18 +0000

Tokens are not a new thing, they have existed since the first thought of exchanging goods. Early form of tokens were probably beads and shells. We also have casino chips, vouchers, gift cards, bonus points, stocks certificates, bonds, concert-entry tokens, dinner-reservation, ID cards, club memberships, or train /airline tickets. Paper money or coins are also other forms of tokens. There is an anti-counterfeiting measure in-built in most tokens in order to prevent people from easily replicating a token and thereby cheating the system. Tokens are used in computers too, an example will be a web browser sending a token to a website to authenticate a user, hence they are used to perform operation or manage access rights.

In order for a token to be trusted, it must be issued and manage by a central authority that ensure their validity and control the security of each token . Security features built into the tokens help protect against a comprehensive range of counterfeit methods and attempts to use a token more than once. A cryptographic token validity and security is managed by the smart contract that created it and the underlying distributed ledger on which it runs.

Cryptographic Tokens

A token is simply a digital asset. A token in itself is an object of value, or representation of any other asset on a digital ledger.
It can represent access rights to a public or private property or service. Tokens can represent a special type of rules built into a smart contract, called token contract. Token contract maps addresses to their respective balance in a blockchain. Tokens are accessed in a blockchain using a wallet software which communicates with the network and manages the public-private key that relates to the blockchain address.

Types of Tokens

Tokens can be classified under 4 different types:

Payment tokens
These are tokens that serve a medium of exchange, store of value and unit of account in a distributed ledger. They are also known as coins. Common examples of payment are Bitcoin, Dogecoin, Litecoin. The value of these coins rises or falls based on the demand and supply at any point in time.
Utility tokens
These tokens give the holders access and the right to perform some action only in a specific networks. They are unique to their ecosystem and can't be used in other networks. An example is the Ether that is used to access DApps on the Ethereum blockchain.
Security tokens
Security tokens are simple securities that have been tokenised. A security is a traditional asset like Stocks or shares that is tradable. These tokens are traded on a blockchain network where ownership rights are stored and the value of the off-chain asset they represent are tied to them.
Non-fungible tokens
These are tokens that are unique in nature as they represent distinct and scarce assets such as arts or real estate. NFTs can also be used to represent identities and certificates(licenses, degrees, voting rights, etc..). NFTs relies on the ERC-721 Standard as it allows for more data to be added to a token such as metadata about the asset and ownership information

Benefits of tokens

The advents of cryptocurrency tokens is one of the best innovation to have happened in recent times. Some of the major benefits its usage provide are:

It is a universal means of payment with no central entity controlling or supervising transactions
Tokens provide more transparency along marketplaces than existing financial systems currently offer.
It helps reduce the cost of managing and trading cryptographic assets using a distributed ledger.

References

https://www.sofi.com/learn/content/what-is-a-utility-token/
https://www.sofi.com/learn/content/security-tokens-cryptocurrency/
https://www.metaco.com/digital-assets-glossary/cryptographic-tokens/
Book: Token Economy by Shermin Voshmgir
https://eips.ethereum.org/EIPS/eip-721

Is Bitcoin really decentralised, given the top 100 addresses hold over 90% of total supply of token?

Edem Agbenyo — Wed, 02 Feb 2022 09:12:23 +0000

Debugging in React testing library

Edem Agbenyo — Sat, 29 Jan 2022 21:35:43 +0000

Writing testing for react applications has been made easy with the react-testing-library testing framework. It provides a kitchen sink of utility function that can answer any of your need while testing.

One of question we ask ourselves when we are writing tests for our applications is "Why is my test not working?"; though a banal question, this question can be the reason why you continue writing your test or you put a hold to it.

The main reason for this question is the fact that your test is failing to match the code it is testing. React-Testing-Library provides a function to debug our tests and get an insight on what is failing.

Debugging a component

With the assumption that we have setup of our code with the steps from react-testing-library setup page, let's take a look at this component and its test.

export default function Table({name="", list = [] }) {
  return (
    <div>
<h1>List of {name}</h1>
      {list && (
        <ul>
          {list.map((item) => (
            <li key={Math.random() * 10}>{String(item.value).slice(0,5)}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

The component displays a list of item in an unordered list. Let's write a test to make sure we have the items displaying.

import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("it displays table with heroes", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getByText } = render(<Table name="Heroes" list={heroes} />);
    expect(getByText("Heroes")).toBeInTheDocument();
    expect(getByText("Superman")).toBeInTheDocument();
    expect(getByText("Batman")).toBeInTheDocument();
  });
});

The above test will fail and we may be wondering why. The quickest way to debug this is to use the screen.debug() function made available by react-testing-library

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("Table is working", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getByText } = render(<Table list={heroes} />);
    screen.debug();
    // expect(getByText("Super")).toBeInTheDocument();
  });
});

The above test will return the following log

<body>
  <div>
    <h1>List of Heroes</h1>
    <div>
      <ul>
        <li>
          Super
        </li>
        <li>
          Batma
        </li>
        <li>
          Docto
        </li>
      </ul>
    </div>
  </div>
</body>

Debugging specific component

You can also use the debug method to log specific elements of the resulting DOM component.

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import Table from "./Table";

describe("Table", () => {
  test("Table is working", () => {
    const heroes = [
      { value: "Superman" },
      { value: "Batman" },
      { value: "Doctor Strange" }
    ];
    const { getAllByRole } = render(<Table list={heroes} />);
    const items = getAllByRole("listitem");
    screen.debug(items)
    // expect(items[0]).toHaveTextContent("Super");
  });
});

The code above gets the list of heroes using the getAllByRole method and with the help of debug, we log only that part of the component we are interested in.

The debug method is a great tool to help you visualise the DOM output of a component under test and provide a good insight when troubleshooting failing tests.

Security in The Blockchain

Edem Agbenyo — Sat, 22 Jan 2022 21:27:46 +0000

We have all be fascinated by the way the Blockchain has gained so much attention in recent years, especially the number of applications that can be made possible through it. This success of the Blockchain is due to its ability to keeps the anonymity of its users while allowing people who do not trust or know each other to reach a consensus and work together, the transparency of the interactions and how data flowing through the network is protected. Most blockchain networks use cryptography to identify, verify and secure the core protocol of the networks. In this article we will explain what cryptography is and how it is used in the context of blockchain at the surface level.

Blockchain

A blockchain is a network of public infrastructures that collectively maintain a shared and distributed ledger where immutable and encrypted copies of the information are stored on every computer in the network. One of the reason why blockchain technologies are widely being adopted is its ability to share information, send tokens and maintain integrity of nodes participant data in a very secure manner. This is accomplished using a combination of cryptographic encryption and hashing.

Cryptography

Cryptography is simply the practice of securing communication and protect it against eavesdropping from third parties. In the context of blockchain, two types of cryptography are used, hash functions and public-key cryptography.

Hash Functions

Hash functions are a mathematical algorithms that transform/convert any type of data of arbitrary size to a fixed size data. The converted data known as the hash value or message digest is unique and it is nearly impossible to get the original message from it. Hash functions in the context of a blockchain are used to ensure the integrity and the privacy of data transferred.

Public-key cryptography

Public-key cryptography is a cryptography system that uses pairs of keys(Public/Private keys). In this system, the private key is kept private and the public is openly distributed. Anyone with the public key can send an encrypted message to the owner of the public key, who can in turn decrypt the message with the corresponding private key. In the same manner, a sender can combine a message with the private key to create a digital signature of the message, which can only be verified by anyone holding the public key.

Security in the Blockchain

How is cryptography blockchain networks and other distributed ledgers?
In order for anyone to talk to the bitcoin network, one will first need a blockchain/bitcoin wallet. A wallet is a piece of software that stores your private key, public key, blockchain address and is the way by which you communicate with the blockchain network. Though the wallet can run on a computer, mobile phone or can be in the form of a hardware device, it performs the same function, which is to allow a user to authenticate and manage tokens. The wallet is used to sign transactions with ones private key when sending token, thus proving the transaction is genuine and adjusted on all copies of the ledger across the network of computers.

This is how the cryptographic aspect comes into play; when launched for the first time, the wallet generates a key pair(private/public key); first the private key randomly generates a 256-bit integer, then the public key is mathematically derived, using elliptic-key cryptography, from the private key. In the second step, the blockchain address is derived from the public key using a cryptographic function adding a checksums and prefixes to it. A blockchain address behaves just like an email address used to send and receive e-mails.
In order for a node to send a token in a blockchain network, the wallet is used to authenticate the user, before the private key is used to sign the token transactions. The public key is then used by all validating nodes in the network to verify the signature, preventing another person from taking your identity and sending/receiving token on your behalf.

Final word

In conclusion, no blockchain network could exists without any form of cryptographic system, though different ledgers use different type of cryptography. Most networks use a hash function and a asymmetric cryptography to maintain a high level of security and prevent easy access to participants token and wallets.

Handle errors in React components like a pro

Edem Agbenyo — Thu, 28 Oct 2021 06:58:41 +0000

When you are writing a react application you have two ways to handling errors:

Using try/catch block in each component
Using React Error Boundary which is only available in class Component :(

import * as React from 'react'
import ReactDOM from 'react-dom'

function City({name}) {
  return <div>Hello, visit {name.toUpperCase()}</div>
}

function Country({capital}) {
  return <div>Hello, visit {capital.toUpperCase()}</div>
}

function App() {
  return (
    <div>
      <Country />
      <City />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

The above piece of code would end up showing you an error page when you run it in Development or a blank screen in Production.
Obviously, the error we created in the code above could have certainly been handled with PropTypes or TypeScript, however we are aware runtime error happens all the time and we are going to deal with it using the two approaches stated above.

Try/catch

import * as React from 'react'
import ReactDOM from 'react-dom'

function ErrorHandler({error}) {
  return (
    <div role="alert">
      <p>An error occurred:</p>
      <pre>{error.message}</pre>
    </div>
  )
}

function City({name}) {
  try {
    return <div>Hello, visit {name.toUpperCase()}</div>
  } catch (error) {
    return <ErrorHandler error={error} />
  }
}

function Country({capital}) {
  try {
    return <div>Hello, visit {capital.toUpperCase()}</div>
  } catch (error) {
    return <ErrorHandler error={error} />
  }
}

function App() {
  return (
    <div>
      <Country />
      <City />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

This approach, requires us to define an ErrorHandler component to display in case an error occurs and we wrap each component returned element in the try/catch block.

This seems ok, but repetitive. What if we want the parent component to handle the error catching for us. Wrapping the parent component App in a try/catch block will not work, due to the nature of how React calls functions. That is when React Error Boundary comes in.

React Error Boundary

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

As at React 17.0.2, Error Boundary works only in

Class component
and It must implement static getDerivedStateFromError() or componentDidCatch()

In order to use Error Boundary in Functional Component, I use react-error-boundary.

import * as React from 'react'
import ReactDOM from 'react-dom'
import {ErrorBoundary} from 'react-error-boundary'


function ErrorHandler({error}) {
  return (
    <div role="alert">
      <p>An error occurred:</p>
      <pre>{error.message}</pre>
    </div>
  )
}

function City({name}) {
    return <div>Hello, visit {name.toUpperCase()}</div>
}

function Country({capital}) {
    return <div>Hello, visit {capital.toUpperCase()}</div>
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorHandler}>
      <Country />
      <City />
    </ErrorBoundary>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

When we run this application, we will get a nice error display form the content of ErrorHandler component.
React error boundary catches any error from the components below them in the tree. This is really handy and useful because we need not declare a separate try/catch for each component because the wrapping component(ErrorBoundary) takes care of that and display the component of the FallbackComponent provided.

Exceptions to Error handling

Because react-error-boundary uses react error boundary in the background there are a few exceptions to the errors that can be handled.

These errors are not handled by react-error-boundary

Event handlers

Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)

Server side rendering

Errors thrown in the error boundary itself (rather than its children)

Error recovery

This library offers an error recovery feature, that allow you to reset the state and bring back the components to a working point.
Let's use this example from the react-error-boundary npmjs page.

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

function Bomb() {
  throw new Error('💥 CABOOM 💥')
}

function App() {
  const [explode, setExplode] = React.useState(false)
  return (
    <div>
      <button onClick={() => setExplode(e => !e)}>toggle explode</button>
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => setExplode(false)}
        resetKeys={[explode]}
      >
        {explode ? <Bomb /> : null}
      </ErrorBoundary>
    </div>
  )
}

The ErrorBoundary component accepts two other props to help recover from a state of error. The first prop onReset receives a function which will be triggered when resetErrorBoundary of the FallbackComponent is called. The onReset function is used to reset the state and perform any cleanup that will bring the component to a working state.
The other prop of ErrorBoundary is resetKeys, it accepts an array of elements that will be checked when an error has been caught. In case any of these elements changes, the ErrorBoundary will reset the state and re-render the component.

Handling error in React functional components should be a breeze for anyone using the react-error-boundary library. It provides the following features:

Fallback components to display incase of error
Granular capturing of error at component level
Recovery of error using a function or by resetting the elements causing the component to fail.