zebpay-ui 0.0.41 → 0.0.43

package/dist/icons/icons.ts

@@ -17,6 +17,7 @@ export type IconsId =
   | "asterik"
   | "balance-ltv"
   | "bank"
+  | "basket"
   | "blog"
   | "bonus"
   | "buy-crypto"
@@ -107,6 +108,7 @@ export type IconsId =
   | "max-supply"
   | "menu"
   | "more-options"
+  | "needle"
   | "negative"
   | "network"
   | "next"
@@ -219,6 +221,7 @@ export type IconsKey =
   | "Asterik"
   | "BalanceLtv"
   | "Bank"
+  | "Basket"
   | "Blog"
   | "Bonus"
   | "BuyCrypto"
@@ -309,6 +312,7 @@ export type IconsKey =
   | "MaxSupply"
   | "Menu"
   | "MoreOptions"
+  | "Needle"
   | "Negative"
   | "Network"
   | "Next"
@@ -421,6 +425,7 @@ export enum Icons {
   Asterik = "asterik",
   BalanceLtv = "balance-ltv",
   Bank = "bank",
+  Basket = "basket",
   Blog = "blog",
   Bonus = "bonus",
   BuyCrypto = "buy-crypto",
@@ -511,6 +516,7 @@ export enum Icons {
   MaxSupply = "max-supply",
   Menu = "menu",
   MoreOptions = "more-options",
+  Needle = "needle",
   Negative = "negative",
   Network = "network",
   Next = "next",
@@ -624,186 +630,188 @@ export const ICONS_CODEPOINTS: { [key in Icons]: string } = {
   [Icons.Asterik]: "61712",
   [Icons.BalanceLtv]: "61713",
   [Icons.Bank]: "61714",
-  [Icons.Blog]: "61715",
-  [Icons.Bonus]: "61716",
-  [Icons.BuyCrypto]: "61717",
-  [Icons.Calendar]: "61718",
-  [Icons.Camera]: "61719",
-  [Icons.Cancelled]: "61720",
-  [Icons.CandleChart]: "61721",
-  [Icons.Chart]: "61722",
-  [Icons.CheckboxAll]: "61723",
-  [Icons.Cheque]: "61724",
-  [Icons.CircleCross]: "61725",
-  [Icons.CirculationSupply]: "61726",
-  [Icons.City]: "61727",
-  [Icons.CoinStack]: "61728",
-  [Icons.Coins]: "61729",
-  [Icons.Compare]: "61730",
-  [Icons.Completed]: "61731",
-  [Icons.Contract]: "61732",
-  [Icons.Copy]: "61733",
-  [Icons.Coupon]: "61734",
-  [Icons.Cross]: "61735",
-  [Icons.CryptoWallet]: "61736",
-  [Icons.Deactivate]: "61737",
-  [Icons.DepositSimple]: "61738",
-  [Icons.Deposit]: "61739",
-  [Icons.DepthChart]: "61740",
-  [Icons.District]: "61741",
-  [Icons.Dob]: "61742",
-  [Icons.Download]: "61743",
-  [Icons.Downwards]: "61744",
-  [Icons.DrivingLicence]: "61745",
-  [Icons.Earned]: "61746",
-  [Icons.Edit]: "61747",
-  [Icons.Email]: "61748",
-  [Icons.EmiAmount]: "61749",
-  [Icons.EmiDuedate]: "61750",
-  [Icons.Error]: "61751",
-  [Icons.Exclamation]: "61752",
-  [Icons.Expand]: "61753",
-  [Icons.Expiry]: "61754",
-  [Icons.ExternalLink]: "61755",
-  [Icons.Facelock]: "61756",
-  [Icons.Fees]: "61757",
-  [Icons.FiatDeposit]: "61758",
-  [Icons.FiatWithdraw]: "61759",
-  [Icons.Filter]: "61760",
-  [Icons.Fingerprint]: "61761",
-  [Icons.Form]: "61762",
-  [Icons.Gallery]: "61763",
-  [Icons.Globe]: "61764",
-  [Icons.GreaterThanEqualTo]: "61765",
-  [Icons.Hamburger]: "61766",
-  [Icons.Help]: "61767",
-  [Icons.Hide]: "61768",
-  [Icons.History]: "61769",
-  [Icons.Home]: "61770",
-  [Icons.Ifsc]: "61771",
-  [Icons.IncomeSource]: "61772",
-  [Icons.Indicators]: "61773",
-  [Icons.Info]: "61774",
-  [Icons.InitialLtv]: "61775",
-  [Icons.InstantBuySell]: "61776",
-  [Icons.InterestAmount]: "61777",
-  [Icons.InterestRate]: "61778",
-  [Icons.Kyc_2]: "61779",
-  [Icons.Kyc]: "61780",
-  [Icons.Landscape]: "61781",
-  [Icons.Lend]: "61782",
-  [Icons.Lightning]: "61783",
-  [Icons.Lightning2]: "61784",
-  [Icons.Link]: "61785",
-  [Icons.LiquidationCost]: "61786",
-  [Icons.LiquidationId]: "61787",
-  [Icons.LiquidationPrice]: "61788",
-  [Icons.Liquidation]: "61789",
-  [Icons.List]: "61790",
-  [Icons.LoanAmount]: "61791",
-  [Icons.LoanDetails]: "61792",
-  [Icons.LoanRepayment]: "61793",
-  [Icons.LoanTerm]: "61794",
-  [Icons.Location]: "61795",
-  [Icons.Lock]: "61796",
-  [Icons.Logout]: "61797",
-  [Icons.LtvRatio]: "61798",
-  [Icons.Mail]: "61799",
-  [Icons.Map]: "61800",
-  [Icons.MarginCall]: "61801",
-  [Icons.MaxSupply]: "61802",
-  [Icons.Menu]: "61803",
-  [Icons.MoreOptions]: "61804",
-  [Icons.Negative]: "61805",
-  [Icons.Network]: "61806",
-  [Icons.Next]: "61807",
-  [Icons.Nominee]: "61808",
-  [Icons.Note]: "61809",
-  [Icons.Notification]: "61810",
-  [Icons.Occupation]: "61811",
-  [Icons.Ongoing]: "61812",
-  [Icons.Order_2]: "61813",
-  [Icons.Order]: "61814",
-  [Icons.OrdersComplete]: "61815",
-  [Icons.PairSelector]: "61816",
-  [Icons.Pair]: "61817",
-  [Icons.Pan]: "61818",
-  [Icons.Passbook]: "61819",
-  [Icons.Passport]: "61820",
-  [Icons.PayEmi]: "61821",
-  [Icons.PayLumpsum]: "61822",
-  [Icons.PayOffLoan_2]: "61823",
-  [Icons.PayOffLoan]: "61824",
-  [Icons.PenaltyCharges]: "61825",
-  [Icons.Pending]: "61826",
-  [Icons.Percentage]: "61827",
-  [Icons.Phone]: "61828",
-  [Icons.Portrait]: "61829",
-  [Icons.Positive]: "61830",
-  [Icons.PrepayPrincipal]: "61831",
-  [Icons.Previous]: "61832",
-  [Icons.ProfileBorder]: "61833",
-  [Icons.Profile]: "61834",
-  [Icons.QrCode]: "61835",
-  [Icons.Quicktrade]: "61836",
-  [Icons.Rank]: "61837",
-  [Icons.Ream]: "61838",
-  [Icons.ReceiveLightning]: "61839",
-  [Icons.Receive]: "61840",
-  [Icons.Redo]: "61841",
-  [Icons.RepaymentSchedule]: "61842",
-  [Icons.Reports]: "61843",
-  [Icons.Reset]: "61844",
-  [Icons.Save]: "61845",
-  [Icons.Scan]: "61846",
-  [Icons.Search]: "61847",
-  [Icons.Security]: "61848",
-  [Icons.Selfie]: "61849",
-  [Icons.SellCrypto]: "61850",
-  [Icons.SendEmail]: "61851",
-  [Icons.SendLightning]: "61852",
-  [Icons.Send]: "61853",
-  [Icons.Separator]: "61854",
-  [Icons.Settings]: "61855",
-  [Icons.Share]: "61856",
-  [Icons.Shield]: "61857",
-  [Icons.Show]: "61858",
-  [Icons.Side_2]: "61859",
-  [Icons.Side]: "61860",
-  [Icons.Sip]: "61861",
-  [Icons.Sms]: "61862",
-  [Icons.SorterFilled]: "61863",
-  [Icons.Sorter]: "61864",
-  [Icons.StarFilled]: "61865",
-  [Icons.Star]: "61866",
-  [Icons.Statement]: "61867",
-  [Icons.Stop]: "61868",
-  [Icons.StreetAddress]: "61869",
-  [Icons.Subtract]: "61870",
-  [Icons.Success]: "61871",
-  [Icons.Support]: "61872",
-  [Icons.Taxnode]: "61873",
-  [Icons.Team]: "61874",
-  [Icons.Templates]: "61875",
-  [Icons.Term]: "61876",
-  [Icons.Tick]: "61877",
-  [Icons.Time]: "61878",
-  [Icons.TotalPayableLumpsum]: "61879",
-  [Icons.Trade_2]: "61880",
-  [Icons.Trash]: "61881",
-  [Icons.Trigger]: "61882",
-  [Icons.Trophy]: "61883",
-  [Icons.Unarchive]: "61884",
-  [Icons.Unlock]: "61885",
-  [Icons.UpiLandscape]: "61886",
-  [Icons.Upi]: "61887",
-  [Icons.Upload]: "61888",
-  [Icons.Upwards]: "61889",
-  [Icons.VotingCard]: "61890",
-  [Icons.Wallet]: "61891",
-  [Icons.WayArrow]: "61892",
-  [Icons.Whitelisted]: "61893",
-  [Icons.WithdrawSimple]: "61894",
-  [Icons.Xpress]: "61895",
-  [Icons.ZipCode]: "61896",
+  [Icons.Basket]: "61715",
+  [Icons.Blog]: "61716",
+  [Icons.Bonus]: "61717",
+  [Icons.BuyCrypto]: "61718",
+  [Icons.Calendar]: "61719",
+  [Icons.Camera]: "61720",
+  [Icons.Cancelled]: "61721",
+  [Icons.CandleChart]: "61722",
+  [Icons.Chart]: "61723",
+  [Icons.CheckboxAll]: "61724",
+  [Icons.Cheque]: "61725",
+  [Icons.CircleCross]: "61726",
+  [Icons.CirculationSupply]: "61727",
+  [Icons.City]: "61728",
+  [Icons.CoinStack]: "61729",
+  [Icons.Coins]: "61730",
+  [Icons.Compare]: "61731",
+  [Icons.Completed]: "61732",
+  [Icons.Contract]: "61733",
+  [Icons.Copy]: "61734",
+  [Icons.Coupon]: "61735",
+  [Icons.Cross]: "61736",
+  [Icons.CryptoWallet]: "61737",
+  [Icons.Deactivate]: "61738",
+  [Icons.DepositSimple]: "61739",
+  [Icons.Deposit]: "61740",
+  [Icons.DepthChart]: "61741",
+  [Icons.District]: "61742",
+  [Icons.Dob]: "61743",
+  [Icons.Download]: "61744",
+  [Icons.Downwards]: "61745",
+  [Icons.DrivingLicence]: "61746",
+  [Icons.Earned]: "61747",
+  [Icons.Edit]: "61748",
+  [Icons.Email]: "61749",
+  [Icons.EmiAmount]: "61750",
+  [Icons.EmiDuedate]: "61751",
+  [Icons.Error]: "61752",
+  [Icons.Exclamation]: "61753",
+  [Icons.Expand]: "61754",
+  [Icons.Expiry]: "61755",
+  [Icons.ExternalLink]: "61756",
+  [Icons.Facelock]: "61757",
+  [Icons.Fees]: "61758",
+  [Icons.FiatDeposit]: "61759",
+  [Icons.FiatWithdraw]: "61760",
+  [Icons.Filter]: "61761",
+  [Icons.Fingerprint]: "61762",
+  [Icons.Form]: "61763",
+  [Icons.Gallery]: "61764",
+  [Icons.Globe]: "61765",
+  [Icons.GreaterThanEqualTo]: "61766",
+  [Icons.Hamburger]: "61767",
+  [Icons.Help]: "61768",
+  [Icons.Hide]: "61769",
+  [Icons.History]: "61770",
+  [Icons.Home]: "61771",
+  [Icons.Ifsc]: "61772",
+  [Icons.IncomeSource]: "61773",
+  [Icons.Indicators]: "61774",
+  [Icons.Info]: "61775",
+  [Icons.InitialLtv]: "61776",
+  [Icons.InstantBuySell]: "61777",
+  [Icons.InterestAmount]: "61778",
+  [Icons.InterestRate]: "61779",
+  [Icons.Kyc_2]: "61780",
+  [Icons.Kyc]: "61781",
+  [Icons.Landscape]: "61782",
+  [Icons.Lend]: "61783",
+  [Icons.Lightning]: "61784",
+  [Icons.Lightning2]: "61785",
+  [Icons.Link]: "61786",
+  [Icons.LiquidationCost]: "61787",
+  [Icons.LiquidationId]: "61788",
+  [Icons.LiquidationPrice]: "61789",
+  [Icons.Liquidation]: "61790",
+  [Icons.List]: "61791",
+  [Icons.LoanAmount]: "61792",
+  [Icons.LoanDetails]: "61793",
+  [Icons.LoanRepayment]: "61794",
+  [Icons.LoanTerm]: "61795",
+  [Icons.Location]: "61796",
+  [Icons.Lock]: "61797",
+  [Icons.Logout]: "61798",
+  [Icons.LtvRatio]: "61799",
+  [Icons.Mail]: "61800",
+  [Icons.Map]: "61801",
+  [Icons.MarginCall]: "61802",
+  [Icons.MaxSupply]: "61803",
+  [Icons.Menu]: "61804",
+  [Icons.MoreOptions]: "61805",
+  [Icons.Needle]: "61806",
+  [Icons.Negative]: "61807",
+  [Icons.Network]: "61808",
+  [Icons.Next]: "61809",
+  [Icons.Nominee]: "61810",
+  [Icons.Note]: "61811",
+  [Icons.Notification]: "61812",
+  [Icons.Occupation]: "61813",
+  [Icons.Ongoing]: "61814",
+  [Icons.Order_2]: "61815",
+  [Icons.Order]: "61816",
+  [Icons.OrdersComplete]: "61817",
+  [Icons.PairSelector]: "61818",
+  [Icons.Pair]: "61819",
+  [Icons.Pan]: "61820",
+  [Icons.Passbook]: "61821",
+  [Icons.Passport]: "61822",
+  [Icons.PayEmi]: "61823",
+  [Icons.PayLumpsum]: "61824",
+  [Icons.PayOffLoan_2]: "61825",
+  [Icons.PayOffLoan]: "61826",
+  [Icons.PenaltyCharges]: "61827",
+  [Icons.Pending]: "61828",
+  [Icons.Percentage]: "61829",
+  [Icons.Phone]: "61830",
+  [Icons.Portrait]: "61831",
+  [Icons.Positive]: "61832",
+  [Icons.PrepayPrincipal]: "61833",
+  [Icons.Previous]: "61834",
+  [Icons.ProfileBorder]: "61835",
+  [Icons.Profile]: "61836",
+  [Icons.QrCode]: "61837",
+  [Icons.Quicktrade]: "61838",
+  [Icons.Rank]: "61839",
+  [Icons.Ream]: "61840",
+  [Icons.ReceiveLightning]: "61841",
+  [Icons.Receive]: "61842",
+  [Icons.Redo]: "61843",
+  [Icons.RepaymentSchedule]: "61844",
+  [Icons.Reports]: "61845",
+  [Icons.Reset]: "61846",
+  [Icons.Save]: "61847",
+  [Icons.Scan]: "61848",
+  [Icons.Search]: "61849",
+  [Icons.Security]: "61850",
+  [Icons.Selfie]: "61851",
+  [Icons.SellCrypto]: "61852",
+  [Icons.SendEmail]: "61853",
+  [Icons.SendLightning]: "61854",
+  [Icons.Send]: "61855",
+  [Icons.Separator]: "61856",
+  [Icons.Settings]: "61857",
+  [Icons.Share]: "61858",
+  [Icons.Shield]: "61859",
+  [Icons.Show]: "61860",
+  [Icons.Side_2]: "61861",
+  [Icons.Side]: "61862",
+  [Icons.Sip]: "61863",
+  [Icons.Sms]: "61864",
+  [Icons.SorterFilled]: "61865",
+  [Icons.Sorter]: "61866",
+  [Icons.StarFilled]: "61867",
+  [Icons.Star]: "61868",
+  [Icons.Statement]: "61869",
+  [Icons.Stop]: "61870",
+  [Icons.StreetAddress]: "61871",
+  [Icons.Subtract]: "61872",
+  [Icons.Success]: "61873",
+  [Icons.Support]: "61874",
+  [Icons.Taxnode]: "61875",
+  [Icons.Team]: "61876",
+  [Icons.Templates]: "61877",
+  [Icons.Term]: "61878",
+  [Icons.Tick]: "61879",
+  [Icons.Time]: "61880",
+  [Icons.TotalPayableLumpsum]: "61881",
+  [Icons.Trade_2]: "61882",
+  [Icons.Trash]: "61883",
+  [Icons.Trigger]: "61884",
+  [Icons.Trophy]: "61885",
+  [Icons.Unarchive]: "61886",
+  [Icons.Unlock]: "61887",
+  [Icons.UpiLandscape]: "61888",
+  [Icons.Upi]: "61889",
+  [Icons.Upload]: "61890",
+  [Icons.Upwards]: "61891",
+  [Icons.VotingCard]: "61892",
+  [Icons.Wallet]: "61893",
+  [Icons.WayArrow]: "61894",
+  [Icons.Whitelisted]: "61895",
+  [Icons.WithdrawSimple]: "61896",
+  [Icons.Xpress]: "61897",
+  [Icons.ZipCode]: "61898",
 };

package/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  roots: ["<rootDir>"],
+  testMatch: [
+    "**/__tests__/**/*.+(ts|tsx|js)",
+    "**/?(*.)+(spec|test).+(ts|tsx|js)",
+  ],
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zebpay-ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "A lightweight component and utilities library Design System created using React",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -17,17 +17,21 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "format": "prettier --write .",
-    "lint": "eslint . --fix",
+    "lint": "eslint src --fix && eslint stories --fix",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
     "clear:output": "rimraf dist",
     "build:icons": "mkdirp dist/icons && fantasticon svgs -o dist/icons",
     "build": "rollup -c",
-    "watch": "rollup -c rollup.config.js -w"
+    "watch": "rollup -c rollup.config.js -w",
+    "test": "jest",
+    "coverage": "jest --coverage"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@emotion/babel-plugin": "^11.9.2",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -38,28 +42,39 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.0",
     "@types/react": "^17.0.39",
     "@types/react-calendar": "^3.5.2",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
     "autoprefixer": "^10.4.8",
+    "babel-jest": "^29.2.2",
     "babel-loader": "^8.2.3",
     "cssnano": "^5.1.12",
-    "eslint": "^8.14.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^27.1.4",
     "eslint-plugin-prettier": "^4.0.0",
     "fantasticon": "^1.2.3",
     "husky": "^7.0.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "jest-extended": "^3.1.0",
     "lint-staged": "^12.4.1",
     "mkdirp": "^1.0.4",
     "postcss": "^8.4.16",
     "prettier": "^2.6.2",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
@@ -70,9 +85,9 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@popperjs/core": "^2.11.6",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-calendar": "^3.7.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hot-toast": "^2.2.0"
   }
 }

package/tests/Accordion.test.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import Accordion from "../src/components/Accordion";
+import { render, fireEvent, cleanup, screen } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  title: "Testing",
+  isOpen: true,
+};
+
+describe("Accordion Test", () => {
+  it("is rendered correctly", () => {
+    render(
+      <Accordion onToggle={() => {}} {...defaultProps}>
+        Accordion content
+      </Accordion>
+    );
+    expect(
+      <Accordion onToggle={() => {}} {...defaultProps}>
+        Accordion content
+      </Accordion>
+    ).toMatchSnapshot();
+  });
+
+  test("is clicked", () => {
+    const handleClick = jest.fn();
+    render(
+      <Accordion isOpen={true} onToggle={handleClick} title={"Testing"}>
+        <p>AB</p>
+      </Accordion>
+    );
+    const divClick = screen.getByTestId("accordion");
+    fireEvent.click(divClick);
+
+    expect(screen.queryByText("AB")).toBeInTheDocument();
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/Avatar.test.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import Avatar from "../src/components/Avatar";
+import { render, fireEvent, cleanup, screen } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  src: "abc",
+  alt: "abc",
+  id: 1,
+};
+
+describe("Avatar Test", () => {
+  it("is rendered correctly", () => {
+    render(<Avatar {...defaultProps} spacing="medium" />);
+    expect(<Avatar {...defaultProps} spacing="medium" />).toMatchSnapshot();
+  });
+
+  test("is clicked", () => {
+    const handleClick = jest.fn();
+    render(<Avatar {...defaultProps} spacing="medium" onClick={handleClick} />);
+    const divClick = screen.getByTestId("avatar");
+
+    fireEvent.click(divClick);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("custom Child", () => {
+    render(
+      <Avatar {...defaultProps} spacing="medium">
+        W
+      </Avatar>
+    );
+
+    expect(screen.queryByText("W")).toBeInTheDocument();
+  });
+  test("loading state", () => {
+    render(
+      <Avatar {...defaultProps} spacing="medium" loading={true}>
+        W
+      </Avatar>
+    );
+
+    expect(screen.queryByText("W")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("avatar")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("shimmer")).toBeInTheDocument();
+  });
+
+  test("size small change", () => {
+    render(
+      <Avatar {...defaultProps} spacing="medium" size="small" loading={true}>
+        W
+      </Avatar>
+    );
+    expect(screen.getByTestId("shimmer")).toHaveStyle("width:24px");
+    expect(screen.getByTestId("shimmer")).toHaveStyle("height:24px");
+  });
+  test("size medium change", () => {
+    render(
+      <Avatar {...defaultProps} spacing="medium" size="medium" loading={true}>
+        W
+      </Avatar>
+    );
+    expect(screen.getByTestId("shimmer")).toHaveStyle("width:28px");
+    expect(screen.getByTestId("shimmer")).toHaveStyle("height:28px");
+  });
+  test("size large change", () => {
+    render(
+      <Avatar {...defaultProps} spacing="medium" size="large" loading={true}>
+        W
+      </Avatar>
+    );
+    expect(screen.getByTestId("shimmer")).toHaveStyle("width:32px");
+    expect(screen.getByTestId("shimmer")).toHaveStyle("height:32px");
+  });
+});