import React from "react";
import "jest-styled-components/native";
import { AtomTruncate } from "./index";
import { ITypographyProps } from "../TypographyProps";
import { render } from "@testing-library/react-native";

describe("[Native] AtomTruncate", () => {
  it("render component", () => {
    const body = {
      text: "Component truncate",
    };
    const component = render(<AtomTruncate {...body} size="large" />);
    component.getByText(body.text);
    expect(component).toBeTruthy();
  });
  it("Render component color", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      color: "neutral700",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].color).toEqual("#132730");
  });

  it("Render component weight light", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "light",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Light");
  });

  it("Render component weight medium", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "medium",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Medium");
  });

  it("Render component weight thin", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "thin",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });

  it("Render component weight extralight", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "extralight",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-ExtraLight");
  });

  it("Render component weight regular", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "regular",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Regular");
  });

  it("Render component weight semibold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "semibold",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-SemiBold");
  });

  it("Render component weight bold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "bold",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Bold");
  });

  it("Render component weight extrabold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "extrabold",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-ExtraBold");
  });

  it("Render component weight black", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "black",
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Black");
  });
  it("Render component color neutral700 ignoring style color red", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      color: "neutral700",
      styles: { color: "red" },
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component style textDecorationLine underline", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      styles: { textDecorationLine: "underline" },
    };
    const component = render(<AtomTruncate {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textDecorationLine).toEqual("underline");
  });
});
