import React from "react";
import { render } from "@testing-library/react-native";
import { MoleculeImageWithText } from "./index";
import "jest-styled-components/native";
import { AtomCaption } from "native/atoms/Typography/Caption/index";

describe("[Native] MoleculeImageWithText", () => {
  it("Render Image With Text component", () => {
    const component = render(
      <MoleculeImageWithText
        imgSrc="https://via.placeholder.com/150"
        imgAlt="imgAlt"
        imgHeight={"150px"}
        imgWidth={"150px"}
        containerHeight={"150px"}
        containerWidth={"150px"}
      >
        <AtomCaption
          size="xlarge"
          align="center"
          text="Some Text"
          color="neutral700"
          weight="bold"
        />
      </MoleculeImageWithText>
    );

    const displayedText = component.getByText("Some Text");
    const displayedImage = component.getByTestId("img-test-id");
    expect(displayedText).toBeTruthy();
    expect(displayedImage.props.source.uri).toBe(
      "https://via.placeholder.com/150"
    );
  });

  it("Render Image With Text with text over", () => {
    const component = render(
      <MoleculeImageWithText
        imgSrc="https://via.placeholder.com/150"
        imgAlt="imgAlt"
        isTextOver={true}
        containerHeight={""}
        containerWidth={""}
      >
        <AtomCaption
          size="xlarge"
          align="center"
          text="Some Text"
          color="neutral700"
          weight="bold"
        />
      </MoleculeImageWithText>
    );

    const textContainer = component.getByTestId("text-container");
    expect(textContainer).toHaveStyleRule("position", "absolute");
  });

  it("Render Image With Text text over and margin bottom", () => {
    const component = render(
      <MoleculeImageWithText
        imgSrc="https://via.placeholder.com/150"
        imgAlt="imgAlt"
        isTextOver={true}
        bottomMargin={"10px"}
      >
        <AtomCaption
          size="xlarge"
          align="center"
          text="Some Text"
          color="neutral700"
          weight="bold"
        />
      </MoleculeImageWithText>
    );

    const textContainer = component.getByTestId("text-container");
    expect(textContainer).toHaveStyleRule("bottom", 10);
  });
});
