zebpay-ui 0.0.41 → 0.0.43

package/tests/Button.test.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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