import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import Height from "./Height";

const props = {
  showSlider: true,
  isMax: true,
  showMaxCheck: true,
  maxValue: 100,
  value: 66,
  onChange: () => false,
};

describe("<Height /> Rendering >", () => {
  it(`Should render the component in the dom`, () => {
    // render the component
    render(<Height {...props} />);

    // confirm it's there
    expect(screen.queryByTestId("Properties-Height")).toBeTruthy();
  });
});

describe("<Height /> Actions >", () => {
  it(`Should update the height to the value when the slider has changed`, () => {
    const onChange = jest.fn();

    // render the component
    render(<Height {...props} onChange={onChange} />);

    // trigger the slider change
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));

    // confirm local change return has expected height in its returned value
    expect(onChange.mock.calls[0][0]).toMatchObject({ height: 1 });
  });
});

describe("<Height /> Events >", () => {
  it(`Should trigger the onChange() event when the setting changes`, () => {
    // mock onChange
    const onChange = jest.fn();

    // render component with onChange
    const { debug } = render(<Height {...props} onChange={onChange} />);

    // trigger the slider change
    fireEvent.click(screen.getByTestId("__testSliderValueUpdate"));

    // confirm the onChange method was called
    expect(onChange).toHaveBeenCalled();
  });
});

describe("<Height /> Hooks >", () => {
  test.skip(`Should trigger the _onHeightChange_ plugin hook when the setting changes`, () => {});

  test.skip(`Should trigger the _onHeightRender_ plugin hook when the component is being rendered`, () => {});
});