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

import localImage from "assets/images/gift.png";

describe("ImageAtom", () => {
  it("Render image if send src", async () => {
    const element = render(
      <AtomImage
        alt={"img"}
        src={"https://via.placeholder.com/350" as string}
      />
    );

    const displayedImage = await element.findByTestId("img-test-id");
    expect(displayedImage.props.source.uri).toBe(
      "https://via.placeholder.com/350"
    );
  });

  it("Render image if do not send src", () => {
    const element = render(
      <AtomImage src={"" as string} imgWidth={"56px"} imgHeight={"56px"} />
    );
    const displayedImage = element.getByTestId("img-test-id");
    const testUri = displayedImage.props.source.uri;
    expect(testUri).toContain("/default.png");
  });

  it("Render local image", () => {
    const element = render(
      <AtomImage src={localImage} imgWidth={"56px"} imgHeight={"56px"} />
    );

    const displayedImage = element.getByTestId("img-test-id");

    const testUri = displayedImage.props.source.uri;

    expect(testUri).toContain("/gift.png");
  });

  it("Render image with width", () => {
    const element = render(
      <AtomImage
        src={"https://via.placeholder.com/350" as string}
        imgWidth={"56px"}
        imgHeight={"56px"}
      />
    );

    const displayedImage = element.getByTestId("img-test-id");
    expect(displayedImage).toHaveStyleRule("width", 56);
  });

  it("Render image with height", () => {
    const element = render(
      <AtomImage
        src={"https://via.placeholder.com/350" as string}
        imgWidth={"56px"}
        imgHeight={"56px"}
      />
    );

    const displayedImage = element.getByTestId("img-test-id");
    expect(displayedImage).toHaveStyleRule("height", 56);
  });
});
