DEV Community: Anurag

Basics of E2E Testing and Integrating Cypress with Next.js

Anurag — Fri, 25 Feb 2022 16:31:59 +0000

👋 Hello fellas! It's been a while since I posted an article.

As developers, we always want to deliver the best products to users. And Testing is a crucial part of this process. One of the commonly used testing techniques is E2E testing.

💡 E2E Testing - The Basics

End to End Testing (or E2E testing in short) is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected.

The main intent of E2E testing is to simulate the real user scenario and to test from the end user's experience.

📃 Benefits of E2E Testing

Reduced Risks
Increased Confidence
Reduced Cost

⚡ E2E testing methods

Horizontal E2E testing

Horizontal Testing is done from the end user's perspective. It evaluates whether the user can navigate the software and use its functions properly. It also helps to detect the bugs that might prevent the user from using some software functions.

Vertical E2E Testing

This method refers to testing in layers, meaning that tests happen in sequential, hierarchical order. Each subcomponent of the system is tested from start to finish to ensure quality.

It is mostly done when the system has no UI or the UI has a high level of technicality and is used to test critical components.

❓ How to perform E2E Testing?

Analyze all the requirements. Have a clear idea about what the app is supposed to do.
Set up a test environment as per the requirements.
List down all the testing methods required to test these responses.
Design the test cases.
Run the tests and jot the results.

⚡ E2E Testing Frameworks

E2E Testing frameworks are used to ensure that all the moving parts in an application is configured properly.

Here are some of the most popular ones:

Selenium
Cypress
Cucumber
Testim

Now that you are familiar with the basic concept of E2E Testing, let's take a look at how to integrate E2E Testing using Cypress in Next.JS

👨‍💻 Integration of Cypress with Next.js for E2E Testing

Now that you're familiar with the Basics of E2E Testing, let's take a look at how to get started with Cypress in Next.js

Next.JS

In case you are not familiar with Next.js, it's a react framework packed with some extra features to help both developers and clients.

Cypress

Cypress is a test runner for E2E Testing for the web.

Setting up the Project

You can use create next-app with the cypress example to get started quickly.

npx create-next-app@latest --example with-cypress with-cypress-app

For existing projects, you can start off by installing the cypress package.

npm install --save-dev cypress

Then, add Cypress to the scripts section in the package.json file.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "cypress": "cypress open",
}

Next, run cypress to generate examples that use their recommended folder structure.

npm run cypress

Creating your first Cypress integration test

Let's say you have two pages

// pages/index.js

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  )
}

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

Then, to test that your navigation is working correctly:

// cypress/integration/app.spec.js

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('http://localhost:3000/')

    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href*="about"]').click()

    // The new url should include "/about"
    cy.url().should('include', '/about')

    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About Page')
  })
})

Tip: Instead of doing cy.visit('http://localhost:3000/'), you can just do cy.visit('/') if you set the baseUrl to http://localhost:3000 in the cypress.json config file.

// cypress.json 
{
  "baseUrl": "http://localhost:3000"
}

At this point, you will have a simple test setup. Since Cypress is testing a real Next.js application, it requires the Next.js server to be running prior to starting cypress.

First Run npm run build and npm run start, then run npm run cypress in another terminal window to start Cypress.

Now, cypress will start and you can view the results.

Further steps for Continuous Integration (CI)

At this point, you will have noticed that running Cypress so far has opened an interactive browser which is not ideal for CI environments.

You can run Cypress headlessly using the cypress run command.

In the package.json file:

// package.json

"scripts": {
  // ...
  "cypress": "cypress open",
  "cypress:headless": "cypress run"
}

That's it for this article! You can show your support by dropping some reactions here!

About the Author

How I structure my Next JS Projects

Anurag — Mon, 07 Feb 2022 06:53:18 +0000

Hello folks! It's been a while since I published an article. So today I'm going to explain how I structure my NextJS projects.

Note: There is no right or wrong way to structure a Next JS project, and this is highly opinionated.

So, the structure of a Next JS project depends mainly on the complexity of a project. And if a project needs only page and is small in terms of complexity, you should not over-structure it. With that being said, let's see how to manage your project depending upon the complexity.

📃 Single Pages

Next JS automatically routes every file in the pages/ directory to a name associated with the file name.

For example, the React component inside the pages/dashboard.jsx will be routed to ${URL}/dashboard

For single pages, you can just create a single file that will export a React component.

Example:

- pages/index.js

function Home() {
  return <div>Hello world</div>;
}

export default Home;

🧩 Breaking down into smaller components

Now, at some point, your file will have a lot of lines, so you can make smaller standalone components.

Example:

- pages/dashboard.jsx

const Header = () => {
  return <header>{/* component code */}</header>;
};

const Hero = () => {
  return <div>{/* component code */}</div>;
};

function Dashboard() {
  return (
    <>
      <Header />
      <Hero />
    </>
  );
}

export default Dashboard;

📁 Creating custom files for components

The above example works if you have smaller components. But it is advisable to create standalone files for components.

Now, conventionally, components should be stored in the components directory at the root directory of the app.

Example:

- components/Header.jsx

const Header = () => {
  return (
    <header>
      {/* some code */}
      {/* some more code */}
    </header>
  );
};

export default Header;

Then, in the desired file, you can import and use it.

Example:

- pages/index.js

import Header from "../components/header.jsx";

function Home() {
  return (
    <>
      <Header />
      {/* main component */}
    </>
  );
}

export default Home;

Now, as your apps grow, they will contain more and more components, and while importing them, the code can be a little messy.

Here's a simple workaround for this:

First, make a file inside the components directory named index.js or index.jsx

Then, inside the file, export all the components at once.

- components/index.js

export * from "./Header.jsx";
export * from "./Hero.jsx";
export * from "./Footer";

Next, you can import all the components inside your desired file at once.

Example:

- pages/index.js

import { Header, Hero, Footer } from "../components";

function Home() {
  return (
    <>
      <Header />
      <Hero />
      <Footer />
    </>
  );
}

🗃 Making categories for similar components

Now, let's say you have components of similar kinds. Like the Header and the Footer component acts like navigation components. Similarly, you have different Card components that can be sorted into the Cards category.

So, you can create different folders inside the components directory

For example:

- components
    | - Navigation
        | - Header.component.jsx
        | - Footer.component.jsx
    | - Cards
        | - Confirm.card.jsx
        | - Checkout.card.jsx

📖 Making categories for similar pages

Back to pages, in some cases, pages can also fall into some categories. For example, the sign-up and login page falls into the auth category.

So, for that case, you can make a directory inside the pages directory named auth containing the sign-up and login pages.

- pages
    | - auth
        | - sign-up.jsx
        | - login.jsx

🗄 Storing Files, Fonts

Moving from this, the conventional way to store external files such as Images, Fonts, etc. is to store them in the public directory.

For example, you can store all the required images in the public/assets directory.

Similarly, you can store the required fonts in the public/fonts directory.

Example:

- public
    | - assests
        | - cover.png
        | - logo.png
    | - fonts
        | - poppins-medium.woff2
        | - sen-regular.woff2

🔮 Managing custom hooks, types, functions

In addition to this, you can create separate folders for custom hooks, types, functions, etc.

- hooks
    | - useuser.jsx
- @types
    | - propTypes.ts
- utils
    | - uploadImage.js

That's a wrap for this article. If you liked this, make sure to drop some reactions on this article.

About the Author

Introducing Vault3 - Your Safest Decentralized Vault!

Anurag — Thu, 27 Jan 2022 09:26:57 +0000

❓ What is Vault3?

Simply speaking, Vault3 is a decentralized vault for all your digital belongings, like Passwords, Images, and Files.

Vault3 is our submission for the Hashnode x ThirdWeb Hackathon

Try Vault3

✏️ Hashnode

In case you don’t know, Hashnode is the easiest way to start a developer blog on your personal domain for free and connect with the readers through its global dev community!

🌐 ThirdWeb

These days, Web3.0 is catching everyone’s eyes, and as a developer myself, the learning curve is pretty steep. That’s where ThirdWeb comes in! ThirdWeb is a sweet collection of tools that can be used to build sophisticated Web3 apps, with ease.

Tracing Back to Vault3, let’s first see where the Idea came from.

😕 The Problem

It is normal tendency for humans to forget things that are long or things that cant be remembered easily. Hence, we write them down in a place to use them when needed. But in the digital world, writing important things that are hard to remember like passwords in physical objects like paper has become highly unlikely. It has become quite common to store important things in applications like password/note managers.

But have we ever thought about the safety of our digital belongings in those applications that are centralized? Have we ever thought that our data can be easily censored by the applications where we store them in?

Enter Vault3, a safe and secure digital vault.

🔭 Deep Dive into Vault3

Speaking of Vault3, it’s a web application built with technologies like NextJS, Chakra UI and some external libraries.

Vault3 provides users with a safe vault, which they can use to store important belongings such as Photos, Passwords and Files.

The way it works is:

User first connects their wallet, like Metamask
Then they create a private key to access their vault. To create a private key, user needs to upload an Image of their choice. This Image is hashed and will be used as a private key to access the vault.
Now the user can access their vault through a Dashboard
Here the user can upload Passwords, Images and Files
Users can also delete, download and view their stats.

✨ The Tech Stack

NextJS
Chakra UI
Thirdweb
Hardhat

👀 Understanding the flow of the app

🔒 Authentication

The auth flow is handled by crypto wallets as in web3.0 protocols. We are using Thirdweb as our provider. At the time of writing this article, Vault3 only supports Metamask wallet.

🔑 Generating the private key

The private key to access the vault is basically generated from the Image that the user provides when creating a new private key.

The Image is first converted into byte data, and then its hashed using the HmacSHA256 algorithm, which is then used as a private key to access the vault.

To access their vault again, users must provide the same Image.

💽 Uploading Flow

All of your data is stored safely on the Polygon blockchain using the AES encryption algorithm.

🔑 Uploading Password

Storing a password is extremely simple. You are just required to enter the Website for which you want to store the password, your Username or Email you used for that site and lastly the Password itself. You can also copy the password and also reveal it once it has been stored. You can also filter your passwords by searching for the site address that you have given while storing a new password.

🌆 Uploading Image

The process for storing an image relatively remains the same as storing a password except the field where you would enter the name of the site is now replaced by a field for Name of the image. And, you now have a field to insert your image. Vault3 supports various image formats such as PNG, JPG, SVG, GIF and WEBP. Ta-da! Your image is now stored in your vault!

📁 Uploading Files

Moving onto importing a file. Vault3 supports insertion of files of all kinds, so you do not have to worry about the format of your file. You just need to insert your file and the Name field is populated by the name of the file you have chosen and you cannot change the Name for a file unlike the situation of storing an Image.

Apart from uploading Passwords, Images, and Files, users can also delete and download the data stored in their vault.

Note: Since Vault3 is based on web 3.0, most of these operations require Gas Fees in the form of MATIC tokens.

ℹ️ On a sidenote:

Vault3 currently operates on the Mumbai Polygon Testnet Network, and you can get some fake MATIC here

👥 Moving from this, Let’s meet the Team:

Saptarshi Basu - Builder, saptarshii.me@gmail.com
Anurag - Co-Builder, kr.anurag24@gmail.com

Twitter Launch Post

🔗 External Links

Metamask authentication in NextJS with Third Web

Anurag — Tue, 11 Jan 2022 13:33:55 +0000

Hey There! What's up!

So Web3 has been in total hype these days, and a lot of developers have been trying out web3 lately, including me.

And, Authentication is one of the most skeptical parts of a Full Stack application! And in Web 3.0, this flow is managed by wallets, and Metamask is the most popular among them.

So, in this article, I'm going to show how you can integrate Metamask auth with ThirdWeb in NextJS!

Demo of what we are building today:

Demo

Installing a new NextJS app

First, create a NextJS app. I'm also using Tailwind CSS as my UI preference. You can use anything that you like.

npx create-next-app -e with-tailwindcss metamask-auth

Clear up the boilerplate

Now, clear up the boilerplate in the index.js file.

export default function Home() {
  return <div></div>;
}

Installing the dependencies

Now, we will install the only required dependency for this app, @3rdweb/hooks. Go ahead and install @3rdweb/hooks in your project directory.

# for npm
npm i @3rdweb/hooks

# for yarn
yarn add @3rdweb/hooks

Setting up the Third Web Provider

Now, we are going to set up the ThirdwebWeb3Provider in our _app.js file:

import "../styles/globals.css";
import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

import "regenerator-runtime/runtime";

function MyApp({ Component, pageProps }) {
  const supportedChainIds = [80001, 4];

  const connectors = {
    injected: {},
  };

  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      <Component {...pageProps} />
    </ThirdwebWeb3Provider>
  );
}

export default MyApp;

Here, first, we are going to import the provider and regenerator-runtime/runtime at the top of the script.

import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

import "regenerator-runtime/runtime";

Next, in the main function, we are specifying the supportedChainIds and connectors. You might be wondering what are these.

supportedChainIds contains a list of networks that are supported by our app. Here, 80001 is for Mumbai Testnet Network and 4 is for Rinkeby Testnet Network. You can check the list of all networks and their Chain Ids here .

connectors is basically all the wallet providers we want to support. Here, injected is for Metamask wallet. This will be used when we are actually making the function to connect wallet.

Next, we are wrapping our whole app in ThirdwebWeb3Provider with supportedChainIds and connectors props to specify the configuration.

That's it for the _app.js file.

Making a UI in the `index.js` file

Now, let's first make a UI for the login flow.

Head over to index.js file and make a simple button to connect wallet.

export default function Home() {

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
        <button
          className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        >
          Connect Wallet
        </button>
    </div>
  );
}

At this point, you will have a basic UI like this:

Building the connect wallet functionality

Now, let's build the connect wallet functionality.

First, we will import the useWeb3 hook from @3rdweb/hooks in our index.js file:

import { useWeb3 } from "@3rdweb/hooks"

Now, inside the Home component:

const { connectWallet, address, error } = useWeb3();

Now, we are going to assign the connectWallet to the connect wallet button:

<button className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
onClick={()=>connectWallet("injected")}
>
      Connect Wallet
</button>

Here, we are passing injected as a param to the connectWallet function. If your remember from the above steps, this is used to specify that we are going to use Metamask to authenticate user.

Now, at this point, you will have a working connect wallet button.

Displaying user address:

Now, in the Home component, we are going to check if the user is authenticated and then render component based on that:


return (
  <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
    {address ? (
      <p className="px-2 py-1 rounded-full bg-gray-200 hover:bg-gray-300 font-mono font-medium cursor-pointer duration-100">
        {address}
      </p>
    ) : (
      <button
        className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        onClick={()=>connectWallet("injected")}
      >
        Connect Wallet
      </button>
    )}
  </div>
);

Error handling:

Sometimes, the app may not work cause of errors, so in that case, we can use the error object and log its value.

Below our useWeb3 hook:

const { connectWallet, address, error } = useWeb3();

error ? console.log(error) : null;

That's it! We have done it!

Component Polymorphism in React

Anurag — Mon, 03 Jan 2022 14:18:26 +0000

What's Up, people! Hope you're doing fine!

In this article, I'm going to explain Polymorphic Components in React, along with their implementation and using them with Typescript!

So, there is a high chance that you might not be familiar with this concept. But you may have encountered this pattern.

In a nutshell, this pattern lets us specify which HTML tag to use to render our component.

But, the flexibility of polymorphic components also makes them easy to misuse, and that’s where TypeScript can help us.

So, let's dive deep into this!

Overview - Polymorphic Components

First, let’s see how we would use polymorphic components in react. Say we have a Button component that we want to render as an HTML link. If Button is a polymorphic component, we can write it like this:

import Button from './Button'

function App() {
  return (
    <Button as="a" href="https://open.spotify.com">
  )
}

export default App

Here, our button will render as a tag and it also accepts href attribute.

Basic Implementation:

Note: To implement this in your react app, you need to have Typescript set up.

Now, let's implement a Basic example for this, without type checking for now:

const Button = ({ as, children, ...props }: any) => {
    const Component = as || "button";

    return <Component {...props}>{children}</Component>;
};

export default Button;

Here, we avoid type checking by setting the type to any.

Here, we render our component using the as prop or if it's not provided, use the button tag as fallback.

Here's the line which makes this work:

const Component = as || "button";

That's all we need to build a basic implementation.

However, the problem with this approach is that there is no mechanism to prevent the client from passing incorrect props.

Here's an example:

import Button from './Button'

function App(){
  return (
    <Button href="https://open.spotify.com">
  )
}

export default App

Here, we are passing the href prop, which belongs to a tag, without setting the as prop to a.
Ideally, TypeScript would catch this bug immediately, and we would see an error.

Type checking using Typescript!

Next up, we are gonna tighten up the prop type using Typescript.

Here's a basic implementation for this:

import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";

type ButtonProps<T extends ElementType> = {
  as?: T;
  children: ReactNode;
};

const Button = <T extends ElementType = "button">({
  as,
  children,
  ...props
}: ButtonProps<T> & ComponentPropsWithoutRef<T>) => {
  const Component = as || "button";

  return <Component {...props}>{children}</Component>;
};

export default Button;

Here, this code involves generics. The following line made this component generic:

const Button = <T extends ElementType = "button">

ElementType is a type from React. We set our parameter T to ElementType to ensure our button only accepts HTML tags and other React component types.

At this point, our Button component can dynamically calculate the props it accepts based on the value of as. If we try our client example earlier, we will see an error like this:

Here, we get an error stating that Property 'href' does not exist on type 'IntrinsicAttributes & MyButtonProps<"button">

That's it! Our Button component no longer accepts the href property because it doesn’t render itself as a link. If we add as="a", the error goes away.

Get Started with Supabase Database in NextJS! ⚡

Anurag — Thu, 09 Dec 2021 15:04:32 +0000

🙋‍♂️Hello Everyone

In this blog post, we're gonna Get Started with Supabase Database in NextJS!

One of the coolest things about Supabase is its database and for building full-stack apps, we all like to use NextJS, so in this tutorial, I'm gonna show you how can we integrate the two!

Why choose Supabase

In case you don't know about Supabase Database, here are a few points to catch up on!

It's free to use and follows the pay as you go, model,
The free version provides unlimited read and write requests!
The free version contains 500 MB of space
It's a SQL Based database
It is one of the easiest databases to get started with!

So, let's jump right in!

What we're building today:

First, you need to set up a project in Supabase, you can go to their official website and create a free project! In case you don't have an account there, you need to make an account there.

Go to Supabase, and click on create a new Project, choose a name and a password, and you're good to go!

Next up, create a new table in the database named responses

Now, let's jump to the coding part!
So, we're using NextJS for this demo, and I'm using Tailwind as my UI preference. But you can use your preferred UI Framework as your preference!

npx create-next-app -e with-tailwindcss supabase-demo

Now, we're gonna make a simple form.
For this demo, you can just use the index.js file. Clear up the boilerplate code.

Now, we're gonna make a simple form!

First, make the main div and align its children to the center using flexbox

<div className="min-h-screen min-w-screen bg-purple-500 flex justify-center items-center">
</div>

Now, we can add input fields and a submit button:

<div className="min-h-screen min-w-screen bg-purple-500 flex justify-center items-center">
  <form className="p-8 bg-white shadow rounded flex flex-col justify-center items-center">
    <input
      type="text"
      className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
      placeholder="Your Name"
    />

    <input
      type="text"
      className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
      placeholder="Your Email"
    />

    <button className="m-1 p-2 bg-green-500 text-white font-medium text-xl grid place-items-center rounded">
      Submit
    </button>
  </form>
</div>;

Now, we are gonna use hooks to get the input values:

First, let's make two variables using the useState hook

  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

Now, we will assign these values to the input fields and update them if the value changes. We can do this using the onChange event.

  <input
    type="text"
    className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
    placeholder="Your Name"
    value={name}
    onChange={(e) => setName(e.target.value)}
  />

  <input
    type="text"
    className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
    placeholder="Your Email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />

So now, you should have a simple form that looks like this:

Now, we will work on the database part, first, we will install supabase-js

npm install @supabase/supabase-js     # for npm
yarn add @supabase/supabase-js     # for yarn

Now, we need to initialize supabase, go to the project dashboard on supabase, and get your keys from there. Then, follow along:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "<your_project_url_here>",
  "<your_public_anon_key_here>"
);

Now, let's make a function to handle form submit.
We are gonna structure the form data in a new variable:

const handleSubmit = async () => {
  const form = {
    name: name,
    email: email,
  };
};

Now, we're going to upload the form data to Supabase Database!
Here's how we're gonna do it:

const handleSubmit = async () => {
  const form = {
    name: name,
    email: email,
  };

  const { data, error } = await supabase
    .from("responses")
    .insert([{ response: form }]);

  error ? console.log(error) : console.log(data);
};

And, That's it!!
Now, you can fill the form and submit it to see the data update in the database!

DEV Community: Anurag

Basics of E2E Testing and Integrating Cypress with Next.js

💡 E2E Testing - The Basics

📃 Benefits of E2E Testing

⚡ E2E testing methods

Horizontal E2E testing

Vertical E2E Testing

❓ How to perform E2E Testing?

⚡ E2E Testing Frameworks

👨‍💻 Integration of Cypress with Next.js for E2E Testing

Next.JS

Cypress

Setting up the Project

Creating your first Cypress integration test

Further steps for Continuous Integration (CI)

How I structure my Next JS Projects

📃 Single Pages

🧩 Breaking down into smaller components

📁 Creating custom files for components

🗃 Making categories for similar components

📖 Making categories for similar pages

🗄 Storing Files, Fonts

🔮 Managing custom hooks, types, functions

About the Author

Introducing Vault3 - Your Safest Decentralized Vault!

❓ What is Vault3?

✏️ Hashnode

🌐 ThirdWeb

😕 The Problem

🔭 Deep Dive into Vault3

✨ The Tech Stack

👀 Understanding the flow of the app

🔒 Authentication

🔑 Generating the private key

💽 Uploading Flow

🔑 Uploading Password

🌆 Uploading Image

📁 Uploading Files

ℹ️ On a sidenote:

👥 Moving from this, Let’s meet the Team:

🔗 External Links

Metamask authentication in NextJS with Third Web

Demo of what we are building today:

Installing a new NextJS app

Clear up the boilerplate

Installing the dependencies

Setting up the Third Web Provider

Making a UI in the index.js file

Building the connect wallet functionality

Displaying user address:

Error handling:

Component Polymorphism in React

Overview - Polymorphic Components

Basic Implementation:

Type checking using Typescript!

Get Started with Supabase Database in NextJS! ⚡

In this blog post, we're gonna Get Started with Supabase Database in NextJS!

Why choose Supabase

What we're building today:

Making a UI in the `index.js` file