DEV Community: ⚡Priyang⚡

Make Gradient with Background

⚡Priyang⚡ — Tue, 07 Feb 2023 17:53:06 +0000

background

as we look at background properties Blog like background-iamge and background-color and others. but we can alot of properties in one line of code for faster and smiplifying styling. you can follow along codepen.

Note the shorthand does not work for background-blend-mode so if we apply any of the background-blend-mode value than the shorthand will became invalid.

  background-color: #333;
  background-image: url("https://source.unsplash.com/RjBXz3rtdLw");
  background-position: center;
  background-size: 50%;
  background-repeat: repeat-y;

there is not much of order as you can see above in which the values to be applied but there are certain rule that needs to followed when using shorthand.

The bg-size can only be applied after bg-postiosn and it has to seprated by '/' character center/50%.

  // shorthand for above
  background: #333 url("https://source.unsplash.com/RjBXz3rtdLw")  center/50% repeat-y;

Both will create same result you can playround in codepen.

Now there is one more rule that if you want shorthand any box values like content-box or any other for bg-origin or bg-clip if only one value is passed to shorthand than both bg-origin and bg-clip will be same.

    background: #333 url("https://source.unsplash.com/RjBXz3rtdLw")  center/50% repeat-y content-box;
        // bg-origin = content-box bg-clip = content-boz
    background: #333 url("https://source.unsplash.com/RjBXz3rtdLw")  center/50% repeat-y content-box padding-box;
        // bg-origin = content-box bg-clip = padding-boz

One thing about shorthand is that if we put any of the bg proprties before and than we define them in shorthand than it will be overwritten or if we apply after shorthand than it will be overwritten.

That's it for shorthand if you want more images just like bg-image you can do that. we can create gradient using bg-image or with shorthand so let's look into.

There are three ways we can create gradients.

Linear Gradients

Two create linear gradient background we need aleast two colors. we can also define degree or direction value to set in which way the gradients of colors to start. let's go to syntax codepen.

    background-image: linear-gradient( #3e22c3, #fdbb2d);

Pretty good looking right in above code the first color is bluis and second is yellowis. we can set colors in any manner as we want like hsl rgb rgba or hex.

what the linear-gradient will do is set the first color blue on top and yellow on bottom and it will fill on the middle with combining both colors. we can set how much value we want to give one color and also the direction in which the gradient should take place.

background-image:linear-gradient(to left, #3e22c3 50%, #fdbb2d 50%);

in above the both color will take 50% and it will start from left to right so the gradient will start from right with blue color and end with yellow. first the blue will take 50% width and than other color will take rest of the size.

since both color will take 50% no space for mixing the colors so you can change the % values in codepen to check how it creates diffrent mixes. try negative values for removing original color but to still create gradient mixes.

linear-gradient(to left,#3e22c3 50%, #fdbb2d 30%); this will not change anything because the blues takes 50% and yellow's values will be ignored unless we have another color.

linear-gradient(to left, #3e22c3 50%, #fdbb2d 50%, #fd2df2); this will create half blue and gradient. since we haven't put last color % it will divide color equally.

The Blue will not gradient with yellow because yellow and blue is 50%. we can put more % values to the color which will ending position and startgin postion for a color.

    background-image: linear-gradient(
    to right,
    #3e22c3 50% 20%,
    #fd2df2 100%
  ); // <- blue will stay solid till 50% than it will start to blend

we can also use degree and Turns for setting gradient colors.

Degrees — a value from 0deg to 360deg, where 0deg = to top, 90deg = to right, etc.
Turns are exactly what they sound like: 360 degree turns. This means that: 0.5turn = 180deg, 0.25turn = 90deg, etc.

it work in clock wise angle if we put positive values to the gradient if we put negative value it will set gradients to anti-clock wise pattern.

  background-image: linear-gradient(90deg, #3e22c3 50% 20%, #fd2df2 100%);

we can alos use Transparency for creating fadding color.

    background-image: linear-gradient(
    180deg,
    #3e22c3 10%,
    rgba(253, 45, 242, 0) 100% 
    ); // alpha 0

Radial Gradients

A radial gradient is defined by a center point, an ending shape, and two or more color-stop points. The space between these colors will gradually blend from one color to another with cirular objects.

  background-image: radial-gradient(#3e22c3, #fdbb2d);

similar like degree and direction in linear-grad we can add value at begging to create diffrent shapes for radial gradients. let's take a look at codepen.

There three type of values we can add before the colors.
First we can set ending-shape which will set the shape of the gradient mix. in above the we haven't defined the ending-shape of the gradient so it create ellipse by default. it can changed to circle.

radial-gradient(circle, #3e22c3, #fdbb2d);

we can add position value which same as bg-position which we covered in last section. since we haven't defined any it default is center.

radial-gradient(circle at 10% 10%, #3e22c3, #fdbb2d);
// without ending-shape
radial-gradient(at 10% 10%, #3e22c3, #fdbb2d);

now the last value is size of the gradient. Taking refrence from MDN Docs

Keyword	Description
closest-side	The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner	The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side	Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center.
farthest-corner	The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.

You should try diffrent values in codepen to check the deffrence it's making. depeding what you chose it will spread the gradient effect or shrink it. by default it is farthest-corner.

That's it there is one more property in to create Conic gradient but i not going to discuss that because i never used it myself and i don't think i have ever saw in any website either but if you want to know more about the conic-gradient you can read this article in MDN Link

you can use bg-image stacking with gradient and create images with gradient on top.

if You want to reach out or have any thoughs on the blog or have problem here are my links
Twitter or linkedin .

Other note i would highly recommad playing around in the codepen and there are two website that will help you to build gradients faster that i want to share with you.

For Simpler Use cssgradient.io.
For bit complex use gradient-generator.

React Pattern - Build Better Component with Compound component

⚡Priyang⚡ — Tue, 27 Dec 2022 13:02:16 +0000

React is a popular JavaScript library for building user interfaces, and one of the key concepts in React is the ability to create reusable components.

Build Better Component with One pattern that can help with building reusable components is the "Compound Component" pattern. i am sure you have heard of this term before and i am going to explain this to you now.

In the Compound Component pattern, a parent component passes data and behaviour down to a group of child components through props. The child components then use this data and behaviour to render themselves, and can also pass data back up to the parent through event handlers.

Think of compound components like the _<select>_ and _<option>_ elements in HTML. Apart they don’t do too much, but together they allow you to create the complete experience. — Kent C. Dodds

we have two ways of creating the component

React.cloneElement
useContext

import { useState } from 'react';

const FormControl = ({ label, children }) => {
  const [value, setValue] = useState('');
  const [touched, setTouched] = useState(false);
  const [valid, setValid] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value.length > 0) {
      setValid(true);
      setValue(event.target.value);
      setErrorMessage('');
    } else {
      setValid(false);
      setErrorMessage('Value is required');
    }
  };

  const handleBlur = () => {
    setTouched(true);
  };

  return (
    <div>
      {label && <Label>{label}</Label>}
      {React.cloneElement(children, {
        value,
        onChange: handleChange,
        onBlur: handleBlur,
      })}
      {touched && !valid && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </div>
  );
};

const Label = ({ children }: React.ComponentPropsWithoutRef<'label'>) => {
  return <label>{children}</label>;
};

const ErrorMessage = ({ children }: React.ComponentPropsWithoutRef<'div'>) => {
  return <div className="error">{children}</div>;
};

const TextInput = ({
  value,
  onChange,
  onBlur,
}: {
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
}) => {
  return <input type="text" value={value} onChange={onChange} onBlur={onBlur} />
}

const Form = () => {
  return (
    <form>
      <FormControl label="Name">
        <TextInput />
      </FormControl>
      <FormControl label="Email">
        <TextInput />
      </FormControl>
      <button type="submit">Submit</button>
    </form>
  );
};

this example, the FormControl component is the parent, and the TextInput component is the child. The FormControl component uses the useState hook to manage its own state values for the input value, touched state, valid state, and error message.

The FormControl component also has separate components for the label and the error message, which allows you to customize the appearance of these elements separately.

The TextInput component receives the value, onChange, and onBlur props from the FormControl component, which allows it to update the form state values and trigger the validation logic when the input value changes or when the input is blurred.

The FormControl component also renders a label and an error message based on the state values. If the input has been touched and is not valid, it will display an error message.

This compound component pattern allows the FormControl component to handle the common logic for all form inputs, such as validation and error handling, while also allowing developers to customize the specific input element with the TextInput component.

Problems

Now it's does the job that we like to do but the problem with this will changing the behavior of our sub-components.

if we like to pass diffrent value to the label we don't have access to that or the error div. one option is that pass the label as React Component or as i will explain in next section in useContext.

    <FormControl label="Name">// <- we don't have access to label 
        <TextInput />
    </FormControl>

if we pass a two component in the FormControl than both will get the all the props

    <FormControl label="Name">
        <TextInput />
        <OtherComponent/> // <- this will also receive the props which can lead to bugs
    </FormControl>

If I pass Wrap around the <TextInput /> than it will not get the onChange or onBlur Function so we need to prop drill or do the same as React.cloneElement to receive props which increases the complexity.

    <FormControl label="Name">
        <Wrapper> // <- this will receive the props we will need prop drill
            <TextInput />
        </Wrapper>
    </FormControl>

You can look into Official React-beta docs to learn about the alternatives to cloneElement - Link

useContext()

import React, { createContext, useState, useContext } from 'react';

// Create a context object
const FormControlContext = createContext<{
   touched: boolean;
   value: string;
   handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   valid: boolean;
   errorMessage: string;
}>({
   touched: false,
   value: '',
   handleBlur: () => {},
   handleChange: () => {},
   valid: false,
   errorMessage: '',
});

interface FormControlProps {
   CustomHandleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   CustomHandleBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   IsInvalid?: boolean;
   children: React.ReactNode;
}

const FormControl = ({
   CustomHandleChange,
   CustomHandleBlur,
   IsInvalid = true,
   children,
}: FormControlProps) => {
   const [value, setValue] = useState('');
   const [touched, setTouched] = useState(false);
   const [valid, setValid] = useState(IsInvalid);
   const [errorMessage, setErrorMessage] = useState('');

   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      if (event.target.value.length > 0) {
         setValid(true);
         setValue(event.target.value);
         setErrorMessage('');
      } else {
         setValid(false);
         setErrorMessage('Value is required');
      }
   };

   const handleBlur = () => {
      setTouched(true);
   };

   return (
      <FormControlContext.Provider
         value={{
            touched,
            value,
            handleBlur: CustomHandleBlur ? CustomHandleBlur : handleBlur,
            handleChange: CustomHandleChange
               ? CustomHandleChange
               : handleChange,
            valid,
            errorMessage,
         }}
      >
         {children}
      </FormControlContext.Provider>
   );
};

const Label = ({ children }: React.ComponentPropsWithoutRef<'label'>) => {
   const { touched } = useContext(FormControlContext);
   return (
      <label
         style={{
            fontWeight: touched ? 'bolder' : 'lighter',
         }}
      >
         {children}
      </label>
   );
};

const ErrorMessage = ({
   CustomError,
   children,
}: React.ComponentPropsWithoutRef<'div'> & { CustomError?: string }) => {
   const { touched, valid, errorMessage } = useContext(FormControlContext);
   if (!touched && valid) {
      return (
         <>
            <div className="error">
               <div className="message">
                  {CustomError ? CustomError : errorMessage}
               </div>
            </div>
            {children}
         </>
      );
   }
   return null;
};

const TextInput = ({ ...props }: React.ComponentPropsWithoutRef<'input'>) => {
   const { handleBlur, handleChange, value } = useContext(FormControlContext);
   return (
      <input
         type="text"
         value={value}
         onChange={handleChange}
         onBlur={handleBlur}
         {...props}
      />
   );
};

const Form = () => {
   return (
      <form>
         <FormControl>
            <Label />
            <TextInput />
            <ErrorMessage />
         </FormControl>
         <FormControl>
            <Label />
            <TextInput />
            <ErrorMessage />
         </FormControl>
         <button type="submit">Submit</button>
      </form>
   );
};

In this example, the FormControl component is the parent, and the child components are the ones that will consume the context. i know it got little bigger than the previus one but we got way more control over our components.

Also we have added validation and custom handlers. The resone we could not have added in the previus because it will lead to bugs as i mention in the problem section.

Explanation -

FormControl will pass the context values and function all the childrens without prop drilling. Label,

The Label component is a simple wrapper around a label element that receives its children as props. It uses the touched state from the FormControl context to style the label differently when the form control has been touched by the user.

The TextInput component is a simple wrapper around an input element that receives all other props as an object. It uses the handleBlur, handleChange, and value states from the FormControl context to manage the value and event handlers for the input element.

The ErrorMessage component is a wrapper around a div element that receives its children as props. It uses the touched, valid, and errorMessage states from the FormControl context to render an error message when the form control has been touched and is currently invalid. It also accepts a CustomError prop that can be used to override the default error message.

Using the useContext() hook will prevent the problem caused by React.cloneElement.

That's it

Hope you enjoy the reading and if you want to have something to correct or feedback or just want to ask for help you can reach out to me on Twitter or linkedin though i personally prefer Twitter.

Explain all the Background Properties

⚡Priyang⚡ — Tue, 27 Dec 2022 07:56:54 +0000

Background Properties

i going to explore and tell you about all the Background Property that we can use to create a good experience for user.

Background

We use background property to as name suggests it change background of the element.
Follow the along with codepen it is a shorthand properties for which we about to explore.

background-color

background-color sets the color of the elements .let's get the basic background-color:red; will set the background to red color. pretty simple right.
but there is limited color strings that are recognized by the browser. so we have some other mehods for which we have some control and variance over colors.

Hex

Hex is short for hexadecimal. the syntax is pretty much same as name strings.
background-color:#123456; or background-color:#123; where 12 is red ,34 is green and 56 is blue values between 00 and ff (same as decimal 0-255).

so the background-color:red; will be background-color:#ff0000;. ff is the full internsity which will result in red background and as you go low it will less the internsity.

it works similar like how light work where #ffffff will result in full white and #000000 will result in full black. all that in between is determained by the rgb.

sometimes you can use three digit hex but only when the value of (RR, GG, and BB) are same.
for exmple #112233 can also be written as #333. also four digit hex will create transparent bg.

let's say if want alpha or opacity to color but not the element so we can add another extra
background-color:#ff0000a3; will create sility less red color background. it also works with three digits background-color:#f00a but background-color:#f00ae will not work.

rgba or rgb

background-color: rgba(0,0,225,0.2); it's works same as hex but the syntax is diffrent and we can not use alphbaes inside rgb or rbga we have to use appropriate decimal ranges from 0-255.
The a stands for apha which is same as opacity in this context. if we dont want alpha we can userrbg(0,0,225).

hsl

background-color: hsl(120, 100%, 50%); , hsl stands for hue, saturation, and lightness (HSL). hsl works bit diffrently than others. the hue value ranges from 0 to 360 where 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color. it adds more grey color to hue color and last lightness is a percentage value. 0% is black, 50% is neither light or dark, 100% is white.

we can add alpha by passing extra value which ranges from 1 to 10 like opacity.
background-color: hsl(120, 100%, 50%,0.5);

Personally i would not recommand hsl unless some design choice is made, i would mostly go with hex values or rgba if alpha is needed. You can open the codepen and playaround.

background-image

it sets one or more background images on an element.
background-image: url('https://source.unsplash.com/random/?dark-nature')

In above example i have used an open api for

fetching images but it can be any type of url can be passed that will fetch a image or we can also user url(../pathToImage).
It will put image with width and height of the element and image will fit from top to bottom and rest of the image will be cut down. as you can see the image is not full image you can look at original image ImageLink . if we put 100vh on the element it will show more content of the image. same goes for width.

we can also add more images on stack. which ever the url is first that will get more presidance and will be on top.

.bg-image{
  color: black;
  background-image: url('https://www.freeiconspng.com/uploads/spongebob-cartoon-png-32.png'),
 url('https://source.unsplash.com/RjBXz3rtdLw');
 height: 100vh; // <- show more content
}

First Url is a art of spounce bob and seoncd is naturel wallpaper as we mention above the both image does not fit the container due to it's sizes.

Note : I want to mention that we can also put gradients of color using this proprty but later on that.

Now how about we set there images correctly show it's fully visable.

background-position

A position defines an x/y coordinateto place an item relative to the edges of an element's box, which means it will take that position size of the element. let's go to codepen and code.
for now i have remove spounce bob url from stack for better explaing.

It can be defined using one to five values. One of the keyword values top, left, bottom, right center or % or any other units value.

As you can see above i have spltited origin photo into nine pieaces. now let's go to syntax.

  background-position-x: center;
  background-position-y: bottom;
  background-position: center bottom; // shorthand

background-position-y:bottom; as name suggrest y-axis to bottom of image and x sets x-axis as for the background-position: center bottom; it shorthand for both where based on the value provided the axis will be decied.

    background-position: center bottom;
    background-position: bottom center; // <- same

The default values for x is left and for y is top.

you can compare result with other image and try out diffrent values and compare the changes.
now it may not be same in your screen as shown but the point i want to make is the positions will cut image based on it provided values and width of the container.

now if we put arbitray number with units it will shift that much value in respactive axis and than display the image.

  background-position-y: center;  
  background-position-x: 20%;

here it is center-left coner of the image with 20% shift to the image. if i put 80% than it will produce Center-right with 20% offset. you can try diffrent values in codepen

Note : top top and left right are not valid means same proprtie or opsite axis property does not work.
background-position : center will center-center the image and background-position : right; will center-right. same goes for others.

  background-position : right; // <- center-right
  background-position : left; // <- left-right

we can pass one more value to background-position proprty. Two values are keyword values, and the third is the offset for the preceding value.

background-position: center bottom 20px;

the image will set to center bottom and offset to 20px to bottom with new repeat image. Why repeat image we will talk that is next proproty.

  background-position: center bottom 20px;
  background-position: bottom 20px right; // <- same as above

  // This will not work because form center there will be not possible to offset
  background-position: center center 20px;

But there is one value we can add

      background-position: top 15px right 20px;

this will cause the image to have top side with 15px offset and righ side 20px offset.

about percentage how the exactlty they are mesured i would recommed you to read this MDN articale .

background-repeat

as name suggrests it sets how background images are repeated. by default as we saw above the proprty is set to repeat but we can stop that by no-repeat let look at codepen

  color:blue;
  background-image: url("https://source.unsplash.com/RjBXz3rtdLw");
  background-size:contain;
  background-repeat: repeat;

if we remove the background-repeat it will give by default on repeat. which will repeat on both x and y but it will not repeat on x in this case because the width of the image will fill the container. adn we have put background-size:contain; but later on that.

![[Screenshot 2022-09-02 at 9.43.12 AM.png]]

We have repeat-x of only x repeat repeat-y for only repeat y. there is two of more values.

space which will make the image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. in this case background-position will be igored if it images need to cliped.

With round the images will fit the size with out cutting. by reduceing the size or reducing the number of repeated images.

background-size

it will set as name sugggets size of the image. follow along with codepen .

  height: 100vh;
  background-size : 50%;
  //                X will only apply
  background-size : 50% 50%;
  //                X    Y both will apply

background-size: contain; as we saw background-repeat in section will spread image to it's width and the height will be auto calculated by width and than image will be repeated based on the background-repeat.

There is one more property which you properly have used or saw in background shorthands.
it's background-size: cover; which will pit the image fully on the element container.

Note: With cover value background-repeat will work because the image will take all the space of the container.

Now We have go through alot but stay with me we are about create amazing Headings. there are just few proprties are remaining.

background-clip

Looks goods right well let's look at code codepen . Now note that when you open the codepen it you can see that i have set two properties

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

The resone for -webkit is we still need to add -webkit to use the proprty in chromium
browsers.

background-clip: text; will clip the background and expcet text on the container and when we make color: transparent; will look like Image color texts. There are three more proprties border-box | padding-box | content-box.

border-box is the default which will not do any change. border-box and content-box is same as box sizing as we dicuss in [Box-Sizing Blog] but the image will be cut accordingly. padding-box will add on padding of the container and than cut the rest of the image.

background-origin

background-origin defines how the background should start where after the border , padding or the content of the element. it's works similar way background-clip but rather than cutting the image it defines where the image should start from.

    background-origin : border-box;
    background-origin : content-box;
    background-origin : padding-box;

background-attachment

sets whether a background image's position is fixed or scrollable with in container. let's go to code codepen.

Video to Link - YTVideo

I cant Add the Video in Markdown sadly so i had to use link😅.
It's will fix the image to position so it will give you like parallax effect.

Note fix will not work with background-clip: text; and the container will not be scrollable

scroll

The background is fixed relative to the element itself and does not scroll with its contents.

local

The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents.

background-blend-mode

now let's come to last proprty but quite fun i would say😎. it sets how an element's background images should blend with each other and with the element's background color.
let's look at open the codepen .

    background-color:red;
    background-blend-mode: difference;
    background-blend-mode: difference, luminosity;

another use case would be put background-color with dark color and background-image
put background-blend-mode: difference; this can replace :after selector and creating dark shadow on image.

    background-color: #333;
    background-blend-mode: difference;
    background-image: url("https://source.unsplash.com/RjBXz3rtdLw");

Looks good right your can try diffrent values to see changes. Try with multiple images.

Now there only one thing which is left to do which is shorthand proprty called background which let you difine alot of above property into one line of code and let's us use gradient function for creating gridient background colors and mix with other values like background-blend-mode.

I am going to explain shorthand and gradient function in next blog, this one was quite a big one. i initally thought that i might go in 1 blog but i think it will be better in splits.

Hope you enjoy the reading and if you want to have something to correct or feedback or just want to ask for help you can reach out to me on Twitter or linkedin though i personally prefer Twitter.

Mock API Call at FrontEnd

⚡Priyang⚡ — Fri, 11 Mar 2022 10:12:44 +0000

Integration Testing

So when testing a component or page have you ever thought of if i can just check how would it behave if the data was coming from API.

Question: Why should you mock api
ans: you want to test the behaviour of the component and hardcoding data does not provide better test case.

Also backend and frontend can be develop in parallel and when any behaviour from the backend changes we can first test those changes if it breaks⛔️ anything.

Well worry not because if you are using Axios there is a pretty good library that can make the process smooth as butter on bread.
It is called axios-mock-adapter🔥.

For this blog i will be using React with jest and react-testing-library but we can use this library in any framework or just plain old vanilla JS.

Let's take a TDD approach and first make a test case for component where it fetch data from backend.

import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import data from './data';

//Component
import Products from "../Products";

const mock = new MockAdapter(axios);

// we need to reset after every test.
afterEach(() => {
  mock.reset();
});

// I keep all the mock data into separate file so 
// If there is any change we can just change in one file also 
// better for CRUD.

const MockData = data.Product

it("Mock Fetch Product Details", async () => {
  // mock fetch product details api
  // mock get  mock.onGet(URL) the URL should be exactly the same as the Axios request
  // we can reply with a positive response or a negative response using header Code

  mock.onGet("/api/products").reply(200, MockData);

  render(<Products />);

// wait for loading to complete
  waitForElementToBeRemoved(() => screen.queryAllByTestId("Loading"));

  expect(
    screen.getByText(MockData.description)
  ).toBeInTheDocument();

});

And that's it that was all for mocking api.

Now let's create component

import axios from "axios";
import { useEffect, useState } from "react";

const Products = () => {
  const [products, setProducts] = useState<any>(null);
  const [loading, setLoading] = useState<any>(true);
  const [error, setError] = useState<any>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("/api/products");
        setProducts(response.data);
        setError(null);
      } catch (error) {
        setError(error);
        setProducts(null);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <div data-testid='loading'>Loading</div>;
  if (error) return <div>{error.message} </div>;
  if (!products) return null;
  return (
    <div>
      {products.map((product: any) => (
        <div key={product._id}>
          <h2>{product.name}</h2>
          <img src={product.image} alt={product.name} />
          <p>{product.description}</p>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
};
export default Products;

In next Test we will test fail response with 500 status code.
Note: we can check any response we want

it("Mock Failed Response", async () => {
  const ErrorResponse = "Error Message"
  // we just need to change status code
  mock.onGet("/api/products").reply(500, ErrorResponse);

  render(<SingleProduct />);

  expect(
    screen.getByText(ErrorResponse)
  ).toBeInTheDocument();

});

If we want to test Post, PUT, DELETE we just need to change one line of code
mock.onPost
mock.onPut
mock.onDelete
or we can just put mock.any this mock any method request.

That was all but you the library can do much more than just this you also can cain api calls and create network errors.

mock.onGet("/api/products/product").networkError();

mock.onGet("/api/products/product").networkErrorOnce();

Link to Repo

Why should you mock the test

frontend development can start with parallel to the backend.
It's more better than just hardcoding the data into frontend for better reliability.
The mock API can easily be replaced with the Real API once it’s ready and if any change in data happens we can test if it breaks anything.
Error Handling — e.g., Timeouts, delays, validations, etc.

If you want to know more about testing you components i would recommend reading this article by kent c todds.

Blog Link

And that was all thanks for reading till now let me know how did you feel about the article, this is my first article or blog i would love to know you opinion.