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

describe("[Native] AtomSelect", () => {
  it("redered component", () => {
    const body = {
      items: ["1", "2", "3"],
      readOnly: true,
    };
    const component = render(<AtomSelect value={body.items[0]} {...body} />);
    expect(component).toBeTruthy();
  });

  it("redered component disabled", () => {
    const body = {
      items: ["1", "2", "3"],
      disabled: true,
    };
    const component = render(<AtomSelect value={body.items[0]} {...body} />);
    expect(component).toBeTruthy();
  });

  it("clicking select", () => {
    const mockHandler = jest.fn();
    const body = {
      items: ["1", "2", "3"],
      onChange: mockHandler,
    };
    const component = render(<AtomSelect value={body.items[0]} {...body} />);
    const select: any = component.queryByTestId("select");
    fireEvent.press(select);
    const option: any = component.queryByTestId(`select-${body.items[0]}`);
    fireEvent.press(option);
  });

  it("close modal", () => {
    const body = {
      items: ["1", "2", "3"],
    };
    const component = render(<AtomSelect value={body.items[0]} {...body} />);
    const select: any = component.queryByTestId("select");
    fireEvent.press(select);
    const modalTouchable: any = component.queryByTestId("modal-touchable");
    fireEvent.press(modalTouchable);
  });

  it("redered component required", () => {
    const body = {
      items: ["1", "2", "3"],
      required: true,
    };
    const component = render(<AtomSelect value={body.items[0]} {...body} />);
    expect(component).toBeTruthy();
  });
});
