import React from "react";
import { render, cleanup } from "@testing-library/react";

import Provider from "@src/components/Context/Provider";

import Avatar from "../Avatar";

afterEach(cleanup);

const svgUrl = "https://simply-learn.herokuapp.com/assets/undraw_profile.svg";

const component = props => (
  <Provider>
    <Avatar {...props} />
  </Provider>
);

test("Smoke", async () => {
  const { queryAllByTestId } = render(
    component({ url: svgUrl, initials: "AB" }),
  );
  expect(queryAllByTestId("avatar-wrapper").length).toBe(1);
});

test("With Initials and default size", async () => {
  const { queryAllByTestId } = render(component({ initials: "ZA" }));
  expect(queryAllByTestId("avatar-box").length).toBe(1);
  expect(queryAllByTestId("icon").length).toBe(0);
  expect(queryAllByTestId("avatar-text")[0].textContent).toBe("ZA");
  // TODO: https://hello-haptik.atlassian.net/browse/AGCT-1468
  // Add test for testing size
});

test("broken url", async () => {
  const { queryAllByTestId } = render(
    component({ url: "https://herokuapp.com/undraw.svg", initials: "CD" }),
  );
  expect(queryAllByTestId("avatar-box").length).toBe(1);
  expect(queryAllByTestId("icon").length).toBe(0);
});
