zebpay-ui 0.0.43 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zebpay-ui",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "A lightweight component and utilities library Design System created using React",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/tests/Accordion.test.tsx

@@ -1,40 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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");
-  });
-});

package/tests/Button.test.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import Button from "../src/components/Button";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  onClick: jest.fn(),
-};
-
-describe("Button Test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Button type="link" {...defaultProps}>
-        Click Me!
-      </Button>
-    );
-    expect(
-      <Button type="link" {...defaultProps}>
-        Click Me!
-      </Button>
-    ).toMatchSnapshot();
-  });
-  test("is clicked", () => {
-    const handleClick = jest.fn();
-    render(
-      <Button type="link" onClick={handleClick}>
-        Click Me!
-      </Button>
-    );
-    const button = screen.getByTestId("button");
-    fireEvent.click(button);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Input.test.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import Input from "../src/components/Input";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  label: "Testing Input",
-  placeholder: "Placeholder",
-  value: "Default",
-  onChange: () => {},
-};
-
-describe("Input Test", () => {
-  //   it("is rendered correctly", () => {
-  //     render(<Input {...defaultProps} />);
-  //     expect(<Input {...defaultProps} />).toMatchSnapshot();
-  //   });
-
-  test("is clicked", () => {
-    const handleChange = jest.fn();
-
-    render(<Input {...defaultProps} />);
-    const input = screen.getByTestId("input");
-
-    // expect(screen.getByText("Placeholder")).toBeInTheDocument();
-
-    fireEvent.change(screen.getByPlaceholderText("Placeholder"), {
-      target: { value: "updated" },
-    });
-
-    // expect(input).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Placeholder")).toHaveValue("Default");
-
-    // fireEvent.click(input);
-    // expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/PinInput.test.tsx

@@ -1,89 +0,0 @@
-import * as React from "react";
-import PinInput from "../src/components/PinInput";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  length: 6,
-  label: "PinTest",
-  values: ["1", "1", "1", "1", "1", "1"],
-};
-
-describe("PinInput", () => {
-  it("is rendered correctly", () => {
-    render(<PinInput {...defaultProps} />);
-    expect(<PinInput {...defaultProps} />).toMatchSnapshot();
-  });
-
-  test("Input test", () => {
-    render(<PinInput {...defaultProps} />);
-
-    expect(screen.getAllByDisplayValue("1")).toHaveLength(6);
-
-    expect(screen.getByText("PinTest")).not.toHaveStyle("color:#EA6161");
-    expect(screen.getAllByDisplayValue("1")[0]).not.toHaveStyle(
-      "border:1px solid #EA6161"
-    );
-
-    const inputfocus = screen.getByTestId("pinInput0");
-    expect(inputfocus).not.toHaveFocus();
-    expect(screen.queryByTestId("pininput-label")).toBeInTheDocument();
-  });
-
-  test(" Masking test", () => {
-    render(<PinInput mask={true} {...defaultProps} />);
-
-    expect(screen.getAllByDisplayValue("*")).toHaveLength(6);
-    expect(screen.queryAllByDisplayValue("1")).not.toHaveLength(6);
-  });
-
-  test(" AutoFocus test", () => {
-    render(<PinInput {...defaultProps} autoFocus={true} />);
-    const inputfocus = screen.getByTestId("pinInput0");
-    expect(inputfocus).toHaveFocus();
-  });
-
-  test("Invalid Test", () => {
-    render(<PinInput {...defaultProps} invalid={true} />);
-
-    expect(screen.getByText("PinTest")).toHaveStyle("color:#EA6161");
-
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      expect(inputsAll[i]).toHaveStyle("border:1px solid #EA6161");
-    }
-  });
-
-  test("disabled test", () => {
-    render(<PinInput {...defaultProps} disabled={true} />);
-
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      expect(inputsAll[i]).toBeDisabled();
-      expect(inputsAll[i]).toHaveStyle("background: transparent");
-      expect(inputsAll[i]).toHaveStyle(
-        " border:1px solid rgba(192, 192, 238, 0.2)"
-      );
-      expect(inputsAll[i]).toHaveStyle("cursor:not-allowed");
-    }
-  });
-  test("No label test", () => {
-    render(<PinInput length={6} values={["1", "1", "1", "1", "1", "1"]} />);
-
-    expect(screen.queryByTestId("pininput-label")).toBeNull();
-  });
-
-  test("On change test", () => {
-    const handleChange = jest.fn();
-    render(
-      <PinInput {...defaultProps} disabled={true} onChange={handleChange} />
-    );
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      fireEvent.change(inputsAll[i], { target: { value: "2" } });
-    }
-
-    expect(handleChange).toHaveBeenCalledTimes(6);
-  });
-});

package/tests/Popper.test.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import Popper from "../src/components/Popper";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  content: <p>content</p>,
-};
-
-describe("Popper", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Popper {...defaultProps}>
-        <p>Toggle</p>
-      </Popper>
-    );
-    expect(
-      <Popper {...defaultProps}>
-        <p>Toggle</p>
-      </Popper>
-    ).toMatchSnapshot();
-  });
-
-  test("Click test", () => {
-    const handleClick = jest.fn();
-    render(
-      <Popper {...defaultProps} onClose={handleClick}>
-        <p>Toggle</p>
-      </Popper>
-    );
-
-    const divClick = screen.getByTestId("tooltip-div");
-
-    //No Click (no content to be shown)
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-
-    //On Click ( content to be shown)
-    fireEvent.click(divClick);
-    expect(screen.queryByText("content")).toBeInTheDocument();
-    // expect(divClick).toHaveBeenCalledTimes(1);
-
-    const closeButtonClick = screen.getByTestId("tooltip-close-button");
-
-    //On Close Button Click (no content to be shown)
-    fireEvent.click(closeButtonClick);
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-    // expect(closeButtonClick).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/RewardOMeter.test.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import RewardOMeter from "../src/components/RewardOMeter";
-import { render, fireEvent, screen, getByTestId } from "@testing-library/react";
-import { css } from "@emotion/react";
-
-const args = {
-    primaryList: {
-      data: [
-        { color: "#1ECAA233", percentage: 100 / 6 },
-        { color: "#1ECAA2", percentage: 100 / 6 },
-        { color: "#F9C35C", percentage: 100 / 6 },
-        { color: "#FFB100", percentage: 100 / 6 },
-        { color: "#EA6161", percentage: 100 / 6 },
-        { color: "#AD3030", percentage: 100 / 6 },
-      ],
-      width: 12,
-      radius: 85,
-    },
-    needleProperties: {
-      angle: 180 / 3,
-      size: 60,
-    },
-    secondaryList: {
-      data: [
-        { color: "#141B3A", percentage: 100 / 6 },
-        { color: "#062646", percentage: 100 / 6 },
-        { color: "#2F2528", percentage: 100 / 6 },
-        { color: "#302100", percentage: 100 / 6 },
-        { color: "#2C122A", percentage: 100 / 6 },
-        { color: "#210915", percentage: 100 / 6 },
-      ],
-      width: 10,
-      radius: 74,
-    },
-    style: css({
-      backgroundColor: "#181837",
-    }),
-  }
-
-describe("RewardOMeter", () => {
-  it("is rendered correctly", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-    expect(
-      <RewardOMeter {...args} />
-    ).toMatchSnapshot();
-  });
-
-  test("needle test", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-    
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-    expect(screen.getByTestId("icon")).toHaveStyle("font-size: 60px;")
-    expect(screen.getByTestId("icon")).toHaveStyle("transform: rotate(-30deg);")
-  });
-
-  test("color rendered properly", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-
-    expect(screen.getByRole("img")).toBeInTheDocument();
-
-    expect(screen.getByTestId("circle-svg0")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-svg0")).toHaveAttribute("stroke", "#1ECAA233");
-
-    expect(screen.getByTestId("circle-svg1")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-svg1")).toHaveAttribute("stroke", "#1ECAA2");
-  })
-});

package/tests/SearchInput.test.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { SearchInput } from "../src/components";
-import { render, fireEvent, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Search Input test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={() => { }}
-      />
-    );
-    expect(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={() => { }}
-      />
-    ).toMatchSnapshot();
-  });
-
-  test("typing input", () => {
-    const onChangeHandler = jest.fn();
-    render(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={onChangeHandler}
-      />
-    );
-  });
-});

package/tests/Select.test.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import Select from "../src/components/Select";
-import { render, fireEvent, screen } from "@testing-library/react";
-import { css } from "@emotion/react";
-
-const optionsList = [
-  { label: "FIRST", value: "FIRST" },
-  { label: "SECOND", value: "SECOND" },
-  { label: "THIRD", value: "THIRD" },
-  { label: "FOURTH", value: "FOURTH" },
-  { label: "FIFTH", value: "FIFTH" }
-]
-
-describe("Select Test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={[]}
-        style={css({})}
-        selected=""
-        onChange={() => { }}
-      />
-    )
-    expect(<Select
-      placeholder="Select Coin"
-      options={[]}
-      style={css({})}
-      selected=""
-      onChange={() => { }}
-    />).toMatchSnapshot();
-  });
-
-  test("dropdown functionality", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={optionsList}
-        selected=""
-        onChange={() => {}}
-      />
-    );
-
-    fireEvent.click(screen.getByTestId("button"));
-
-    expect(screen.getByText("FIRST")).toBeInTheDocument();
-    expect(screen.getByText("SECOND")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId("button"));
-
-    expect(screen.queryByText("FIRST")).not.toBeInTheDocument();
-    expect(screen.queryByText("SECOND")).not.toBeInTheDocument();
-  });
-
-  test("select functionality", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={optionsList}
-        style={css({})}
-        selected=""
-        onChange={() => { }}
-      />
-    );
-
-    fireEvent.click(screen.getByTestId("button"));
-    fireEvent.click(screen.getByText("FIRST"));
-
-    expect(screen.queryByText("SECOND")).not.toBeInTheDocument();
-    expect(screen.queryByText("Select Coin")).not.toBeInTheDocument();
-    expect(screen.getByText("FIRST")).toBeInTheDocument();
-
-  });
-})

package/tests/SidePanel.test.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import SidePanel from "../src/components/SidePanel";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  title: "Title",
-};
-
-describe("SidePanel", () => {
-  it("is rendered correctly", () => {
-    render(
-      <SidePanel open={true} {...defaultProps}>
-        Toggle
-      </SidePanel>
-    );
-    expect(
-      <SidePanel open={true} {...defaultProps}>
-        Toggle
-      </SidePanel>
-    ).toMatchSnapshot();
-  });
-
-  test("SidePanel Close , with all clicks", () => {
-    render(
-      <SidePanel open={false} {...defaultProps}>
-        <p>Toggle</p>
-      </SidePanel>
-    );
-    expect(screen.queryByTestId("sidepanel-close1")).toBeNull();
-  });
-
-  test("SidePanel Open, back button true", () => {
-    const handleCloseClick = jest.fn();
-    const handleBackClick = jest.fn();
-    render(
-      <SidePanel
-        open={true}
-        {...defaultProps}
-        isBack={true}
-        onClose={handleCloseClick}
-        onBack={handleBackClick}
-      >
-        <p>Toggle</p>
-      </SidePanel>
-    );
-
-    const closedivClick1 = screen.getByTestId("sidepanel-close1");
-    const closeButtonClick = screen.getByTestId("sidepanel-close2");
-    const backClick = screen.getByTestId("sidepanel-back");
-
-    expect(screen.queryByText("Title")).toBeInTheDocument();
-    expect(screen.queryByText("Toggle")).toBeInTheDocument();
-
-    fireEvent.click(closedivClick1);
-    expect(handleCloseClick).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(closeButtonClick);
-    expect(handleCloseClick).toHaveBeenCalledTimes(2);
-
-    fireEvent.click(backClick);
-    expect(handleBackClick).toHaveBeenCalledTimes(1);
-  });
-
-  test("SidePanel Open, back button false", () => {
-    render(
-      <SidePanel open={true} {...defaultProps} isBack={false}>
-        <p>Toggle</p>
-      </SidePanel>
-    );
-    expect(screen.queryByTestId("sidepanel-back")).toBeNull();
-  });
-});

package/tests/Tooltip.test.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import Tooltip from "../src/components/Tooltip";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  content: "content",
-};
-
-describe("Tooltip", () => {
-  //Content shown on hover
-  test("hover test", () => {
-    render(<Tooltip {...defaultProps} />);
-
-    const divClick = screen.getByTestId("tooltip");
-    //No hover (no content to be shown)
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-    fireEvent.mouseOver(divClick);
-
-    //On hover (content to be shown)
-    expect(screen.queryByText("content")).toBeInTheDocument();
-  });
-
-  test("Disabled test", () => {
-    render(<Tooltip {...defaultProps} disabled={true} />);
-
-    const divClick = screen.getByTestId("tooltip");
-    //No hover (no content to be shown)
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-    fireEvent.mouseOver(divClick);
-
-    //On hover (no content to be shown)
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-  });
-});

package/tests/__snapshots__/Accordion.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accordion Test is rendered correctly 1`] = `
-<Accordion
-  isOpen={true}
-  onToggle={[Function]}
-  title="Testing"
->
-  Accordion content
-</Accordion>
-`;

package/tests/__snapshots__/Button.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button Test is rendered correctly 1`] = `
-<Button
-  onClick={[MockFunction]}
-  type="link"
->
-  Click Me!
-</Button>
-`;

package/tests/__snapshots__/PinInput.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PinInput is rendered correctly 1`] = `
-<PinInput
-  label="PinTest"
-  length={6}
-  values={
-    [
-      "1",
-      "1",
-      "1",
-      "1",
-      "1",
-      "1",
-    ]
-  }
-/>
-`;

package/tests/__snapshots__/Popper.test.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popper is rendered correctly 1`] = `
-<Popper
-  content={
-    <p>
-      content
-    </p>
-  }
->
-  <p>
-    Toggle
-  </p>
-</Popper>
-`;

package/tests/__snapshots__/SidePanel.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SidePanel is rendered correctly 1`] = `
-<SidePanel
-  open={true}
-  title="Title"
->
-  Toggle
-</SidePanel>
-`;